Javascript的一种模块模式

日期：2007年12月10日作者：查看:[大字体中字体小字体]

全局变量是魔鬼。Douglas Crockford已经传授了一个有用的单例模式（singleton pattern）实现此规则，他的模式有益于你基于YUI的那些应用。Douglas叫它模块模式（module pattern）。它是如下工作的：

1. 创建一个命名空间对象：如果你使用YUI，可以用YAHOO.namespace()方法：

以下是引用片段：
YAHOO.namespace("myProject");

这分配了一个空的myProject对象，是YAHOO的一个成员（如果myProject已存在的话，则不会被覆盖）。现在我们可以开始添加YAHOO.myProject的成员。

2. 对你的命名空间对象分配一个匿名函数返回值：

以下是引用片段：
YAHOO.myProject.myModule = function () {
return  {
  myPublicProperty: "我作为YAHOO.myProject.myModule.myPublicProperty被访问。";
  myPublicMethod: function () {
    YAHOO.log("我作为YAHOO.myProject.myModule.myPublicMethod被访问。");
  }
};
}(); // 这个括号导致匿名函数被执行且返回

注意有闭合大括号和紧接着的括号()的最后一行—这种符号导致了匿名函数的立即执行，返回包含myPublicProperty和myPublicMethod的对象。只要这个匿名函数一返回，返回对象就作为YAHOO.myProject.myModule被访问。

3. 在匿名函数中，在返回语句前加入“私有”方法和变量。

此外，当我们在返回语句之前放置一些代码时，这个模式还支持被增加的效用。

在上面的代码中，我们从一个匿名函数返回有两个成员的一个对象。在YAHOO.myProject.myModule内部，可以分别用this.myPublicProperty和this.myPublicMethod来访问。在YAHOO.myProject.myModule外部，公共成员可以用YAHOO.myProject.myModule.myPublicProperty和YAHOO.myProject.myModule.myPublicMethod来访问。

私有变量myPrivateProperty和myPrivateMethod只能被匿名函数本身或返回对象的成员访问。尽管匿名函数会立即执行和终止，但它们依然是保留着，凭借闭包（closure）的力量——通过一个函数的局部变量在这个函数返回后是保留的规则。只要 YAHOO.myProject.myModule需要它们，我们的两个私有变量就不会被销毁。

4. 实践这个模式。让我们来看看这个模式的一个常见应用案例。假设你有一个列表，列表上的一些项可以被拖拽。应用拖拽的项上有拖拽的CSS类。

以下是引用片段：

  <script type="text/javascript"
src="http://yui.yahooapis.com/2.2.2/build/utilities/
utilities.js"></script>
<ul id="myList">
   <li class="draggable">一项</li>
   <li>二项</li> 
   <li class="draggable">三项</li>
   </ul>
<script>
  YAHOO.namespace("myProject");
  YAHOO.myProject.myModule = function () {
//YUI实用程序的私有简写引用：
  var yue = YAHOO.util.Event,
  yud = YAHOO.util.Dom;
//私有方法
  var getListItems = function () {
// 注意这个地方使用其他的私有变量，包括"yud"YAHOO.util.Dom的简写：
  var elList = yud.get("myList");
  var aListItems = yud.getElementsByClassName(

  "draggable", //得到仅有CSS类"draggable"的项
  "li", //仅返回列表项
  elList //限定搜索改元素的子
  );
  return aListItems;
  };
//这个放回的对象将变成YAHOO.myProject.myModule:
  return  {
aDragObjects: [], //可对外访问的，存储DD对象
init: function () {
  //直到DOM完全加载好，才实现列表项可拖拽：
  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]));
  }
  }
};
  }();
//上面的代码已经执行，所以我们能立即访问init方法：
  YAHOO.myProject.myModule.init();
  </script>

这是一个简单的例子，特意写的详细一些——如果按照这种方式做，我们无疑能把它写的更紧凑。当项目变得更加复杂和它的API增加，这个模式缩放的很好。通过这种方式，它避免了全局命名空间，提供了对外的可以访问的API方法，支持受保护或“私有”的数据和方法。

（出处：急速软件下载学院）

Javascript的一种模块模式相关文章：
·把网页保存为图片换种方式收集有用资料
·多个CSS样式表争夺特定选择符的控制权
·轻松方便三招两式抵制IE的顽固病毒
·诺顿杀毒软件正式版用户找回密码的方法
·Photoshop教程图层样式的学习
·下载：Opera 9.25最终正式版
·Web2.0在中国步入歧途缺赢利模式VC有错
·免费绘图软件Paint.NET推出3.2正式版
·Word 2007里就能算算式内置工具使用更方便
·Dreamweaver MX 2004的PPT格式课件
Javascript的一种模块模式相关软件
·行会2之维京霸主－模拟方式免CD补丁
·医院大亨－模拟方式免CD补丁
·《古墓丽影十周年纪念版》正式版地图任我游工具
·《冰封王座》地图:英雄无敌圣战之日V1.07正式版
·《冰封王座》地图：幻想群侠传II-3.86正式版
·《征途》正式版完整客户端下载
·《踢踢球》公测正式版完整客户端
·《Y.A.S.U》v1.3.7070正式版
·《春秋Q传》正式区更新包0.5.18-0.5.22
·暗黑破坏神式战斗《聊斋志异》试玩

上一篇:用Photoshop通道为漂亮MM照片抠图

下一篇:Windows Vista系统自然壁纸欣赏(一)

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

Javascript的一种模块模式

精品推荐

热点TOP10

特别推荐