[javascript]IIFE立即執行的函數運算式

標籤：

　　近況：最近一直忙著找實習沒有更新，不過學習還是在繼續的。最近在寫Node.js又稍帶把javascript的角落知識撿了一遍，過半個月打算去看看python和一些CSS深層的書和部落格。工作找的還好，拿了兩份實習offer，決定好去當小二了。這幾天在看司徒老師的《javascript架構設計》，開篇第一張講種子模組（即核心模組）裡面提到了一個沒見過的縮寫詞IIFE，查了查、看了看。

1.什麼是IIFE

　　IIFE是縮寫，全拼Imdiately Invoked Function Expression，立即執行的函數運算式。

　　這時候可能就容易想起了這種文法：

(function(){    //......})();

　　就是我們平時常寫的匿名函數的立即執行語句。

　　IIFE就是這個，但是不止如此，還有另外的幾種語句格式：+,-,~,！,void。

+function(){    //code 1}();-function(){    //code 2}();!function(){    //code 3}();~function(){    //code 4}();void function(){    //code 5}();(function(){    //code 6})();

　　上面幾個函數雖然格式不同，但是作用是一樣的：使匿名函數立即執行。

　　其中最後一種(function(){//...})()，之前在學js,當時有本書裡稱()為強制運算子。其實不是，js沒有強制運算子這個概念，第一對括弧()即包裹在function外部的作用實際是給js解譯器||引擎提供一種解析方案，提示解譯器該括弧內部包括的是一整體內容。第二個括弧的作用是函數調用執行，但是如果直接通過function(){//....}()或者function A(){//...}();是不能執行的，因為引擎預設在遇到function(){}結構時會認為是函式宣告，最後面的()會被單獨解析，然後就文法報錯了。

　　同理前幾種IIFE語句也是通過一元操作符+-~!變成了函數運算式，目的是為了提示js解析器，告訴js解譯器該運算子附近是一個運算式。

function A(){    //...}();//上面的寫法被解析時等價於function A(){};();    //報錯

　　IIFE方式和正常的先聲明再調用相比較，有如下的特點：

　　1.實現立即執行，不需要先聲明再調用。

　　2.匿名函數自身不汙染全域環境，同時為內部變數提供作用於環境空間。（現在主流的架構都是用這個方式來初始化命名空間的）

　　3.縮寫形參有利於內部代碼的壓縮

　　4.提供閉包環境，可以做閉包想做的事情

(function(w,$){    //內部再次調用window對象和jQuery對象時，可直接使用w和$訪問})(window,jQuery);

　　同時通過傳入全域對象也能使得範圍鏈上變數的尋找變快一點。

　　但是這種方式存在一個“算不上問題”的問題，見過網上提出說這種方式會造成代碼可讀性差

　　雖然這種執行方式看上去很簡單，卻是幾乎所有架構的種子模組的執行函數。（種子模組是架構中最先執行的部分，從功能來講也是這個架構能夠被使用的核心模組。種子模組的主要作用是建立命名空間、搭建基底物件、提供函數拓展、事件綁定、衝突處理等等。IIFE就是架構自執行的“init函數”了。）

2.IIFE幾種語句形式的區別

　　沒啥區別，但是之前看到部落格裡面有人對這個做了下效能對比。找到了測試的原網站http://jsperf.com/iife-different-operator-efficiency，跑了一下，結果。

　　

　　本機是mac，用的chrome41瀏覽器。void格式效果最好，和最差的+直接差了20%。+已經很高效了，所以我覺得沒必要在意那一點差別，畢竟很少需要千萬次調用IIFE格式的函數。後來又跑了一次，發現數值是在微動變化的。所以具體使用哪種就看習慣了。

　　下面是一些主流架構使用的格式：

　　jQuery1.10　　（function(){//...})(window);

　　Bootstrap3       +(function(a){"use strict";//...})(jQuery);

      AmazeUI          !(function(){//...}) 

　　Zepto 　　　　　(function(){//...})();

 

　　IIFE就能寫出來這麼多，沒太多乾貨，隨手記個熱鬧。

[javascript]IIFE立即執行的函數運算式