有条件的执行JavaScript

Question

目前，在具有大量视图和不引人注目的脚本的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...
    }
});

Answer 1

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

单击事件的实际绑定和调度（这是您的代码尝试优化的）相对便宜，因为您的事件处理程序永远不会真正调度到该事件，并且对“ on”的调用不会立即评估选择器表达式，因此实际上这是一个非常便宜的操作。

更重要的是，您的优化将导致更多的代码，以及与这些额外检查一起产生的所有日常维护费用。

就是说，如果您真的想做那些额外的检查，并且如果您认为这是一种模式，那么您会在很多地方使用它，而不是在代码中添加一堆if语句，可以考虑编写一个小函数它为你：

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

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