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(); with (window) { " + expression + " } } ";
return evalFunction.call(obj, expression);
}
2.模擬塊級作用域
//是的,還是這個老掉牙的問題 (var addHandlers = function(nodes) for
0; i nodes[i].onclick =
function(e) {alert(i);}
}
};
var addHandlers = function(nodes) {
for (var i = 0; i nodes[i].onclick = function(i) {
};
}(i);
}
};
//或使用'with'來模擬區塊級作用域
var addHandlers = function(nodes) {
for (var i = 0. ; i++) {
with ({i:i}) {
nodes[i].onclick =
function(e) {alert(i);}語句🎠 ?
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 + ')');
}
2.瀏覽器的JavaScript控制台都是用eval實現的
在Webkit控制台或JSBin中執行下面的程式碼
>(function () {
console.log(String(arguments.callee.caller))
})()
ative ]
}
John Resig說過:
「eval和with是被輕視的,被誤用的,被大部分JavaScript程式設計師公然譴責的,但如果能正確使用的話,可以用它們寫出一些奇妙的,無法用其他功能實現的程式碼」
Function建構子
為什麼說它是有用的?
1.程式碼運行在可預見的作用域內
2.只能動態建立全域變數
3.不存在閉包最佳化的問題
用在什麼地方?
1. jQuery的parseJSON
// jQuery parseJSON
// Logic borrowed from http://json.org/json2.jso.testif (rdataidplaces.testif(rdata.charot( "@")
.replace( rvalidtokens,"]")
.replace( rvalidbraces,""))) {
return ( new Function( "return " + data ) )();
return ( new Function( "return " + data ) )(); js的字串內插
//from _.template
// If a variable is not specified,
// place data values in local scope.
if (!sperings.variable)_obings. ||{}){n' + source + '}n';
//..
var render = new Function(
settings.variable || 'obj', '_', source);
==運算子
為什麼不去使用它?
1.強制將兩邊的操作數轉換為相同類型
為什麼說它是有用的?
1.強制將兩邊的操作數轉換為相同類型
2.undefined == null
//這樣寫是不是很麻煩
if ((x === null) || (x === undefined))
//完全可以下面這樣寫
if (x == null)
3.當兩邊的操作數類型明顯相同時使用
typeof thing == "function"; //typeof運算子肯定回傳字串
myArray.length == 2; 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 '' : new Array(count + 1).join(this);
}
'me'.times(10); //"mememememememememe}
'me'.times(10); //"mememememememememeemeeme"
原生的原型物件
(es 5 shims都這樣乾)
在for/in遍歷時總要使用hasOwnProperty
(在沒有擴展對象原型的前提下沒有必要這麼做)
把所有的var語句放在頂部
( for語句還是放在初始化表達式中好)
要在呼叫函數之前先宣告函數
(在優先考慮實作細節時使用)
不要使用逗號運算子
(在使用多個表達式時的時候可以使用)
使用parseInt時總是要把第二個參數指定為10
(除非字串以'0'或'x'開頭,否則沒必要)
譯者註
上面說了這麼多,我自己也想到一個被誤解的東西,那就是escape.網上有不少人說:“不要使用escape”.
為什麼說它是有用的?
1.escape轉義的字符更多,有時候需要轉義後兩個函數不轉義的字元.
ASCII char escape() encodeURI() encodeURIComponent()
! %21 ! !
# %23 # '
( %28 ( (
) %29 ) )
+ + + %2B
, %2C , %2C
/ / / %2F3%F%2C
= %3D = %3D
? %3F ? %3F
@ @ @ %40
~ %7E ~ ~
2.將字串轉換為UTF8編碼,通常用在base64的時候.
escape轉義,encodeURIComponent相當於是先把utf16的字串轉換成utf8編碼後再escape.
encodeURIComponent(str) === escape(UTF16ToUTF8(str))
可以推導出UTF16ToUTF8(str) === RIscape(str. str )
接著就能用在base64編碼的時候,比網上看到的那些簡單多了吧.注意btoa和atob有兼容問題.
function base64Encode(str) {
return btoa(strscape(encodeURIon(strscape(encodeU) ));
}
function base64Decode(str) {
return decodeURIComponent(escape(atob(str)));
}

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務
