1. 匿名函數(shù)的N種寫(xiě)法
你知道“茴”的四種寫(xiě)法嗎？ε=(?д?｀*)??… 扯淡，但你或許不知道匿名函數(shù)的好幾種寫(xiě)法。一般情況下寫(xiě)匿名函數(shù)是這樣的：
- (function(){})();
- !function(){}();
- +function(){}();
- -function(){}();
- ~function(){}();
- ~(function(){})();
- void function(){}();
- (function(){}());
2. 另外一種undefined
從來(lái)不需要聲明一個(gè)變量的值是undefined，因?yàn)镴avaScript會(huì)自動(dòng)把一個(gè)未賦值的變量置為undefined。所有如果你在代碼里這么寫(xiě)，會(huì)被鄙視的：
- var data = undefined;
- var data = void 0; // undefined
當(dāng)然，除了出于裝逼的原因外，實(shí)際用途上不太贊成使用void，因?yàn)関oid的出現(xiàn)是為了兼容早起ECMAScript標(biāo)準(zhǔn)中沒(méi)有undefined屬性。void 0的寫(xiě)法讓代碼晦澀難懂。
3. 拋棄你的if和else
當(dāng)JS代碼里有大量的條件邏輯判斷時(shí)，那代碼看起來(lái)多可怕：
- if () {
- // ...
- } else if () {
- // ...
- } else if () {
- // ...
- } else {
- // ...
- }
- // 普通的if-else模式
- var isValid = false;
- if (value && value !== 'error') {
- isValid = true;
- }
- // 使用!!符號(hào)
- var isValid = !!(value && value !== 'error');
4. 不加分號(hào)
關(guān)于JavaScript要不要加分號(hào)的爭(zhēng)論已經(jīng)吵了好幾年。Google的JavaScript語(yǔ)法指南告訴我們要加分號(hào)，很多JavaScript語(yǔ)法書(shū)籍也告訴我們加上分號(hào)更安全。然而，分號(hào)加不加，全靠個(gè)人對(duì)代碼的寫(xiě)法，你確信寫(xiě)得足夠安全的話，不加分號(hào)顯得更加高大上。
5. 趕上ES6的早班車(chē)
ES6即將在年底正式發(fā)布，趕時(shí)髦的開(kāi)發(fā)者們，趕快在自己的代碼里用起來(lái)。用上module聲明，寫(xiě)寫(xiě)class，搗鼓一下Map，這些都會(huì)讓你的代碼逼格更高。神馬？你都不會(huì)用？那也好歹在代碼頭部加上一個(gè)ES5的”use strict”;呀。
6. 添加AMD模塊支持
給你寫(xiě)的代碼聲明一下AMD模塊規(guī)范，這樣別人就可以直接通過(guò)AMD的規(guī)范來(lái)加載你的模塊了，如果別人沒(méi)有通過(guò)規(guī)范來(lái)加載你的模塊，你也可以優(yōu)雅地返回一個(gè)常規(guī)的全局對(duì)象。來(lái)看看jQueryUI的寫(xiě)法：
- (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構(gòu)造函數(shù)
很多JavaScript教程都告訴我們，不要直接用內(nèi)置對(duì)象的構(gòu)造函數(shù)來(lái)創(chuàng)建基本變量，例如var arr = new Array(2); 的寫(xiě)法就應(yīng)該用var arr = [1, 2];的寫(xiě)法來(lái)取代。但是，F(xiàn)unction構(gòu)造函數(shù)（注意是大寫(xiě)的Function）有點(diǎn)特別。Function構(gòu)造函數(shù)接受的參數(shù)中，第一個(gè)是要傳入的參數(shù)名，第二個(gè)是函數(shù)內(nèi)的代碼（用字符串來(lái)表示）。
- var f = new Function('a', 'alert(a)'); f('test'); // 將會(huì)彈出窗口顯示test
事實(shí)上在某種情況下是有好處的，比如不能用eval的時(shí)候，你需要傳入字符串內(nèi)容來(lái)創(chuàng)建一個(gè)函數(shù)的時(shí)候。在一些JavaScript模板語(yǔ)言的解析，和字符串轉(zhuǎn)換json對(duì)象的時(shí)候比較實(shí)用。
8. 用原生Dom接口不用jQuery
一個(gè)傲嬌的前端工程師是不需要jQuery的，前提是你經(jīng)得起折騰。實(shí)際上，幾乎所有的jQuery方法都可以用同樣的Dom原生接口來(lái)實(shí)現(xiàn)，因?yàn)檫@貨本來(lái)就是用原生接口實(shí)現(xiàn)的嘛，哈哈。怎樣做到不用jQuery（也叫jQuery-free）呢？阮老師的博文《如何做到 jQuery-free？》 給我們很好的講解了做法。依賴于querySelector和querySelectorAll這兩個(gè)現(xiàn)代瀏覽器的接口，可以實(shí)現(xiàn)跟jQuery同樣方便和同樣效率的Dom查找，而且其他的類(lèi)似Ajax和CSS的接口同樣也可以把原生方法做一些兼容方面的包裝即可做到j(luò)Query-free。
總結(jié)
上述所有的JavaScript裝逼寫(xiě)法，一些是為了程序易懂或者效率提高的語(yǔ)法糖，這樣的做法是比較可取的，比如前面所說(shuō)的省略if-else的做法；而有些寫(xiě)法則容易造成代碼晦澀難懂或者效率偏低，例如上面說(shuō)的void 0的寫(xiě)法，實(shí)際上不可取。JavaScript語(yǔ)法上靈活，讓大家對(duì)同一個(gè)功能有很多種不同的寫(xiě)法，寫(xiě)法上的優(yōu)化是對(duì)程序結(jié)構(gòu)和代碼維護(hù)有很大幫助的。所以，裝逼得裝得好看。
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。