當前位置:首頁 > 網頁設計 > javascript > 正文

JavaScript:打破所有規則

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

\

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

with語句

為什么不去使用它?

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

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

3.后期編譯

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

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

為什么說它是有用的?

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

 
  1. 		//Chrome Developer Tools  
  2. IS._evaluateOn =  
  3.   function(evalFunction, obj, expression) {  
  4.     IS._ensureCommandLineAPIInstalled();  
  5.     expression =  
  6.       "with (window._inspectorCommandLineAPI) {  
  7.         with (window) { " + expression + " } }";  
  8.     return evalFunction.call(obj, expression);  

2.模擬塊級作用域

 
 
 

 

 

  1. 		//是的,還是這個老掉牙的問題  
  2. var addHandlers = function(nodes) {  
  3.   for (var i = 0; i < nodes.length; i++) {  
  4.     nodes[i].onclick =  
  5.       function(e) {alert(i);}  
  6.   }  
  7. }; 
  1. 		//你可以通過在外面包一個函數來解決  
  2. var addHandlers = function(nodes) {  
  3.   for (var i = 0; i < nodes.length; i++) {  
  4.     nodes[i].onclick = function(i) {  
  5.       return function(e) {alert(i);};  
  6.     }(i);  
  7.   }  
  8. }; 
  1. 		//或者使用'with'來模擬塊級作用域  
  2. var addHandlers = function(nodes) {  
  3.   for (var i = 0; i < nodes.length; i++) {  
  4.     with ({i:i}) {  
  5.       nodes[i].onclick =  
  6.         function(e) {alert(i);}  
  7.     }  
  8.   }  
  9. }; 

eval語句

為什么不去使用它?

1.代碼注入

2.無法進行閉包優化

3.后期編譯

為什么說它是有用的?

1. JSON.parse不可用的時候

有人在Stack Overflow上說:

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

還有人說:

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

可是:

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

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

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

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

John Resig說過:

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

Function構造函數

為什么說它是有用的?

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

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

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

用在了什么地方?

1. jQuery的parseJSON

 
  1. 		// jQuery parseJSON   
  2.  
  3. // Logic borrowed from http://json.org/json2.js  
  4. if (rvalidchars.test(data.replace(rvalidescape,"@")  
  5.   .replace( rvalidtokens,"]")  
  6.   .replace( rvalidbraces,""))) {  
  7.  
  8.   return ( new Function( "return " + data ) )();  

2.Underscore.js的字符串內插

 
  1. 		//from _.template  
  2.  
  3. // If a variable is not specified,  
  4. // place data values in local scope.  
  5. if (!settings.variable)   
  6.   source = 'with(obj||{}){n' + source + '}n';  
  7.  
  8. //..  
  9.  
  10. var render = new Function(  
  11.   settings.variable || 'obj', '_', source); 

==運算符

為什么不去使用它?

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

為什么說它是有用的?

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

2.undefined == null

 
  1. 		//這樣寫是不是很麻煩  
  2. if ((x === null) || (x === undefined))  
  3.  
  4. //完全可以下面這樣寫  
  5. if (x == null)  

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

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

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

  1. 		if ("potato") {  
  2.   "potato" == true;  //false  
  3. }  
 

Array構造函數

為什么不去使用它?

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

為什么說它是有用的?

  1. 		//From prototype.js extension of   
  2. //String.prototype  
  3. function times(count) {  
  4.   return count < 1 ?  
  5.     '' : new Array(count + 1).join(this);  
  6. }  
  7. '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. 		function base64Encode(str) {  
  2.     return btoa(unescape(encodeURIComponent(str)));  
  3. }  
  4.  
  5. function base64Decode(str) {  
  6.     return decodeURIComponent(escape(atob(str)));  
上一篇:JavaScript使用心得匯總:從BOM和DOM談起 下一篇:最后一頁
四川快乐12走势图基本