javascript
JS IIFE写法
IIFE
博客分類：- ?
- 前端開發
- 介紹IIFE
- IIFE的性能
- 使用IIFE的好處
- IIFE最佳實踐
- jQuery優化
?
在Bootstrap源碼(具體請看《Bootstrap源碼解析》)和其他jQuery插件經常看到如下的寫法：?
Js代碼???這種寫法稱為：
IIFE?（Imdiately Invoked Function Expression 立即執行的函數表達式）。
?
一步步來分析這段代碼。?
?
先弄清?函數表達式（function expression）和 函數聲明（function declaration）的區別：
函數表達式 ?Function Expression - var test = function() {};?
函數申明 ? ? Function Declaration - function test() {};
?
函數表達式中的函數可以為匿名函數，也可以有函數名，但是該函數實際上不能直接使用，只能通過表達式左邊的變量 a 來調用。?
Js代碼????
函數聲明時必須有函數名。?
Js代碼????
這是一個匿名函數。
Js代碼???你也許注意到匿名函數在console下會報錯。console的執行和報錯如下：
?function(){}
SyntaxError: Unexpected token (?
通過一元操作符+變成了函數表達式。也可以使用 - ~ ！等其他一元運算符或者括號，目的是為了引導解析器，指明運算符附近是一個表達式。以下是三種經典方式 ：
Js代碼???
函數表達式通過 末尾的() 來調用并運行。就是一個IIFE。
Js代碼???
代碼性能
運算符：+加-減!邏輯非~位取反，返回NaN(Not A Number)。
?
“()”組運算符：返回表達式的執行結果undefined。
?
void：按運算符結合語句執行，返回 undefined。
這幾種的性能對比結果：
?
?可見+性能最差（在Firefox下差距更明顯），其他幾種都差不多。不過IIFE只執行一遍，對js執行效率的影響特別小，使用哪種還是看個人愛好。
?
傳參，為了避免$與其他庫或者模板申明沖突，window.jQuery?作為參數傳遞。
Js代碼???
?
使用IIFE的好處
?
總結有4點：提升性能、有利于壓縮、避免沖突、依賴加載
?
1、減少作用域查找。使用IIFE的一個微小的性能優勢是通過匿名函數的參數傳遞常用全局對象window、document、jQuery，在作用域內引用這些全局對象。JavaScript解釋器首先在作用域內查找屬性，然后一直沿著鏈向上查找，直到全局范圍。將全局對象放在IIFE作用域內提升js解釋器的查找速度和性能。
?
傳遞全局對象到IIFE的一段代碼示例：
Js代碼???
2、有利于壓縮。另一個微小的優勢是有利于代碼壓縮。既然通過參數傳遞了這些全局對象，壓縮的時候可以將這些全局對象匿名為一個字符的變量名（只要這個字符沒有被其他變量使用過）。如果上面的代碼壓縮后會變成這樣：
Js代碼???
3、避免全局命名沖突。當使用jQuery的時候，全局的window.jQuery對象 作為一個參數傳遞給$，在匿名函數內部你再也不需要擔心$和其他庫或者模板申明沖突。?正如James padolsey所說：
An IIFE protects a module’s scope from the environment in which it is placed.
?
4、通過傳參的方式，可以靈活的加載第三方插件。（當然使用模塊化加載更好，這里不考慮。）舉個例子，如果a頁面需要使用KindEditor，a.html引入kindeditor.js 和 a.js
你可能會這么寫 a.js：?
Js代碼???
b頁面不需要使用Kindeditor，沒有引入kindeditor.js。但是在合并JS代碼后，b頁面也會執行a.js中的代碼，頁面報錯Uncaught ReferenceError: KindEditor is not defined。也就是b頁面執行了KindEditor，難道所有頁面都要加載Kindeditor源文件？?
可以這么修改a.js，將KindEditor變量參數化，通過給立即執行的函數表示式的參數賦值，那么其他頁面都不需要加載Kindeditor源文件
Js代碼????
IIFE最佳實踐
反對使用IIFE的其中一個理由是可讀性差，如果你有大量的JavaScript代碼都在一段IIFE里，要是想查找IIFE傳遞的實際參數值，必須要滾動到代碼最后。幸運的是，你可以使用一個更可讀的模式：
Js代碼???
這種IIFE模式清晰的展示了傳遞了哪些全局對象到你的IIFE中，不需要滾動到長文檔的最后。
?
jQuery優化
一段看上去寫法有點像的代碼。大部分項目用這段代碼做作用域，這段代碼會在DOM加載完成時初始化jQuery代碼。
Js代碼???
這種寫法等同于?
Js代碼???結合IIFE的最佳實踐，更好的寫法是，立即執行document ready
Js代碼??最佳實踐
Js代碼???具體請看工程師，請優化你的代碼
?
?
其他
?在Bootstrap和其他插件中經常看到如下寫法：
?
Js代碼??轉載于:https://www.cnblogs.com/xiezhi/p/5653130.html
總結
- 上一篇： C语言面试题汇总（持续更）「建议收藏」
- 下一篇： JavaScript判断一个变量是对象还