Каков наилучший метод для загрузки в зависимостях и экземпляр объекта только один раз в Javascript?

Question

Я хотел бы изучить проверенные временем проверенные образцы дизайна в Javascript, которые гарантируют загрузку в зависимостях только один раз (если они уже были загружены) & создает экземпляр объекта только один раз, а также в DOM.

В частности, я следующее:

// Block A in the DOM 
<script> 
//instantiate my golden object as follows 
var some_unique_options = { 
    "option1": "some-val", 
    "option2": "some-val" 
    } 
    $.ajaxSetup({cache:true}); 
    $.getScript('my_golden_script.js', function(){ 
     golden_object.init(some_unique_options); 
    }); 
</script> 

// Block B in the DOM 
<script> 
//instantiate my golden object as follows 
var another_unique_options ={ 
    "option1": "some-val", 
    "option2": "some-val" 
    } 
    $.ajaxSetup({cache:true}); 
    $.getScript('my_golden_script.js', function(){ 
     golden_object.init(another_unique_options); 
    }); 
</script> 

В настоящее время мой golden_object реализует синглтон согласно: http://robdodson.me/javascript-design-patterns-singleton/

Целевого поведения здесь является то, что, когда выше Bock A & B выполняет сверху вниз в DOM, golden_object.init в блоке B будут использовать ресурсы, определенные во время работы блока A. Деловые требования таковы, что блок A & B будет идентичным, и в DOM может быть больше. После нескольких дней исследований я все еще не в состоянии создать прочную структуру. Мой синглтон продолжает воссоздавать себя как новый, и только если я вызываю golden_object.init(); в консоли devtools, он будет использовать существующий объект в DOM. Как я могу заставить это работать так, как он должен? что/где я делаю ошибку здесь?

FYI, golden_object.js действительно несет $.fn.someOtherObj & пару зависимостей с помощью $.getScript(), а также определения одноплодной (я хотел Singleton OBJ быть пользовательский интерфейс)

Million благодаря вашим прозрений & предложения!

Answer 1

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

jQuery.getScriptOnce = (function($) { 
    var urls = {}; 
    return function(url, callback) { 
     var obj = urls[url]; 
     if (!obj) { 
      urls[url] = new Promise(function(resolve, reject) { 
       $.getScript(url, function(script, textStatus, jqXHR) { 
        resolve({script: script, textStatus: textStatus, jqXHR: jqXHR}); 
        callback(script, textStatus, jqXHR); 
       }); 
      }); 
     } else { 
      obj.then(function(val) { 
       callback(val.script, val.textStatus, val.jqXHR); 
      }); 
     } 
    }; 
})(jQuery); 

это имеет выгода только необходимости изменить все вхождения $.getScript в $.getScriptOnce

Примечание: Я не проверил, чтобы увидеть, если jQuery.getScript возвращает обещание JQuery, если это произойдет, то код может быть намного проще

Просто протестировано и, кажется, getScript ДЕЛАЕТ возвращает Jquery обещание - так что вы можете просто сделать

jQuery.getScriptOnce = (function($) { 
    var urls = {}; 
    return function(url) { 
     return urls[url] = urls[url] || $.getScript(url); 
    }; 
})(jQuery); 

но изменю

$.getScript('my_golden_script.js', function(){ 
    golden_object.init(some_unique_options); 
}); 

в

$.getScriptOnce('my_golden_script.js').then(function(){ 
    golden_object.init(some_unique_options); 
});