JavaScript最佳實(shí)踐：幫你提升代碼質(zhì)量

2017-01-20 09:45:20

每天學(xué)一些新東西可以讓一個(gè)理性之人走上不凡之路。而作為開發(fā)人員，不斷的學(xué)習(xí)新東西則是我們工作的一部分, 不論這些新東西是不是來源于積極的學(xué)習(xí)經(jīng)驗(yàn)。

在本篇教程中，我將指出一些重要的 JavaScript ***實(shí)踐，讓你不必去用另外一種艱難的方式來了解它們。準(zhǔn)備好去升級(jí)你的代碼吧!

[[182138]]

1. 避免對(duì)全局作用域的污染

聲明變量是一件很有趣的事情。有時(shí)候即使你不想這樣做，但也有可能會(huì)定義出全局變量。在如今的瀏覽器中，全局變量都被存儲(chǔ)在 window 對(duì)象中。而因?yàn)橛性S多的東西都在那個(gè)里面，所以你有可能把一些默認(rèn)值都給覆蓋掉了。

假設(shè)你有一個(gè) HTML 文件，里面包含了一個(gè) <script> 標(biāo)記，而這個(gè)標(biāo)記內(nèi)含 (或者通過引用一個(gè) JavaScript 文件而加載) 如下內(nèi)容:

1 2	`var` `foo = 42;` `console.log(foo);`

這段代碼很明顯會(huì)讓控制臺(tái)輸出 42。不過因?yàn)榇a并不是放到一個(gè)函數(shù)里面去執(zhí)行的，因此其執(zhí)行的上下文就會(huì)是全局的那個(gè)。因此，變量就會(huì)被附加到 window 對(duì)象上。這就意味著 window.foo 的值也會(huì)是 42。

這樣是挺危險(xiǎn)的，因?yàn)槟憧梢园岩呀?jīng)存在的全局變量給覆蓋掉:

function print () {
   // do something
}
print();

當(dāng)執(zhí)行 window.print (或者只是執(zhí)行 print) 的時(shí)候, 它不會(huì)打開打印彈窗，因?yàn)槲覀円呀?jīng)將原生的打印彈窗邏輯給覆蓋掉了。

解決這個(gè)問題的方案相當(dāng)簡(jiǎn)單; 我們需要一個(gè)會(huì)在定義后立即被調(diào)用到的閉包函數(shù), 如下所示:

// Declare an anonymous function
(function () {
   var foo = 42;
   console.log(window.foo);
   // → undefined
   console.log(foo);
   // → 42
})();
//^ and call it immediately

或者你也可以選擇將 window 以及其它全局的東西（例如 document）都作為參數(shù)傳給那個(gè)函數(shù)（這樣做也可能對(duì)性能會(huì)有所提升）:

(function (global, doc) {
  global.setTimeout(function () {
     doc.body.innerHTML = "Hello!";
  }, 1000);
})(window, document);

因此你得使用閉包函數(shù)來避免創(chuàng)建出什么全局的東西來。注意在這里因?yàn)橐獙Ｗ⒂诖a本身，所以我不會(huì)在后面的代碼片段中使用閉包函數(shù)。

提示: browserify 是另外一種避免創(chuàng)建全局變量的方式。它采用了你在 Node.js 同樣會(huì)用到的 require 函數(shù)的方式。

順便說一下, Node.js 會(huì)自動(dòng)將你的文件封裝進(jìn)函數(shù)里面。它們看起來先下面這樣:

1 2	`(function` `(exports, require, module, __filename, __dirname) {` `// ...`

　　因此，如果你認(rèn)為 require 函數(shù)式全局的，好吧，并不是。它無非就是一個(gè)函數(shù)的參數(shù)。

　　你知道嗎?

　　因?yàn)?window 對(duì)象包含了所有的全局變量，又因?yàn)樗约阂彩侨值模虼?window 自己內(nèi)部也引用了它自己:

1 2	`window.window.window` `// => Window {...}`

　　這是一位 window 對(duì)象是一個(gè)循環(huán)引用對(duì)象。下面展示了如何創(chuàng)建這樣的一個(gè)對(duì)象:

// Create an object
var foo = {};
// Point a key value to the object itself
foo.bar = foo;
// The `foo` object just became a circular one:
foo.bar.bar.bar.bar
// → foo

　　或者，為了展示你對(duì) JavaScript 的***的熱愛之情，你可以當(dāng)回發(fā)燒友，代碼如下:

　　是的，你可以幾乎沒完沒了(也有可能會(huì)等到瀏覽器崩潰)的展開這個(gè)對(duì)象。

　2. 好的 use strict 使用習(xí)慣

　　要嚴(yán)格使用 use strict! 這無非就是在你的代碼中加了一行，給你的腳本增加更多的小把戲。

　　例如:

