您好,欢迎访问一九零五行业门户网

Javascript的一种模块模式_javascript技巧

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 = 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);
}
};
}();
在上面的代码中,我们从一个匿名函数返回有两个成员的一个对象。在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类。
复制代码 代码如下:
一项
二项
三项
这是一个简单的例子,特意写的详细一些——如果按照这种方式做,我们无疑能把它写的更紧凑。当项目变得更加复杂和它的api增加,这个模式缩放的很好。通过这种方式,它避免了全局命名空间,提供了对外的可以访问的api方法,支持受保护或“私有”的数据和方法。
[1]原文:《a javascript module pattern》。这是在yui blog上的,有的地方可能打不开,可以搜一下英文的转载或者利用搜索引擎的缓存也能看。 [2]《a javascript module pattern – javascript的一种模组模式》这是别人的翻译,参考了不少,不过感觉挺不方便看的,这是我翻译的这篇文章的一个原因,当然最主要的原因是这篇文章算是学习yui的最基础的文章了,整个yui的模块模式都基于此。 原文地址:http://dancewithnet.com/2007/12/04/a-javascript-module-pattern/
其它类似信息

推荐信息