JavaScript 是屬于網(wǎng)絡(luò)的腳本語(yǔ)言！

JavaScript 被數(shù)百萬(wàn)計(jì)的網(wǎng)頁(yè)用來(lái)改進(jìn)設(shè)計(jì)、驗(yàn)證表單、檢測(cè)瀏覽器、創(chuàng)建cookies，以及更多的應(yīng)用。

JavaScript 是因特網(wǎng)上最流行的腳本語(yǔ)言。

JavaScript 很容易使用！你一定會(huì)喜歡它的！

JavaScript一種解釋型的腳本語(yǔ)言，語(yǔ)法靈活，讓不同的人對(duì)同一個(gè)功能有很多種不同的寫(xiě)法。怎樣組織JavaScript代碼才能讓別人一眼看出你不簡(jiǎn)單呢？是否很期待別人在看完你的代碼之后感嘆一句“原來(lái)還可以這樣寫(xiě)”呢？

匿名函數(shù)的N種寫(xiě)法

Js的匿名函數(shù)是未申明函數(shù)名的自執(zhí)行函數(shù)，格式如下：

(function(){})();

實(shí)際在項(xiàng)目上我們經(jīng)常是在前面加上“;”：

;function(){}();

因?yàn)镴s的語(yǔ)法是可以省略分號(hào)的，但是這種機(jī)制也會(huì)導(dǎo)致意外的錯(cuò)誤。為了避免代碼上線(xiàn)后合并壓縮成一個(gè)文件造成語(yǔ)法錯(cuò)誤，所以加上“;”可以避免未知錯(cuò)誤。

但有時(shí)我們看見(jiàn)別人的庫(kù)或是插件里面會(huì)這樣寫(xiě)匿名函數(shù)：

+function(){}();

“+”在這里是運(yùn)算符，運(yùn)算符具有極高的優(yōu)先級(jí)，所以右邊的函數(shù)聲明加上括號(hào)的部分（實(shí)際上就是函數(shù)執(zhí)行的寫(xiě)法）就直接執(zhí)行了。其實(shí)不止前面可以是“+”號(hào)，“-”、“！”、“~”、“++”等運(yùn)算符均可。這里只是做擴(kuò)展介紹，具體用哪種寫(xiě)法看團(tuán)隊(duì)統(tǒng)一規(guī)范。

拋棄Math.ceil()和Math.floor取整

也許在別的代碼中看到過(guò)這兩種符號(hào)~~和|0，直接看運(yùn)行結(jié)果：

>> var a1 = 1.23
>> ~~a1
1
>> var a2 = 2.345
>> a2|0
2
>> var a3 = -3.45
>> ~~a3
-3
>> var a4 = -4.5
>> a4|0
-4

注明下，這種寫(xiě)法不是原創(chuàng)，只是引用過(guò)來(lái)分析和說(shuō)明下這種另類(lèi)的寫(xiě)法。簡(jiǎn)單解釋?zhuān)瑍是按位取反的運(yùn)算符，可以將浮點(diǎn)數(shù)通過(guò)舍去小數(shù)點(diǎn)后面的所有位來(lái)轉(zhuǎn)換為整數(shù)。正整數(shù)可轉(zhuǎn)換為無(wú)符號(hào)的十六進(jìn)制值。然后再取反一次（~~）負(fù)負(fù)得正，就得到原來(lái)的整數(shù)。就是這么任性不愛(ài)調(diào)方法，你說(shuō)算不算也是一種優(yōu)化呢。

注意：如果需要做嚴(yán)格的四舍五入運(yùn)算就要慎用此方法，那就還是得用Math函數(shù)。

if和else也不是唯一

用if-else的條件判斷是很清晰的邏輯，在處理數(shù)據(jù)量不大情況下看起就不是很簡(jiǎn)潔：

if (a===1) { //此處強(qiáng)烈建議用嚴(yán)格等于符號(hào)“===”，不會(huì)進(jìn)行類(lèi)型轉(zhuǎn)換
a=2
} else if (a===3) {
a=4
} else {
a=5
}

看看用||和&&給代碼瘦身后：

((a===1)&&(true,a=2))||((a===3)&&(true,a=4))||(a=5)

一行就搞定，瘦身成功。||和&&，很簡(jiǎn)單的原理就不用說(shuō)啦，里面用到逗號(hào)運(yùn)算符還不容易理解，可以繼續(xù)換成三元運(yùn)算符：

(a===1 )? a=2:( (a===3) ? (a=4) : (a=5) )

這種寫(xiě)法看起來(lái)結(jié)構(gòu)是夠簡(jiǎn)化，但是別人看你的代碼會(huì)有點(diǎn)吃力。

