Каков наилучший способ повторного использования jQuery?

Question

Хорошо, есть так много подходов, однако меня интересует только 1, но какой подход к использованию? Dunno ...

В принципе, вот дилемма. Последующие вызовы jQuery будут отображаться внутри тела страницы. Он должен будет знать, был ли ранее задан jQuery, и если да, не перезагружайте его, а если нет, то загрузите jQuery. Теперь, кроме того, мне не нужно запускать какой-либо код jQuery до тех пор, пока jQuery не обязательно будет определен.

Вот что я использую, но это недостатки в том смысле, что я получаю ошибку при последующих вызовах этого в Google Chrome (говорится, что Jquery не определен)

Вот мой код:

if(!window.jQuery) 
{ 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.async = false; 
    script.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"; 
    var oScripts = document.getElementsByTagName("script"); 
    var s = oScripts[0]; 

    s.parentNode.insertBefore(script, s); 
} 

function dpmodPollBgColor() 
{ 
    jQuery(document).ready(function($){ 
    // Uncaught ReferenceError: jQuery is not defined 
     $.cssHooks.backgroundColor = { 
      get: function(elem) { 
       if (elem.currentStyle) 
        var bg = elem.currentStyle["backgroundColor"]; 
       else if (window.getComputedStyle) 
        var bg = document.defaultView.getComputedStyle(elem, 
         null).getPropertyValue("background-color"); 
       if (bg.search("rgb") == -1) 
        return bg; 
       else { 
        bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
        function hex(x) { 
         return ("0" + parseInt(x).toString(16)).slice(-2); 
        } 
        return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]); 
       } 
      } 
     } 

     $(".bar-container").each(function() { 
      if($(this).children(":first").css("width") != "0px") 
      { 
       var hexColor = $(this).children(":first").css("background-color"); 
       var bgColor = shadeColor(hexColor, 50); 
       $(this).css({"background-color": bgColor}); 
      } 
     }); 
    }); 
} 

if (document.addEventListener) 
    window.addEventListener("DOMContentLoaded", dpmodPollBgColor, false); 
else 
    addLoadEvent(dpmodPollBgColor); 

Я не хочу использовать onReadyStateChange, потому что я не хочу, чтобы это мешало, что может быть, другие вызовы AJAX на этой же странице.

В принципе, мне нужен способ ГАРАНТИРОВАТЬ, что 1. Если jQuery не загружен, он загрузит его. 2. Он не будет выполнять функцию, в которой находится jQuery, до тех пор, пока jQuery не закончит загрузку. 3. Он не будет мешать никакому другому коду jQuery на странице, независимо от того, какая переменная определяется для jQuery. Например, если какой-либо другой код определяет jQuery как usin, вместо значения по умолчанию $.

Мне очень сложно получить несколько экземпляров jQuery для работы в гармонии друг с другом.

метод я использую в настоящее время заключается в следующем:

1. Используйте, если заявление, которое определяет Jquery, если не загружается через if(!window.jQuery) заявление.

2. Определить функцию, и обернуть все JQuery внутри этой функции:

   функция FunctionName() { JQuery (документ) .ready (функции ($) {

   // Все кода JQuery

   }); }

3. Попытка загрузить функцию OnLoad, используя, если window.addEventListener, если это возможно, в противном случае встроенная функция называется AddLoadEvent()

Существует ошибка в реализации как-то, но логика кажется правильным меня. Как мне заставить эту работу работать с несколькими экземплярами одного и того же кода с разными именами функций в Google Chrome? Похоже, что во всех других браузерах это прекрасно, за исключением Google Chrome.

Thanks

Answer 1

У вас серьезные ошибки. Вот некоторые из них:

Метод, который я использую сейчас: Используйте инструкцию if, которая определяет jQuery, если не загружается с помощью инструкции if (! Window.jQuery).

Конечно, это даст вам ошибку, поскольку объект JQuery не существует. Вы пытаетесь использовать объект JQuery, если у вас еще нет файла JQuery.

if(!window.jQuery)//requesting JQuery object but.. 
{ 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.async = false; 
    script.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";//here is when you are loading its file. 
    var oScripts = document.getElementsByTagName("script"); 
    var s = oScripts[0]; 

    s.parentNode.insertBefore(script, s); 
} 


****Define a function, and wrap all jQuery inside of this function:** 

    function FunctionName() { jQuery(document).ready(function($){ 

    }); }* 

*

За что для кого-то будет на земле обернуть .ready() функцию внутри функции ?? .ready() функция была сделана для того, как ее зовут: , когда документ готов, чтобы не вставить его в функцию.