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

最新推荐文章于 2023-03-09 17:58:40 发布

shuimoY

最新推荐文章于 2023-03-09 17:58:40 发布

阅读量244

点赞数

资料来源：http://www.finalshares.com/read-61

1.最小化全局变量：

每个JavaScript环境有一个全局对象，当你在任意的函数外面使用this的时候可以访问到。你创建的每一个全部变量都成了这个全局对象的属性。

myglobal = "hello"; // 不推荐写法
console.log(myglobal); // "hello"
console.log(window.myglobal); // "hello"
console.log(window["myglobal"]); // "hello"
console.log(this.myglobal); // "hello"

在函数中用var 声明的为局部变量，不在函数中var 声明的为全局变量。

而js有隐式声明即不使用var 声明的第一次出现的变量也会变成全局变量（伪全局变量）。

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

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

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

2.访问全局变量：

在浏览器中，全局对象可以通过window属性在代码的任何位置访问。

这种方法可以随时获得全局对象，因为其在函数中被当做函数调用了（不是通过new构造），this总是指向全局对象。

而在函数表达式指向赋值的变量，new 构造函数中this指向生成的实例。箭头函数中指向定义时的上下文环境。 或者你可以将你的代码包裹在一个即时函数中，然后从全局作用域中，传递一个引用指向this作为你即时函数的参数。

var global = (function () {
   return this;
}());

3.预解析：

js在执行前会有预解析，把var 声明和函数声明提到最前面。而赋值留在原处。

所有我们在函数中应该尽量把要用的变量在函数最上方声明出来。

4.循环

当你循环获取值时，缓存数组(或集合)的长度能避免每次循环都要重新计算，如下：

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

for-in循环使用在对象遍历上，因为for-in又被称为“枚举”，而不推荐用来遍历数组，虽然从技术上来说数组也是对象，也能实现。但遍历的顺序不能保证。所有数组推荐使用for循环遍历，对象使用for-in。

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

var man = {
   hands: 2,
};
// 在代码的某个地方
// 一个方法添加给了所有对象
Object.prototype.clone = function () {};

//那么for in man时就会把原型链上的方法也遍历出来。

for (var i in man) {
   if (man.hasOwnProperty(i)) { // 过滤
      console.log(i, ":", man[i]);
   }
}

5.（不）拓展内置对象

扩增构造函数的prototype属性是个很强大的增加功能的方法，但有时候它太强大了。

增加内置的构造函数原型（如Object(), Array(), 或Function()）挺诱人的，但是这严重降低了可维护性，因为它让你的代码变得难以预测。使用你代码的其他开发人员很可能更期望使用内置的 JavaScript方法来持续不断地工作，而不是你另加的方法。

另外，属性添加到原型中，可能会导致不使用hasOwnProperty属性时在循环中显示出来，这会造成混乱。

因此，不增加内置原型是最好的。你可以指定一个规则，仅当下面的条件均满足时例外：

可以预期将来的ECMAScript版本或是JavaScript实现将一直将此功能当作内置方法来实现。例如，你可以添加ECMAScript 5中描述的方法，一直到各个浏览器都迎头赶上。这种情况下，你只是提前定义了有用的方法。
如果您检查您的自定义属性或方法已不存在——也许已经在代码的其他地方实现或已经是你支持的浏览器JavaScript引擎部分。
你清楚地文档记录并和团队交流了变化。

6.避免隐式转换

JavaScript的变量在比较的时候会隐式类型转换。在你比较值和表达式类型的时候始终使用===和!==操作符。

如if ( arr.indexOf( a ) > -1); 而不要隐式的直接使用某个值转换为bool的结果，那样不容易别人阅读理解你的代码。

7.编码规范

1.缩进：什么应该缩进呢？规则很简单——花括号里面的东西。这就意味着函数体，循环 (do, while, for, for-in)，if，switch，以及对象字面量中的对象属性。

2.花括号：

如果你希望函数返回一个含有name属性的对象，你会惊讶。由于隐含分号，函数返回undefined。前面的代码等价于：

// 警告： 意外的返回值
function func() {
   return

// 下面代码不执行

{ name : "Batman" }}

总是使用花括号，并始终把在与之前的语句放在同一行：

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

3.空格：

空格的使用同样有助于改善代码的可读性和一致性。在写英文句子的时候，在逗号和句号后面会使用间隔。在JavaScript中，你可以按照同样的逻辑在列表模样表达式（相当于逗号）和结束语句（相对于完成了“想法”）后面添加间隔。

适合使用空格的地方包括：

for循环分号分开后的的部分：如for (var i = 0; i < 10; i += 1) {...}
for循环中初始化的多变量(i和max)：for (var i = 0, max = 10; i < max; i += 1) {...}
分隔数组项的逗号的后面：var a = [1, 2, 3];
对象属性逗号的后面以及分隔属性名和属性值的冒号的后面：var o = {a: 1, b: 2};
限定函数参数：myFunc(a, b, c)
函数声明的花括号的前面：function myFunc() {}
匿名函数表达式function的后面：var myFunc = function () {};

使用空格分开所有的操作符和操作对象是另一个不错的使用，这意味着在+, -, *, =, <, >, <=, >=, ===, !==, &&, ||, +=等前后都需要空格。

// 宽松一致的间距
// 使代码更易读
// 使得更加“透气”
var d = 0,
    a = b + 1;
if (a && b && c) {
    d = a % c;
    a += d;
}

// 反面例子
// 缺失或间距不一
// 使代码变得疑惑
var d = 0,
    a = b + 1;
if (a&&b&&c) {
    d=a % c;
    a+= d;
}

最后需要注意的一个空格——花括号间距。最好使用空格：

函数、if-else语句、循环、对象字面量的左花括号的前面({)
else或while之间的右花括号(})

空格使用的一点不足就是增加了文件的大小，但是压缩无此问题。

8.命名规范

以大写字母写构造函数(Capitalizing Constructors)

JavaScript并没有类，但有new调用的构造函数：

var adam = new Person();

JS没有常量。但常用全大写表示常量，如 var PI = 3.14;

变量与函数名：可以使用my_fun（下划线方式），myFun（小驼峰式）

9.注释

你必须注释你的代码，即使不会有其他人向你一样接触它。通常，当你深入研究一个问题，你会很清楚的知道这个代码是干嘛用的，但是，当你一周之后再回来看的时候，想必也要耗掉不少脑细胞去搞明白到底怎么工作的。

很显然，注释不能走极端：每个单独变量或是单独一行。但是，你通常应该记录所有的函数，它们的参数和返回值，或是任何不寻常的技术和方法。要想到注释可以给你代码未来的阅读者以诸多提示；阅读者需要的是（不要读太多的东西）仅注释和函数属性名来理解你的代码。例如，当你有五六行程序执行特定的任务，如果你提供了一行代码目的以及为什么在这里的描述的话，阅读者就可以直接跳过这段细节。没有硬性规定注释代码比，代码的某些部分（如正则表达式）可能注释要比代码多。