Question

我总是有一个案例，我有一个.js文件，其中包含我网站上许多页面的事件处理程序，如下所示：

$(function () {  
$('#my-textbox1').click(function(){ doSomthing(); }) //--> this my-textbox1 exists in page example1.aspx  
$('#my-textbox2').click(function(){ doSomthing(); }) //--> this my-textbox2 exists in page example2.aspx  
});

现在假设用户打开了example1.aspx页面，jquery将搜索my-textbox1，如果发现它会附加一个click事件，然后搜索my-textbox2并且找不到它并且不会附加事件

但是像所有情况一样，jquery将在所有页面中搜索my-textbox2，

我想知道的是避免不需要的选择器在不需要它们的页面中调用的最佳做法。

可能这不是2个事件的大问题，但假设我有数百个事件想要附加，这肯定会影响页面加载性能。

Answer 1

在我们的项目中，我们总是使用基于body类的视图模式。这是一个规定的例子：

views = {
  home: function() {
    // do stuff on home page
  },
  products: function() {
    // do other stuff on products page
  }
};

$.each(document.body.className.split(' '), function() {
  if (this in views) {
    views[this]();
  }
});

Answer 2

$(function() {

  var pn = window.location.pathname;

  if (/example1/.test(pn)) {
     $('#my-textbox1').click(function(){ doSomthing(); });
  }

  if (/example2/.test(pn)) {
     $('#my-textbox2').click(function(){ doSomthing(); });
  }

});

Answer 3

我不确定这个解决方案有多好。我就像我去的那样。

<强>第一即可。你可以用一些评论来装饰你的javascript

//[all]
$(function () {
//[example1.aspx]  
$('#my-textbox1').click(function(){ doSomthing(); }) //--> this my-textbox1 exists in page example1.aspx
//[/example1.aspx]

//[example2.aspx]    
$('#my-textbox2').click(function(){ doSomthing(); }) //--> this my-textbox2 exists in page example2.aspx  
//[example2.aspx]  
});
//[/all]

第二次：通过aspx页面获取你的JS文件（它也可以用这种方式完成 - 使用httphandlers） e.g。

GetJS.aspx的CodeBehind会将你的实际js文件从磁盘读入内存。

然后从请求标题中查看 Referer 的值（它将指向已请求GetJS.aspx的页面（在我们的示例中，它将是example1.aspx或example2.aspx））。

现在我们知道哪个页面请求了JS，我们可以根据注释装饰// [all]，// [example1.aspx]等去除其内容，并使用适当的内容类型执行response.writefile

如何基于页面分离jQuery事件监听器？

3 个答案: