karlew > js/jquery > 多页面网站如何优雅地绑定事件

多页面网站如何优雅地绑定事件

6-24 8,160 views

最近偶尔接过来一些小型网站修改，会看到这种画面

  1. //user.js  
  2. (function(){  
  3.     //page1  
  4.     $('.dom1').click(function(){  
  5.         //some js code  
  6.     }.mouseover(function(){  
  7.         //some js code  
  8.     })  
  9.     $('#dom2').click(function(){  
  10.         //some js code  
  11.     }  
  12.     //page2  
  13.     $('#dom3').click(function(){  
  14.         //some js code  
  15.     }  
  16.     //...  
  17.     //page3  
  18.     $('.dom4').click(function(){  
  19.         //some js code  
  20.     }  
  21. )  

 
以上仅仅是精简版，实际的要乱很多很多，而且夹杂着好多变量，篇幅问题不贴出来

我发现有些接触前端不久的人会：
1.在某个js文件下，直接绑定几乎所有页面的所有事件
2.添加事件的时候，随便找个位置例如末尾添加自己的代码

在页面少的时候还好，页面多的时候会很乱，不谈冲突之类的问题，阅读的时候肯定会看得很烦，维护也比较浪费时间。

这里分享一个我目前写多页面站点用到的公共js文件示例，希望能让有需要的人学习一下
上面说的代码可以用如下写法替代：

  1. $(function () {  
  2.   
  3.     var pageConfig = {  
  4.         _events: [],  
  5.         push: function (page) {  
  6.             this._events.push(page);  
  7.             return this;  
  8.         },  
  9.         _bind: function (page) {  
  10.             var events = page.events || {};  
  11.             var container = page.container || $(document);  
  12.   
  13.             //绑定模板事件  
  14.             for (var ele in events) {  
  15.                 for (var eventType in events[ele]) {  
  16.                     container.on(eventType, ele, events[ele][eventType]);  
  17.                 }  
  18.             }  
  19.             page.isBind = true;  
  20.         },  
  21.         init: function(){  
  22.             for(var i = 0,len = this._events.length;i<len;i++){  
  23.                 if(!this._events[i].isBind){  
  24.                     this._bind(this._events[i]);  
  25.                 }  
  26.             }  
  27.         },  
  28.     }  
  29.   
  30.     //每一个页面的事件用一个对象存储  
  31.     var page1 = {  
  32.         container: $(".page1"),  
  33.         events: {  
  34.             '.dom1':{  
  35.                 click:function(){  
  36.                     //some js code  
  37.                 },  
  38.                 mouseover:function(){  
  39.                     //some js code  
  40.                 }  
  41.             },  
  42.             '#dom2':{  
  43.                 click:function(){  
  44.                     //some js code  
  45.                 }  
  46.             }  
  47.         }  
  48.     }  
  49.   
  50.     var page2 = {  
  51.         container: $(".page2"),  
  52.         events: {  
  53.             '#dom3':{  
  54.                 click:function(){  
  55.                     //some js code  
  56.                 }  
  57.             }  
  58.             //...  
  59.         }  
  60.     }  
  61.   
  62.     var page3 = {  
  63.         container: $(".page3"),  
  64.         events: {  
  65.             '.dom4':{  
  66.                 click:function(){  
  67.                     //some js code  
  68.                 }  
  69.             }  
  70.         }  
  71.     }  
  72.   
  73.     //需要哪一个页面绑定事件，就push相应的对象  
  74.     pageManager.push(page1)  
  75.         .push(page2)  
  76.         .push(page3)  
  77.         .init();  
  78.   
  79.     //亦可只push当前页的的事件对象，例如在page1中加如下js  
  80.     //pageManager.push(page1).init();  
  81.   
  82. });  

 
以上写法仅建议在多页面站点使用，在单页面或页面少的例如H5页不作参考。

版权属于: karlew

原文地址: https://www.karlew.com/archives/556

转载时必须以链接形式注明原始出处及本声明。

2 条评论