深入理解JavaScript系列 ----（1）：编写高质量JavaScript代码的基本要点

编写JS代码的时候，应该注意，要尽量少全局变量：

web页面包含不是该页面开发者所写的代码也是比较常见的，例如：

• 第三方的JavaScript库
• 广告方的脚本代码
• 第三方用户跟踪和分析脚本代码
• 不同类型的小组件，标志和按钮

比方说，该第三方脚本定义了一个全局变量，叫做result；接着，在你的函数中也定义一个名为result的全局变量。其结果就是后面的变量覆盖前面的，第三方脚本就一下子嗝屁啦！

隐式的全局变量：

在函数中定义：var a = b = 0;  //a是函数的局部变量，但是b是全局变量

var a,b; a = b = 0; //这样a和b就都是局部变量  链分配

隐式全局变量和明确定义的全局变量间有些小的差异，就是通过delete操作符让变量未定义的能力。

• 通过var创建的全局变量（任何函数之外的程序中创建）是不能被删除的。
• 无var创建的隐式全局变量（无视是否在函数中创建）是能被删除的。

这表明，在技术上，隐式全局变量并不是真正的全局变量，但它们是全局对象的属性。属性是可以通过delete操作符删除的，而变量是不能的：

// 定义三个全局变量
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"

String在动态绘制的时候，在拼接字符串的时候

不要去使用str = +=之类的方式去拼接

这样在字符串较大的时候，会出现问题

比较适合定义一个数组，然后使用join和push方法

在函数顶部初始化变量使用单var语句是有好处的：

• 提供了一个单一的地方去寻找功能所需要的所有局部变量
• 防止变量在定义之前使用的逻辑错误
• 帮助你记住声明的全局变量，因此较少了全局变量//zxx:此处我自己是有点晕乎的…
• 少代码（类型啊传值啊单线完成）

exp:

function func() {
   var a = 1,
       b = 2,
       sum = a + b,
       myobject = {},
       i,
       j;
   // function body...
}

demo:

// 反例
myname = "global"; // 全局变量
function func() {
    alert(myname); // "undefined"
    var myname = "local";
    alert(myname); // "local"
}
func();

for循环：

for (var i = 0; i < max.length; i++) {

}

这样编写for循环，每次都回去读取max的length

我们可以将max.length做一个js变量缓存，这样效率会有提高：

for (var i = 0, max = myarray.length; i < max; i++) {
    // 使用myarray[i]做点什么
}

这对于变量可能没有多大影响，但如果循环的对象是dom对象

document.images: 页面上所有的图片元素
document.links : 所有a标签元素
document.forms : 所有表单
document.forms[0].elements : 页面上第一个表单中的所有域

那这个效率就会有一个很大的提升

for循环两种变种形式写法：

• 少了一个变量(无max)
• 向下数到0，通常更快，因为和0做比较要比和数组长度或是其他不是0的东西作比较更有效率

//第一种变化的形式：
var i, myarray = [];
for (i = myarray.length; i–-;) {
   // 使用myarray[i]做点什么
}

//第二种使用while循环：
var myarray = [],
    i = myarray.length;
while (i–-) {
   // 使用myarray[i]做点什么
}

for-in循环应该用在非数组对象的遍历上，使用for-in进行循环也被称为“枚举”。

从技术上将，你可以使用for-in循环数组（因为JavaScript中数组也是对象），但这是不推荐的。因为如果数组对象已被自定义的功能增强，就可能发生逻辑错误。另外，在for-in中，属性列表的顺序（序列）是不能保证的。所以最好数组使用正常的for循环，对象使用for-in循环。

有个很重要的hasOwnProperty()方法，当遍历对象属性的时候可以过滤掉从原型链上下来的属性。

数组对象会有额外的添加元素。

exp:

// 对象
var man = {
   hands: 2,
   legs: 2,
   heads: 1
};

// 在代码的某个地方
// 一个方法添加给了所有对象
if (typeof Object.prototype.clone === "undefined") {
   Object.prototype.clone = function () {};
}

这个例子中，我们在对象的原型属性链上添加了额外的属性clone(fun)

// 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()并不是一个错误。根据任务以及你对代码的自信程度，你可以跳过它以提高些许的循环速度。但是当你对当前对象内容（和其原型链）不确定的时候，添加hasOwnProperty()更加保险些。

JavaScript的变量在比较的时候会隐式类型转换。这就是为什么一些诸如：false == 0 或 “” == 0 返回的结果是true。为避免引起混乱的隐含类型转换，在你比较值和表达式类型的时候始终使用===和!==操作符。

尽量避免使用eval（）函数：

使用eval()也带来了安全隐患，因为被执行的代码（例如从网络来）可能已被篡改。这是个很常见的反面教材，当处理Ajax请求得到的JSON 相应的时候。在这些情况下，最好使用JavaScript内置方法来解析JSON相应，以确保安全和有效。若浏览器不支持JSON.parse()，你可 以使用来自JSON.org的库。

使用新的Function()构造就类似于eval()，应小心接近。这可能是一个强大的构造，但往往被误用。如果你绝对必须使用eval()，你 可以考虑使用new Function()代替。有一个小的潜在好处，因为在新Function()中作代码评估是在局部函数作用域中运行，所以代码中任何被评估的通过var 定义的变量都不会自动变成全局变量。另一种方法来阻止自动全局变量是封装eval()调用到一个即时函数中。

key总结：eval执行有很大的风险，你不清楚具体会执行处什么内容。eval执行后的东西可能会包含有var 的变量，对程序造成影响。因此，如果一定要用的话，用function()去构建一个闭包，这样，eval执行后的内容，就不会干扰其他!!!!

demo：

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"

但全局变量的危害，还是没法避免，具体危害的demo：

如果里面包含有全局变量，那会对整个js程序造成巨大的影响

(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
}());

tab制表符：
一些开发人员更喜欢用tab制表符缩进，因为任何人都可以调整他们的编辑器以自己喜欢的空格数来显示Tab。有些人喜欢空格——通常四个，这都无所谓，只要团队每个人都遵循同一个规范就好了，一个tab 四个空格。

大括号在js一半写在同一行，因为如果按照c的常用写法，会出现如下问题：

function func() {
   return
  // 下面代码不执行
   {
      name : "Batman"
   }
}

因为他意味着：

// 警告： 意外的返回值
function func() {
   return undefined;
  // 下面代码不执行
   {
      name : "Batman"
   }
}

所以，我们一般：

function func() {
   return {
      name : "Batman"
   };
}

JS常用的编码规范：

构造函数，可以使用大驼峰式命名法(upper camel case)，如MyConstructor()

函数和方法名称，你可以使用小驼峰式命名法(lower camel case)，像是myFunction(), calculateArea()和getFirstName()。


变量名称：first_name, favorite_bands, 和 old_company_name，这种标记法帮你直观地区分函数和其他标识——原型和对象。


全局变量名字全部大写。全部大写命名全局变量可以加强减小全局变量数量的实践，同时让它们易于区分。

英文原文：http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/