JavaScript 是屬於網絡的腳本語言!
JavaScript 被數百萬計的網頁用來改進設計、驗證表單、檢測浏覽器、創建cookies,以及更多的應用。
JavaScript 是因特網上最流行的腳本語言。
JavaScript 很容易使用!你一定會喜歡它的!
JavaScript一種解釋型的腳本語言,語法靈活,讓不同的人對同一個功能有很多種不同的寫法。怎樣組織JavaScript代碼才能讓別人一眼看出你不簡單呢?是否很期待別人在看完你的代碼之後感歎一句“原來還可以這樣寫”呢?
匿名函數的N種寫法
Js的匿名函數是未申明函數名的自執行函數,格式如下:
(function(){})();
實際在項目上我們經常是在前面加上“;”:
;function(){}();
因為Js的語法是可以省略分號的,但是這種機制也會導致意外的錯誤。為了避免代碼上線後合並壓縮成一個文件造成語法錯誤,所以加上“;”可以避免未知錯誤。
但有時我們看見別人的庫或是插件裡面會這樣寫匿名函數:
+function(){}();
“+”在這裡是運算符,運算符具有極高的優先級,所以右邊的函數聲明加上括號的部分(實際上就是函數執行的寫法)就直接執行了。其實不止前面可以是“+”號,“-”、“!”、“~”、“++”等運算符均可。這裡只是做擴展介紹,具體用哪種寫法看團隊統一規范。
拋棄Math.ceil()和Math.floor取整
也許在別的代碼中看到過這兩種符號~~和|0,直接看運行結果:
>> 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
注明下,這種寫法不是原創,只是引用過來分析和說明下這種另類的寫法。簡單解釋,~是按位取反的運算符,可以將浮點數通過捨去小數點後面的所有位來轉換為整數。正整數可轉換為無符號的十六進制值。然後再取反一次(~~)負負得正,就得到原來的整數。就是這麼任性不愛調方法,你說算不算也是一種優化呢。
注意:如果需要做嚴格的四捨五入運算就要慎用此方法,那就還是得用Math函數。
if和else也不是唯一
用if-else的條件判斷是很清晰的邏輯,在處理數據量不大情況下看起就不是很簡潔:
if (a===1) { //此處強烈建議用嚴格等於符號“===”,不會進行類型轉換 a=2 } else if (a===3) { a=4 } else { a=5 }
看看用||和&&給代碼瘦身後:
((a===1)&&(true,a=2))||((a===3)&&(true,a=4))||(a=5)
一行就搞定,瘦身成功。||和&&,很簡單的原理就不用說啦,裡面用到逗號運算符還不容易理解,可以繼續換成三元運算符:
(a===1 )? a=2:( (a===3) ? (a=4) : (a=5) )
這種寫法看起來結構是夠簡化,但是別人看你的代碼會有點吃力。
用toString替代煩人的字符串拼接DOM結構
如果要動態生成一個dom結構一般我們是這樣實現的 :
var template = "<div>" + "<h2>{title}</h2>" + "<div class='content' yAttr=''>{content}</div>" + "</div>"
如果再添加各種屬性和參數進去,大、小引號混亂很容易報錯。然而ES6提供了Template String幫我們解決了這個問題,你可以這樣寫:
var template = <div> <h2>{title}</h2> <div class='content' yAttr=''>{content}</div> </div>
可問題是ES6現在還未正式來啊…不怕,function.toString來解決我們青黃不接時的尴尬:
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> */ })
這裡的輸出和前面的字符串輸出一樣一樣滴,前端程序猿們只需要關注自己的dom結構就好了。
添加AMD模塊支持,提示代碼B格
給你寫的代碼聲明一下AMD(異步模塊定義,Asynchronous Module Definition)模塊規范,這樣別人就可以直接通過AMD的規范來加載你的模塊了,如果別人沒有通過規范來加載你的模塊,你也可以優雅地返回一個常規的全局對象。來看看jQueryUI的寫法:
(function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD模式。且依賴"jQuery"這個插件 define( [ "jquery" ], factory ); } else { // 浏覽器全局模式 factory( jQuery ); } }(function( $ ) { // 這裡放模塊代碼 return $.widget; }));
改成AMD模塊的結構,讓你的代碼更適於浏覽器端加載腳本依賴,按照這種格式來寫代碼,保證別人一看代碼就知道你是個專業的開發者。
繼承最優法
JavaScript的靈活性,大大小小的繼承方式有十余種之多。每種寫法優缺點各異,各家方法不一一列舉,舉個常用的繼承方法為例,原型繼承:
function Parent() {} function Child() {} Child.prototype = Parent.prototype Child.prototype.constructor = Child ;
這種這種方法實際上是將Child.prototype和Parent.prototype中保存的指針指向了同一個對象,所以子對象原型中擴展一些屬性以便之後繼續繼承的話,父對象的原型也會被改寫。所以為了解決這個問題,嘗試借用一個臨時構造器的寫法:
function Empty(){} Empty.prototype = Parent.prototype; Child.prototype = new Empty(); Child.prototype.constructor = Child;
這樣父對象的自身屬性和原型方法得到保護。“最優”有點誇大,但是是相比較而言的。相信每個人都有自己的寫法,還有借用call和apply實現屬性繼承的優缺點,篇幅有限不一一介紹。
總結
上述所有的JavaScript的另類寫法,一些是為了程序易懂或者效率提高的語法糖,這樣的做法是比較可取的,比如前面所說的省略if-else的做法。一些是為了提升我們代碼的兼容性和性能,比如AMD和繼承的方式。……本人菜鳥一枚,上述內容肯定還有不全和沒解釋透徹的地方以後再補充。
以上內容是針對JavaScript的另類寫法的相關介紹,希望對大家有所幫助!