北京時間今天凌晨,來自Twitter的前端工程師Angus Crol,在柏林舉辦的JSConf會議上,進行了題為"Break all the Rulez"的演講,主要講了一些我們通常認為是錯誤的不該使用的東西,其實是有用的.本文最下面有演講用的slides.遠在美國的JavaScript之父看了slides也說:我同意其中大部分觀點(看來還是有問題?).

下面我把要點簡單翻譯一下,不做擴展解釋.

with語句

為什么不去使用它?

1.意外的運行結果,可能隱式創建全局變量

2.閉包作用域解析過多消耗

3.后期編譯

有人說,ES5的嚴格模式可以防止隱式創建全局變量(不用var),這樣能減少with的一個問題.但是...

嚴格模式也不能使用with啊.

為什么說它是有用的?

1.構建瀏覽器開發者工具

//Chrome Developer Tools  
IS._evaluateOn =  
  function(evalFunction, obj, expression) {  
    IS._ensureCommandLineAPIInstalled();  
    expression =  
      "with (window._inspectorCommandLineAPI) {\  
        with (window) { " + expression + " } }";  
    return evalFunction.call(obj, expression);  
} 

2.模擬塊級作用域

//是的,還是這個老掉牙的問題  
var addHandlers = function(nodes) {  
  for (var i = 0; i < nodes.length; i++) {  
    nodes[i].onclick =  
      function(e) {alert(i);}  
  }  
}; 

//你可以通過在外面包一個函數來解決  
var addHandlers = function(nodes) {  
  for (var i = 0; i < nodes.length; i++) {  
    nodes[i].onclick = function(i) {  
      return function(e) {alert(i);};  
    }(i);  
  }  
}; 

//或者使用'with'來模擬塊級作用域  
var addHandlers = function(nodes) {  
  for (var i = 0; i < nodes.length; i++) {  
    with ({i:i}) {  
      nodes[i].onclick =  
        function(e) {alert(i);}  
    }  
  }  
}; 

#p#

eval語句

為什么不去使用它?

1.代碼注入

2.無法進行閉包優化

3.后期編譯

為什么說它是有用的?

1. JSON.parse不可用的時候

有人在Stack Overflow上說:

“JavaScript的eval是不安全的,使用json.org上的JSON解析器來解析JSON”

還有人說:

“不要使用eval來解析JSON!用道格拉斯寫的json2.js!”

可是:

// From JSON2.jsif (/^[\],:{}\s]*$/  .test(text.replace(/*regEx*/, '@')  .replace(/*regEx*/, ']')  .replace(/*regEx*/, ''))) {  j = eval('(' + text + ')');} 

2.瀏覽器的JavaScript控制臺都是用eval實現的

在Webkit控制臺或JSBin中執行下面的代碼

>(function () {    console.log(String(arguments.callee.caller))})()function eval() {    [native code]} 

John Resig說過:

“eval和with是被輕視的,被誤用的,被大部分JavaScript程序員公然譴責的,但如果能正確使用的話,可以用它們寫出一些奇妙的,無法用其他功能實現的代碼”

Function構造函數

為什么說它是有用的?

1.代碼運行在可預見的作用域內

2.只能動態創建全局變量

3.不存在閉包優化的問題

用在了什么地方?

1. jQuery的parseJSON

// 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的字符串內插

//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); 

#p#

==運算符

為什么不去使用它?

1.強制將兩邊的操作數轉換為相同類型

為什么說它是有用的?

1.強制將兩邊的操作數轉換為相同類型

2.undefined == null

//這樣寫是不是很麻煩  
if ((x === null) || (x === undefined))  
 
//完全可以下面這樣寫  
if (x == null)  

3.當兩邊的操作數類型明顯相同時使用

typeof thing == "function";   //typeof運算符肯定返回字符串  
myArray.length == 2;          //length屬性肯定返回數字  
myString.indexOf('x') == 0;   //indeOf方法肯定返回數字 

真值不一定==true,假值不一定==false

if ("potato") {  
  "potato" == true;  //false  
}  

Array構造函數

為什么不去使用它?

1.new Array()也是evil的?JSLint也推薦使用[].

為什么說它是有用的?

//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’開頭,否則沒必要)

#p#

譯者注

上面說了這么多,我自己也想到一個被誤解的東西,那就是escape.網上有不少人說:"不要使用escape".

為什么說它是有用的?

1.escape轉義的字符更多,有時候需要轉義后兩個函數不轉義的字符.

2.將字符串轉換為UTF8編碼,通常用在base64的時候.

escape相當于是在utf16編碼的字符串上轉義,encodeURIComponent相當于是先把utf16的字符串轉換成utf8編碼后再escape.

encodeURIComponent(str) === escape(UTF16ToUTF8(str))

可以推導出UTF16ToUTF8(str) === unescape( encodeURIComponent( str )

然后就能用在base64編碼的時候,比網上看到的那些簡單多了吧.注意btoa和atob有兼容問題.

function base64Encode(str) {  
    return btoa(unescape(encodeURIComponent(str)));  
}  
 
function base64Decode(str) {  
    return decodeURIComponent(escape(atob(str)));  
}