有条件的执行JavaScript

Question

Working on an MVC application at the moment that has quite a large number of views and unobtrusive script to go along with it. Currently using jQuery. All of the unobtrusive code is neatly organized in separate files/folders and then bundled/minified into a single file so I decided to do conditional checks to determine if chunks of unobtrusive code blocks should even run based on an element on the current page. I'm assuming, maybe incorrectly, that by doing these checks this will help lower the amount of time jQuery is spending on each page running unobtrusive wire-up code that isn't necessary based on the current view.

Is this a common practice to follow for unobtrusive javascript or is there a more common practice?
Note: This is not 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

I don't think it's worth it. The expensive part is selecting the elements, which your code always does once in the if statement condition. Worse, it does this when the page loads, which is arguably the least ideal time to be doing a lot of heavy lifting.

The actual binding and then dispatching of the click events, which is what your code tries to optimize out, is relatively cheap since your event handler will never actually be dispatched to, and the call to "on" doesn't immediately evaluate the selector expression, so it's actually a pretty cheap operation.

More importantly, your optimization results in more code, and all of the ongoing maintenance expenses that go along with those extra checks.

That said, if you really want to do those extra checks, and if this is a pattern you think you'll use in a lot of places, instead of adding a bunch of if statements throughout your code, consider writing a small function that does it for you:

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

I still think that this is going to be a bit slower than not having it in a bit too many cases, but at least it won't result in as much code. Just be aware that your handler won't be called if the first matching element isn't added to the DOM until after the event-attaching code is executed, which is usually why you'd attach the event indirectly like this to begin with.