來源：紫雲飛的部落格，@紫雲妃
來自Twitter的前端工程師Angus Croll，在柏林舉辦的JSConf會議上，進行了題為”Break all the Rulez“的演講。主要講了一些我們通常認為是錯誤的不該使用的東西，其實是有用的。Angus Croll 演講用的講稿（連結），遠在美國的JavaScript之父看後也說同意其中大部分觀點（看來還是有問題？）。
下面我把要點簡單翻譯一下,不做擴充套件解釋.
with語句
為什麼不去使用它?
1.意外的執行結果,可能隱式建立全域性變數
2.閉包作用域解析過多消耗
3.後期編譯
有人說,ES5的嚴格模式可以防止隱式建立全域性變數(不用var),這樣能減少with的一個問題.但是…
嚴格模式也不能使用with啊.
為什麼說它是有用的?
1.構建瀏覽器開發者工具
|
1 2 3 4 5 6 7 8 9 |
//Chrome Developer Tools IS._evaluateOn = function(evalFunction, obj, expression) { IS._ensureCommandLineAPIInstalled(); expression = "with (window._inspectorCommandLineAPI) {\ with (window) { " + expression + " } }"; return evalFunction.call(obj, expression); } |
2.模擬塊級作用域
|
1 2 3 4 5 6 7 |
//是的,還是這個老掉牙的問題 var addHandlers = function(nodes) { for (var i = 0; i < nodes.length; i++) { nodes[i].onclick = function(e) {alert(i);} } }; |
|
1 2 3 4 5 6 7 8 |
//你可以通過在外面包一個函式來解決 var addHandlers = function(nodes) { for (var i = 0; i < nodes.length; i++) { nodes[i].onclick = function(i) { return function(e) {alert(i);}; }(i); } }; |
|
1 2 3 4 5 6 7 8 9 |
//或者使用'with'來模擬塊級作用域 var addHandlers = function(nodes) { for (var i = 0; i < nodes.length; i++) { with ({i:i}) { nodes[i].onclick = function(e) {alert(i);} } } }; |
eval語句
為什麼不去使用它?
1.程式碼注入
2.無法進行閉包優化
3.後期編譯
為什麼說它是有用的?
1. JSON.parse不可用的時候
有人在Stack Overflow上說:
“JavaScript的eval是不安全的,使用json.org上的JSON解析器來解析JSON”
還有人說:
“不要使用eval來解析JSON!用道格拉斯寫的json2.js!”
可是:
|
1 2 3 4 5 6 7 8 |
// From JSON2.js if (/^[\],:{}\s]*$/ .test(text.replace(/*regEx*/, '@') .replace(/*regEx*/, ']') .replace(/*regEx*/, ''))) { j = eval('(' + text + ')'); } |
2.瀏覽器的JavaScript控制檯都是用eval實現的
在Webkit控制檯或JSBin中執行下面的程式碼
|
1 2 3 4 5 6 7 |
>(function () { console.log(String(arguments.callee.caller)) })() function eval() { [native code] } |
John Resig說過:
“eval和with是被輕視的,被誤用的,被大部分JavaScript程式設計師公然譴責的,但如果能正確使用的話,可以用它們寫出一些奇妙的,無法用其他功能實現的程式碼”
Function建構函式
為什麼說它是有用的?
1.程式碼執行在可預見的作用域內
2.只能動態建立全域性變數
3.不存在閉包優化的問題
用在了什麼地方?
1. jQuery的parseJSON
|
1 2 3 4 5 6 7 8 9 |
// jQuery parseJSON // Logic borrowed from http://json.org/json2.js if (rvalidchars.test(data.replace(rvalidescape,"@") .replace( rvalidtokens,"]") .replace( rvalidbraces,""))) { return ( new Function( "return " + data ) )(); } |
2.Underscore.js的字串內插
|
1 2 3 4 5 6 7 8 9 10 11 |
//from _.template // If a variable is not specified, // place data values in local scope. if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n'; //.. var render = new Function( settings.variable || 'obj', '_', source); |
==運算子
為什麼不去使用它?
1.強制將兩邊的運算元轉換為相同型別
為什麼說它是有用的?
1.強制將兩邊的運算元轉換為相同型別
2.undefined == null
|
1 2 3 4 5 |
//這樣寫是不是很麻煩 if ((x === null) || (x === undefined)) //完全可以下面這樣寫 if (x == null) |
3.當兩邊的運算元型別明顯相同時使用
|
1 2 3 |
typeof thing == "function"; //typeof運算子肯定返回字串 myArray.length == 2; //length屬性肯定返回數字 myString.indexOf('x') == 0; //indeOf方法肯定返回數字 |
真值不一定==true,假值不一定==false
|
1 2 3 |
if ("potato") { "potato" == true; //false } |
Array建構函式
為什麼不去使用它?
1.new Array()也是evil的?JSLint也推薦使用[].
為什麼說它是有用的?
|
1 2 3 4 5 6 7 |
//From prototype.js extension of //String.prototype function times(count) { return count < 1 ? '' : new Array(count + 1).join(this); } 'me'.times(10); //"memememememememememe" |
其他
不要擴充套件原生的原型物件
(es 5 shims都這麼幹)
在for/in遍歷時總要使用hasOwnProperty
(在沒有擴充套件物件原型的前提下沒有必要這麼做)
把所有的var語句放在頂部
(for語句還是放在初始化表示式中好)
要在呼叫函式之前先宣告函式
(在優先考慮實現細節時使用)
不要使用逗號運算子
(在使用多個表示式時的時候可以使用)
使用parseInt時總要把第二個引數指定為10
(除非字串以‘0’或‘x’開頭,否則沒必要)
譯者注
上面說了這麼多,我自己也想到一個被誤解的東西,那就是escape.網上有不少人說:“不要使用escape”.
為什麼說它是有用的?
1.escape轉義的字元更多,有時候需要轉義後兩個函式不轉義的字元.
| ASCII char | escape() | encodeURI() | encodeURIComponent() |
|---|---|---|---|
| ! | %21 | ! | ! |
| # | %23 | # | %23 |
| $ | %24 | $ | %24 |
| & | %26 | & | %26 |
| ‘ | %27 | ‘ | ‘ |
| ( | %28 | ( | ( |
| ) | %29 | ) | ) |
| + | + | + | %2B |
| , | %2C | , | %2C |
| / | / | / | %2F |
| : | %3A | : | %3A |
| ; | %3B | ; | %3B |
| = | %3D | = | %3D |
| ? | %3F | ? | %3F |
| @ | @ | @ | %40 |
| ~ | %7E | ~ | ~ |
2.將字串轉換為UTF8編碼,通常用在base64的時候.
escape相當於是在utf16編碼的字串上轉義,encodeURIComponent相當於是先把utf16的字串轉換成utf8編碼後再escape.
encodeURIComponent(str) === escape(UTF16ToUTF8(str))
可以推匯出UTF16ToUTF8(str) === unescape( encodeURIComponent( str )
然後就能用在base64編碼的時候,比網上看到的那些簡單多了吧.注意btoa和atob有相容問題.
|
1 2 3 4 5 6 7 |
function base64Encode(str) { return btoa(unescape(encodeURIComponent(str))); } function base64Decode(str) { return decodeURIComponent(escape(atob(str))); } |