手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Javascript的一种模块模式
Javascript的一种模块模式
摘要:DouglasCrockford已经传授了一个有用的单例模式(singletonpattern)实现此规则,我认为他的模式有益于你基于YUI...

DouglasCrockford已经传授了一个有用的单例模式(singletonpattern)实现此规则,我认为他的模式有益于你基于YUI的那些应用。Douglas叫它模块模式(modulepattern)。它是如下工作的:

创建一个命名空间对象:如果你使用YUI,可以用YAHOO.namespace()方法:YAHOO.namespace("myProject");这分配了一个空的myProject对象,是YAHOO的一个成员(如果myProject已存在的话,则不会被覆盖)。现在我们可以开始添加YAHOO.myProject的成员。

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

YAHOO.myProject.myModule=function(){

return{

myPublicProperty:"我作为YAHOO.myProject.myModule.myPublicProperty被访问。";

myPublicMethod:function(){

YAHOO.log("我作为YAHOO.myProject.myModule.myPublicMethod被访问。");

}

};

}();//这个括号导致匿名函数被执行且返回

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

在匿名函数中,在返回语句前加入“私有”方法和变量。到目前为止,我们只是将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需要它们,我们的两个私有变量就不会被销毁。

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

<>

<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方法,支持受保护或“私有”的数据和方法。

[1]原文:《ajavascriptmodulepattern》。这是在YUIblog上的,有的地方可能打不开,可以搜一下英文的转载或者利用搜索引擎的缓存也能看。

[2]《AJavaScriptModulePattern-JavaScript的一种模组模式》这是别人的翻译,参考了不少,不过感觉挺不方便看的,这是我翻译的这篇文章的一个原因,当然最主要的原因是这篇文章算是学习YUI的最基础的文章了,整个YUI的模块模式都基于此。

【Javascript的一种模块模式】相关文章:

JavaScript中的unshift()方法的使用

javascript实现Table排序的方法

Javascript 高阶函数使用介绍

JavaScript函数使用的基本教程

IE中jscript/javascript的条件编译

javascript中动态函数用法

javascript操作ul中li的方法

javascript事件冒泡实例分析

JavaScript生成福利彩票双色球号码

JavaScript实现广告的关闭与显示效果实例

精品推荐
分类导航