IIFE

博客分類：

• ?
• 前端開發

• 介紹IIFE
• IIFE的性能
• 使用IIFE的好處
• IIFE最佳實踐
• jQuery優化

?

在Bootstrap源碼(具體請看《Bootstrap源碼解析》)和其他jQuery插件經常看到如下的寫法：?

Js代碼??

+function?($)?{???

??

}(window.jQuery);??

?這種寫法稱為：

IIFE?（Imdiately Invoked Function Expression 立即執行的函數表達式）。

?

一步步來分析這段代碼。?

?

先弄清?函數表達式（function expression）和 函數聲明（function declaration）的區別：

函數表達式 ?Function Expression - var test = function() {};?

函數申明 ? ? Function Declaration - function test() {};

?

函數表達式中的函數可以為匿名函數，也可以有函數名，但是該函數實際上不能直接使用，只能通過表達式左邊的變量 a 來調用。?

Js代碼??

var?a?=?function(){??

??alert('Function?expression');??

}??

var?b?=?new?a();??

??

函數聲明時必須有函數名。?

Js代碼??

function?a(){??

??alert('Function?declaration');??

}??

a();??

??

這是一個匿名函數。

Js代碼??

function?()?{??

??

}??

?你也許注意到匿名函數在console下會報錯。console的執行和報錯如下：

?function(){}

SyntaxError: Unexpected token (

?

通過一元操作符+變成了函數表達式。也可以使用 - ~ ！等其他一元運算符或者括號，目的是為了引導解析器，指明運算符附近是一個表達式。以下是三種經典方式 ：

Js代碼??

+function?()?{???

??

};??

??

(function?()?{??

??

});??

??

void?function()?{??

??

};??

?

函數表達式通過 末尾的() 來調用并運行。就是一個IIFE。

Js代碼??

+function?()?{???

??

}();??

??

(funtion?()?{??

??

})();??

?

代碼性能

運算符：+加-減!邏輯非~位取反，返回NaN(Not A Number)。

?
“()”組運算符：返回表達式的執行結果undefined。

?

void：按運算符結合語句執行，返回 undefined。
這幾種的性能對比結果：

?

?可見+性能最差（在Firefox下差距更明顯），其他幾種都差不多。不過IIFE只執行一遍，對js執行效率的影響特別小，使用哪種還是看個人愛好。

?

傳參，為了避免$與其他庫或者模板申明沖突，window.jQuery?作為參數傳遞。

Js代碼??

+function?(x)?{??

????console.log(x);??

}(3);??

??

+function?($)?{??

??

}(window.jQuery);???

?

?

使用IIFE的好處

?

總結有4點：提升性能、有利于壓縮、避免沖突、依賴加載

?

1、減少作用域查找。使用IIFE的一個微小的性能優勢是通過匿名函數的參數傳遞常用全局對象window、document、jQuery，在作用域內引用這些全局對象。JavaScript解釋器首先在作用域內查找屬性，然后一直沿著鏈向上查找，直到全局范圍。將全局對象放在IIFE作用域內提升js解釋器的查找速度和性能。

?

傳遞全局對象到IIFE的一段代碼示例：

Js代碼??

//?Anonymous?function?that?has?three?arguments??

function(window,?document,?$)?{??

??

??//?You?can?now?reference?the?window,?document,?and?jQuery?objects?in?a?local?scope??

??

}(window,?document,?window.jQuery);?//?The?global?window,?document,?and?jQuery?objects?are?passed?into?the?anonymous?function??

?

2、有利于壓縮。另一個微小的優勢是有利于代碼壓縮。既然通過參數傳遞了這些全局對象，壓縮的時候可以將這些全局對象匿名為一個字符的變量名（只要這個字符沒有被其他變量使用過）。如果上面的代碼壓縮后會變成這樣：

Js代碼??

//?Anonymous?function?that?has?three?arguments??

function(w,?d,?$)?{??

??

??//?You?can?now?reference?the?window,?document,?and?jQuery?objects?in?a?local?scope??

??

}(window,?document,?window.jQuery);?//?The?global?window,?document,?and?jQuery?objects?are?passed?into?the?anonymous?function??

?

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代碼??

$(function()?{??

??

???var?editor??

????KindEditor.ready(function(K)?{??

??

????????editor?=?K.create('textarea[data-name="kindeditor"]',?{??

????????????resizeType?:?1??

????????})??

????})??

??

})??

?

b頁面不需要使用Kindeditor，沒有引入kindeditor.js。但是在合并JS代碼后，b頁面也會執行a.js中的代碼，頁面報錯Uncaught ReferenceError: KindEditor is not defined。也就是b頁面執行了KindEditor，難道所有頁面都要加載Kindeditor源文件？?

可以這么修改a.js，將KindEditor變量參數化，通過給立即執行的函數表示式的參數賦值，那么其他頁面都不需要加載Kindeditor源文件

Js代碼??

+function(?KindEditor){??

??

????var?editor??

????if(KindEditor){??

????????KindEditor.ready(function(K)?{??

??

????????????editor?=?K.create('textarea[data-name="kindeditor"]',?{??

????????????resizeType?:?1??

????????????})??

????????})??

????}??

??

}(KindEditor?||?undefined)??

??

IIFE最佳實踐

反對使用IIFE的其中一個理由是可讀性差，如果你有大量的JavaScript代碼都在一段IIFE里，要是想查找IIFE傳遞的實際參數值，必須要滾動到代碼最后。幸運的是，你可以使用一個更可讀的模式：

Js代碼??

(function?(library)?{??

??

????//?Calls?the?second?IIFE?and?locally?passes?in?the?global?jQuery,?window,?and?document?objects??

????library(window,?document,?window.jQuery);??

??

}??

??

//?Locally?scoped?parameters???

(function?(window,?document,?$)?{??

??

//?Library?code?goes?here??

??

}));??

?

這種IIFE模式清晰的展示了傳遞了哪些全局對象到你的IIFE中，不需要滾動到長文檔的最后。

?

jQuery優化

一段看上去寫法有點像的代碼。大部分項目用這段代碼做作用域，這段代碼會在DOM加載完成時初始化jQuery代碼。

Js代碼??

$(function(){???

??

});???

?

這種寫法等同于?

Js代碼??

$(document).ready(function(){??

//?在DOM加載完成時初始化jQuery代碼。??

});??

區別于 Js代碼??

$(window).load(function(){??

//?在圖片等媒體文件加載完成時，初始化jQuery代碼。??

});??

???

?結合IIFE的最佳實踐，更好的寫法是，立即執行document ready

Js代碼??

+function?($)?{??

??

??$(function(){??

??

??})??

??

}(window.jQuery)??

最佳實踐

Js代碼??

//?IIFE?-?Immediately?Invoked?Function?Expression??

??+function(yourcode)?{??

??

????//?The?global?jQuery?object?is?passed?as?a?parameter??

????yourcode(window.jQuery,?window,?document);??

??

??}(function($,?window,?document)?{??

??

????//?The?$?is?now?locally?scoped???

??

???//?Listen?for?the?jQuery?ready?event?on?the?document??

???$(function()?{??

??

?????//?The?DOM?is?ready!??

??

???}));??

?具體請看工程師，請優化你的代碼

?

?

其他

?在Bootstrap和其他插件中經常看到如下寫法：

?

Js代碼??

+function?($)?{?"use?strict";????

????

}(window.jQuery); ?

轉載于:https://www.cnblogs.com/xiezhi/p/5653130.html

總結

以上是生活随笔為你收集整理的JS IIFE写法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。