书写高质量JavaScript代码的要点（The Essentials of Writing High Quality JavaScript）翻译

前言：

 

  1、文章尾部带有原文的链接和来自zhangxinxu的翻译文章。

  2、本文只是节选了部分更直接性的言论，去除了一些“无关的”言论。

  3、只是个人学习+练习英语的topic

  4、为了方便大家学习，加上了尾部部分单词的意思

 

 

正文：

 

 

• 书写可维护的代码 (Writing Maintainable Code)

         可维护的代码意味着如下：

 

             1、可读的

             2、一致的

             3、可预见的

             4、看起来出自同一个之手写的

             5、有记录的            

 

 

• 最小化全局变量（Minimizing Globals）

    JavaScript用函数来管理作用域。在函数内部声明的变量只在函数内部，函数外部不可用。在另一方面，全局变量是在任何函数外部声明或没有声明直接使用。

    当你在任意函数的外部使用this的时候，你可以访问到每一个JavaScript环境的全局对象。每一个你创建的全局变量都会变成全局对象的一个属性。在浏览器中，为了方便，全局对象有一个附加的属性被称为window，它指向全局对象本身。

    下面的代码片段展示了在浏览器环境中如何创建和访问全局对象。

myglobal = "hello";   //不推荐的方式
console.log(myglobal );  //"hello"
console.log(window.myglobal ); //"hello"
console.log(window["myglobal"] ); //"hello"
console.log(this.myglobal); //"hello"

 

 

• 全局变量的问题（The Problem with Globals）

     全局变量的问题在于，你的JavaScript应用程序或者web页面上所有的代码都能共享它们。它们存在于同一个全局的命名空间中，很容易出现命名冲突---当两个不同部分的应用程序定义的同名但是不同作用的全局变量。

同样，在web页面很常见的引入的代码二不是这个页面开发者写的，比如：

            1、第3方的JavaScript的脚本库

            2、来自广告方的脚本

            3、一个第3方用户追踪和分析的脚本代码

            4、各种组件，标志和按钮

 

 

function sum(x,y){
   //不推荐的写法：隐式的全局变量
   result = x +y;
   return result;
}

 

   这段代码中，result在使用的过程中没有被声明，代码正常工作，但是在函数调用之后在全局空间就多了一个变量result，这恰恰是问题的根源。

 

经验往往告诉我们始终使用var来声明变量，正如改进版的sum()函数展示的：

 

 

function sum(x,y){
   var result = x+y;
   return result;
}

 

 

• 构造函数首字母大写（Capitalizing Constructors）

    JavaScript没有类但是有new调用的构造函数

var adam = new Person();

 

    因为构造函数还也只是函数，仅仅看函数名可以帮助告诉你这个是不是一个构造函数还是一个正常的函数。  

 

    以首字母大写来命名构造函数具有暗示作用。使用小写命名的函数和方法意味着不应该使用new调用。

 

 

function MyConstructor(){...}

function myFunction(){...}

 

 

• switch 形式（switch Pattern）

    你可以通过类似于下面的模式的switch语句增强可读性和健壮性。 

 

 

var inspect_me = 0,
      result = '';
switch(inspect_me ){
case 0:
      result ='zero';
      break;
case 1:
      result ='one';
      break;
default:
      result = 'unknow';
}

 

这个简单的例子遵循的风格如下：

 

   1、每一个case与switch对齐（花括号缩进规则除外）

   2、每一个case中代码缩进

   3、每一个case以break结束

   4、避免贯穿（当你故意忽略break）。如果你确信贯穿是最好的办法， 确信记录这些情况，因为对于你代码的一些阅读         者来说，它可能看起来是错误的。

   5、以default结束switch：确保总有健全的结果，技术无情况匹配的时候。

 

 

 

 

• 避免隐式类型转换（Avoiding Implied Typecasting）

var zero = 0;
if(zero === false){
    //没有执行，因为zero是0不是false
}

if(zero == false){
   //执行了
}

  

     还有一种观点认为 == 就够了 ====是多余的。比如，当你用typeof的时候，你知道它返回一个字符串，所以没有使用严格相等的理由。但是,JSLint 要求严格相等，这样使代码看起来一致性而且降低阅读代码的成本（‘==’是故意的还是一个疏漏？）

• parseInt()下的数值转换（Number Conversions with parseInt()）

     用parseInt()你可以将字符串转换为数值。这个方法接受另一个基数参数，它经常被省略但这不应该。当字符串以“0”开头的时候，就会有问题。比如，部分时间进入表单域，在ECMAScript3，以“0”开头的字符串内当做8进制处理，但在ECMAScript5中改变了。为了避免矛盾和以外的结果，总是指定基数参数。

 

var month = "06",
      year    = "09";
month = parseInt(month,10); //6
year = parseInt(year,10);    //9

 

 

 

 

+ "08";  //8
Number("08");  //8  typeof ==  number

 

     这些通常快于parseInt()，因为parseInt()方法，顾名思义，解析转换不是那么简单的。但是如果你想输入“08 hello”这样的，parseInt()将会返回一个数字，而其他返回NaN.

 

 

parseInt("08 hello");  //0
+"08 hello";  //NaN
Number("08 hello");  /NaN

 

 

 

部分原文的单词翻译：

 

1、maintainable -------可维持的，主张的

2、consistent     -------一致的

3、predictable    ------可预见的

4、snippet          -----片段

5、convenience  -----方便

6、variable         -----可变化的，变量

7、declare          -----声明，宣布

8、invoke           -----调用

9、hint               -----暗示

10、indicate      -----意味着

11、robustness ----健壮性

12、sane           ----健全的

13、approach    ----方法

14、indent         ----缩进

15、robust         ----健全的

16、imply           ----暗指

17、conversion  ----转换

 

扩展阅读：

 

1、http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/

 

2、http://www.zhangxinxu.com/wordpress/?p=1173