欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript的一種模塊模式

 更新時(shí)間:2010年09月08日 11:23:24   作者:  
全局變量是魔鬼。在YUI中,我們僅用兩個(gè)全局變量:YAHOO和YAHOO_config。YUI的一切都是使用YAHOO對象級的成員或這個(gè)成員作用域內(nèi)的變量。我們建議在你的應(yīng)用程序也使用類似的規(guī)則。
Douglas Crockford已經(jīng)傳授了一個(gè)有用的單例模式(singleton pattern)實(shí)現(xiàn)此規(guī)則,我認(rèn)為他的模式有益于你基于YUI的那些應(yīng)用。Douglas叫它模塊模式(module pattern)。它是如下工作的:
1、創(chuàng)建一個(gè)命名空間對象:如果你使用YUI,可以用YAHOO.namespace()方法: YAHOO.namespace("myProject");這分配了一個(gè)空的myProject對象,是YAHOO的一個(gè)成員(如 果myProject已存在的話,則不會被覆蓋)?,F(xiàn)在我們可以開始添加YAHOO.myProject的成員。
2、對你的命名空間對象分配一個(gè)匿名函數(shù)返回值:
復(fù)制代碼 代碼如下:

YAHOO.myProject.myModule = function () {
return {
myPublicProperty: "我作為YAHOO.myProject.myModule.myPublicProperty被訪問。";
myPublicMethod: function () {
YAHOO.log("我作為YAHOO.myProject.myModule.myPublicMethod被訪問。");
}
};
}(); // 這個(gè)括號導(dǎo)致匿名函數(shù)被執(zhí)行且返回

注意有閉合大括號和緊接著的括號()的最后一行—這種符號導(dǎo)致了匿名函數(shù)的立即執(zhí)行,返回包含myPublicProperty和myPublicMethod的對象。只要這個(gè)匿名函數(shù)一返回,返回對象就作為YAHOO.myProject.myModule被訪問。
3、在匿名函數(shù)中,在返回語句前加入“私有”方法和變量。到目前為止,我們只是將myPublicProperty和myPublicMethod直接分配到Y(jié)AHOO.myProject.myModule中。此外,當(dāng)我們在返回語句之前放置一些代碼時(shí),這個(gè)模式還支持被增加的效用。
復(fù)制代碼 代碼如下:

YAHOO.myProject.myModule = function () {
//“私有”變量:
var myPrivateVar = "我僅能在YAHOO.myProject.myModule內(nèi)被訪問。";
//私有方法:
var myPrivateMethod = function () {
YAHOO.log("我僅能在YAHOO.myProject.myModule內(nèi)被訪問。");
}

return {
myPublicProperty: "我作為YAHOO.myProject.myModule.myPublicProperty能被訪問。"
myPublicMethod: function () {
YAHOO.log("我作為YAHOO.myProject.myModule.myPublicMethod能被訪問。");
//在myProject,我能訪問私有的變量和方法
YAHOO.log(myPrivateVar);
YAHOO.log(myPrivateMethod());
//myPublicMethod的原生作用域是myProject,我們可以用“this”來訪問公共成員。
YAHOO.log(this.myPublicProperty);
}
};
}();

在上面的代碼中,我們從一個(gè)匿名函數(shù)返回有兩個(gè)成員的一個(gè)對象。在YAHOO.myProject.myModule內(nèi)部,可以分別用this.myPublicProperty和this.myPublicMethod來訪問。在YAHOO.myProject.myModule外部,公共成員可以用YAHOO.myProject.myModule.myPublicProperty和YAHOO.myProject.myModule.myPublicMethod來訪問。
私有變量myPrivateProperty和myPrivateMethod只能被匿名函數(shù)本身或返回對象的成員訪問。盡管匿名函數(shù)會立即執(zhí)行和終止,但它們依然是保留著,憑借閉包(closure)的力量——通過一個(gè)函數(shù)的局部變量在這個(gè)函數(shù)返回后是保留的規(guī)則。只要 YAHOO.myProject.myModule需要它們,我們的兩個(gè)私有變量就不會被銷毀。
4、實(shí)踐這個(gè)模式。讓我們來看看這個(gè)模式的一個(gè)常見應(yīng)用案例。假設(shè)你有一個(gè)列表,列表上的一些項(xiàng)可以被拖拽。應(yīng)用拖拽的項(xiàng)上有拖拽的CSS類。
復(fù)制代碼 代碼如下:

<!--這個(gè)腳本文件包含所有的YUI實(shí)用程序-->
<script type="text/javascript"
src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
<ul id="myList">
<li class="draggable">一項(xiàng)</li>
<li>二項(xiàng)</li> <!--二項(xiàng)將不能被拖拽-->
<li class="draggable">三項(xiàng)</li>
</ul>
<script>
YAHOO.namespace("myProject");
YAHOO.myProject.myModule = function () {
//YUI實(shí)用程序的私有簡寫引用:
var yue = YAHOO.util.Event,
yud = YAHOO.util.Dom;
//私有方法
var getListItems = function () {
// 注意這個(gè)地方使用其他的私有變量,包括"yud"YAHOO.util.Dom的簡寫:
var elList = yud.get("myList");
var aListItems = yud.getElementsByClassName(
"draggable", //得到僅有CSS類"draggable"的項(xiàng)
"li", //僅返回列表項(xiàng)
elList //限定搜索改元素的子
);
return aListItems;
};
//這個(gè)放回的對象將變成YAHOO.myProject.myModule:
return {
aDragObjects: [], //可對外訪問的,存儲DD對象
init: function () {
//直到DOM完全加載好,才實(shí)現(xiàn)列表項(xiàng)可拖拽:
yue.onDOMReady(this.makeLIsDraggable, this, true);
},
makeLIsDraggable: function () {
var aListItems = getListItems(); //我們可以拖拽的那些元素
for (var i=0, j=aListItems.length; i<j; i++) {
this.aDragObjects.push(new YAHOO.util.DD(aListItems[i]));
}
}
};
}();
//上面的代碼已經(jīng)執(zhí)行,所以我們能立即訪問init方法:
YAHOO.myProject.myModule.init();
</script>

