javascript - 不引人注目的 javascript 的条件执行

Question

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

这是不引人注目的 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...
    }
});

Answer 1

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

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

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

也就是说，如果您确实想要进行这些额外的检查，并且如果这是您认为会在很多地方使用的模式，那么不要在整个代码中添加一堆 if 语句，请考虑编写一个小的为您完成此操作的函数:

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

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