jQuery NoConflict woes

JavaScript
1

Hi all,

I’m hoping someone can guide me to nicer code than what I have.

I’m working with a system where someone (not I) has placed inline scripts all over the HTML templates, and most of them assume jQuery exists. This is partially to stop a bunch of scripts from loading all the time for everyone, apparently, and only being called if someone loads a page with some particular template snippet involved.

So anyway for this reason, we call our ginormous jQuery in the <head>. Since plenty of the plugins also get called from within templates (due to clients needing to be able to change options to things like carousels etc), these are all stuffed in 1 giant javascripts.js in the head. So that’s jQuery, jQuery UI, and all our plugins that everyone uses. Went from 30+ separate server requests to 1. Yay.

At the bottom of the page we call a site-personal script, which also relies on jQuery. Normally it’s structured like this:

(function() {

//all the things that need to be called on load

});
// helper funcs called by anything in the onload anon func
function foo() {
// a foo
}
function bar()n {
//a bar
}
etc...

This is the closest I am able to get to separating new code’s helper functions from the onload stuff (still too much crap in the onload stuff because lots is original code from other folks).

So the issue: now we have a client who wants to use some scripts of a third party. One of these scripts uses $.noConflict.

This of course set all of our code into the crapper, specifically the site-specific script that comes after it, in the bottom of the page.

My solution so far is to take all those external foo and bar functions and stuff them into the big onload function and give that onload function a new $:

(function($) {
    function foo() {
        // a foo
    }
    function bar() {
         //a bar
    }
    //all the things that need to be called on load
    //can haz $('baz'); etc again
})(jQuery);

So this is gross but it works. But, is there anything else I can do? I don’t like stuffing all my functions together like that, and any pages with both this noConflict-from-third-party script and any template-added scripts are still broken.

This is especially grating because the version of jQuery the script wants to use is the same as our version of jQuery, so noConflict isn’t even needed here. But I can’t affect this foreign script and remove it.

2

Sounds like a mess and I don’t know if namespacing would be a viable approach

;MYNAMESPACE = {
 
    myFunction: function()
    {
        console.log('running MYNAMESPACE.myFunction...');
    }
     
}
MYNAMESPACE.myFunction(); //function call
3

Hm, maybe… it may help prevent me from otherwise needing to pass each helper function the $.

But it looks like then I’d still have to go through the templates (most of which are inherited from a base which is shared by other sites owned by other clients) and apply the namespaces there as well. If I could I’d just remove them, but there are sooo many.

Inline scripts suck, kids! Don’t do it!

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.