JavaScript最佳實踐：幫你提升代碼質(zhì)量
每天學一些新東西可以讓一個理性之人走上不凡之路。而作為開發(fā)人員，不斷的學習新東西則是我們工作的一部分, 不論這些新東西是不是來源于積極的學習經(jīng)驗。
在本篇教程中，我將指出一些重要的 JavaScript ***實踐，讓你不必去用另外一種艱難的方式來了解它們。準備好去升級你的代碼吧!
1. 避免對全局作用域的污染
聲明變量是一件很有趣的事情。有時候即使你不想這樣做，但也有可能會定義出全局變量。在如今的瀏覽器中，全局變量都被存儲在 window 對象中。而因為有許多的東西都在那個里面，所以你有可能把一些默認值都給覆蓋掉了。
假設你有一個 HTML 文件，里面包含了一個 <script> 標記，而這個標記內(nèi)含 (或者通過引用一個 JavaScript 文件而加載) 如下內(nèi)容:
|
1
2
|
var foo = 42;console.log(foo); |
這段代碼很明顯會讓控制臺輸出 42。不過因為代碼并不是放到一個函數(shù)里面去執(zhí)行的，因此其執(zhí)行的上下文就會是全局的那個。因此，變量就會被附加到 window 對象上。這就意味著 window.foo 的值也會是 42。
這樣是挺危險的，因為你可以把已經(jīng)存在的全局變量給覆蓋掉:
|
1
2
3
4
|
function print () { // do something}print(); |
當執(zhí)行 window.print (或者只是執(zhí)行 print) 的時候, 它不會打開打印彈窗，因為我們已經(jīng)將原生的打印彈窗邏輯給覆蓋掉了。
解決這個問題的方案相當簡單; 我們需要一個會在定義后立即被調(diào)用到的閉包函數(shù), 如下所示:
|
1
2
3
4
5
6
7
8
9
|
// Declare an anonymous function(function () { var foo = 42; console.log(window.foo); // → undefined console.log(foo); // → 42})();//^ and call it immediately |
或者你也可以選擇將 window 以及其它全局的東西（例如 document）都作為參數(shù)傳給那個函數(shù)（這樣做也可能對性能會有所提升）:
|
1
2
3
4
5
|
(function (global, doc) { global.setTimeout(function () { doc.body.innerHTML = "Hello!"; }, 1000);})(window, document); |
因此你得使用閉包函數(shù)來避免創(chuàng)建出什么全局的東西來。注意在這里因為要專注于代碼本身，所以我不會在后面的代碼片段中使用閉包函數(shù)。
提示: browserify 是另外一種避免創(chuàng)建全局變量的方式。它采用了你在 Node.js 同樣會用到的 require 函數(shù)的方式。
順便說一下, Node.js 會自動將你的文件封裝進函數(shù)里面。它們看起來先下面這樣:
|
1
2
|
(function (exports, require, module, __filename, __dirname) {// ... |
因此，如果你認為 require 函數(shù)式全局的，好吧，并不是。它無非就是一個函數(shù)的參數(shù)。
你知道嗎?
因為 window 對象包含了所有的全局變量，又因為它自己也是全局的，因此 window 自己內(nèi)部也引用了它自己:
|
1
2
|
window.window.window// => Window {...} |
這是一位 window 對象是一個循環(huán)引用對象。下面展示了如何創(chuàng)建這樣的一個對象:
|
1
2
3
4
5
6
7
|
// Create an objectvar foo = {};// Point a key value to the object itselffoo.bar = foo;// The `foo` object just became a circular one:foo.bar.bar.bar.bar// → foo |
或者，為了展示你對 JavaScript 的***的熱愛之情，你可以當回發(fā)燒友，代碼如下:
是的，你可以幾乎沒完沒了(也有可能會等到瀏覽器崩潰)的展開這個對象。
2. 好的 use strict 使用習慣
要嚴格使用 use strict! 這無非就是在你的代碼中加了一行，給你的腳本增加更多的小把戲。
例如:
|
1
2
3
4
5
6
7
8
|
// This is bad, since you do create a globalwithout having anyone to tell you(function () { a = 42; console.log(a); // → 42})();console.log(a);// → 42 |
使用 use strict, 你就可以獲取到更多一點的錯誤信息:
|
1
2
3
4
5
|
(function () { "use strict"; a = 42; // Error: Uncaught ReferenceError: a is not defined})(); |
你可能想知道為什么可以將 "use strict" 放在封裝函數(shù)的外面。這的確是可以的，不過這樣它就會被應用到全局。這還不是太壞，但是如果有代碼是來自于其它的庫，或者你要把所有的東西都打包到一個文件里面去的話，這樣做就會有影響的。
3. 嚴格相等
這個比較簡短。如果你在 JavaScript 中 (像其它的編程語言中那樣)使用 == 來比較 a 和 b,可能會發(fā)現(xiàn)其運行的方式有點怪: 如果你有一個字符串和一個數(shù)字如下，它們會相等 (==):
|
1
2
|
"42" == 42// → true |
對于一些明顯的緣故 (例如驗證操作), ***就是使用嚴格等于(===):
|
1
2
|
"42" === 42// → false |
4. 使用 && 和 || 來制造點小把戲
根你需要做的事情，你可以使用邏輯操作符來讓代碼更簡短。
取默認值
|
1
2
3
4
5
6
7
8
9
10
11
12
|
"" || "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 statementvar b = typeof a === "number" ? a : 42;// → 0 |
不用拿 if 表達式來檢查某些東西是不是為真的，你也可以簡單地這樣做:
|
1
2
3
|
expr && doSomething();// Instead of: |
|
1
2
3
|
if (expr) { doSomething();} |
如果你需要通過 doSomething(): 來決定返回的結(jié)果，這樣做更酷:
|
1
2
3
|
function doSomething () { return { foo: "bar" };} |
|
1
|
var expr = true; |
|
1
2
3
|
var res = expr && doSomething();res && console.log(res);// → { foo: "bar" } |
你可能不會贊同我在這方面的看法，但像我說的這樣做其實效果更理想。如果你并不想像這樣來對你的代碼進行混淆，但其實這就是那些 JavaScript 簡化器實際會做的事情。
如果你來問我，我會說這樣做雖然讓代碼更加簡短了，但仍然是可讀的。
5. 對值的類型進行轉(zhuǎn)化
有幾種方法可以根據(jù)你的想法來進行轉(zhuǎn)化。最常用的方式有如下這些:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
// From anything to a numbervar foo = "42";var myNumber = +foo; // shortcut for Number(foo)// → 42// Tip: you can convert it directly into a negative numbervar negativeFoo = -foo; // or -Number(foo)// → -42// From object to array// Tip: `arguments` is an object and in general you want to use it as arrayvar args = { 0: "foo", 1: "bar", length: 2 };Array.prototype.slice.call(args)// → [ 'foo', 'bar' ]// Anything to boolean/// Non non p is a boolean pvar t = 1;var f = 0;!!t// → true!!f// → false/// And non-p is a boolean non-p!t// → false!f// → true// Anything to stringvar 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 structuresJSON.stringify(window);// ⚠ TypeError: JSON.stringify cannot serialize cyclic structures. |
6. 代碼風格/風格指南
在新的項目中要讓所有的文件都遵循相同的代碼風格。對于現(xiàn)有的項目，就使用現(xiàn)有的代碼風格, 除非你就只是決定要變一變它的風格(提示: 同你的搭檔就此進行一下討論)。甚至你要創(chuàng)建和記錄你自己的代碼風格，然后一直去遵循它。
現(xiàn)有的一些不同的代碼風格如下:
-
... 也還有其它的一些
額外的福利小提示:
你應該記住的其它一些重要的 JavaScript ***實踐就是那些能幫助你對代碼進行格式化的工具。下面是其中的一些:
-
js-beautify: 美化你的代碼
-
UglifyJS(2): 混淆/最小化你的代碼
-
jshint: 檢測 JavaScript 代碼中的錯誤或者潛在問題
-
jscs: 可以配置的樣式指南檢測器
***一個就是: 不要總是 console.log，要對你的代碼進行調(diào)試。
祝你編程愉快!
原文地址：https://www.codementor.io/johnnyb/tutorials/javascript-best-practices-du107mvud
