jQuery，什么是最好的，将整个站点或每个页面的所有绑定都放在一个文件中？答案

【问题标题】：jQuery, What's Best, Have All the Binds in One Single File For an Entire Site or on a per Page Basis?jQuery，什么是最好的，将整个站点或每个页面的所有绑定都放在一个文件中？
【发布时间】：2011-01-15 18:48:19
【问题描述】：

我正在构建一个大量使用 jQuery 插件和大量绑定的 Web 应用程序。

后端是用一个模板系统开发的，它只允许（到目前为止）将所有脚本放在一个 HTML 文件中。我们将使用 YUI 压缩器将所有这些合并为一个。

现在，对于绑定，在 HTML 文件（现在是整个网站的模板）中为特定页面上可能不存在的元素绑定有多糟糕？

非常感谢任何建议

【问题讨论】：

标签： javascript jquery performance binding

【解决方案1】：

我一直在大型网站上广泛使用Paul Irish's markup-based solution。

【讨论】：

这太棒了！！！！我已经在实现它，到目前为止，该应用程序感觉更加流畅。

【解决方案2】：

这样做的最大问题之一是性能问题 - 将评估选择器并在 DOM 中搜索每个不用于特定页面的绑定。至少，也许设置一个对象文字来运行基于页面标识符的适当的准备绑定代码，这可能是window.location.href 或子字符串。类似的东西

// avoid global pollution!
(function() {

    var pages = {

        pageX : {

            ready: function() { /* code to run on ready */ },
            teardown: function() { /* code to run on teardown */ }

        },

        pageY : {

            ready: function() { /* code to run on ready */ },
            teardown: function() { /* code to run on teardown */ }

        },

    }

    // set up ready event handler 
    $(ready);

    // handler function to execute when ready event raised
    // Note: Access to pages through closure
    function ready() {
        var location = window.location.href;
        pages[location].ready();
    }

})();

【讨论】：

【解决方案3】：

如果您有一些大页面，请小心选择器。例如，如果您的某些页面包含大但惰性（无绑定）的表，而其他页面的表很小但其中包含控件，您可能不想这样做：

$('td.bindMe').bind('whatever', function() { ... });

（把 live() 问题放在一边；有时你需要逐个元素地工作，这就是我要说的。）问题是 Sizzle 必须查看所有 td 元素页，可能。相反，您可以在诸如带有控件的“活动”表之类的东西周围放置某种“标记”容器，并以这种方式工作：

$('table#withControls').find('td.bindMe').bind(/* ... */);

这样 Sizzle 只需要弄清楚没有名为“withControls”的表，然后就完成了。

【讨论】：

【解决方案4】：

在所有页面上使用所有绑定的最大问题是你会得到你不打算拥有的绑定，从而导致麻烦......

当然，您在页面加载时会遇到一些性能问题，但如果这是一个问题，当然取决于您有多少绑定以及代码的外观。

【讨论】：

【解决方案5】：

您可能会在客户端失去一些性能（解析文件、执行文档就绪处理程序），但它改进了客户端的缓存（即文件不需要传输多次）。这也节省了服务器查找。只要您能确保不会意外修改对象，我认为这是一个优势而不是劣势。

【讨论】：

【解决方案6】：

我认为选择器引擎足够快，您或其他任何人都不会注意到差异。

显然这不是“最佳实践”，但如果您绑定到 ID 和类名，并且不会有任何冲突或意外绑定，那么我看不出有什么害处。

【讨论】：