JavaScript 编写规范

摘要：如果你想了解更多关于强制类型转换的信息，你可以读一读的这篇文章。在只使用的情况下，所带来的强制类型转换使得判断结果跟踪变得复杂，下面的例子可以看出这样的结果有多怪了明智地使用真假判断当我们在一个条件语句中使用变量或表达式时，会做真假判断。

如果本文档中有任何错误的、不符合行规的，敬请斧正。

  
不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

若您对本文档中任何内容有不明白的，或者感觉不合行规的，请您按以下格式向我邮件说明，同时也欢迎任何人参与讨论，共同完善本文档。本文档中很多也是根据我自己现在的公司需求来定的。

  
邮件不是QQ，请尽可能清晰的组织你的语言，将问题描述得更清楚，同时，不要使用过多的样式化，合乎文档排版标准，谢谢。

总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression)，用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。

IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改（i.e. 第三方库，window 引用，被覆盖的未定义的关键字等等）。

不推荐

javascriptvar x = 10,
    y = 100;

console.log(window.x + " " + window.y);

javascript(function(log, w, undefined){
  "use strict";

  var x = 10,
      y = 100;

  // 将输出 "true true"
  log((w.x === undefined) + " " + (w.y === undefined));

}(window.console.log, window));

(function(){})();

(function(){}());

javascript(function(){
  "use strict";

  // 你的代码写在这里

}());

javascript(function($, w, d){
  "use strict";

  $(function() {
    w.alert(d.querySelectorAll("div").length);
  });
}(jQuery, window, document));

javascript// 代码从这里开始
"use strict";

(function(){

  // 你在代码写在这里

}());

javascript(function(){
  "use strict";

  // 你在代码写在这里

}());

x = 10;
y = 100;

var x = 10,
    y = 100;

javascript(function(log){
  "use strict";

  var a = 10;

  for(var i = 0; i < a; i++) {
    var b = i * i;
    log(b);
  }

  if(a === 10) {
    var f = function() {
      log(a);
    };
    f();
  }

  function x() {
    log("Mr. X!");
  }
  x();

}(window.console.log));

javascript(function(log){
  "use strict";
  // 在封闭环境中使用的所有变量将被提升到函数的顶部
  var a,
      i,
      b,
      f;
  // 所有的函数也将被提升到函数顶部
  function x() {
    log("Mr. X!");
  }

  a = 10;

  for(i = 0; i < a; i++) {
    b = i * i;
    log(b);
  }

  if(a === 10) {
    // 功能分配只会导致悬挂变量，但在函数体不会被悬挂
    // 只有用真正的函数声明的整体功能才能悬挂
    f = function() {
      log(a);
    };
    f();
  }

  x();

}(window.console.log));

javascript(function(log){
  "use strict";

  var a = 10;

  i = 5;

  x();

  for(var i; i < a; i++) {
    log(b);
    var b = i * i;
  }

  if(a === 10) {
    f = function() {
      log(a);
    };
    f();

    var f;
  }

  function x() {
    log("Mr. X!");
  }

}(window.console.log));

**推荐**

