事情的起因是想开发一个类似博客园标签收藏时打书签的功能,于是解析了博客园的相关页面和JS源码进行了一番研究和学习.
过程漫漫与曲折,但收获不少.期间
如在看到博客园弹tag书签窗口的html源码有一处标签 <div id="cover_block"></div> 时,搜索到了《JavaScript自定义事件》 这篇文章，冥冥之中有某些安排与联系。
1 <body> 2 <!-- 遮罩层 --> 3 <div id="pageCover" class="pageCover"></div> 4 5 <input type="button" value="Dialog Test" onclick="openDialog();" /> 6 7 <div id="dlgTest" class="dialog"> 8 <img class="close" alt="" src="images/close.png"> 9 <div class="title">Dialog</div> 10 <div class="content"> 11 </div> 12 </div> 13 14 <script type="text/javascript"> 15 function EventTarget() { 16 this.handlers = {};//保存所有的事件处理程序,目的是统一管理 17 } 18 19 EventTarget.prototype = { 20 constructor: EventTarget, 21 addHandler: function (type, handler) { 22 if (typeof this.handlers[type] == 'undefined') { //read property 'close' 23 this.handlers[type] = new Array(); 24 } 25 this.handlers[type].push(handler);//★学习点与语法:用字面量动态定义对象属性,而这里属性的类型是Array 26 }, 27 removeHandler: function (type, handler) { 28 if (this.handlers[type] instanceof Array) { 29 var handlers = this.handlers[type]; 30 for (var i = 0, len = handlers.length; i < len; i++) { 31 if (handler[i] == handler) { 32 handlers.splice(i, 1); 33 break; 34 } 35 } 36 } 37 }, 38 trigger: function (event) { 39 if (!event.target) { 40 event.target = this;//这里指代Dialog对象 41 } 42 if (this.handlers[event.type] instanceof Array) { //判断字面量属性是否存在,如close 43 var handlers = this.handlers[event.type]; 44 for (var i = 0, len = handlers.length; i < len; i++) { 45 //handlers[i]();这里2句代码效果一致 46 handlers[i](event);//★学习点与语法,这里调用94行的方法 47 } 48 } 49 } 50 } 51 </script> 52 53 <script type="text/javascript"> 54 //工具方法用于继承 55 function extend(subType, superType) { 56 var prototype = Object(superType.prototype); 57 prototype.constructor = subType; 58 subType.prototype = prototype; 59 } 60 </script> 61 62 <script type="text/javascript"> 63 function Dialog(id) { 64 EventTarget.call(this) //效果是让子类拥有父类的原生属性,这里this指Dialog对象,当执行150行时,将自定义事件close注册给EventTarget的handlers属性 65 this.id = id; //换句话说,让EventTargert的属性放到this上,即this继承了EventTarget的属性 66 var that = this; 67 document.getElementById(id).children[0].onclick = function () { //绑定/注册关闭事件处理方法 68 that.close(); 69 } 70 } 71 72 extend(Dialog, EventTarget); 73 74 Dialog.prototype.show = function () { 75 var dlg = document.getElementById(this.id); 76 dlg.style.display = 'block'; 77 dlg = null; 78 } 79 80 Dialog.prototype.close = function () { 81 var dlg = document.getElementById(this.id); 82 dlg.style.display = 'none'; 83 dlg = null; 84 this.trigger({ type: 'close' }); 85 } 86 </script> 87 88 <script type="text/javascript"> 89 //由页面标签直接绑定事件触发 90 function openDialog() { 91 var dlg = new Dialog('dlgTest'); 92 93 dlg.addHandler('close', function () { 94 document.getElementById('pageCover').style.display = 'none'; 95 }); 96 97 document.getElementById('pageCover').style.display = 'block'; 98 dlg.show(); 99 } 100 </script> 101 </body>
1.为Dialog关闭按钮注册事件67行
2.设计自己的事件处理器，触发trigger的，同时传入自定义事件对象84行
3.声明遮罩层pageCover关闭处理逻辑94行
4.大量的JS面向对象编程的思想,如继承,64行,72行.