Question

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

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

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

非常感谢任何建议

Answer 1

执行此操作的一个最大问题是性能之一 - 将评估选择器并搜索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();
    }

})();

Answer 2

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

Answer 3

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

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

（在这里留出live（）问题;有时你需要逐个元素的工作，这就是我所说的。）问题是Sizzle必须查看所有的td元素页面，可能。相反，你可以使用控件在“活动”表之类的东西周围放置某种“标记”容器，并以这种方式工作：

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

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

Answer 4

在所有页面上使用所有绑定的最大问题是，您可以获得您不想要的绑定，从而导致麻烦......

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

Answer 5

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

Answer 6

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

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

jQuery，什么是最好的，在一个单一文件中为整个站点或每页基础具有所有绑定？

6 个答案: