模塊化：為了提高JS代碼的長期可讀性，易維護(hù)性，將JS代碼根據(jù)其對應(yīng)的功能塊區(qū)分成不同的JS文件，并將其包裹在立即執(zhí)行函數(shù)內(nèi)，從而使其中的變量設(shè)定為局部變量，不會造成不同模塊的變量污染。

?

立即執(zhí)行函數(shù)
在 Javascript 中，圓括號()是一種運(yùn)算符，跟在函數(shù)名之后，表示調(diào)用該函數(shù)。比如，print()就表示調(diào)用print函數(shù)。
有時，我們需要在定義函數(shù)之后，立即調(diào)用該函數(shù)。這時，你不能在函數(shù)的定義之后加上圓括號，這會產(chǎn)生語法錯誤。

產(chǎn)生這個錯誤的原因是，function這個關(guān)鍵字即可以當(dāng)作語句，也可以當(dāng)作表達(dá)式。

為了避免解析上的歧義，JavaScript 引擎規(guī)定，如果function關(guān)鍵字出現(xiàn)在行首，一律解釋成語句。因此，JavaScript引擎看到行首是function關(guān)鍵字之后，認(rèn)為這一段都是函數(shù)的定義，不應(yīng)該以圓括號結(jié)尾，所以就報(bào)錯了。
解決方法就是不要讓function出現(xiàn)在行首，讓引擎將其理解成一個表達(dá)式。最簡單的處理，就是將其放在一個圓括號里面。

上面兩種寫法都是以圓括號開頭，引擎就會認(rèn)為后面跟的是一個表示式，而不是函數(shù)定義語句，所以就避免了錯誤。這就叫做“立即調(diào)用的函數(shù)表達(dá)式”（Immediately-Invoked Function Expression），簡稱 IIFE。
注意，上面兩種寫法最后的分號都是必須的。如果省略分號，遇到連著兩個 IIFE，可能就會報(bào)錯。
推而廣之，任何讓解釋器以表達(dá)式來處理函數(shù)定義的方法，都能產(chǎn)生同樣的效果，比如下面三種寫法。

甚至像下面這樣寫，也是可以的。

通常情況下，只對匿名函數(shù)使用這種“立即執(zhí)行的函數(shù)表達(dá)式”。它的目的有兩個：一是不必為函數(shù)命名，避免了污染全局變量；二是 IIFE 內(nèi)部形成了一個單獨(dú)的作用域，可以封裝一些外部無法讀取的私有變量。

?

如何使用立即執(zhí)行函數(shù)

ES 5 里面，只有函數(shù)有局部變量，于是我們聲明一個 function xxx，然后 xxx.call() 這個時候 xxx 是全局變量（全局函數(shù)）。

所以我們不能給這個函數(shù)名字 function(){}.call() 但是 Chrome 報(bào)錯，語法錯誤。

經(jīng)過嘗試得到幾種方法可以不報(bào)錯:

!function(){}.call()? 【我們不在乎這個匿名函數(shù)的返回值，所以加個 ! 取反沒關(guān)系】

(function(){}).call()? xxx? (function(){}).call()? 【如果(fn).call前誤寫xxx，會導(dǎo)致意外函數(shù)執(zhí)行，不推薦】

frank192837192463981273912873098127912378.call() 【冗長繁雜，不推薦】

?

閉包的應(yīng)用

當(dāng)我們通過模塊化我們的JS代碼文件后，立即執(zhí)行函數(shù)使得我們的模塊文件無法被外部訪問。

那么，如果遇到A模塊需要引用B模塊的變量時，我們可以通過將xxx變量添加到window的屬性下，然后在另一個模塊中也同樣將window.xxx的地址賦值給xxx，這樣就可實(shí)現(xiàn)模塊數(shù)據(jù)溝通。

如果需要隱藏?cái)?shù)據(jù)的細(xì)節(jié)，實(shí)現(xiàn)訪問控制，那么我們還可以通過閉包，使得B模塊可以操作由A模塊里的變量構(gòu)造的函數(shù)，但無法訪問A模塊里的變量數(shù)據(jù)

!function(){var dinner = {main: noodle;guests : 2}window.guestsIncrease = function(){numeber += 1return number} }.call()

?

當(dāng)然我們也可以不使用window全局變量，通過自己設(shè)置的局部變量實(shí)現(xiàn)。本質(zhì)上都是一樣的將這個匿名函數(shù)的引用通過閉包保存起來，然后立即執(zhí)行。

?

var accessor = function(){var dinner = {main: noodle;guests : 2}return function(){numeber += 1return number} }// B模塊 var increase = accessor.call() increase.call()

　　

轉(zhuǎn)載于:https://www.cnblogs.com/65Seeker/p/10256643.html

總結(jié)

以上是生活随笔為你收集整理的【JavaScript基础笔记】模块化、立即执行函数应用、闭包应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。