动态地使用JavaScript包含jQuery（如果它尚未存在） [英] Dynamically Including jQuery using JavaScript if it's not already present

问题描述

我正在为自己编写一个JavaScript工具，我计划向其他人提供它并使用jQuery。我对这个小实用程序的梦想是让人们能够从远程源包含一个 .js 文件，并且在加载该文件时，让它检查是否jQuery已经包含在内，如果有的话，请确保它是一个最新的版本，以便与我的代码需要做的兼容。一些伪代码可以更清楚地解释我的问题（这段代码会出现在我之前提到的单个 .js 文件的顶部）：

I'm writing a little JavaScript tool for myself that I plan on making available to other people and it uses jQuery. My dream for this little utility is for people to be able to include a single .js file from a remote source and, when that file is loaded, have it check to see if jQuery has already been included and, if it has, make sure it's a recent enough version so as to be compatible with what my code needs to do. Some pseudocode which may explain my issue more clearly (this code would appear at the top of the single .js file I mentioned earlier):

if jQuery is loaded {
    if version is less than (say) 1.3 {
        // load latest version of jQuery 
    }
} else {
    // load latest version of jQuery
}

// and do the jQuery.noConflict() 
// dance to avoid trampling any other libraries, etc. that the 
// user may be utilizing.

// The rest of my code lives here, happy in the knowledge that it's running in
// isolation from the rest of the JS that the page knows about.

我的问题，分为三个友好的部分：

My question, distilled into three friendly parts:

1. 是否有可能加载两个不同版本的jQuery而不会相互争吵？


2. 我可以在jQuery时停止执行我的JS代码吗？加载，然后继续吗？


3. 是否可以使用noConflict（），因为我正在描述它？或者我应该使用jQuery（）调用所有内容而不打扰它？

这里的首要想法是任何旧用户都可以抓住一小段HTML并将其放入他们的网站/博客/其他任何东西并让它Just Work&trade ;.由于许多现代出版平台现在都附带jQuery，我不能只是静静地假设它没有运行并包含它。

The overarching idea here is that any old user could grab a small snippet of HTML and drop it into their site/blog/whatever and have it Just Work™. And since many modern publishing platforms now ship with jQuery, I can't just quietly assume that it's not running and include it.

谢谢你的时间，请让我知道这部分内容是否不清楚，或者我是否可以提供额外的背景/细节以使您更容易提供回复。

Thanks for your time, and please let me know if any part of this isn't clear or if I can provide additional context/detail to make your providing a response easier.

推荐答案

function doMyStuff(jQueryJustForThisFn) {
    // do jQuery stuff!
    jQueryJustForThisFn('div').addClass('wow');
}

function check() {
    return window.jQuery && jQuery.fn && /^1\.[3-9]/.test(jQuery.fn.jquery);
}

if ( check() ) {

    doMyStuff( jQuery );

} else {

    var script = document.createElement('script'),

        timer = setInterval(function(){
            if ( check() ) {
                clearInterval(timer);
                document.body.removeChild(script);
                doMyStuff( jQuery.noConflict(true) );
            }
        }, 30);

    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js';

    document.body.insertBefore( script, document.body.firstChild );

}

这篇关于动态地使用JavaScript包含jQuery（如果它尚未存在）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！