```javascript
(function(log){
  "use strict";

  var a = 10,
      b = 10,
      i,
      c,
      d,
      x;

  function f() {

  }

  for(i = 0; i < 10; i++) {
    c = a * b * i;
  }



  d = 100;
  x = function() {
    return d * d;
  };
  log(x());

}(window.console.log));

javascriptvar a,
    b,
    c;

a = 10;
b = 10;
c = 100;

javascriptvar a = 10,
    b = 10,
    c = 100;

javascript(function(log){
  "use strict";

  log("0" == 0); // true
  log("" == false); // true
  log("1" == true); // true
  log(null == undefined); // true

  var x = {
    valueOf: function() {
      return "X";
    }
  };

  log(x == "X");

}(window.console.log));

javascript(function(log){
  "use strict";

  function logTruthyFalsy(expr) {
    if(expr) {
      log("truthy");
    } else {
      log("falsy");
    }
  }

  logTruthyFalsy(true); // truthy
  logTruthyFalsy(1); // truthy
  logTruthyFalsy({}); // truthy
  logTruthyFalsy([]); // truthy
  logTruthyFalsy("0"); // truthy

  logTruthyFalsy(false); // falsy
  logTruthyFalsy(0); // falsy
  logTruthyFalsy(undefined); // falsy
  logTruthyFalsy(null); // falsy
  logTruthyFalsy(NaN); // falsy
  logTruthyFalsy(""); // falsy

}(window.console.log));

javascriptif(!x) {
  if(!y) {
    x = 1;
  } else {
    x = y;
  }
}

x = x || y || 1;

javascript(function(log){
  "use strict";

  function multiply(a, b) {
    a = a || 1;
    b = b || 1;

    log("结果 " + a * b);
  }

  multiply(); // 结果 1
  multiply(10); // 结果 10
  multiply(3, NaN); // 结果 3
  multiply(9, 5); // 结果 45

}(window.console.log));

javascript// 1.
MyClass.prototype.myMethod = function() {
  return 42;
}  // 这里没有分号

(function() {
  // 包裹在一个函数的一些初始化代码，用来创建当本地变量。
})();


var x = {
  "i": 1,
  "j": 2
}  // 这里也没有分号

// 2.  尝试在 IE 或者 Firefox 浏览器上运行

[ffVersion, ieVersion][isIE]();


var THINGS_TO_EAT = [apples, oysters, sprayOnCheese]  // 这里也没有分号

// 3. 
-1 == resultOfOperation() || die();

javascriptvar foo = function() {
  return true;
};  // 这里需要分号

function foo() {
  return true;
}  // 这里需要分号

javascriptif (x) {
  function foo() {}
}

javascriptif (x) {
  var foo = function() {};
}

javascriptif(name === undefined) {
  throw {
    name: "系统错误",
    message: "任何时候都应该定义一个 name！"
  }
}

javascript(function(log){
  "use strict";

  // 构建函数
  function Apple(name) {
    this.name = name;
  }
  // 定义一个 apple 的方法
  Apple.prototype.eat = function() {
    log("吃 " + this.name);
  };

  // 构建函数
  function GrannySmithApple() {
    // 执行父级构建函数
    Apple.prototype.constructor.call(this, "Foobar");
  }
  // 当复制时，设置父级 prototype Object.create
  FoobarApple.prototype = Object.create(Apple.prototype);
  // 设置构建函数为子类型
  FoobarApple.prototype.constructor = FoobarApple;

  // 呼叫顶级方法
  FoobarApple.prototype.eat = function() {
    // 确定您已经通过 call(this) 将它应用到了正确的对象中
    Apple.prototype.eat.call(this);

    log("可怜的 Foobar");
  };

  // 实例
  var apple = new Apple("测试苹果");
  var foobarApple = new FoobarApple();

  log(apple.name); // 测试苹果
  log(foobarApple.name); // Foobar

  // 实例检测
  log(apple instanceof Apple); // true
  log(apple instanceof FoobarApple); // false

  log(foobarApple instanceof Apple); // true
  log(foobarApple instanceof FoobarApple); // true

  // 执行呼叫了顶级方法的方法
  foobarApple.eat();

}(window.console.log));

javascript(function(log, w){
  "use strict";

  // 在本闭包中，numbers 与 i 被定义
  var numbers = [1, 2, 3],
      i;

  for(i = 0; i < numbers.length; i++) {
    w.setTimeout(function() {
      // 本断代码最终将弹出三次对话框，而内容均是：
      // 第 3 个数字为 undefined
      // 这是因为，i 在循环之前被定义，而 for 循环之后，将 i 的值变为 3
      // 接着， alert 执行，此时， alert 中的 i 将只为 3，
      // 同时，numbers[3] 为 undefined
      w.alert("第 " + i + " 个数字为 " + numbers[i]);
    }, 0);
  }

}(window.console.log, window));

javascript(function(log, w){
  "use strict";

  // 在本闭包中，numbers 与 i 被定义
  var numbers = [1, 2, 3],
      i;

  for(i = 0; i < numbers.length; i++) {
    // 创建一个新的闭包函数
    (function(index, number){
      w.setTimeout(function() {
        // Will output as expected 0 > 1, 1 > 2, 2 > 3
        w.alert("Index " + index + " with number " + number);
      }, 0);
    }(i, numbers[i]));
  }

}(window.console.log, window));

javascript(function(log, w){
  "use strict";

  // 在本闭包中，numbers 与 i 被定义
  var numbers = [1, 2, 3],
      i;

  // 在 for 循环外面创建一个函数
  function alertIndexWithNumber(index, number) {
    return function() {
      w.alert("Index " + index + " with number " + number);
    };
  }

  // 
  for(i = 0; i < numbers.length; i++) {
    w.setTimeout(alertIndexWithNumber(i, numbers[i]), 0);
  }

}(window.console.log, window));

javascript(function(log, w){
  "use strict";

  // 在本闭包中，numbers 与 i 被定义
  var numbers = [1, 2, 3],
      i;

  numbers.forEach(function(number, index) {
    w.setTimeout(function() {
      w.alert("Index " + index + " with number " + number);
    }, 0);
  });

}(window.console.log, window));

  
例外：往往在重代码性能轻代码维护的情况之下，要选择最优性能的解决方案而非维护性高的方案（比如用简单的循环语句代替 forEach）。

javascript(function(log){
  "use strict";

  var arr = [10, 3, 7, 9, 100, 20],
      sum = 0,
      i;


  for(i = 0; i < arr.length; i++) {
    sum += arr[i];
  }

  log("数组 " + arr + " 的和为：" + sum)

}(window.console.log));

javascript(function(log){
  "use strict";

  var arr = [10, 3, 7, 9, 100, 20];

  var sum = arr.reduce(function(prevValue, currentValue) {
    return prevValue + currentValue;
  }, 0);

  log("数组 " + arr + " 的和为：" + sum)

}(window.console.log));

javascript(function(log){
  "use strict";

  var numbers = [11, 3, 7, 9, 100, 20, 14, 10],
      numbersGreaterTen = [],
      i;


  for(i = 0; i < numbers.length; i++) {
    if(numbers[i] > 10) {
      numbersGreaterTen.push(numbers[i]);
    }
  }

  log("列表 numbers " + numbers + " 中只有 " + numbersGreaterTen + " 个数字大于 10");

}(window.console.log));

javascript(function(log){
  "use strict";

  var numbers = [11, 3, 7, 9, 100, 20, 14, 10];

  var numbersGreaterTen = numbers.filter(function(element) {
    return element > 10;
  });

  log("列表 numbers " + numbers + " 中只有 " + numbersGreaterTen + " 个数字大于 10");

}(window.console.log));

javascript(function(log){
  "use strict";

  // 遍历一个数据，然后在某个条件达到时，终止遍历
  [1, 2, 3, 4, 5].every(function(element, index, arr) {
    log(element + " at index " + index + " in array " + arr);

    if(index !== 5) {
      return true;
    }
  });

  // 定义一个简单的 JavaScript 对象
  var obj = {
    a: "A",
    b: "B",
    "c-d-e": "CDE"
  };

  // 遍历对象的键
  Object.keys(obj).forEach(function(element, index, arr) {
    log("键 " + element + " 的值为 " + obj[element]);
  });

}(window.console.log));

javascript// 长度为 3.
var a1 = new Array(x1, x2, x3);

// 长度为2
var a2 = new Array(x1, x2);

// 如果 x1 是一个数字，并且他还是一个自然数，那么长度将为 x1
// 如果 x1 是一个数字，但是它不是一个自然数，那么将报出一个异常
// 其它的情况下数组将包含一个只有 x1 一个元素的数组
var a3 = new Array(x1);

// 长度为0 0.
var a4 = new Array();

javascriptvar a = [x1, x2, x3];
var a2 = [x1, x2];
var a3 = [x1];
var a4 = [];

javascriptvar o = new Object();

var o2 = new Object();
o2.a = 0;
o2.b = 1;
o2.c = 2;
o2["strange key"] = 3;

javascriptvar o = {};

var o2 = {
  a: 0,
  b: 1,
  c: 2,
  "strange key": 3
};

var msg = "这是一段HTML 
";

javascriptif(x === 10) {
  return "valid";
} else {
  return "invalid";
}

return x === 10 ? "valid" : "invalid";