动态负载乘以资产问题 [英] Problem Dynamically Load multiply Assets

问题描述

在html AssetsManager.registerAssets(...)中的许多地方都可以调用.
问题是:执行if (isAllAssetsLoaded()) { notify(); }(加载JS时)时，assetsCount和assetsLoaded的值可以通过AssetsManager.registerAssets的其他调用来更改.
我想创建将类似于字典的URLS_Array.键将是url，值将是{assetsCount = "..", assetsLoaded= ".."}，当执行if (isAllAssetsLoaded()) { notify(); }时，将通过url(如URLS_Array[url])从URLS_Array中获取适当的元素.问题是什么时候这个

In many places in the html AssetsManager.registerAssets(...) can be called.
The problem is: when if (isAllAssetsLoaded()) { notify(); } is executed (when JS is loaded) the assetsCount and assetsLoaded values can be changed by other calls of AssetsManager.registerAssets.

I thought to create URLS_Array that will be like dictionary. The key will be the url and the value will be {assetsCount = "..", assetsLoaded= ".."} and when if (isAllAssetsLoaded()) { notify(); } will be executed, the appropriate element will be fetched from URLS_Array by url(like URLS_Array[url]). The question is when this

assetsLoaded++;
if (isAllAssetsLoaded()) {
    notify();
}

被执行，我怎么知道它属于哪个JS?

如果有人对没有URLS_Array的情况有其他想法，那么我会很高兴在这里

我的代码

is executed, how I know to which JS it belongs?

If someone has other ideas how to do it without URLS_Array, so I''ll be glad to here

My code

var AssetsManager = function ($) { 
    observers = [];

    assetsCount = 1;
    assetsLoaded = 0;
    //------------------------------ Private Methods ------------------------------   
    //assets: [type, url]
    function registerAssets(assets) {
        assetsCount = assets.length;

        $.each(assets, function (index, asset) {
            if (asset.type == "script") {
                registerJS(asset.url);
            }
            else if (asset.type == "stylesheet") {
                registerStyle(asset.url);
            }
        });
    }
    function registerJS(url) {

        var head= document.getElementsByTagName("head")[0];
        var script = document.createElement("script");
        script.src = url;
        script.type = "text/javascript";

        $(script).load(function () {
            assetsLoaded++;
            if (isAllAssetsLoaded()) {
                notify();
            }
        });
        head.appendChild(script);
    }
    function registerStyle(url) {

        var head= document.getElementsByTagName("head")[0];
        var style = document.createElement("link");
        style.href = url;
        style.type = "text/css";
        style.rel = "stylesheet";
        
        head.appendChild(style);
    }
    function isAllAssetsLoaded() {
        return assetsCount == assetsLoaded;
    }
    function notify() {
        $.each(observers, function (index, func) {
            func();
        });
        observers = [];
    }


    //------------------------------ Methods ------------------------------
    return {
        RegisterJS: function (url) {
            registerJS(url);
        },
        RegisterStyle: function (url) {
            registerStyle(url);
        },
        RegisterAssets: function (assets) {
            registerAssets(assets);
        },
        AttachObserver: function (o) {
            observers.push(o);
        }
    }
} (jQuery)

推荐答案

){ 观察者= []； assetCount = 1; assetLoaded = 0; //------------------------------私有方法---------------- -------------- //资产:[类型，网址] 函数registerAssets(assets){ assetCount = asset.length;

) { observers = []; assetsCount = 1; assetsLoaded = 0; //------------------------------ Private Methods ------------------------------ //assets: [type, url] function registerAssets(assets) { assetsCount = assets.length;

.each(资产，函数(索引，资产){ 如果(asset.type ==脚本"){ registerJS(asset.url); } 否则，如果(asset.type =="stylesheet"){ registerStyle(asset.url); } }); } 函数registerJS(url){ var head = document.getElementsByTagName("head")[0]; var script = document.createElement("script"); script.src =网址; script.type ="text/javascript";

.each(assets, function (index, asset) { if (asset.type == "script") { registerJS(asset.url); } else if (asset.type == "stylesheet") { registerStyle(asset.url); } }); } function registerJS(url) { var head= document.getElementsByTagName("head")[0]; var script = document.createElement("script"); script.src = url; script.type = "text/javascript";

(脚本).load(function(){ assetLoaded ++; 如果(isAllAssetsLoaded()){ 通知(); } }); head.appendChild(script); } 函数registerStyle(url){ var head = document.getElementsByTagName("head")[0]; var style = document.createElement("link"); style.href = url; style.type ="text/css"; style.rel =样式表"; head.appendChild(style); } 函数isAllAssetsLoaded(){ return assetCount == assetLoaded; } 函数notify(){

(script).load(function () { assetsLoaded++; if (isAllAssetsLoaded()) { notify(); } }); head.appendChild(script); } function registerStyle(url) { var head= document.getElementsByTagName("head")[0]; var style = document.createElement("link"); style.href = url; style.type = "text/css"; style.rel = "stylesheet"; head.appendChild(style); } function isAllAssetsLoaded() { return assetsCount == assetsLoaded; } function notify() {

这篇关于动态负载乘以资产问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！