亚洲一区亚洲二区,久久综合电影,视频一二三区

如何寫JavaScript才能逼格更高呢？怎樣才能組織JavaScript才能讓別人一眼看出你不簡單呢？是否很期待別人在看完你的代碼之后感嘆一句“原來還可以這樣寫”呢？下面列出一些在JavaScript時的裝逼技巧。

1. 匿名函數的N種寫法

你知道“茴”的四種寫法嗎？ε=(?д?｀*)??… 扯淡，但你或許不知道匿名函數的好幾種寫法。一般情況下寫匿名函數是這樣的：

(function(){})();

復制代碼

但下面幾種寫法也是可以的：

!function(){}();
+function(){}();
-function(){}();
~function(){}();
~(function(){})();
void function(){}();
(function(){}());

復制代碼

其實細看可以看出規律，因為+-!~這些具有極高的優先級，所以右邊的函數聲明加上括號的部分（實際上就是函數執行的寫法）就直接執行了。當然，這樣的寫法，沒有什么區別，純粹看裝逼程度。

2. 另外一種undefined

從來不需要聲明一個變量的值是undefined，因為JavaScript會自動把一個未賦值的變量置為undefined。所有如果你在代碼里這么寫，會被鄙視的：

var data = undefined;

復制代碼

但是如果你就是強迫癥發作，一定要再聲明一個暫時沒有值的變量的時候賦上一個undefined。那你可以考慮這么做：

var data = void 0; // undefined

復制代碼

void在JavaScript中是一個操作符，對傳入的操作不執行并且返回undefined。void后面可以跟()來用，例如void(0)，看起來是不是很熟悉？沒錯，在HTML里阻止帶href的默認點擊操作時，都喜歡把href寫成javascript:void(0)，實際上也是依靠void操作不執行的意思。

當然，除了出于裝逼的原因外，實際用途上不太贊成使用void，因為void的出現是為了兼容早起ECMAScript標準中沒有undefined屬性。void 0的寫法讓代碼晦澀難懂。

3. 拋棄你的if和else

當JS代碼里有大量的條件邏輯判斷時，那代碼看起來多可怕：

if () {
// ...
} else if () {
// ...
} else if () {
// ...
} else {
// ...
}

復制代碼

不用我說你都猜到用什么語法來簡化if-else了。沒錯，用||和&&，很簡單的原理就不用說啦。值得一提的是，有時候用!!操作符也能簡化if-else模式。例如這樣：

// 普通的if-else模式
var isValid = false;
if (value && value !== 'error') {
isValid = true;
}
// 使用!!符號
var isValid = !!(value && value !== 'error');

復制代碼

“!”是取反操作，兩個“!”自然是負負得正了。

4. 不加分號

關于JavaScript要不要加分號的爭論已經吵了好幾年。Google的JavaScript語法指南告訴我們要加分號，很多JavaScript語法書籍也告訴我們加上分號更安全。然而，分號加不加，全靠個人對代碼的寫法，你確信寫得足夠安全的話，不加分號顯得更加高大上。

5. 趕上ES6的早班車

ES6即將在年底正式發布，趕時髦的開發者們，趕快在自己的代碼里用起來。用上module聲明，寫寫class，搗鼓一下Map，這些都會讓你的代碼逼格更高。神馬？你都不會用？那也好歹在代碼頭部加上一個ES5的”use strict”;呀。

6. 添加AMD模塊支持

給你寫的代碼聲明一下AMD模塊規范，這樣別人就可以直接通過AMD的規范來加載你的模塊了，如果別人沒有通過規范來加載你的模塊，你也可以優雅地返回一個常規的全局對象。來看看jQueryUI的寫法：

(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define( [ "jquery" ], factory );
} else {
// Browser globals
factory( jQuery );
}
}(function( $ ) {
// 這里放模塊代碼
return $.widget;
}));

復制代碼

就用它來包裹你的實際代碼吧，保證別人一看代碼就知道你是個專業的開發者。

7. Function構造函數

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

var f = new Function('a', 'alert(a)'); f('test'); // 將會彈出窗口顯示test

復制代碼

或許大家疑惑了，你這樣繞著寫，跟function f(a) {alert(a);}比有什么好處呢？
事實上在某種情況下是有好處的，比如不能用eval的時候，你需要傳入字符串內容來創建一個函數的時候。在一些JavaScript模板語言的解析，和字符串轉換json對象的時候比較實用。

8. 用原生Dom接口不用jQuery

一個傲嬌的前端工程師是不需要jQuery的，前提是你經得起折騰。實際上，幾乎所有的jQuery方法都可以用同樣的Dom原生接口來實現，因為這貨本來就是用原生接口實現的嘛，哈哈。怎樣做到不用jQuery（也叫jQuery-free）呢？阮老師的博文《如何做到 jQuery-free？》給我們很好的講解了做法。依賴于querySelector和querySelectorAll這兩個現代瀏覽器的接口，可以實現跟jQuery同樣方便和同樣效率的Dom查找，而且其他的類似Ajax和CSS的接口同樣也可以把原生方法做一些兼容方面的包裝即可做到jQuery-free。

總結

上述所有的JavaScript裝逼寫法，一些是為了程序易懂或者效率提高的語法糖，這樣的做法是比較可取的，比如前面所說的省略if-else的做法；而有些寫法則容易造成代碼晦澀難懂或者效率偏低，例如上面說的void 0的寫法，實際上不可取。JavaScript語法上靈活，讓大家對同一個功能有很多種不同的寫法，寫法上的優化是對程序結構和代碼維護有很大幫助的。所以，裝逼得裝得好看。

【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。

pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

教你如何塑造JavaScript牛逼形象

相關文檔推薦