// This is bad, since you do create a global
without having anyone to tell you
(function () {
   a = 42;
   console.log(a);
   // → 42
})();
console.log(a);
// → 42

　　使用 use strict, 你就可以獲取到更多一點(diǎn)的錯(cuò)誤信息:

(function () {
   "use strict";
   a = 42;
   // Error: Uncaught ReferenceError: a is not defined
})();

　　你可能想知道為什么可以將 "use strict" 放在封裝函數(shù)的外面。這的確是可以的，不過這樣它就會(huì)被應(yīng)用到全局。這還不是太壞，但是如果有代碼是來自于其它的庫，或者你要把所有的東西都打包到一個(gè)文件里面去的話，這樣做就會(huì)有影響的。

　3. 嚴(yán)格相等

　　這個(gè)比較簡(jiǎn)短。如果你在 JavaScript 中 (像其它的編程語言中那樣)使用 == 來比較 a 和 b,可能會(huì)發(fā)現(xiàn)其運(yùn)行的方式有點(diǎn)怪: 如果你有一個(gè)字符串和一個(gè)數(shù)字如下，它們會(huì)相等 (==):

1 2	`"42"` `== 42` `// → true`

　　對(duì)于一些明顯的緣故 (例如驗(yàn)證操作), ***就是使用嚴(yán)格等于(===):

1 2	`"42"` `=== 42` `// → false`

　4. 使用 && 和 || 來制造點(diǎn)小把戲

　　根你需要做的事情，你可以使用邏輯操作符來讓代碼更簡(jiǎn)短。

　　取默認(rèn)值

"" || "foo"
// → "foo"
undefined || 42
// → 42
// Note that if you want to handle 0 there, you need
// to check if a number was provided:
var a = 0;
a || 42
// → 42
// This is a ternary operator—works like an inline 
if-else statement
var b = typeof a === "number" ? a : 42;
// → 0

　　不用拿 if 表達(dá)式來檢查某些東西是不是為真的，你也可以簡(jiǎn)單地這樣做:

expr && doSomething();
 
// Instead of:

if (expr) {
   doSomething();
}

　　如果你需要通過 doSomething(): 來決定返回的結(jié)果，這樣做更酷:

function doSomething () {
   return { foo: "bar" };
}

1	`var` `expr =` `true;`

var res = expr && doSomething();
res && console.log(res);
// → { foo: "bar" }

　　你可能不會(huì)贊同我在這方面的看法，但像我說的這樣做其實(shí)效果更理想。如果你并不想像這樣來對(duì)你的代碼進(jìn)行混淆，但其實(shí)這就是那些 JavaScript 簡(jiǎn)化器實(shí)際會(huì)做的事情。

　　如果你來問我，我會(huì)說這樣做雖然讓代碼更加簡(jiǎn)短了，但仍然是可讀的。

　5. 對(duì)值的類型進(jìn)行轉(zhuǎn)化

　　有幾種方法可以根據(jù)你的想法來進(jìn)行轉(zhuǎn)化。最常用的方式有如下這些:

// From anything to a number
 
var foo = "42";
var myNumber = +foo; // shortcut for Number(foo)
// → 42
 
// Tip: you can convert it directly into a negative number
var negativeFoo = -foo; // or -Number(foo)
// → -42
 
// From object to array
// Tip: `arguments` is an object and in general you want 
to use it as array
var args = { 0: "foo", 1: "bar", length: 2 };
Array.prototype.slice.call(args)
// → [ 'foo', 'bar' ]
 
// Anything to boolean
/// Non non p is a boolean p
var t = 1;
var f = 0;
!!t
// → true
!!f
// → false
 
/// And non-p is a boolean non-p
!t
// → false
!f
// → true
 
// Anything to string
var foo = 42;
"" + foo // shortcut for String(foo)
// → "42"
 
foo = { hello: "world" };
JSON.stringify(foo);
// → '{ "hello":"world" }'
 
JSON.stringify(foo, null, 4); // beautify the things
// →
// '{
//    "hello": "world"
// }'
 
// Note you cannot JSON.stringify circular structures
JSON.stringify(window);
// ⚠ TypeError: JSON.stringify cannot serialize cyclic 
structures.

　6. 代碼風(fēng)格/風(fēng)格指南

　　在新的項(xiàng)目中要讓所有的文件都遵循相同的代碼風(fēng)格。對(duì)于現(xiàn)有的項(xiàng)目，就使用現(xiàn)有的代碼風(fēng)格, 除非你就只是決定要變一變它的風(fēng)格(提示: 同你的搭檔就此進(jìn)行一下討論)。甚至你要?jiǎng)?chuàng)建和記錄你自己的代碼風(fēng)格，然后一直去遵循它。

　　現(xiàn)有的一些不同的代碼風(fēng)格如下: