javascript - Possible to load jQuery only inside closure? - Stack Overflow

admin管理员组

文章数量:1332345

I don't think this can be done, though I know requirejs can do something similar, and I was wondering if this might be possible outside of require.

I'm writing a piece of SaaS JavaScript code that will most likely need jQuery to run cross browser. Some sites have it, some don't, but I don't want to stick jQuery on the window object if they aren't using it. Though I could individually create alternatives for everything I use jQuery for... I was wondering if there is a way I can load jQuery only for use inside my closure. Is this possible?

I don't think this can be done, though I know requirejs can do something similar, and I was wondering if this might be possible outside of require.

I'm writing a piece of SaaS JavaScript code that will most likely need jQuery to run cross browser. Some sites have it, some don't, but I don't want to stick jQuery on the window object if they aren't using it. Though I could individually create alternatives for everything I use jQuery for... I was wondering if there is a way I can load jQuery only for use inside my closure. Is this possible?

• javascript
• jquery

Share Improve this question Follow edited Jul 13, 2016 at 12:55 Peter Mortensen 31.6k2222 gold badges110110 silver badges133133 bronze badges asked Oct 8, 2013 at 19:20 ShaneShane 5,16155 gold badges4040 silver badges5454 bronze badges 2

• possible duplicate of How to encapsulate jQuery? – Ricardo Souza Commented Oct 8, 2013 at 19:25
• Fair point, didn't see this when I posted originally. If there are no objections, I'm going to leave this question since the wording will probably catch different kinds of searches as I wasn't able to find the original post before making this one. – Shane Commented Oct 8, 2013 at 20:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

When you load the standard release of jQuery, by default jQuery assigns itself to the global names jQuery and $. If you load your version of jQuery before your closure file within the page, then within your closure do

var $ = jQuery.noConflict(true);

It will undo whatever modifications your version of jQuery did to the global object.

It is worth noting, however, that this produces a race condition. If any events or timeouts fire between the time that your jQuery file loads and your closure calls jQuery.noConflict(true) they will accidentally use the version of jQuery that you loaded.

An alternative is to edit the jQuery file that you are using to include a call to jQuery.noConflict(true) at the bottom of the jQuery file. You can assign the result to an arbitrary name that no one else would ever think to use, like "abcRandomNumberHere". Then you can retrieve your instance of jQuery from that global name within your closure assigning it to a local variable named jQuery and/or $ and delete the global reference at that time.

// Your jQuery file on your server
// ...
// End of file:
someRandomGlobalName = jQuery.noConflict(true);

// The file that contains your closure:
(function() {
    var $, jQuery;
    $ = jQuery = someRandomGlobalName;
    delete window.someRandomGlobalName;

    // Your code that uses jQuery here
} ());

This is a rough approximation of what RequireJS does to keep jQuery out of the global namespace. Recent versions of jQuery have built-in code that detects the existence of a script loader like RequireJS and rather than assigning to global names jQuery passes a reference to itself into RequireJS and leaves the global object untouched. That way RequireJS contains the reference to jQuery internally, but the global.requirejs variable is modified instead.

Creating your own non-conflicting global name for your jQuery version and your closure to "rendezvous" on is analogous to RequireJS' functionality. The name RequireJS uses is the "global name": requirejs.s.contexts._.jQuery (not exactly, but something like this).

Call jQuery.noConflict(true) and it will re-assign $ and jQuery to wherever it was.

Then, you can pass the reference returned by the above expression into your closure.

(function(jQuery) {

})(jQuery.noConflict(true));

Yes, calling jQuery.noConflict(true) will pletely remove anything that jquery added from the global namespace reverting it back to what it was previously allowing for conflicting libraries and/or multiple versions of jQuery.

<script src="jquery.min.js"></script>
<script>
(function($){
    $("el").doSomething();
})(jQuery.noConflict(true));
</script>

本文标签： javascriptPossible to load jQuery only inside closureStack Overflow