代码之家 › 专栏 › 技术社区 › brettkelly

如果jquery不存在,则使用javascript动态包含它

compatibility jquery javascript

brettkelly · 技术社区 · 15 年前

我正在为自己编写一个小的javascript工具,我计划让其他人使用它,它使用jquery。我对这个小实用程序的梦想是让人们能够包括一个 .js 来自远程源的文件,当加载该文件时,请检查jquery是否已包含,如果已包含,请确保它是足够新的版本,以便与我的代码需要执行的操作兼容。一些可以更清楚地解释我的问题的伪代码(此代码将出现在单个代码的顶部 JS 我之前提到的文件):

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.

我的问题提炼成三个友好的部分:

是否可以加载两个独立的jquery版本而不将它们相互覆盖?
我可以在加载jquery时停止执行JS代码,然后继续吗?
是否可以像我描述的那样使用noconflict()?或者我应该使用jquery()调用所有东西,而不必为此烦恼吗?

这里的首要想法是,任何老用户都可以抓取一小段HTML并将其放到他们的网站/博客/任何东西中,然后让它工作起来。由于许多现代的发布平台现在都随jquery一起提供,我不能只是悄悄地假设它没有运行并包含它。

感谢您的时间,请让我知道这其中的任何部分是否不清楚,或者我是否可以提供额外的上下文/细节,以使您的回答更容易。

6 回复 | 直到 8 年前

James 15 年前

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 );

}

wallyk 14 年前

(function(){

    var myBkl = {
             jq: null,
             loadScript: function(src) {
                    if(window.jQuery && window.jQuery.fn.jquery == '1.3.2'){
                            return;
                    }
                    var s = document.createElement('script');
                    s.setAttribute('src', src);
                    s.setAttribute('type', 'text/javascript');
                    document.getElementsByTagName('head')[0].appendChild(s); 
            },
            whenLoaded: function(callback){
                    if (typeof(window.jQuery) !== 'undefined' && window.jQuery.fn.jquery == '1.3.2') { 
                            myBkl.jq = window.jQuery.noConflict(true);
                            callback(myBkl.jq); 
                    } 
                    else {
                            setTimeout((function() {myBkl.whenLoaded(callback); }),      
100);
                    } 
            },
            init: function($){
                    console.log($.fn.jquery);
                    console.log(window.jQuery.fn.jquery);
            }
    };
    myBkl.loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js');
    myBkl.whenLoaded(myBkl.init);
})();

Community CDub 8 年前

这个问题已经回答了 here

jQueryCode = function(){
    // your jQuery code
}

if(window.jQuery)  jQueryCode();
else{   
    var script = document.createElement('script');   
    script.type = 'text/javascript';
    script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
    document.head.appendChild(script);

    script.onload = jQueryCode;
}

Community CDub 8 年前

我不太了解这种小冲突,所以我只能回答2。

这通常被称为延迟加载。见 my answer 在一个类似的问题上这样做

James Manning 15 年前

我还没试过在已经加载了较低版本的情况下查看它的行为,但您可能需要查看google.load。

http://code.google.com/apis/ajaxlibs/documentation/#googleDotLoad

Don Albrecht 15 年前

为了绝对安全,您可能需要考虑使用的jquery版本的名称间距。这有点难看,但是一个针对代码库的regex来定义您自己的全局附加点将确保您什么都不破坏。如果代码将广泛地部署在各种站点上,这将是您的最佳选择,并且最能确保将来的兼容性。