什麼是最好的方法加載依賴和實例化對象只有一次在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/

預期行爲這裏的是，當上述博克甲&乙在執行從上到下塊B中的DOM golden_object.init將利用在塊A的操作期間定義的資源。業務需求如此，塊A & B將是相同的，並且DOM中可能存在更多。經過幾天的研究，我仍然無法提出一個堅實的結構。我的單身不斷重新創建自己作爲新的，只有當我在devtools控制檯調用golden_object.init();，它會使用DOM中的現有對象。我怎樣才能讓它按照它應有的方式工作？我在這裏犯了什麼/在哪裏？

僅供參考，不golden_object.js攜帶$.fn.someOtherObj &夫婦依賴通過$.getScript()以及單身的定義（我想辛格爾頓OBJ是用戶界面）

百萬感謝您的見解&建議！

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