有条件地执行不显眼的 JavaScript-解网

问：

目前正在开发一个 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...
    }
});

javascript jquery unobtrusive-javascript

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

0赞 TugboatCaptain 7/31/2014

我将沿着这条路线前进，并根据当前视图进行捆绑/包含。

答：

1赞 Robert Lee 7/31/2014 #1

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

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

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

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

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

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

上一个：如何在jquery $.get调用后让rails用js更新页面？

下一个：Rails 和 JavaScript，了解用户是否确认了对话框

有条件地执行不显眼的 JavaScript

conditional execution of unobtrusive javascript

评论