javascript自執(zhí)行函數(shù)之偽命名空間封裝法
自執(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),第二方法更加的直觀,易于理解。但是少了封裝過(guò)程,代碼完全裸露在外。
相關(guān)文章
JS?中數(shù)組的增刪改查和對(duì)象的增刪改查實(shí)例詳解
這篇文章主要介紹了JS?中數(shù)組的增刪改查和對(duì)象的增刪改查實(shí)例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07微信小程序骨架屏的應(yīng)用與實(shí)現(xiàn)步驟詳細(xì)記錄
所謂骨架屏就是在頁(yè)面數(shù)據(jù)尚未加載前先給用戶展示出頁(yè)面的大致結(jié)構(gòu),直到請(qǐng)求數(shù)據(jù)返回后再渲染頁(yè)面,補(bǔ)充進(jìn)需要顯示的數(shù)據(jù)內(nèi)容,這篇文章主要給大家介紹了關(guān)于微信小程序骨架屏的應(yīng)用與實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-05-05關(guān)于JavaScript遞歸經(jīng)典案例題詳析
遞歸是算法中一個(gè)重要的解法,因此,有必要單拎出來(lái)講講,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript遞歸經(jīng)典案例題的相關(guān)資料,需要的朋友可以參考下2021-07-07CKEditor 4.4.1 添加代碼高亮顯示插件功能教程【使用官方推薦Code Snippet插件】
這篇文章主要介紹了CKEditor 4.4.1 添加代碼高亮顯示插件功能,涉及ckeditor使用官方推薦Code Snippet插件的相關(guān)操作布局與使用注意事項(xiàng),需要的朋友可以參考下2019-06-06利用JS定時(shí)器實(shí)現(xiàn)元素移動(dòng)
這篇文章主要為大家詳細(xì)介紹了利用JS定時(shí)器實(shí)現(xiàn)元素移動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05js浮點(diǎn)數(shù)精確計(jì)算(加、減、乘、除)
本篇文章主要介紹了js浮點(diǎn)數(shù)精確計(jì)算(加、減、乘、除) 需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12JavaScript編程開(kāi)發(fā)中的五個(gè)實(shí)用小技巧
下面的5點(diǎn)說(shuō)明確實(shí)不錯(cuò),提高性能與可讀性,大家可以根據(jù)需要選擇使用。2010-07-07微信小程序?qū)崿F(xiàn)選項(xiàng)卡的簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)選項(xiàng)卡的簡(jiǎn)單實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07IE中直接運(yùn)行顯示當(dāng)前網(wǎng)頁(yè)中的圖片 推薦
IE中直接運(yùn)行顯示當(dāng)前網(wǎng)頁(yè)中的圖片 推薦...2006-08-08