JavaScript：打破所有規則

來源：紫雲飛的部落格，@紫雲妃

來自Twitter的前端工程師Angus Croll，在柏林舉辦的JSConf會議上，進行了題為”Break all the Rulez“的演講。主要講了一些我們通常認為是錯誤的不該使用的東西，其實是有用的。Angus Croll 演講用的講稿（連結），遠在美國的JavaScript之父看後也說同意其中大部分觀點（看來還是有問題？）。

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

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

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.模擬塊級作用域

//是的,還是這個老掉牙的問題
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

//是的,還是這個老掉牙的問題

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

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

}

};

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

可是:

// From JSON2.js

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

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中執行下面的程式碼

>(function () {
    console.log(String(arguments.callee.caller))
})()

function eval() {
    [native code]
}

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

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

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

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

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

//這樣寫是不是很麻煩
if ((x === null) || (x === undefined))

//完全可以下面這樣寫
if (x == null)

1

2

3

4

5

//這樣寫是不是很麻煩

if ((x === null) || (x === undefined))

//完全可以下面這樣寫

if (x == null)

3.當兩邊的運算元型別明顯相同時使用

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

1

2

3

typeof thing == "function"; //typeof運算子肯定返回字串

myArray.length == 2; //length屬性肯定返回數字

myString.indexOf('x') == 0; //indeOf方法肯定返回數字

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

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

1

2

3

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"

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有相容問題.

function base64Encode(str) {
    return btoa(unescape(encodeURIComponent(str)));
}

function base64Decode(str) {
    return decodeURIComponent(escape(atob(str)));
}

1

2

3

4

5

6

7

function base64Encode(str) {

return btoa(unescape(encodeURIComponent(str)));

}

function base64Decode(str) {

return decodeURIComponent(escape(atob(str)));

}

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	~	~

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	~	~

JavaScript：打破所有規則

相關文章

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	~	~