javascript自執行函數之偽命名空間封裝法

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

下面的代碼在window對象中建立一個命名空間 mySpace，並把自執行函數中的方法封裝在mySpace命名空間之下，以便於我們調用這個自執行函數中的一些功能。 複製代碼 代碼如下:(function() {
//根據id擷取對象
function $(id) { return document.getElementById(id); }

//內建函式，在外層是不可以調用的
function _setStyle(id, styleName, styleValue) {
$(id).style[styleName] = styleValue;
}

//建立偽命名空間
window.mySpace = {};

//將內建函式_setStyle封裝在mySpace命名空間內
//調用時，使用window.mySpace.setStyle(id, styleName, styleValue)
window.mySpace.setStyle = _setStyle;
})();

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

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

當然就是保護了自執行函數內的方法、變數、屬性等。這樣代碼更加安全了。

如果不使用這種方法，那麼，下面的方法也可以實現的。 複製代碼 代碼如下: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");
}

上面的代碼和自執行函數實現的功能其實是一樣的。

比較之後，我們可以發現，第二方法更加的直觀，易於理解。但是少了封裝過程，代碼完全裸露在外。