如何編寫高質(zhì)量JS代碼
想寫出高效的javascript類庫卻無從下手；
嘗試閱讀別人的類庫，卻理解得似懂給懂；
打算好好鉆研js高級函數(shù)，但權(quán)威書上的內(nèi)容太零散，
即使記住“用法”，但到要“用”的時候卻沒有想“法”。
也許你和我一樣，好像有一顧無形的力量約束著我們的計劃，讓我們一再認(rèn)為知識面的局限性，致使我們原地踏步，難以向前跨越。
這段時間，各種作業(yè)、課程設(shè)計、實驗報告，壓力倍增。難得擠出一點點時間，絕不睡懶覺，整理總結(jié)往日所看的書，只為了可以離寫自己的類庫近一點。
本文參考自《javascript語言精粹》和《Effective JavaScript》。例子都被調(diào)試過，理解過后，我想把一些“深奧”的道理說得淺顯一點點。
1.變量作用域
作用域?qū)τ诔绦騿T來說就像氧氣。它無處不在，甚至，你往往不會去想他。但當(dāng)它被污染時（例如使用全局對象），你會感覺到窒息（例如應(yīng)用響應(yīng)變慢）。javascript核心作用域規(guī)則很簡單，被精心設(shè)計，且很強大。有效地使用javascript需要掌握變量作用域的一些基本概念，并了解一些可能導(dǎo)致難以捉摸的、令人討厭的問題的極端情況。
1.1盡量少用全局變量
javascript很容易在全局命名空間中創(chuàng)建變量。創(chuàng)建全局變量毫不費力，因為它不需要任何形式的聲明，而且能被整個程序的所有代碼自動地訪問。
對于我們這些初學(xué)者，遇到某些需求（例如，傳輸?shù)臄?shù)據(jù)被記錄下來、等待某時機某函數(shù)調(diào)用時使用；或者是某函數(shù)被經(jīng)常使用）時，好不猶豫想到全局函數(shù)，甚至大一學(xué)到的C語言面向過程思想太根深蒂固，系統(tǒng)整整齊齊地都是滿滿函數(shù)。定義全局變量會污染共享的公共命名空間，并可能導(dǎo)致意外的命名沖突。全局變量也不利于模塊化，因為它會導(dǎo)致程序中獨立組件間的不必要耦合。嚴(yán)重地說，過多的全局（包括樣式表，直接定義div或者a的樣式），整合到多人開發(fā)過稱將會成為災(zāi)難性錯誤。這就是為什么jQuery的所有代碼都被包裹在一個立即執(zhí)行的匿名表達(dá)式——自調(diào)用匿名函數(shù)。當(dāng)瀏覽器加載完jQuery文件后，自調(diào)用匿名函數(shù)立即開始執(zhí)行，初始化jQuery的各個模塊，避免破壞和污染全局變量以至于影響到其他代碼。
(function(window,undefined){
var jQuery = ...
//...
window.jQuery = window.$ = jQuery;
})(window);
另外，你或許會認(rèn)為，“先怎么怎么寫，日后再整理”比較方便，但優(yōu)秀的程序員會不斷地留意程序的結(jié)構(gòu)、持續(xù)地歸類相關(guān)的功能以及分離不相關(guān)的組件，并這些行為作為編程過稱中的一部分。
由于全局命名空間是javascript程序中獨立的組件經(jīng)行交互的唯一途徑，因此，利用全局命名控件的情況是不可避免的。組件或程序庫不得不定義一些全局變量。以便程序中的其他部分使用。否則最好使用局部變量。
this.foo ;//undefined
foo = " global foo";
this.foo ;//"global foo"
var foo = "global foo";
this.foo = "changed";
foo ;//changed
javascript的全局命名空間也被暴露在程序全局作用域中可以訪問的全局對象，該對象作為this關(guān)鍵字的初始值。在web瀏覽器中，全局對象被綁定在全局window變量。這就意味你創(chuàng)建全局變量有兩種方法：在全局作用域內(nèi)使用var聲明他，或者將其加入到全局對象中。使用var聲明的好處是能清晰地表達(dá)全局變量在程序范圍中的影響。
鑒于引用為綁定的全局變量會導(dǎo)致運行時錯誤，因此，保存作用域清晰和簡潔會使代碼的使用者更容易理解程序聲明了那些全局變量。
由于全局對象提供了全局環(huán)境的動態(tài)反應(yīng)機制，所以可以使用它查詢一個運行環(huán)境，檢測在這個平臺下哪些特性可用。
eg.ES5引入了一個全局的JSON對象來讀寫JSON格式的數(shù)據(jù)。
if(!this.JSON){
this.JSON = {
parse : ..,
stringify : ...
}
}
如果你提供了JSON的實現(xiàn)，你當(dāng)然可以簡單無條件地使用自己的實現(xiàn)。但是由宿主環(huán)境提供的內(nèi)置實現(xiàn)幾乎更適合的，因為它們是用C語言寫進(jìn)瀏覽器的。因為它們按照一定的標(biāo)準(zhǔn)對正確性和一致性進(jìn)行了嚴(yán)格檢查，并且普遍來說比第三方實現(xiàn)提供更好的性能。
當(dāng)初數(shù)據(jù)結(jié)構(gòu)課程設(shè)計模擬串的基本操作，要求不能使用語言本身提供的方法。javascript對數(shù)組的基本操作實現(xiàn)得很好，如果只是出于一般的學(xué)習(xí)需要，模擬語言本身提供的方法的想法很好，但是如果真正投入開發(fā)，無需考慮第一時間選擇使用javascript內(nèi)置方法。
1.2避免使用with
with語句提供任何“便利“，讓你的應(yīng)用變得不可靠和低效率。我們需要對單一對象依次調(diào)用一系列方法。使用with語句可以很方便地避免對對象的重復(fù)引用：
function status(info){
var widget = new Widget();
with(widget){
setBackground("blue");
setForeground("white");
setText("Status : "+info);
show();
}
}
使用with語句從模塊對象中”導(dǎo)入“（import）變量也是很有誘惑力的。
function f(x,y){
with(Math){
return min(round(x),sqrt(y));//抽象引用
}
}
事實上，javascript對待所有的變量都是相同的。javascript從最內(nèi)層的作用域開始向外查找變量。with語言對待一個對象猶如該對象代表一個變量作用域，因此，在with代碼塊的內(nèi)部，變量查找從搜索給定的變量名的屬性開始。如果在這個對象中沒有找到該屬性，則繼續(xù)在外部作用域中搜索。with塊中的每個外部變量的引用都隱式地假設(shè)在with對象（以及它的任何原型對象）中沒有同名的屬性。而在程序的其他地方創(chuàng)建或修改with對象或其原型對象不一定會遵循這樣的假設(shè)。javascript引擎當(dāng)然不會讀取局部代碼來獲取你使用了那些局部變量。javascript作用域可被表示為高效的內(nèi)部數(shù)據(jù)結(jié)構(gòu)，變量查找會非?？焖佟５怯捎趙ith代碼塊需要搜索對象的原型鏈來查找with代碼里的所有變量，因此，其運行速度遠(yuǎn)遠(yuǎn)低于一般的代碼塊。
替代with語言，簡單的做法，是將對象綁定在一個簡短的變量名上。
function status(info){
var w = new Widget();
w.setBackground("blue");
w.setForeground("white");
w.setText("Status : "+info);
w.show();
}
其他情況下，最好的方法是將局部變量顯式地綁定到相關(guān)的屬性上。
function f(x,y){
var min = Math.min,
round = Math.round,
sqrt = Math.sqrt;
return min(round(x),sqrt(y));
}
1.3熟練掌握閉包
理解閉包有單個概念：
a）javascript允許你引用在當(dāng)前函數(shù)以外定義的變量。
function makeSandwich(){
var magicIngredient = "peanut butter";
function make(filling){
return magicIngredient + " and " + filling;
}
return make("jelly");
}
makeSandwich();// "peanut butter and jelly"
b）即使外部函數(shù)已經(jīng)返回，當(dāng)前函數(shù)仍然可以引用在外部函數(shù)所定義的變量
function makeSandwich(){
var magicIngredient = "peanut butter";
function make(filling){
return magicIngredient + " and " + filling;
}
return make;
}
var f = sandwichMaker();
f("jelly"); // "peanut butter and jelly"
f("bananas"); // "peanut butter and bananas"
f("mallows"); // "peanut butter and mallows"
javascriptd的函數(shù)值包含了比調(diào)用它們時所執(zhí)行所需要的代碼還要多的信息。而且，javascript函數(shù)值還在內(nèi)部存儲它們可能會引用的定義在其封閉作用域的變量。那些在其所涵蓋的作用域內(nèi)跟蹤變量的函數(shù)被稱為閉包。
make函數(shù)就是一個閉包，其代碼引用了兩個外部變量：magicIngredient和filling。每當(dāng)make函數(shù)被調(diào)用時，其代碼都能引用這兩個變量，因為閉包存儲了這兩個變量。
函數(shù)可以引用在其作用域內(nèi)的任何變量，包括參數(shù)和外部函數(shù)變量。我們可以利用這一點來編寫更加通用的sandwichMaker函數(shù)。
function makeSandwich(magicIngredient){
function make(filling){
return magicIngredient + " and " + filling;
}
return make;
}
var f = sandwichMaker(”ham“);
f("cheese"); // "ham and cheese"
f("mustard"); // "ham and mustard"
閉包是javascript最優(yōu)雅、最有表現(xiàn)力的特性之一，也是許多習(xí)慣用法的核心。
c）閉包可以更新外部變量的值。事實上，閉包存儲的是外部變量的引用，而不是它們的值的副本。因此，對于任何具有訪問這些外部變量的閉包，都可以進(jìn)行更新。
function box(){
var val = undefined;
return {
set : function(newval) {val = newval;},
get : function (){return val;},
type : function(){return typeof val;}
};
}
var b = box();
b.type(); //undefined
b.set(98.6);
b.get();//98.6
b.type();//number
該例子產(chǎn)生一個包含三個閉包的對象。這三個閉包是set，type和get屬性，它們都共享訪問val變量，set閉包更新val的值。隨后調(diào)用get和type查看更新的結(jié)果。
1.4理解變量聲明提升
javascript支持此法作用域（對變量foo的引用會被綁定到聲明foo變量最近的作用域中），但不支持塊級作用域（變量定義的作用域并不是離其最近的封閉語句或代碼塊）。
不明白這個特性將會導(dǎo)致一些微妙的bug：
function isWinner(player,others){
var highest = 0;
for(var i = 0,n = others.length ;i<n;i++){
var player = others[i];
if(player.score > highest){
highest = player.score;
}
}
return player.score > highest;
}
1.5 當(dāng)心命名函數(shù)表達(dá)式笨拙的作用域
function double(x){ return x*2; }
var f = function(x){ return x*2; }
同一段函數(shù)代碼也可以作為一個表達(dá)式，卻具有截然不同的含義。匿名函數(shù)和命名函數(shù)表達(dá)式的官方區(qū)別在于后者會綁定到與其函數(shù)名相同的變量上，該變量作為該函數(shù)的一個局部變量。這可以用來寫遞歸函數(shù)表達(dá)式。
var f = function find(tree,key){
//....
return find(tree.left , key) ||
find(tree.right,key);
}
值得注意的是，變量find的作用域只在其自身函數(shù)中，不像函數(shù)聲明，命名函數(shù)表達(dá)式不能通過其內(nèi)部的函數(shù)名在外部被引用。
find(myTree,"foo");//error : find is not defined;
var constructor = function(){ return null; }
var f= function(){
return constructor();
};
f();//{}(in ES3 environments)
該程序看起來會產(chǎn)生null，但其實會產(chǎn)生一個新的對象。
因為命名函數(shù)變量作用域內(nèi)繼承了Object.prototype.constructor(即Oject的構(gòu)造函數(shù))，就像with語句一樣，這個作用域會因Object.prototype的動態(tài)改變而受到影響。在系統(tǒng)中避免對象污染函數(shù)表達(dá)式作用域的辦法是避免任何時候在Object.prototype中添加屬性，以避免使用任何與標(biāo)準(zhǔn)Object.prototype屬性同名的局部變量。
在流行的javascript引擎中另外一個缺點是對命名函數(shù)表達(dá)式的聲明進(jìn)行提升。
var f = function g(){return 17;}
g(); //17 (in nonconformat environment)
一些javascript環(huán)境甚至把f和g這兩個函數(shù)作為不同的對象，從而導(dǎo)致不必要的內(nèi)存分配。
1.6 當(dāng)心局部塊函數(shù)聲明笨拙的作用域
function f() {return "global" ; }
function test(x){
function f(){return "local";}
var result = [];
if(x){
result.push(f());
}
result.push(f());
result result;
}
test(true); //["local","local"]
test(false); //["local"]
function f() {return "global" ; }
function test(x){
var result = [];
if(x){
function f(){return "local";}
result.push(f());
}
result.push(f());
result result;
}
test(true); //["local","local"]
test(false); //["local"]
javascript沒有塊級作用域，所以內(nèi)部函數(shù)f的作用域應(yīng)該是整個test函數(shù)。一些javascript環(huán)境確實如此，但并不是所有javascript環(huán)境都這樣，javascript實現(xiàn)在嚴(yán)格模式下將這類函數(shù)報告為錯誤（具有局部塊函數(shù)聲明的處于嚴(yán)格模式下的程序?qū)蟾娉梢粋€語法錯誤），有助于檢測不可移植代碼，為未來的標(biāo)準(zhǔn)版本在給局部塊函數(shù)聲明給更明智和可以的語義。針對這種情況，可以考慮在test函數(shù)內(nèi)聲明一局部變量指向全局函數(shù)f。
相關(guān)文章
淺談JavaScript_DOM學(xué)習(xí)篇_圖片切換小案例
這篇文章主要介紹了JavaScriptDOM圖片切換小案例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
總結(jié)JavaScript設(shè)計模式編程中的享元模式使用
享元模式最適合于解決因創(chuàng)建大量類似對象而累及性能的問題,本文將來總結(jié)JavaScript設(shè)計模式編程中的享元模式使用,包括在DOM操作時的利用示例:2016-05-05
javascript 數(shù)組學(xué)習(xí)資料收集
由于javascript 數(shù)組應(yīng)用比較廣泛，使用的朋友越來越多，腳本之家特為大家整理了一些js 數(shù)據(jù)方面的學(xué)習(xí)資料，大家看完了，基本上應(yīng)該對數(shù)組有個理解了。2010-04-04
javascript學(xué)習(xí)筆記(十一) 正則表達(dá)式介紹
javascript學(xué)習(xí)筆記之正則表達(dá)式介紹，需要的朋友可以參考下2012-06-06
這篇文章主要介紹了javascript打開word文檔的方法,需要的朋友可以參考下2014-04-04
JavaScript中的toUTCString()方法使用詳解
這篇文章主要介紹了JavaScript中的toUTCString()方法使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
Javascript Boolean、Nnumber、String 強制類型轉(zhuǎn)換的區(qū)別詳細(xì)介紹
我們知道 Boolean(value) 是把值轉(zhuǎn)換成Boolean類型，Nnumber(value) 是把值轉(zhuǎn)換成數(shù)字（整型或浮點數(shù)），而 String(value) 是把值轉(zhuǎn)換成字符串,需要的朋友可以了解下2012-12-12
向JavaScript的數(shù)組中添加元素的方法小結(jié)
這篇文章主要介紹了向JavaScript的數(shù)組中添加元素的方法小結(jié),分別舉了一些JS數(shù)組操作的例子,基本需要的朋友可以參考下2015-10-10
CSS與JS緊密配合，為我們的頁面增添了很多別致的效果,為了達(dá)到某種特殊的效果我們需要用Javascript動態(tài)的去更改某一個標(biāo)簽的CSS屬性2012-12-12
這篇文章主要介紹了淺談開發(fā)eslint規(guī)則，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10