用toString替代煩人的字符串拼接DOM結(jié)構(gòu)

如果要?jiǎng)討B(tài)生成一個(gè)dom結(jié)構(gòu)一般我們是這樣實(shí)現(xiàn)的 ：

var template = "<div>" 
+ "<h2>{title}</h2>"
+ "<div class='content' yAttr=''>{content}</div>"
+ "</div>"

如果再添加各種屬性和參數(shù)進(jìn)去，大、小引號(hào)混亂很容易報(bào)錯(cuò)。然而ES6提供了Template String幫我們解決了這個(gè)問(wèn)題，你可以這樣寫(xiě)：

var template = <div> 
<h2>{title}</h2> 
<div class='content' yAttr=''>{content}</div> 
</div>

 可問(wèn)題是ES6現(xiàn)在還未正式來(lái)啊…不怕，function.toString來(lái)解決我們青黃不接時(shí)的尷尬：

var rComment = /\/\*([\s\S]*?)\*\//;
// multiply string 
function ms(fn){ 
return fn.toString().match(rComment)[1]
}; 
ms(function(){/* 
<div> 
<h2>{title}</h2> 
<div class='content' yAttr=''>{content}</div> 
</div> */
})

這里的輸出和前面的字符串輸出一樣一樣滴，前端程序猿們只需要關(guān)注自己的dom結(jié)構(gòu)就好了。

添加AMD模塊支持，提示代碼B格

給你寫(xiě)的代碼聲明一下AMD（異步模塊定義，Asynchronous Module Definition）模塊規(guī)范，這樣別人就可以直接通過(guò)AMD的規(guī)范來(lái)加載你的模塊了，如果別人沒(méi)有通過(guò)規(guī)范來(lái)加載你的模塊，你也可以?xún)?yōu)雅地返回一個(gè)常規(guī)的全局對(duì)象。來(lái)看看jQueryUI的寫(xiě)法：

(function( factory ) { 
if ( typeof define === "function" && define.amd ) { 
// AMD模式。且依賴(lài)"jQuery"這個(gè)插件 
define( [ "jquery" ], factory ); } 
else { 
// 瀏覽器全局模式 
factory( jQuery ); 
} 
}(function( $ ) { 
// 這里放模塊代碼 
return $.widget; 
}));

改成AMD模塊的結(jié)構(gòu)，讓你的代碼更適于瀏覽器端加載腳本依賴(lài)，按照這種格式來(lái)寫(xiě)代碼，保證別人一看代碼就知道你是個(gè)專(zhuān)業(yè)的開(kāi)發(fā)者。

繼承最優(yōu)法

JavaScript的靈活性，大大小小的繼承方式有十余種之多。每種寫(xiě)法優(yōu)缺點(diǎn)各異，各家方法不一一列舉，舉個(gè)常用的繼承方法為例，原型繼承：

function Parent() {}
function Child() {}
Child.prototype = Parent.prototype
Child.prototype.constructor = Child ；

這種這種方法實(shí)際上是將Child.prototype和Parent.prototype中保存的指針指向了同一個(gè)對(duì)象，所以子對(duì)象原型中擴(kuò)展一些屬性以便之后繼續(xù)繼承的話(huà)，父對(duì)象的原型也會(huì)被改寫(xiě)。所以為了解決這個(gè)問(wèn)題，嘗試借用一個(gè)臨時(shí)構(gòu)造器的寫(xiě)法：

function Empty(){}
Empty.prototype = Parent.prototype;
Child.prototype = new Empty();
Child.prototype.constructor = Child;

這樣父對(duì)象的自身屬性和原型方法得到保護(hù)?！白顑?yōu)”有點(diǎn)夸大，但是是相比較而言的。相信每個(gè)人都有自己的寫(xiě)法，還有借用call和apply實(shí)現(xiàn)屬性繼承的優(yōu)缺點(diǎn)，篇幅有限不一一介紹。

總結(jié)

上述所有的JavaScript的另類(lèi)寫(xiě)法，一些是為了程序易懂或者效率提高的語(yǔ)法糖，這樣的做法是比較可取的，比如前面所說(shuō)的省略if-else的做法。一些是為了提升我們代碼的兼容性和性能，比如AMD和繼承的方式?！救瞬锁B(niǎo)一枚，上述內(nèi)容肯定還有不全和沒(méi)解釋透徹的地方以后再補(bǔ)充。

以上內(nèi)容是針對(duì)JavaScript的另類(lèi)寫(xiě)法的相關(guān)介紹，希望對(duì)大家有所幫助！

最新評(píng)論