建站极客
网络编程 JavaScript 正文
Javascript的一种模块模式
所属分类:
网络编程 / JavaScript
阅读数:
433
收藏 0
赞 0
分享
Douglas Crockford已经传授了一个有用的单例模式(singleton pattern)实现此规则,我认为他的模式有益于你基于YUI的那些应用。Douglas叫它模块模式(module pattern)。它是如下工作的: 创建一个命名空间对象:如果你使用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 () { //“私有”变量: 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需要它们,我们的两个私有变量就不会被销毁。 实践这个模式。让我们来看看这个模式的一个常见应用案例。假设你有一个列表,列表上的一些项可以被拖拽。应用拖拽的项上有拖拽的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方法,支持受保护或“私有”的数据和方法。 [1]原文:《a javascript module pattern》。这是在YUI blog上的,有的地方可能打不开,可以搜一下英文的转载或者利用搜索引擎的缓存也能看。 [2]《A JavaScript Module Pattern - JavaScript的一种模组模式》这是别人的翻译,参考了不少,不过感觉挺不方便看的,这是我翻译的这篇文章的一个原因,当然最主要的原因是这篇文章算是学习YUI的最基础的文章了,整个YUI的模块模式都基于此。
纯javascript判断查询日期是否为有效日期 很多网站都涉及到输入日期选项,如果客户日期输入错误,可能导入查询不到甚至查询到错误的信息,为了更好的满足用户需求,需要对日期进行校验,下面给大家介绍使用纯javascript如何判断查询日期是否为有效日期,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
jquery实现的蓝色二级导航条效果代码 这篇文章主要介绍了jquery实现的蓝色二级导航条效果代码,涉及jquery鼠标事件及页面样式的动态切换效果实现技巧,非常简单实用,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
ajax如何实现页面局部跳转与结果返回 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,本篇文章给大家介绍ajax如何实现页面局部跳转与结果返
评论 0
收藏 0
赞 0
分享
js实现的黑背景灰色二级导航菜单效果代码 这篇文章主要介绍了js实现的黑背景灰色二级导航菜单效果代码,涉及javascript操作页面元素动态切换的实现技巧,非常具有实用价值,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
javascript中SetInterval与setTimeout的定时器用法 Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等,本文文章通过代码示例给大家介绍javascript中SetInterval与setT
评论 0
收藏 0
赞 0
分享
jQuery实现的背景动态变化导航菜单效果 这篇文章主要介绍了jQuery实现的背景动态变化导航菜单效果,涉及jquery页面元素背景动态变换的实现技巧,非常具有实用价值,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
查看更多