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

下面我把要點(diǎn)簡(jiǎn)單翻譯一下,不做擴(kuò)展解釋.

with語(yǔ)句

為什么不去使用它?

1.意外的運(yùn)行結(jié)果,可能隱式創(chuàng)建全局變量

2.閉包作用域解析過(guò)多消耗

3.后期編譯

有人說(shuō),ES5的嚴(yán)格模式可以防止隱式創(chuàng)建全局變量(不用var),這樣能減少with的一個(gè)問(wèn)題.但是...

嚴(yán)格模式也不能使用with啊.

為什么說(shuō)它是有用的?

1.構(gòu)建瀏覽器開發(fā)者工具

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

2.模擬塊級(jí)作用域

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

//你可以通過(guò)在外面包一個(gè)函數(shù)來(lá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'來(lái)模擬塊級(jí)作用域  
var addHandlers = function(nodes) {  
  for (var i = 0; i < nodes.length; i++) {  
    with ({i:i}) {  
      nodes[i].onclick =  
        function(e) {alert(i);}  
    }  
  }  
}; 

#p#

eval語(yǔ)句

為什么不去使用它?

1.代碼注入

2.無(wú)法進(jìn)行閉包優(yōu)化

3.后期編譯

為什么說(shuō)它是有用的?

1. JSON.parse不可用的時(shí)候

有人在Stack Overflow上說(shuō):

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

還有人說(shuō):

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

可是:

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

2.瀏覽器的JavaScript控制臺(tái)都是用eval實(shí)現(xiàn)的

在Webkit控制臺(tái)或JSBin中執(zhí)行下面的代碼

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

John Resig說(shuō)過(guò):

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

Function構(gòu)造函數(shù)

為什么說(shuō)它是有用的?

1.代碼運(yùn)行在可預(yù)見(jiàn)的作用域內(nèi)

2.只能動(dòng)態(tài)創(chuàng)建全局變量

3.不存在閉包優(yōu)化的問(wèn)題

用在了什么地方?

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的字符串內(nèi)插

//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#

==運(yùn)算符

為什么不去使用它?

1.強(qiáng)制將兩邊的操作數(shù)轉(zhuǎn)換為相同類型

為什么說(shuō)它是有用的?

1.強(qiáng)制將兩邊的操作數(shù)轉(zhuǎn)換為相同類型

2.undefined == null

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

3.當(dāng)兩邊的操作數(shù)類型明顯相同時(shí)使用

typeof thing == "function";   //typeof運(yùn)算符肯定返回字符串  
myArray.length == 2;          //length屬性肯定返回?cái)?shù)字  
myString.indexOf('x') == 0;   //indeOf方法肯定返回?cái)?shù)字 

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

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

Array構(gòu)造函數(shù)

為什么不去使用它?

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

為什么說(shuō)它是有用的?

//From prototype.js extension of   
//String.prototype  
function times(count) {  
  return count < 1 ?  
    '' : new Array(count + 1).join(this);  
}  
'me'.times(10); //"memememememememememe" 

其他

不要擴(kuò)展原生的原型對(duì)象
(es 5 shims都這么干)
在for/in遍歷時(shí)總要使用hasOwnProperty
(在沒(méi)有擴(kuò)展對(duì)象原型的前提下沒(méi)有必要這么做)
把所有的var語(yǔ)句放在頂部
(for語(yǔ)句還是放在初始化表達(dá)式中好)
要在調(diào)用函數(shù)之前先聲明函數(shù)
(在優(yōu)先考慮實(shí)現(xiàn)細(xì)節(jié)時(shí)使用)
不要使用逗號(hào)運(yùn)算符
(在使用多個(gè)表達(dá)式時(shí)的時(shí)候可以使用)
使用parseInt時(shí)總要把第二個(gè)參數(shù)指定為10
(除非字符串以‘0’或‘x’開頭,否則沒(méi)必要)

#p#

譯者注

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

為什么說(shuō)它是有用的?

1.escape轉(zhuǎn)義的字符更多,有時(shí)候需要轉(zhuǎn)義后兩個(gè)函數(shù)不轉(zhuǎn)義的字符.

2.將字符串轉(zhuǎn)換為UTF8編碼,通常用在base64的時(shí)候.

escape相當(dāng)于是在utf16編碼的字符串上轉(zhuǎn)義,encodeURIComponent相當(dāng)于是先把utf16的字符串轉(zhuǎn)換成utf8編碼后再escape.

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

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

然后就能用在base64編碼的時(shí)候,比網(wǎng)上看到的那些簡(jiǎn)單多了吧.注意btoa和atob有兼容問(wèn)題.

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