如何寫JavaScript才能(néng)逼格更高呢?怎樣才能(néng)組織JavaScript才能(néng)讓别人一眼看出你不簡單呢?是否很期待别人在看完你的代碼之後(hòu)感歎一句“原來還(hái)可以這(zhè)樣寫”呢?下面(miàn)列出一些在JavaScript時(shí)的技巧。

1. 匿名函數的N種(zhǒng)寫法

你知道(dào)“茴”的四種(zhǒng)寫法嗎?ε=(･д･`*)ﾊｧ… 扯淡，但你或許不知道(dào)匿名函數的好(hǎo)幾種(zhǒng)寫法。一般情況下寫匿名函數是這(zhè)樣的：

(function(){})();

但下面(miàn)幾種(zhǒng)寫法也是可以的：

!function(){}();

+function(){}();

-function(){}();

~function(){}();

~(function(){})();

void function(){}();

(function(){}());

當然，這(zhè)樣的寫法，沒(méi)有什麼(me)區别，純粹逼格程度。

2. 另外一種(zhǒng)undefined

從來不需要聲明一個變量的值是undefined，因爲JavaScript會(huì)自動把一個未賦值的變量置爲undefined。所有如果你在代碼裡(lǐ)這(zhè)麼(me)寫，會(huì)被鄙視的：

var data = undefined;

但是如果你就(jiù)是強迫症發(fā)作，一定要再聲明一個暫時(shí)沒(méi)有值的變量的時(shí)候賦上一個undefined。那你可以考慮這(zhè)麼(me)做：

var data = void 0; // undefined

void在JavaScript中是一個操作符，對(duì)傳入的操作不執行并且返回undefined。void後(hòu)面(miàn)可以跟()來用，例如void(0)，看起(qǐ)來是不是很熟悉?沒(méi)錯，在HTML裡(lǐ)阻止帶href的默認點擊操作時(shí)，都(dōu)喜歡把href寫成(chéng)javascript:void(0)，實際上也是依靠void操作不執行的意思。

當然，除了出于逼格的原因外，實際用途上不太贊成(chéng)使用void，因爲void的出現是爲了兼容早起(qǐ)ECMAScript标準中沒(méi)有undefined屬性。void 0的寫法讓代碼晦澀難懂。

3. 抛棄你的if和else

當JS代碼裡(lǐ)有大量的條件邏輯判斷時(shí)，那代碼看起(qǐ)來多可怕：

if () {

// ...

} else if () {

// ...

} else if () {

// ...

} else {

// ...

}

不用我說(shuō)你都(dōu)猜到用什麼(me)語法來簡化if-else了。沒(méi)錯，用||和&&，很簡單的原理就(jiù)不用說(shuō)啦。值得一提的是，有時(shí)候用!!操作符也能(néng)簡化if-else模式。例如這(zhè)樣：

// 普通的if-else模式

var isValid = false;

if (value && value !== 'error') {

isValid = true;

}

// 使用!!符号

var isValid = !!(value && value !== 'error');

“!”是取反操作，兩(liǎng)個“!”自然是負負得正了。

4. 不加分号

關于JavaScript要不要加分号的争論已經(jīng)吵了好(hǎo)幾年。Google的JavaScript語法指南告訴我們要加分号，很多JavaScript語法書籍也告訴我們加上分号更安全。然而，分号加不加，全靠個人對(duì)代碼的寫法，你确信寫得足夠安全的話，不加分号顯得更加高大上。

5. 趕上ES6的早班車

ES6即將(jiāng)在年底正式發(fā)布，趕時(shí)髦的開(kāi)發(fā)者們，趕快在自己的代碼裡(lǐ)用起(qǐ)來。用上module聲明，寫寫class，搗鼓一下Map，這(zhè)些都(dōu)會(huì)讓你的代碼逼格更高。神馬?你都(dōu)不會(huì)用?那也好(hǎo)歹在代碼頭部加上一個ES5的"use strict";呀。

6. 添加AMD模塊支持

給你寫的代碼聲明一下AMD模塊規範，這(zhè)樣别人就(jiù)可以直接通過(guò)AMD的規範來加載你的模塊了，如果别人沒(méi)有通過(guò)規範來加載你的模塊，你也可以優雅地返回一個常規的全局對(duì)象。來看看jQueryUI的寫法：

(function( factory ) {

if ( typeof define === "function" && define.amd ) {

// AMD. Register as an anonymous module.

define( [ "jquery" ], factory );

} else {

// Browser globals

factory( jQuery );

}

}(function( $ ) {

// 這(zhè)裡(lǐ)放模塊代碼

return $.widget;

}));

就(jiù)用它來包裹你的實際代碼吧，保證别人一看代碼就(jiù)知道(dào)你是個專業的開(kāi)發(fā)者。

7. Function構造函數

很多JavaScript教程都(dōu)告訴我們，不要直接用内置對(duì)象的構造函數來創建基本變量，例如var arr = new Array(2); 的寫法就(jiù)應該用var arr = [1, 2];的寫法來取代。但是，Function構造函數(注意是大寫的Function)有點特别。Function構造函數接受的參數中，第一個是要傳入的參數名，第二個是函數内的代碼(用字符串來表示)。

var f = new Function('a', 'alert(a)');

f('test'); // 將(jiāng)會(huì)彈出窗口顯示test

或許大家疑惑了，你這(zhè)樣繞著(zhe)寫，跟function f(a) {alert(a);}比有什麼(me)好(hǎo)處呢?

事(shì)實上在某種(zhǒng)情況下是有好(hǎo)處的，比如不能(néng)用eval的時(shí)候，你需要傳入字符串内容來創建一個函數的時(shí)候。在一些JavaScript模闆語言的解析，和字符串轉換json對(duì)象的時(shí)候比較實用。

8. 用原生Dom接口不用jQuery

一個傲嬌的前端工程師是不需要jQuery的，前提是你經(jīng)得起(qǐ)折騰。實際上，幾乎所有的jQuery方法都(dōu)可以用同樣的Dom原生接口來實現，因爲這(zhè)貨本來就(jiù)是用原生接口實現的嘛，哈哈。怎樣做到不用jQuery(也叫(jiào)jQuery-free)呢?阮老師的博文《如何做到 jQuery-free?》 給我們很好(hǎo)的講解了做法。依賴于querySelector和querySelectorAll這(zhè)兩(liǎng)個現代浏覽器的接口，可以實現跟jQuery同樣方便和同樣效率的Dom查找，而且其他的類似Ajax和CSS的接口同樣也可以把原生方法做一些兼容方面(miàn)的包裝即可做到jQuery-free。

總結

上述所有的JavaScript逼格寫法，一些是爲了程序易懂或者效率提高的語法糖，這(zhè)樣的做法是比較可取的，比如前面(miàn)所說(shuō)的省略if-else的做法;而有些寫法則容易造成(chéng)代碼晦澀難懂或者效率偏低，例如上面(miàn)說(shuō)的void 0的寫法，實際上不可取。JavaScript語法上靈活，讓大家對(duì)同一個功能(néng)有很多種(zhǒng)不同的寫法，寫法上的優化是對(duì)程序結構和代碼維護有很大幫助的。所以，逼格得裝得好(hǎo)看。