文章分类 | 推荐文章 | 最新文章 | 热点文章 | 最新软件 | 精品软件 | 下载排行 | 推荐下载 | WPS | 杀毒软件
清风网络
首 页 软件下载 网络学院
QQ 电脑入门 游戏 操作系统 图形处理 办公软件 媒体动画 精文荟萃 工具软件 网络编程 程序开发 网络技术 认证考试 网站建设 文章专栏
当前位置:清风网络网络编程ScriptJavascript的一种模块模式
精品推荐
特别推荐
·主页javascript特效19则
·各种网页媒体播放器代码及详解
·用户体验:JS实现仿新浪信息提示效果
·网页特效:图片随机显示实例详解
·JavaScript入门学习书籍的阶段选择
·Javascript代码轻松隐藏网页源文件
·网页制作:JavaScript仿Windows关机效果
·网页制作Javascript经典小技巧总结
热点TOP10
·vbscript - vbscript.dll - Process Information
·JavaScript[对象.属性]集锦
·用vbscript实现将脚本的输出复制到剪贴板
·用vbscript实现在文本文件中搜索两个项
·学习JavaScript的事件
·JavaScript Dom编程:介绍学习书籍
·JavaScript入门学习书籍的阶段选择
·基于javascript的拼音字典及应用举例

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类。

以下是引用片段:
<!--这个脚本文件包含所有的YUI实用程序-->
  <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方法,支持受保护或“私有”的数据和方法。





上一篇:Windows Vista操作系统八大鸡肋功能

下一篇:.NET中取得IP/用户名等信息常用方法
相关文章:
·QQ空间劲舞模块-明星劲舞
·QQ空间模块:太委屈
·QQ空间模块:无尽的爱
·IE和Firefox在JavaScript方面的兼容性
·Javascript对象
·用于Cisco 2600XM/2691/2800/3700/3800的高密度数字话音/传真网络模块
·一种分级WFQ的宽带无线接入系统QoS架构
相关软件:
·混也是一种生活
·狡猾是一种冒险
·悲愤是一种病
·世界跨国公司经营模式
·ASP.NET下MVC设计模式的实现
·Java软件构架设计模式
·Cisco模块介绍

特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源:http://www.viphot.com
| 帮助(?) | 版权声明 | 友情连接 | 关于我们 | 信息发布
Copyright 2007 www.viphot.com All Rights Reserved. 鄂ICP备05000083号Powered by:viphot