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