Проверьте, включен ли jQuery

Question

Я создаю пару виджетов, предназначенных для включения либо отдельно, либо в виде пары, и в определенном порядке. Я убедившись, что Jquery загружается с помощью этого сценария:

if (typeof jQuery == 'undefined') { 
    //alert("about to load jquery"); 

    var esm_script_tag = document.createElement('script'); 
    esm_script_tag.setAttribute("type","text/javascript"); 
    esm_script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js") 
    esm_script_tag.onload = main; // Run main() once jQuery has loaded 

    esm_script_tag.onreadystatechange = function() { // Same thing but for IE 
     if (this.readyState == 'complete' || this.readyState == 'loaded') main(); 
    } 

    document.getElementsByTagName("head")[0].appendChild(es_script_tag); 

} 
else{ 

    main(); 
} 

На одном сценарии он запускает функцию main() и на других main2(). Проблема в том, что после запуска первого скрипта он начинается с jQuery. Когда второй запускается, jQuery еще не загружен, но не будет загружать его снова, чтобы отключить функцию main2().

Есть ли лучший способ включить jQuery? Есть ли способ для моих виджетов проверить, находится ли jQuery в середине загрузки и удерживать его, пока он не будет готов?

Спасибо за любые ответы.

Answer 1

Конечно, в первую очередь вам следует рассмотреть возможность использования сторонних библиотек для управления зависимостями. Однако это может быть ситуация, когда вы хотите включить исходный код в каждый виджет, чтобы он мог жить без каких-либо дополнительных предварительных ссылок.

На jsfiddle я создал эмуляцию, что Вы пытаетесь спросить: http://jsfiddle.net/ayezutov/dvvKE/16/

Следующий код использует таймаут для эмуляции сценария задержки загрузки:

setTimeout(function() { 
     document.getElementsByTagName("head")[0].appendChild(esm_script_tag); 
    }, Math.floor(Math.random(500))); 

В производственной версии это должно быть точно как в вашем коде.

Итак, после небольшого рефакторинга код загрузки был перенесен на одну функцию: http://jsfiddle.net/ayezutov/dvvKE/20/. Вопрос до сих пор остается, как вы можете заметить:

Загрузка JQuery из сценария 1:
Загрузка JQuery из сценария 2:
Выполнение основного сценария 1: 1.5.1
Выполнение основного сценария 2: 1.5.2

Следующим шагом было создание пользовательской очереди, которая будет Ставить все запросы загрузки, которая пришла после того, как JQuery загрузка началась:

if (!window.__jQueryLoadedQueue) 
     window.__jQueryLoadedQueue = [loadCompleted]; 
    else 
    { 
     window.__jQueryLoadedQueue.push(loadCompleted); 
    } 

    var completeFunction = function(){ 
     for(var i = 0; i < window.__jQueryLoadedQueue.length; i++){ 
      window.__jQueryLoadedQueue[i](); 
     } 
     delete window.__jQueryLoadedQueue; 
    } 

Как вы можете видеть (http://jsfiddle.net/ayezutov/dvvKE/23/), теперь скрипты начинают загрузку только один раз, в то время как вызываются как функции complete.