第一：關(guān)于匿名函數(shù)的使用

? ? ? ?要避免全局變量泛濫， 可以考慮使用匿名函數(shù)， 把不需要在外部訪問(wèn)的變量或者函數(shù)限制在一個(gè)比較小的范圍內(nèi)。

例如以下代碼：

<script>

function func1(){

var list = ["a", "b", "c"];

?

for(var i = 0; i < list.length; i++){

//..

};

}

func1(); //　自動(dòng)運(yùn)行

</script>

?上述代碼的作用是在頁(yè)面加載的時(shí)候自動(dòng)執(zhí)行某些操作， 并不需要被外部調(diào)用， 但是它執(zhí)行過(guò)后卻留下了一個(gè)全局的函數(shù)。

像這種情況， 非常有必要使用匿名函數(shù)：

如下述代碼所示：

<script>

(function func1(){

var list = ["a", "b", "c"];

?

for(var i = 0; i < list.length; i++){

//..

};

})(); //　自動(dòng)運(yùn)行

</script>

?匿名函數(shù)的書(shū)寫(xiě)格式（不帶參數(shù)的情況下）：

(function(){

// 代碼塊

})();

如果后面需要添加參數(shù)的話，則這樣書(shū)寫(xiě)：

(function(arg1, arg2, argN){

//..

})(arg1, arg2, argN);

第二：有關(guān)命名空間的使用規(guī)范：

命名空間可以有效減少全局變量的使用，是個(gè)很不錯(cuò)的規(guī)范JS代碼的方式，在JS中命名空間需要進(jìn)行如下操作：

“對(duì)象-屬性”：

window.com = {}

?

window.com.bytter = {}

?

window.com.bytter.hello = function(){

alert("hello");

}

?那么什么情況下才會(huì)使用到命名空間呢？

如果您需要給某個(gè)已經(jīng)存在的頁(yè)面添加一些功能，有可能需要添加好多個(gè)函數(shù)，而且正好那個(gè)頁(yè)面當(dāng)中已經(jīng)存在了好多的全局變量和函數(shù)，甚至還存在某些函數(shù)和你要新增加的函數(shù)同名，這時(shí)我們就可以使用命名空間了：

你創(chuàng)建一個(gè)命名空間， 把你的新函數(shù)都放在那個(gè)命名空間之下， 就可以了：

<button type="button" onclick="pg.check.userAcc()">檢查用戶名</button>

<button type="button" onclick="pg.check.userAcc()">檢查帳號(hào)</button>

?

<script>

window.pg = {}

?

window.pg.check = {

// 檢查用戶名

userName: function(){

//..

},

// 檢查帳號(hào)

userAcc: function(){

//..

}

};

</script>

第三：如何保證多人書(shū)寫(xiě)的JS代碼互不干擾

我們學(xué)習(xí)了匿名函數(shù)和命名空間，掌握了它們的正確使用方法，接下來(lái)我們就可以做到保證JS代碼之間互不干擾：

我們把一個(gè)頁(yè)面中自己維護(hù)的代碼與別人維護(hù)的代碼或者系統(tǒng)自帶的代碼分隔開(kāi)來(lái)，做到與外部代碼的耦合降低到最小。

<script>

// 頁(yè)面命名空間

window.pg = {}

?

//命名空間的使用

// 檢查用戶信息

// 作者：張三

// 最后更新： 2012.12.31

(function(){

?

// 私有變量

var a, b, c;

?

// 檢查用戶信息的相關(guān)方法

window.pg.check = {

// 檢查用戶名

userName: function(){

//..

},

// 檢查帳號(hào)

userAcc: function(){

//..

}

};

?

})(); // end 張三的代碼

?

//匿名函數(shù)的使用

// xxx功能

// 作者：李四

// 最后更新： 2012.1.1

(function(){

window.pg.xxx = {

//..

}

})(); // end 李四的代碼

?

</script>

第四：使得變量聲明美觀易讀

1、變量必須在使用前用var進(jìn)行聲明；

2、變量的聲明應(yīng)該放在代碼塊或者函數(shù)的頭部；

3、可在一行內(nèi)聲明多個(gè)變量，盡可能添加上注釋信息。

// 聲明變量 銀行名稱, 銀行帳號(hào)

var type, acc;

?

?

// 聲明變量 銀行名稱, 銀行帳號(hào)

var type = "中國(guó)銀行", acc = "xxxxxx";

?

?

var type = "中國(guó)銀行", // 銀行名稱

acc = "xxxxxx"; // 銀行帳號(hào)

盡量使用易于理解的變量名，如：

var bankType = "中國(guó)銀行",

bankAccount = "xxxxxx";

第五：函數(shù)和變量的命名

普通變量名和函數(shù)名采用"小駝峰式命名法"， 如：firstName、lastName

作為構(gòu)造函數(shù)的函數(shù)采用"大駝峰式命名法"， 如以下代碼所示：

var Person = function(){

//..

}

?

var me = new Person();

常量用大寫(xiě)和下劃線表示，如：

var ROOT_PATH = "/v10/";

第六：正確地使用分號(hào)，可保證JS正常壓縮

盡量做到每條語(yǔ)句使用分號(hào)結(jié)尾（特別是需要進(jìn)行壓縮的js，因?yàn)槭÷苑痔?hào)常常會(huì)導(dǎo)致壓縮失敗）；

第七：有關(guān)數(shù)組的定義

盡量使用簡(jiǎn)便的方式進(jìn)行數(shù)組的定義：

// 比較好的定義方法

var list = [1, 2, 3];

?

// 不好的定義方法

var list = new Array();

list[0] = 1;

list[1] = 2;

list[2] = 3;

摘自：iteye技術(shù)博客[有刪改]

轉(zhuǎn)載于:https://www.cnblogs.com/wenJiaQi/p/6686919.html

總結(jié)

以上是生活随笔為你收集整理的如何才能优雅地书写JS代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。