這是一個(gè)簡單的例子,特意寫的詳細(xì)一些——如果按照這種方式做,我們無疑能把它寫的更緊湊。當(dāng)項(xiàng)目變得更加復(fù)雜和它的API增加,這個(gè)模式縮放的很好。通過這種方式,它避免了全局命名空間,提供了對外的可以訪問的API方法,支持受保護(hù)或“私有”的數(shù)據(jù)和方法。
  • [1]原文:《a javascript module pattern》。這是在YUI blog上的,有的地方可能打不開,可以搜一下英文的轉(zhuǎn)載或者利用搜索引擎的緩存也能看。
  • [2]《A JavaScript Module Pattern – JavaScript的一種模組模式》這是別人的翻譯,參考了不少,不過感覺挺不方便看的,這是我翻譯的這篇文章的一個(gè)原因,當(dāng)然最主要的原因是這篇文章算是學(xué)習(xí)YUI的最基礎(chǔ)的文章了,整個(gè)YUI的模塊模式都基于此。
原文地址:http://dancewithnet.com/2007/12/04/a-javascript-module-pattern/

相關(guān)文章

  • JavaScript實(shí)現(xiàn)旋轉(zhuǎn)圖像的三種方法介紹

    JavaScript實(shí)現(xiàn)旋轉(zhuǎn)圖像的三種方法介紹

    在文檔掃描Web應(yīng)用中,我們需要旋轉(zhuǎn)傾斜的或掃描方向錯(cuò)誤的文檔圖像,這篇文章主要為大家整理了使用JavaScript旋轉(zhuǎn)圖像的三種方法,希望對大家有所幫助
    2024-01-01
  • 談?wù)凧S中的!!

    談?wù)凧S中的!!

    !!一般用來將后面的表達(dá)式強(qiáng)制轉(zhuǎn)換為布爾類型的數(shù)據(jù)(boolean),也就是只能是true或者false。下面看看通過本文給大家介紹了JS中的!!,需要的朋友參考下吧
    2017-12-12
  • ClearTimeout消除閃動實(shí)例代碼

    ClearTimeout消除閃動實(shí)例代碼

    本文給大家介紹ClearTimeout消除閃動相關(guān)知識,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧
    2016-02-02
  • JavaScript實(shí)現(xiàn)滑塊補(bǔ)圖驗(yàn)證碼效果

    JavaScript實(shí)現(xiàn)滑塊補(bǔ)圖驗(yàn)證碼效果

    這篇文章主要給大家介紹了JavaScript如何實(shí)現(xiàn)滑塊補(bǔ)圖驗(yàn)證碼效果,文章通過代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以參考閱讀下
    2023-07-07
  • Javascript單例模式的介紹和實(shí)例

    Javascript單例模式的介紹和實(shí)例

    這篇文章將會介紹Javascript模式中較為常見和實(shí)用的模式——單例模式,主要分為概念和實(shí)例部分。在介紹實(shí)例的同時(shí)也會對代碼中額外的知識點(diǎn)進(jìn)行講解。有需要的朋友們可以參考借鑒。
    2016-10-10
  • 小程序最新獲取用戶昵稱和頭像的方法總結(jié)

    小程序最新獲取用戶昵稱和頭像的方法總結(jié)

    這篇文章主要介紹了小程序最新獲取用戶昵稱和頭像的方法總結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • 相冊展示PhotoSwipe.js插件實(shí)現(xiàn)

    相冊展示PhotoSwipe.js插件實(shí)現(xiàn)

    這篇文章主要為大家詳細(xì)介紹了相冊展示PhotoSwipe.js插件實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-08-08
  • 強(qiáng)悍無比的WEB開發(fā)好助手FireBug(Firefox Plugin)

    強(qiáng)悍無比的WEB開發(fā)好助手FireBug(Firefox Plugin)

    強(qiáng)悍無比的WEB開發(fā)好助手FireBug(Firefox Plugin)...
    2007-01-01
  • Javascript前端經(jīng)典的面試題及答案

    Javascript前端經(jīng)典的面試題及答案

    最近在網(wǎng)上看到了一些關(guān)于Javascript的面試題就整理了下來,希望對有需要的朋友或者自己能有一定的幫助,后續(xù)看到再繼續(xù)補(bǔ)充。下面一起來看看這篇關(guān)于Javascript前端常見的面試題的文章,一起來學(xué)習(xí)學(xué)習(xí)吧。
    2017-03-03
  • js獲取指定的cookie的具體實(shí)現(xiàn)

    js獲取指定的cookie的具體實(shí)現(xiàn)

    使用js獲取cookie或許你會,但是要獲取指定cookie,你會嗎?下面有個(gè)不錯(cuò)的示例,大家可以參考下
    2014-02-02

最新評論