JavaScript的匿名函數和模塊化的使用方法

6d6d 9年前發布 | 14K 次閱讀 JavaScript開發 JavaScript

對于開發人員來說,很多時候我們都會涉及到 JavaScript 的使用,而在使用過程中,最令人沮喪的就是變量沒有相應的使用范圍。

在開發中,對于任何變量、數組、函數、對象等,只要不在函數的內部,都會被默認為是全局的,意味著頁面上的其他腳本都可以訪問它,并可進行重寫覆蓋。

對于不必要放在函數內部的變量,我們要如何保證不被其他代碼訪問并重寫覆蓋呢?這時就需要將變量放在一個匿名函數的內部,定義完后立即調用,例如,在JavaScript中按如下方式編寫,將會產生三個全局變量和兩個全局函數:

var name = 'Chris';

var age = '34';

var status = 'single';

function createMember(){

// [...]

}

function getMemberDetails(){

// [...]

}

上面這段代碼中,還需注意變量名重復的問題,如果這個頁面其他腳本上也有一個叫status的變量,為了區分,我們可以將它封裝在一個 myApplication 里:

var myApplication = function(){

var name = 'Chris';

var age = '34';

var status = 'single';

function createMember(){

// [...]

}

function getMemberDetails(){

// [...]

}

}();

但是,這樣一來,在函數外面就沒有什么功能了。如果這是你需要的,那就可以了。你還可以省去函數的名稱:

(function(){

var name = 'Chris';

var age = '34';

var status = 'single';

function createMember(){

// [...]

}

function getMemberDetails(){

// [...]

}

})();

如果你想在函數外面也能使用里面的東西,那就要做些修改。為了能訪問 createMember() 或 getMemberDetails(),你需要把它們變成 myApplication的屬性,從而把它們暴露于外部的世界:

var myApplication = function(){

var name = 'Chris';

var age = '34';

var status = 'single';

return{

createMember:function(){

// [...]

},

getMemberDetails:function(){

// [...]

}

}

}();

// myApplication.createMember() and

// myApplication.getMemberDetails() now works.

這被稱作 module 模式或 singleton。但這樣一來需要改變句式來使函數和變量能被外界訪問甚至還需要加上myApplication 這個前綴。者貌似把簡單東西復雜化了,很多開發人員并不喜歡這樣做,而是更愿意簡單的把需要能被外界訪問的元素的指針導出來。這樣做后,反倒簡化了外界調用的寫法:

var myApplication = function(){

var name = 'Chris';

var age = '34';

var status = 'single';

function createMember(){

// [...]

}

function getMemberDetails(){

// [...]

}

return{

create:createMember,

get:getMemberDetails

}

}();

//myApplication.get() and myApplication.create() now work.

以上就是 JavaScript開發 中,匿名函數和模塊化的使用,算是腳本變量使用的一種小技巧,希望能對你在腳本的代碼的開發中有所幫助。

 本文由用戶 6d6d 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!