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");
}
那么這種封裝方式到底有何好處呢？
當(dāng)然就是保護了自執(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)，第二方法更加的直觀，易于理解。但是少了封裝過程，代碼完全裸露在外。
自執(zhí)行函數(shù)的一般格式：(function() { 函數(shù)體 })();
而且，自執(zhí)行函數(shù)中一般都會有一個function() {}形式的匿名函數(shù)。
下面的代碼在window對象中創(chuàng)建一個命名空間 mySpace，并把自執(zhí)行函數(shù)中的方法封裝在mySpace命名空間之下，以便于我們調(diào)用這個自執(zhí)行函數(shù)中的一些功能。
復(fù)制代碼 代碼如下:
(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");
}
那么這種封裝方式到底有何好處呢？
當(dāng)然就是保護了自執(zhí)行函數(shù)內(nèi)的方法、變量、屬性等。這樣代碼更加安全了。
如果不使用這種方法，那么，下面的方法也可以實現(xiàn)的。
復(fù)制代碼 代碼如下:
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)，第二方法更加的直觀，易于理解。但是少了封裝過程，代碼完全裸露在外。
相關(guān)文章
JavaScript下通過的XMLHttpRequest發(fā)送請求的代碼
JavaScript下通過的XMLHttpRequest發(fā)送請求的代碼，需要的朋友可以參考下。2011-06-06
js找出5個數(shù)中最大的一個數(shù)和倒數(shù)第二大的數(shù)實現(xiàn)方法示例小結(jié)
這篇文章主要介紹了js找出5個數(shù)中最大的一個數(shù)和倒數(shù)第二大的數(shù)實現(xiàn)方法,結(jié)合實例形式總結(jié)分析了JavaScript數(shù)組遍歷、排序、判斷、比較等相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了JavaScript?中的運算符和表達式介紹，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
JS實現(xiàn)圖片元素轉(zhuǎn)BASE64編碼的簡單示例
在Web開發(fā)中,我們經(jīng)常需要將圖片轉(zhuǎn)換為Base64格式,以便在不依賴外部資源的情況下直接在HTML中使用,在這篇文章中,我將向您展示如何使用JavaScript將圖片元素轉(zhuǎn)BASE64編碼,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了完美實現(xiàn)仿QQ空間評論回復(fù)特效，非常的實用，附上實例代碼給大家，有需要的小伙伴參考下吧。2015-05-05
layui添加動態(tài)菜單與選項卡 AJAX請求的例子
今天小編就為大家分享一篇layui添加動態(tài)菜單與選項卡 AJAX請求的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
Vue2.0+ElementUI實現(xiàn)表格翻頁的實例
下面小編就為大家?guī)硪黄猇ue2.0+ElementUI實現(xiàn)表格翻頁的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要給大家介紹了關(guān)于Echarts?3D散點圖的相關(guān)資料, Echarts散點圖是一種常用的數(shù)據(jù)可視化圖表類型,用于展示兩個或多個維度的數(shù)據(jù)分布情況,需要的朋友可以參考下2023-11-11
B/S開發(fā)中常用javaScript技術(shù)與代碼
B/S開發(fā)中常用javaScript技術(shù)與代碼...2007-03-03
在日常編碼中,我們通常關(guān)注代碼的邏輯和功能,但很少深入思考編譯器在幕后的工作,今天我們將學(xué)習(xí)一下LHS（Left-Hand Side）和RHS（Right-Hand Side）查詢,它們在JavaScript編譯和執(zhí)行中的關(guān)鍵作用,以及在我們的日常開發(fā)中是如何發(fā)揮作用的,需要的朋友可以參考下2023-11-11