首頁 > 開發者 > JavaScript
本系列文章是為了抽象通用的,跨瀏覽器的指令碼方法.
本篇文章為我們的輕量級指令碼庫增加添加多播委託的方法.可以實現"單擊頁面空白地區則關閉頁面上所有彈出層"等類似的功能.
二.實現效果1.當開啟一個菜單時關閉其他菜單.
2.在頁面空白地方單擊後就將關閉所有彈出層.
上面兩個效果是系列一文章中的回複裡大家建議實現的.其實我是想放到本篇文章單獨講解.因為很多人認為實現此功能很簡單,修改一下彈出層方法就可以實現.
但是其實不然.在這裡我要糾正兩個錯誤觀點:
1.修改快顯功能表方法ScriptHelper.showDivCommon實現網站商務邏輯不能將商務邏輯與功能類混合在一起.ScriptHelper是一個功能類,提供的是"和業務無關的功能函數",通俗點講就是大家不需修改就可以用在自己的網站上. 每個網站的菜單肯定都不一樣. 所以不能將自己網站的商務邏輯放在我們的輕量級類庫中.
2.使用"document.onclick="或者"<body onclick=>"添加事件函數上面兩種文法是我們常常使用的添加事件函數的方法, 這沒有錯, 而且也很少遇到問題. 但是這僅僅是因為頁面中的大部分對象只需要一個事件函數.
如果一個頁面上既有菜單,又有彈出層,又有彈出式日曆,等等等等.我們希望在空白處點擊時關閉上面的任意一個彈出對象,此時就需要使用多播委託,就是為一個事件添加多個處理函數.
注意:常常在一個項目中,開發日曆的程式員並不知道開發菜單的程式員也重寫了document.onclick函數.所以如果使用我們平時修改事件的方法會造成覆蓋掉別人的函數.
三.實現代碼.實現多播委託的指令碼非常簡單, 我還是將這個方法放到ScriptHelper類中:
//統一的為對象添加多播事件委託的方法/* 參數說明: oTarget : 要添加事件的對象.比如"document". sEventType : 事件類型.比如單擊事件"click". fnHandler : 發生事件時調用的方法. 比如一個靜態函數"hideCalendar" 使用舉例: //單擊頁面的任何元素,只要沒有取消冒泡,都可以關閉日曆控制項 var cf = document.getElementById("CalFrame"); if( cf != null && hideCalendar != null ) { ScriptHelper.addEventListener( document, "click", hideCalendar ); }*/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" + sEventType, fnHandler); }}
ScriptHelper類才是我們要打造的.為了實現效果還要添加一些輔助函數, 我們將在下面的執行個體中講解到.
四.應用執行個體需要用到三個指令碼::
ScriptHelper與商務邏輯無關的, 實現效果的工具類, 放在ScriptHelper.js中.
代碼較多,此處忽略.
引用地址:http://files.cnblogs.com/zhangziqiu/CommonScript.js
CommonScript與商務邏輯相關的類.目前裡面有一個方法closeMenu用於關閉網站的所有菜單.放在CommonScript.js中
代碼:
/* CommonScript是靜態類, 裡面存放和項目相關但是會被多個頁面使用的方法. 修改曆史: 2009.2.6 增加closeMenu函數,用於關閉網站所有功能表項目.*/var CommonScript = function(){}CommonScript.closeMenu = function(){ ScriptHelper.closeDivCommon("subMenu1"); ScriptHelper.closeDivCommon("subMenu2");}
引用地址:http://files.cnblogs.com/zhangziqiu/CommonScript.js
JSFooter.js這個指令碼沒有使用對象封裝, 一般在頁面的底部載入, 目前的作用是為Document對象的onclick事件添加多個方法調用.
代碼:
/* JSFooter 用於為頁面添加事件委託. 其中主要為document對象添加多播委託.一邊在單擊頁面任意地方就可以關閉頁面上所有的快顯視窗.*/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 ); }}
引用地址:http://files.cnblogs.com/zhangziqiu/JSFooter.js
執行個體完整頁面代碼:
<!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="http://files.cnblogs.com/zhangziqiu/ScriptHelper.js" type="text/javascript"></script> <script src="http://files.cnblogs.com/zhangziqiu/CommonScript.js" 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" onclick="CommonScript.closeMenu();ScriptHelper.showDivCommon(this,'subMenu1', 20, 0, 100)">Menu1</a> <a class="cursorHand" onclick="CommonScript.closeMenu();ScriptHelper.showDivCommon(this,'subMenu2', 20, 0)">Menu2</a> <a class="cursorHand" href="#">NoSubMenu</a> </div> <!-- Sub Menu 1 --> <div id="subMenu1" 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 id="subMenu2" 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="http://files.cnblogs.com/zhangziqiu/JsFooter.js" type="text/javascript" defer="defer"></script></body></html>
五.指令碼分析
CommonScript.closeMenu方法用於關閉所有的菜單彈出層. 我們在JSFooter.js為document對象的click事件添加了此方法.
這也是為什麼在我們的彈出圖層方法中要取消冒泡.不取消冒泡則彈出層剛顯示就會立刻被關閉掉.
CommonScript 類將其聲明了一個靜態類. javascript裡面的使用prototype方式聲明執行個體對象或執行個體方法, 也就是聲明後需要new一個執行個體才可以使用.比如我們的ScriptHelper:
//建立scriptHelper類的一個執行個體對象.全域使用.var ScriptHelper = new scriptHelper();
如果不使用prototype直接 聲明:
CommonScript.closeMenu = function(){...}
則CommonScript.closeMenu是一個靜態方法.我們可以隨時使用而不用聲明執行個體:
CommonScript.closeMenu()
六.總結
本篇的核心代碼非常少, 其實主要是完善系列一執行個體的. 其中指令碼的切割和組織也許大家可以借鑒, 這是一種各個網站通用的方式. 其實至於如何組織項目的javascript, 目前已經有了一些開源項目, 組織指令碼和你使用那種類庫無關. 作為網站的架構的一部分,javascript的組織和引用以後也需要進行研究.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
