Douglas Crockford已經(jīng)傳授了一個(gè)有用的單例模式（singleton pattern）實(shí)現(xiàn)此規(guī)則，我認(rèn)為他的模式有益于你基于YUI的那些應(yīng)用。Douglas叫它模塊模式（module pattern）。它是如下工作的：

創(chuàng)建一個(gè)命名空間對(duì)象：如果你使用YUI，可以用YAHOO.namespace()方法： YAHOO.namespace("myProject");這分配了一個(gè)空的myProject對(duì)象，是YAHOO的一個(gè)成員（如 果myProject已存在的話(huà)，則不會(huì)被覆蓋）?，F(xiàn)在我們可以開(kāi)始添加YAHOO.myProject的成員。 
對(duì)你的命名空間對(duì)象分配一個(gè)匿名函數(shù)返回值： 
YAHOO.myProject.myModule = function () {
return  {
  myPublicProperty: "我作為YAHOO.myProject.myModule.myPublicProperty被訪(fǎng)問(wèn)。";
  myPublicMethod: function () {
    YAHOO.log("我作為YAHOO.myProject.myModule.myPublicMethod被訪(fǎng)問(wèn)。");
  }
};
}(); // 這個(gè)括號(hào)導(dǎo)致匿名函數(shù)被執(zhí)行且返回

注意有閉合大括號(hào)和緊接著的括號(hào)()的最后一行—這種符號(hào)導(dǎo)致了匿名函數(shù)的立即執(zhí)行，返回包含myPublicProperty和myPublicMethod的對(duì)象。只要這個(gè)匿名函數(shù)一返回，返回對(duì)象就作為YAHOO.myProject.myModule被訪(fǎng)問(wèn)。 

在匿名函數(shù)中，在返回語(yǔ)句前加入“私有”方法和變量。到目前為止，我們只是將myPublicProperty和myPublicMethod直接分配到Y(jié)AHOO.myProject.myModule中。此外，當(dāng)我們?cè)诜祷卣Z(yǔ)句之前放置一些代碼時(shí)，這個(gè)模式還支持被增加的效用。 
YAHOO.myProject.myModule = function () {
//“私有”變量：
var myPrivateVar = “我僅能在YAHOO.myProject.myModule內(nèi)被訪(fǎng)問(wèn)。”;
//私有方法：
var myPrivateMethod = function () {
    YAHOO.log(”我僅能在YAHOO.myProject.myModule內(nèi)被訪(fǎng)問(wèn)?！?;
}

return  {
    myPublicProperty: “我作為YAHOO.myProject.myModule.myPublicProperty能被訪(fǎng)問(wèn)?！?
    myPublicMethod: function () {
    YAHOO.log(”我作為YAHOO.myProject.myModule.myPublicMethod能被訪(fǎng)問(wèn)。”);
    //在myProject,我能訪(fǎng)問(wèn)私有的變量和方法
    YAHOO.log(myPrivateVar);
    YAHOO.log(myPrivateMethod());
    //myPublicMethod的原生作用域是myProject，我們可以用“this”來(lái)訪(fǎng)問(wèn)公共成員。
    YAHOO.log(this.myPublicProperty);
    }
};
}();
在上面的代碼中，我們從一個(gè)匿名函數(shù)返回有兩個(gè)成員的一個(gè)對(duì)象。在YAHOO.myProject.myModule內(nèi)部，可以分別用this.myPublicProperty和this.myPublicMethod來(lái)訪(fǎng)問(wèn)。在YAHOO.myProject.myModule外部，公共成員可以用YAHOO.myProject.myModule.myPublicProperty和YAHOO.myProject.myModule.myPublicMethod來(lái)訪(fǎng)問(wèn)。
私有變量myPrivateProperty和myPrivateMethod只能被匿名函數(shù)本身或返回對(duì)象的成員訪(fǎng)問(wèn)。盡管匿名函數(shù)會(huì)立即執(zhí)行和終止，但它們依然是保留著，憑借閉包（closure）的力量——通過(guò)一個(gè)函數(shù)的局部變量在這個(gè)函數(shù)返回后是保留的規(guī)則。只要 YAHOO.myProject.myModule需要它們，我們的兩個(gè)私有變量就不會(huì)被銷(xiāo)毀。 

實(shí)踐這個(gè)模式。讓我們來(lái)看看這個(gè)模式的一個(gè)常見(jiàn)應(yīng)用案例。假設(shè)你有一個(gè)列表，列表上的一些項(xiàng)可以被拖拽。應(yīng)用拖拽的項(xiàng)上有拖拽的CSS類(lèi)。 
<!--這個(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í)用程序的私有簡(jiǎn)寫(xiě)引用：
  var yue = YAHOO.util.Event,
  yud = YAHOO.util.Dom;
 //私有方法
  var getListItems = function () {
 // 注意這個(gè)地方使用其他的私有變量，包括"yud"YAHOO.util.Dom的簡(jiǎn)寫(xiě)：
  var elList = yud.get("myList");
  var aListItems = yud.getElementsByClassName(
  "draggable", //得到僅有CSS類(lèi)"draggable"的項(xiàng)
  "li", //僅返回列表項(xiàng)
  elList //限定搜索改元素的子
  );
  return aListItems;
  };
 //這個(gè)放回的對(duì)象將變成YAHOO.myProject.myModule:
  return  {
 aDragObjects: [], //可對(duì)外訪(fǎng)問(wèn)的，存儲(chǔ)DD對(duì)象
 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í)行，所以我們能立即訪(fǎng)問(wèn)init方法：
  YAHOO.myProject.myModule.init();
  </script>
這是一個(gè)簡(jiǎn)單的例子，特意寫(xiě)的詳細(xì)一些——如果按照這種方式做，我們無(wú)疑能把它寫(xiě)的更緊湊。當(dāng)項(xiàng)目變得更加復(fù)雜和它的API增加，這個(gè)模式縮放的很好。通過(guò)這種方式，它避免了全局命名空間，提供了對(duì)外的可以訪(fǎng)問(wèn)的API方法，支持受保護(hù)或“私有”的數(shù)據(jù)和方法。 

[1]原文：《a javascript module pattern》。這是在YUI blog上的，有的地方可能打不開(kāi)，可以搜一下英文的轉(zhuǎn)載或者利用搜索引擎的緩存也能看。 

[2]《A JavaScript Module Pattern - JavaScript的一種模組模式》這是別人的翻譯，參考了不少，不過(guò)感覺(jué)挺不方便看的，這是我翻譯的這篇文章的一個(gè)原因，當(dāng)然最主要的原因是這篇文章算是學(xué)習(xí)YUI的最基礎(chǔ)的文章了，整個(gè)YUI的模塊模式都基于此。 

最新評(píng)論