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语句条件中执行一次。更糟糕的是，它会在页面加载时执行此操作，这可能是执行大量繁重工作的最不理想的时间。

实际绑定然后调度点击事件，这是你的代码试图优化出来的，相对便宜，因为事件处理程序永远不会被实际调度，并且调用＆＃34; on＆＃34;没有立即评估选择器表达式，所以它实际上是一个非常便宜的操作。

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

那就是说，如果你真的想做那些额外的检查，如果这是你认为你会在很多地方使用的模式，而不是在整个代码中添加一堆if语句，那么考虑写一个小功能，为你做到：

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

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

条件执行不引人注目的JavaScript

1 个答案: