Javascript的一种模块模式

mvp小俊

mvp小俊

2016-02-20 00:33

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的Javascript的一种模块模式,希望大家看完后能赶快学习起来。

秦歌(YanKaven) 的站点:http://dancewithnet.com/

全局变量是魔鬼。在YUI中,我们仅用两个全局变量:YAHOO和YAHOO_config。YUI的一切都是使用YAHOO对象级的成员或这个成员作用域内的变量。我们建议在你的应用程序也使用类似的规则。

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. 在匿名函数中,在返回语句前加入私有方法和变量。到目前为止,我们只是将myPublicProperty和myPublicMethod直接分配到YAHOO.myProject.myModule中。此外,当我们在返回语句之前放置一些代码时,这个模式还支持被增加的效用。

在上面的代码中,我们从一个匿名函数返回有两个成员的一个对象。在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; ij; i++) {
  this.aDragObjects.push(new YAHOO.util.DD(aListItems[i]));
  }
  }
 };
  }();
//上面的代码已经执行,所以我们能立即访问init方法:
  YAHOO.myProject.myModule.init();
  /script

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)原文:《a javascript module pattern》。这是在YUI blog上的,有的地方可能打不开,可以搜一下英文的转载或者利用搜索引擎的缓存也能看。 《A JavaScript Module Pattern - JavaScript的一种模组模式》这是别人的翻译,参考了不少,不过感觉挺不方便看的,这是我翻译的这篇文章的一个原因,当然最主要的原因是这篇文章算是学习YUI的最基础的文章了,整个YUI的模块模式都基于此。

YAHOO.myProject.myModule = function () {
//私有变量:
var myPrivateVar = 我仅能在YAHOO.myProject.myModule内被访问。;
//私有方法:
var myPrivateMethod = 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);
    }
};
}();

展开更多 50%)
分享

猜你喜欢

Javascript的一种模块模式

Web开发
Javascript的一种模块模式

一种JavaScript的设计模式

Web开发
一种JavaScript的设计模式

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

GO省电:LBS是一种工具而非一种模式

手机软件 应用软件
GO省电:LBS是一种工具而非一种模式

Ajax中数据传递的另一种模式 javascript Object Notation思想(JSON)

Web开发
Ajax中数据传递的另一种模式 javascript Object Notation思想(JSON)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JSON:数据传递的另一种模式

PHP
JSON:数据传递的另一种模式

它是大米的一种

营养价值
它是大米的一种

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

国事家事少林寺 寺寺关心

国事家事少林寺 寺寺关心

JS的&&和&||和|运算符两个不同点

JS的&&和&||和|运算符两个不同点
下拉加载更多内容 ↓