一.摘要
本系列文章是为了抽象通用的,跨浏览器的脚本方法.
本篇文章为我们的轻量级脚本库增加添加多播委托的方法.可以实现"单击页面空白区域则关闭页面上所有弹出层"等类似的功能.
二.实现效果
1.当打开一个菜单时关闭其他菜单.
2.在页面空白地方单击后就将关闭所有弹出层.
上面两个效果是系列一文章中的回复里大家建议实现的.其实我是想放到本篇文章单独讲解.因为很多人认为实现此功能很简单,修改一下弹出层方法就可以实现.
但是其实不然.在这里我要纠正两个错误观点:
1.修改弹出菜单方法ScriptHelper.showDivCommon实现网站业务逻辑
不能将业务逻辑与功能类混合在一起.ScriptHelper是一个功能类,提供的是"和业务无关的功能函数",通俗点讲就是大家不需修改就可以用在自己的网站上. 每个网站的菜单肯定都不一样. 所以不能将自己网站的业务逻辑放在我们的轻量级类库中.
2.使用"document.οnclick="或者"<body οnclick=>"添加事件函数
上面两种语法是我们常常使用的添加事件函数的方法, 这没有错, 而且也很少遇到问题. 但是这仅仅是因为页面中的大部分对象只需要一个事件函数.
如果一个页面上既有菜单,又有弹出层,又有弹出式日历,等等等等.我们希望在空白处点击时关闭上面的任意一个弹出对象,此时就需要使用多播委托,就是为一个事件添加多个处理函数.
注意:常常在一个项目中,开发日历的程序员并不知道开发菜单的程序员也重写了document.onclick函数.所以如果使用我们平时修改事件的方法会造成覆盖掉别人的函数.
三.实现代码.
实现多播委托的脚本非常简单, 我还是将这个方法放到ScriptHelper类中:
//统一的为对象添加多播事件委托的方法 scriptHelper.prototype.addEventListener = function(oTarget, sEventType, fnHandler) { if( oTarget.addEventListener )//for dom { oTarget.addEventListener( sEventType, fnHandler, false ) } else if( oTarget.attachEvent )//for ie { oTarget.attachEvent( "on"
ScriptHelper类才是我们要打造的.为了实现效果还要添加一些辅助函数, 我们将在下面的实例中讲解到.
四.应用实例
需要用到三个脚本::
ScriptHelper
与业务逻辑无关的, 实现效果的工具类, 放在ScriptHelper.js中.
代码较多,此处忽略.
CommonScript
与业务逻辑相关的类.目前里面有一个方法closeMenu用于关闭网站的所有菜单.放在CommonScript.js中
代码:
var CommonScript = function() { } CommonScript.closeMenu = function() { ScriptHelper.closeDivCommon("subMenu1"); ScriptHelper.closeDivCommon("subMenu2"); }
JSFooter.js
这个脚本没有使用对象封装, 一般在页面的底部加载, 目前的作用是为Document对象的onclick事件添加多个方法调用.
代码:
if( ScriptHelper == null ) { if( typeof( scriptHelper )=='undefined' || scriptHelper==null) { alert("未正确加载ScriptHelper类"); } else { ScriptHelper = new scriptHelper(); } } else { //添加Menu菜单关闭函数 if( typeof(CommonScript)!='undefined' && CommonScript != null && typeof(CommonScript.closeMenu)!='undefined' && CommonScript.closeMenu != null ) { ScriptHelper.addEventListener( document, "click", CommonScript.closeMenu ); } }
实例完整页面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>ScriptHelper 类测试页面</title> <script src=" type="text/javascript"></script> <script src=" type="text/javascript"></script> <style type="text/css"> .cursorHand { cursor:pointer;} </style> </head> <body style="position:relative;"> <div style="height:200px;"></div> <!-- Main Menu --> <div > <a class="cursorHand" οnclick="CommonScript.closeMenu();ScriptHelper.showDivCommon(this,'subMenu1', 20, 0, 100)">Menu1</a> <a class="cursorHand" οnclick="CommonScript.closeMenu();ScriptHelper.showDivCommon(this,'subMenu2', 20, 0)">Menu2</a> <a class="cursorHand" href="#">NoSubMenu</a> </div> <!-- Sub Menu 1 --> <div style="position:absolute; display:none; background-color:#D7EFCD; border:solid 1px #000000; margin:0px; padding:5px; height:100px;"> <div>1-1</div> <div>1-2</div> </div> <!-- Sub Menu 2 --> <div style="position:absolute; display:none; background-color:#D7EFCD; border:solid 1px #000000; padding:5px;" > <div>2-1</div> <div>2-2</div> </div> <!-- JSFooter --> <script src="type="text/javascript" defer="defer"></script> </body> </html>
五.脚本分析
CommonScript.closeMenu方法用于关闭所有的菜单弹出层. 我们在JSFooter.js为document对象的click事件添加了此方法.
这也是为什么在我们的弹出图层方法中要取消冒泡.不取消冒泡则弹出层刚显示就会立刻被关闭掉.
CommonScript 类将其声明了一个静态类. javascript里面的使用prototype方式声明实例对象或实例方法, 也就是声明后需要new一个实例才可以使用.比如我们的ScriptHelper:
//建立scriptHelper类的一个实例对象.全局使用. var ScriptHelper = new
如果不使用prototype直接 声明:
CommonScript.closeMenu = function(){...}
则CommonScript.closeMenu是一个静态方法.我们可以随时使用而不用声明实例:
六.总结
本篇的核心代码非常少, 其实主要是完善系列一实例的. 其中脚本的切割和组织也许大家可以借鉴, 这是一种各个网站通用的方式. 其实至于如何组织项目的javascript, 目前已经有了一些开源项目, 组织脚本和你使用那种类库无关. 作为网站的框架的一部分,javascript的组织和引用以后也需要进行研究.
作者：
张子秋
