快捷導航

javascript自執(zhí)行函數(shù)之偽命名空間封裝法

更新時間：2010年12月25日 18:29:11 作者：

比較之后，我們可以發(fā)現(xiàn)，第二方法更加的直觀，易于理解。但是少了封裝過程，代碼完全裸露在外。

自執(zhí)行函數(shù)：自動執(zhí)行的函數(shù)。它在被解釋時就已經(jīng)在運行了。一般函數(shù)都是在被調(diào)用時才會執(zhí)行的。
自執(zhí)行函數(shù)的一般格式：(function() { 函數(shù)體 })();
而且，自執(zhí)行函數(shù)中一般都會有一個function() {}形式的匿名函數(shù)。

下面的代碼在window對象中創(chuàng)建一個命名空間 mySpace，并把自執(zhí)行函數(shù)中的方法封裝在mySpace命名空間之下，以便于我們調(diào)用這個自執(zhí)行函數(shù)中的一些功能。

復制代碼代碼如下:

 
(function() { 
//根據(jù)id獲取對象 
function $(id) { return document.getElementById(id); } 

//內(nèi)部函數(shù)，在外層是不可以調(diào)用的 
function _setStyle(id, styleName, styleValue) { 
$(id).style[styleName] = styleValue; 
} 

//創(chuàng)建偽命名空間 
window.mySpace = {}; 

//將內(nèi)部函數(shù)_setStyle封裝在mySpace命名空間內(nèi) 
//調(diào)用時，使用window.mySpace.setStyle(id, styleName, styleValue) 
window.mySpace.setStyle = _setStyle; 
})(); 

//下面是測試代碼 
window.onload = function() { 
//將id為test的對象的文字顏色設(shè)置為紅色 
window.mySpace.setStyle("test", "color", "#f00"); 
} 

那么這種封裝方式到底有何好處呢？

當然就是保護了自執(zhí)行函數(shù)內(nèi)的方法、變量、屬性等。這樣代碼更加安全了。

如果不使用這種方法，那么，下面的方法也可以實現(xiàn)的。

復制代碼代碼如下:

 
window.mySpace = {}; 
window.mySpace.$ = function(id) { return document.getElementById(id); } 
window.mySpace.setStyle = function(id, styleName, styleValue) { 
window.mySpace.$("test").style[styleName] = styleValue; 
} 
//下面是測試代碼 
window.onload = function() { 
window.mySpace.setStyle("test", "backgroundColor", "#f00"); 
window.mySpace.setStyle("test", "color", "#fff"); 
} 

上面的代碼和自執(zhí)行函數(shù)實現(xiàn)的功能其實是一樣的。

比較之后，我們可以發(fā)現(xiàn)，第二方法更加的直觀，易于理解。但是少了封裝過程，代碼完全裸露在外。

您可能感興趣的文章: