Question

我正在为自己编写一个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并将其放入他们的网站/博客/其他任何内容并使用Just Work™。由于许多现代出版平台现在都附带了jQuery，我不能只是静静地假设它没有运行并包含它。

感谢您的时间，如果有任何不明确之处或者我是否可以提供其他背景/详细信息以便您更轻松地提供回复，请与我们联系。

Answer 1

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

}

Answer 2

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

Answer 3

这个问题已经回答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;
}

Answer 4

我对noConflict了解不多，所以我只能回答2。

这通常称为延迟加载。有关类似问题，请参阅my answer

Answer 5

我还没有尝试过使用已经加载的较低版本的行为，但您可能想查看google.load

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

Answer 6

为了绝对安全，您可能需要考虑命名空间使用的jQuery版本。它有点难看，但是用于定义自己的全局附加点的代码库的正则表达式将确保您不会中断任何内容。如果代码将广泛部署在各种站点上，这将是您的最佳选择，并且最能确保未来的兼容性。

动态地使用JavaScript包含jQuery（如果它尚未存在）

6 个答案: