您当前的位置: 首页 > 前端教程 > HTML教程 > Javascript的一种模块模式

Javascript的一种模块模式

作者:不详 来源:网络 发布时间: 2010-09-24 18:08 点击:
在YUI中,我们仅用两个全局变量:YAHOO和YAHOO_config。YUI的一切都是使用YAHOO对象级的成员或这个成员作用域内的变量。我们建议在你的应用程序也使用类似的规则。 DouglasCrockford已经传授了一个有用的单例模式(singletonpattern)实现此规则,我认为他的模式有益于

Javascript的一种模块模式

  在YUI中,我们仅用两个全局变量:YAHOO和YAHOO_config。YUI的一切都是使用YAHOO对象级的成员或这个成员作用域内的变量。我们建议在你的应用程序也使用类似的规则。
  
  DouglasCrockford已经传授了一个有用的单例模式(singletonpattern)实现此规则,我认为他的模式有益于你基于YUI的那些应用。Douglas叫它模块模式(modulepattern)。它是如下工作的:
  
  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.在匿名函数中,在返回语句前加入“私有”方法和变量。到目前为止,我们只是将myPublicProperty和myPublicMethod直接分配到YAHOO.myProject.myModule中。此外,当我们在返回语句之前放置一些代码时,这个模式还支持被增加的效用。
  
  YAHOO.myProject.myModule=function(){
  
  //“私有”变量:
  
  varmyPrivateVar=“我仅能在YAHOO.myProject.myModule内被访问。”;
  
  //私有方法:
  
  varmyPrivateMethod=function(){
  
  YAHOO.log(”我仅能在YAHOO.myProject.myModule内被访问。”);
  
  }
  
  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);
  
  }
  
  };
  
  }();
  
  在上面的代码中,我们从一个匿名函数返回有两个成员的一个对象。在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实用程序-->
  
  <scripttype="text/javascript"
  
  src="http://yui.yahooapis.com/2.2.2/build/utilities/
  
  utilities.js"></script>
  
  <ulid="myList">
  
  <liclass="draggable">一项</li>
  
  <li>二项</li><!--二项将不能被拖拽-->
  
  <liclass="draggable">三项</li>
  
  </ul>
  
  <script>
  
  YAHOO.namespace("myProject");
  
  YAHOO.myProject.myModule=function(){
  
  //YUI实用程序的私有简写引用:
  
  varyue=YAHOO.util.Event,
  
  yud=YAHOO.util.Dom;
  
  //私有方法
  
  vargetListItems=function(){
  
  //注意这个地方使用其他的私有变量,包括"yud"YAHOO.util.Dom的简写:
  
  varelList=yud.get("myList");
  
  varaListItems=yud.getElementsByClassName(
  
  "draggable",//得到仅有CSS类"draggable"的项
  
  "li",//仅返回列表项
  
  elList//限定搜索改元素的子
  
  );
  
  returnaListItems;
  
  };
  
  //这个放回的对象将变成YAHOO.myProject.myModule:
  
  return{
  
  aDragObjects:[],//可对外访问的,存储DD对象
  
  init:function(){
  
  //直到DOM完全加载好,才实现列表项可拖拽:
  
  yue.onDOMReady(this.makeLIsDraggable,this,true);
  
  },
  
  makeLIsDraggable:function(){
  
  varaListItems=getListItems();//我们可以拖拽的那些元素
  
  for(vari=0,j=aListItems.length;i<j;i++){
  
  this.aDragObjects.push(newYAHOO.util.DD(aListItems[i]));
  
  }
  
  }
  
  };
  
  }();
  
  //上面的代码已经执行,所以我们能立即访问init方法:
  
  YAHOO.myProject.myModule.init();
  
  </script>
  
  这是一个简单的例子,特意写的详细一些——如果按照这种方式做,我们无疑能把它写的更紧凑。当项目变得更加复杂和它的API增加,这个模式缩放的很好。通过这种方式,它避免了全局命名空间,提供了对外的可以访问的API方法,支持受保护或“私有”的数据和方法。

分享到:
本文"Javascript的一种模块模式"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4