不显眼的javascript的条件执行答案

【问题标题】：conditional execution of unobtrusive javascript不显眼的javascript的条件执行
【发布时间】：2014-09-22 21:19:45
【问题描述】：

目前正在开发一个 MVC 应用程序，该应用程序具有大量视图和不显眼的脚本。目前使用 jQuery。所有不显眼的代码都整齐地组织在单独的文件/文件夹中，然后捆绑/缩小到单个文件中，因此我决定进行条件检查以确定是否应该基于当前页面上的元素运行不显眼的代码块块。我假设，也许是错误的，通过执行这些检查，这将有助于减少 jQuery 在每个页面上花费的时间，这些代码运行基于当前视图不需要的不显眼的连线代码。

对于不显眼的 javascript，这是一种常见的做法，还是有更常见的做法？
注意：这不是 SPA。

$(function () {
    if ($(".flag-dialog").length > 0) { // check if this block is even necessary for the current page
        $(document).on("click", ".flag-dialog button.c", function () {
            ui.modalDialog.close(".flag-dialog");
            return false;
        });
        // more code...
    }
});
$(function () {
    if ($(".comment-section").length > 0) { // check if this block is even necessary for the current page
        $(document).on("click", ".comment-section button.s", function () {
            // ....
        });
        // more code...
    }
});

【问题讨论】：

通常您不会盲目地捆绑所有可用文件并将其提供给每个页面。特定的 JS 应该只包含在需要它的页面上（因为您没有维护 SPA）。所以你应该期待元素在那里，否则JS不应该在那里。如果您使用事件委托 ($(document).on("click", ".comment-section button.s", function () {)，那么这通常表示页面上有动态内容，因此您不能在某个时间点依赖单个检查 (if ($(".comment-section").length > 0) {)
我将沿着这条路线前进，并根据当前视图捆绑/包含。

标签： javascript jquery unobtrusive-javascript

【解决方案1】：

我认为这不值得。昂贵的部分是选择元素，您的代码总是在 if 语句条件中执行一次。更糟糕的是，它会在页面加载时执行此操作，这可以说是进行大量繁重工作的最不理想的时间。

实际绑定然后分派点击事件（这是您的代码尝试优化的内容）相对便宜，因为您的事件处理程序永远不会真正被分派，并且对“on”的调用不会立即评估选择器表达式，所以它实际上是一个非常便宜的操作。

更重要的是，您的优化会产生更多代码，以及伴随这些额外检查的所有持续维护费用。

也就是说，如果你真的想要做这些额外的检查，并且如果这是你认为你会在很多地方使用的模式，那么不要在你的代码中添加一堆 if 语句，考虑编写一个小的为您执行此操作的功能：

function attachGlobalEvent(eventName, selector, handler)
{
    if ($(selector).length > 0)
        $(document).on(eventName, selector, handler);
}

我仍然认为这会比在太多情况下没有它要慢一些，但至少它不会产生那么多代码。请注意，如果在执行事件附加代码之前没有将第一个匹配元素添加到 DOM 中，则不会调用您的处理程序，这通常是您开始像这样间接附加事件的原因。

【讨论】：