建站
咨詢
售后
建站咨詢
新聞中心
北京時(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)題?).
康縣網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),康縣網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為康縣超過(guò)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的康縣做網(wǎng)站的公司定做！
下面我把要點(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)建瀏覽器開(kāi)發(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!用道格拉斯寫(xiě)的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é)的,但如果能正確使用的話,可以用它們寫(xiě)出一些奇妙的,無(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)換為相同類(lèi)型
為什么說(shuō)它是有用的?
1.強(qiáng)制將兩邊的操作數(shù)轉(zhuǎn)換為相同類(lèi)型
2.undefined == null
- //這樣寫(xiě)是不是很麻煩
- if ((x === null) || (x === undefined))
- //完全可以下面這樣寫(xiě)
- if (x == null)
3.當(dāng)兩邊的操作數(shù)類(lèi)型明顯相同時(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’開(kāi)頭,否則沒(méi)必要)
#p#
譯者注
上面說(shuō)了這么多,我自己也想到一個(gè)被誤解的東西,那就是escape.網(wǎng)上有不少人說(shuō):"不要使用escape".
為什么說(shuō)它是有用的?
1.escape轉(zhuǎn)義的字符更多,有時(shí)候需要轉(zhuǎn)義后兩個(gè)函數(shù)不轉(zhuǎn)義的字符.
| 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.將字符串轉(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)));
- }
名稱欄目：JavaScript:打破所有規(guī)則
標(biāo)題路徑：http://m.5511xx.com/article/cdhioch.html
