競合の激しい環境にプログラムでJQueryを含める-

Question

サードパーティのWebサイトに配置するコードのスニペットを書いていますが、どの環境にドロップされるかわかりません。私の最終目標は、バッジが

であることです

<script src="http://example.com/js/badge.js"></script>

バッジコードでjQueryを使用して生活を楽にしたいと思いますが、クライアント側で別のインクルードを要求したくありません（クライアントで更新されたものを取得するのは苦痛です）。

これは私が思いつく最高の方法です。スクリプトの前後に、残りの変数や奇妙な衝突の影響を受けないようにします。何か問題がありますか？

(function() {
    function main($) {
        // do stuff with $
        $(document.body).css("background", "black")
    }

    // If jQuery exists, save it
    var old_jQuery = null;
    if (typeof(jQuery) != "undefined") {
        if (typeof(jQuery.noConflict) == "function") {
            old_jQuery = jQuery.noConflict(true);
        }
    }

    var addLibs = function() {
        // Body isn't loaded yet
        if (typeof(document.body) == "undefined" || document.body === null) {
            setTimeout(addLibs, 100);
            return;
        }

        var node = document.createElement("script");
        node.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
        document.body.appendChild(node);
        checkLibs();
    }

    var checkLibs = function() {
        // Library isn't done loading
        if (typeof(jQuery) == "undefined" || jQuery("*") === null) {
            setTimeout(checkLibs, 100);
            return;
        }
        var new_jQuery = jQuery.noConflict(true);
        jQuery = old_jQuery;
        main(new_jQuery);
    }

    addLibs();
})();

Answer 1

http://yourock.paulisageek.com/js/popup.jsになりました。テスト（コンソールログを使用可能） http://paulisageek.com/tmp/jquery-programaticallyを参照してください。 html 。 jQueryが実際にロードを完了するまで、jQueryと$はリセットされません。無限ループなしでJavaScriptをブロックする方法（jQueryのロード自体をブロックしますか？）

// A namespace for all the internal code
var yourock = {};

// Include JQuery programatically
(function() {
    // Don't let the script run forever
    var attempts = 30;

    // If jQuery exists, save it and delete it to know when mine is loaded
    var old_jQuery;
    if (typeof(jQuery) != "undefined") {
        if (typeof(jQuery.noConflict) == "function") {
            old_jQuery = jQuery;
            delete jQuery;
        }
    }

    var addLibs = function() {
        var head = document.getElementsByTagName("head");
        if (head.length == 0) {
            if (attempts-- > 0) setTimeout(addLibs, 100);
            return;
        }

        var node = document.createElement("script");
        node.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
        head[0].appendChild(node);
        checkLibs();
    }

    var checkLibs = function() {
        // Library isn't done loading
        if (typeof(jQuery) == "undefined" || typeof(jQuery) != "function" || jQuery("*") === null) {
            if (attempts-- > 0) setTimeout(checkLibs, 100);
            return;
        }
        yourock.jQuery = jQuery.noConflict(true);
        if (typeof old_jQuery == "undefined")
            jQuery = old_jQuery;
    }

    addLibs();
})();

Answer 2

これは動作します：

(function(){
    if (window.jQuery !== undefined) {
        doStuff(jQuery);
    } else {
        var script = document.createElement('script');
        script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js';
        document.getElementsByTagName('head')[0].appendChild(script);
        var interval = setInterval(function(){
            if (window.jQuery) {
                clearInterval(interval);
                var JQ = jQuery.noConflict(true);
                doStuff(JQ);
            }
        }, 100);
    }
})();

function doStuff($) { /* Do stuff with $ */ }

Answer 3

jQueryを再度含めると、 $ 変数がオーバーライドされます。これは、jQueryの古いバージョンまたは別のフレームワークである可能性があります。おそらくそれも保存すべきです。

Answer 4

このコードはあまりテストしていませんが、動作するはずです...

(function($, window) {
    var version = ($ && typeof($) == 'function' && $().jquery ? ($().jquery).split('.').join('') : 0), // 1.8.1 -> 181
        jBack   = null;
    if (version) console.log('jQuery current version : ', version);
    else         console.log('no jQuery');
    var loaded = function() {
            console.log('loaded()');
            var $ = jQuery.noConflict(true); // LOCAL own jQuery version
            if (jBack)  {
                window.$      = jBack; // Reassign ex-jQuery
                window.jQuery = jBack;
            }
            // OK : now work with OUR new $
            console.log('jQuery new version : ', $().jquery);
        },
        loadJs = function(jsPath) {
            console.log('loadJs()');
            var s = document.createElement('script');
            s.setAttribute('type', 'text/javascript');
            s.setAttribute('src', jsPath);
            s.onload = loaded;
            document.getElementsByTagName('body')[0].appendChild(s);
        };

    if (version) jBack = $;
    if (version < 180) loadJs('http://code.jquery.com/jquery-1.9.1.min.js');
    else loaded();

})((typeof(jQuery) == 'function' ? jQuery : null), window);