编写高质量的JS
myglobal = "hello"; // 不推荐写法 console.log(myglobal); // "hello" console.log(window.myglobal); // "hello" console.log(window["myglobal"]); // "hello" console.log(this.myglobal); // "hello"
全局变量的问题
- 第三方的JavaScript库
- 广告方的脚本代码
- 第三方用户跟踪和分析脚本代码
- 不同类型的小组件，标志和按钮
减少全局变量的策略，例如命名空间模式或是函数立即自动执行，注意使用var来声明变量。
// 反例，勿使用 function foo() { var a = b = 0; // a局部变量，b全局变量 //等同var a = (b = 0); } //如果你已经准备好声明变量，使用链分配是比较好的做法，如： function foo() { var a, b; // ... a = b = 0; // 两个均局部变量 }
- 通过var创建的全局变量（任何函数之外的程序中创建）是不能被删除的。
- 无var创建的隐式全局变量（无视是否在函数中创建）是能被删除的。
// 定义三个全局变量 var global_var = 1; global_novar = 2; // 反面教材 (function () { global_fromfunc = 3; // 反面教材 }()); // 试图删除 delete global_var; // false delete global_novar; // true delete global_fromfunc; // true // 测试该删除 typeof global_var; // "number" typeof global_novar; // "undefined" typeof global_fromfunc; // "undefined"
在ES5严格模式下，未声明的变量（如在前面的代码片段中的两个反面教材）工作时会抛出一个错误。
访问全局对象
var global = (function () { return this; }());
这种方法可以随时获得全局对象，因为其在函数中被当做函数调用了（不是通过new构造），this总 是指向全局对象。实际上这个病不适用于ECMAScript 5(不懂)严格模式，所以，在严格模式下时，你必须采取不同的形式。例如，你正在开发一个JavaScript库，你可以将你的代码包裹在一个即时函数中，然后从 全局作用域中，传递一个引用指向this作为你即时函数的参数。
单var形式
- 提供了一个单一的地方去寻找功能所需要的所有局部变量
- 防止变量在定义之前使用的逻辑错误
- 减少全局变量的使用
- 少代码（类型啊传值啊单线完成）
function func() { var a = 1, b = 2, sum = a + b, myobject = {}, i, j; // function body... }
预解析：var散布的问题
JavaScript中，你可以在函数的任何位置声明多个var语句，并且它们就好像是在函数顶部声明一样发挥作用，这种行为称为 hoisting（悬置/置顶解析/预解析）。当你使用了一个变量，然后不久在函数中又重新声明的话，就可能产生逻辑错误。对于JavaScript，只 要你的变量是在同一个作用域中（同一函数），它都被当做是声明的，即使是它在var声明前使用的时候。看下面这个例子：
// 反例 myname = "global"; // 全局变量 function func() { alert(myname); // "undefined" var myname = "local"; alert(myname); // "local" } func();
第一个alert会弹 出”undefined”是因为myname被当做了函数的局部变量（尽管是之后声明的），所有的变量声明当被悬置到函数的顶部了。因此，为了避免这种混 乱，最好是预先声明你想使用的全部变量。
上面的代码片段执行的行为可能就像下面这样：
myname = "global"; // global variable function func() { var myname; // 等同于 -> var myname = undefined; alert(myname); // "undefined" myname = "local"; alert(myname); // "local"} func();
for循环 length
// 次佳的循环 for (var i = 0; i < myarray.length; i++) { // 使用myarray[i]做点什么 }
尤其当myarray不是数组，而是一个HTMLCollection对象的时候。
HTMLCollections指的是DOM方法返回的对象，例如：
document.getElementsByName() document.getElementsByClassName() document.getElementsByTagName() //这些是在DOM标准之前引进并且现在还在使用的 document.images: 页面上所有的图片元素 document.links : 所有a标签元素 document.forms : 所有表单 document.forms[0].elements : 页面上第一个表单中的所有域
集合的麻烦在于它们实时查询基本文档（HTML页面）。这意味着每次你访问任何集合的长度，你要实时查询DOM，而DOM操作一般都是比较昂贵的。
缓存数组(或集合)的长度：
for (var i = 0, max = myarray.length; i < max; i++) { // 使用myarray[i]做点什么 }
function looper() { var i = 0, max, myarray = []; // ... for (i = 0, max = myarray.length; i < max; i++) { // 使用myarray[i]做点什么 } }
使用下面表达式之一来替换i++
i = i + 1
i += 1
for-in循环
最好数组使用正常的for循环，对象使用for-in循环
// 对象 var man = { hands: 2, legs: 2, heads: 1 }; // 在代码的某个地方 // 一个方法添加给了所有对象 if (typeof Object.prototype.clone === "undefined") { Object.prototype.clone = function () {}; }
在这个例子中，我们有一个使用对象字面量定义的名叫man的对象。在man定义完成后的某个地方，在对象原型上增加了一个很有用的名叫 clone()的方法。此原型链是实时的，这就意味着所有的对象自动可以访问新的方法。为了避免枚举man的时候出现clone()方法，你需要应用hasOwnProperty()方法过滤原型属性。如果不做过滤，会导致clone()函数显示出来，在大多数情况下这是不希望出现的。
// 1.for-in 循环 for (var i in man) { if (man.hasOwnProperty(i)) { // 过滤 console.log(i, ":", man[i]); } } /* 控制台显示结果 hands : 2 legs : 2 heads : 1 */ // 2. 反面例子: for-in loop without checking hasOwnProperty() for (var i in man) { console.log(i, ":", man[i]); } /* 控制台显示结果 hands : 2 legs : 2 heads : 1 clone: function() */
另外一种使用hasOwnProperty()的形式是取消Object.prototype上的方法。像是：
for (var i in man) { if (Object.prototype.hasOwnProperty.call(man, i)) { // 过滤 console.log(i, ":", man[i]); } }
其好处在于在man对象重新定义hasOwnProperty情况下避免命名冲突。也避免了长属性查找对象的所有方法，你可以使用局部变量“缓存”它。
var i, hasOwn = Object.prototype.hasOwnProperty; for (i in man) { if (hasOwn.call(man, i)) { // 过滤 console.log(i, ":", man[i]); } }
避免隐式类型转换
===和!==操作符
var zero = 0; if (zero === false) { // 不执行，因为zero为0, 而不是false } // 反面示例 if (zero == false) { // 执行了... }
避免 eval()
此方法接受任意的字符串，并当作JavaScript代码来处理
// 反面示例 var property = "name"; alert(eval("obj." + property)); // 更好的 var property = "name"; alert(obj[property]);
eval()也带来了安全隐患，解析JSON使用JSON.parse()，若浏览器不支持，你可 以使用来自JSON.org的库。
同样重要的是要记住，给setInterval(), setTimeout()和Function()构造函数传递字符串，大部分情况下，与使用eval()是类似的，因此要避免。在幕后，JavaScript仍需要评估和执行你给程序传递的字符串：
// 反面示例 setTimeout("myFunc()", 1000); setTimeout("myFunc(1, 2, 3)", 1000); // 更好的 setTimeout(myFunc, 1000); setTimeout(function () { myFunc(1, 2, 3); }, 1000);
使用新的Function()构造就类似于eval()，应小心接近。这可能是一个强大的构造，但往往被误用。如果你绝对必须使用eval()，你 可以考虑使用new Function()代替。有一个小的潜在好处，因为在新Function()中作代码评估是在局部函数作用域中运行，所以代码中任何被评估的通过var 定义的变量都不会自动变成全局变量。另一种方法来阻止自动全局变量是封装eval()调用到一个即时函数中。
考虑下面这个例子，这里仅un作为全局变量污染了命名空间。
console.log(typeof un); // "undefined" console.log(typeof deux); // "undefined" console.log(typeof trois); // "undefined" var jsstring = "var un = 1; console.log(un);"; eval(jsstring); // logs "1" jsstring = "var deux = 2; console.log(deux);"; new Function(jsstring)(); // logs "2" jsstring = "var trois = 3; console.log(trois);"; (function () { eval(jsstring); }()); // logs "3" console.log(typeof un); // number console.log(typeof deux); // "undefined" console.log(typeof trois); // "undefined"
eval()和Function构造不同的是eval()可以干扰作用域链，而Function()更安分守己些。不管你在哪里执行 Function()，它只看到全局作用域。所以其能很好的避免本地变量污染。在下面这个例子中，eval()可以访问和修改它外部作用域中的变量，这是 Function做不来的（注意到使用Function和new Function是相同的）。
(function () { var local = 1; eval("local = 3; console.log(local)"); // logs "3" console.log(local); // logs "3" }()); (function () { var local = 1; Function("console.log(typeof local);")(); // logs undefined }());
parseInt()
var month = "06", year = "09"; month = parseInt(month, 10); year = parseInt(year, 10); +"08" // 结果是 8 Number("08") // 8
Number()通常快于parseInt()，因为parseInt()方法不是简单地解析与转换。如果你输入“08 hello”，parseInt()将返回数字，而其它以NaN告终。
编码规范
1.缩进 2.花括号{}:最好总是使用花括号，即时只一行代码 3.空格 4.分隔单词 5.注释
// 警告： 意外的返回值。返回undefined function func() { return // 下面代码不执行 { name : "Batman" } } // 警告： 意外的返回值 function func() { return undefined; // 下面代码不执行 { name : "Batman" } } //推荐 function func() { return { name : "Batman" }; }
