加载依赖项

Question

我尝试按依赖顺序加载类，因此可扩展类在扩展它们的类之前加载。

下面的方法是有效的，但是做一些看起来很常见的问题似乎有点复杂。我是否缺少实现此目标的更标准方法？

    depends = new depends(LoadDepends);
    depends.add("markerClass.js",[]);
    depends.add("zcla_clusters.js",["markerClass.js"]);
    depends.add("users.js",["markerClass.js"]);
    depends.add("zcla_wkcomsh.js",["markerClass.js"]);
    depends.chain();

以及所引用的依赖类。

class depends {
/**
 * Constructs a new instance of the Depends class.
 * @param {Function} onHasDepends - The callback function to be executed when all dependencies are loaded.
 */
constructor(onHasDepends) {
    this._depends = [];
    this._loaded = [];
    this._loading = [];
    this._onHasDepends = onHasDepends;
}

/**
 * Adds a dependency to the list of dependencies.
 * @param {string} name - The name of the dependency.
 * @param {Array<string>} dependencies - An array of dependency names.
 */
add(name, dependencies) {
    if(!this._depends.includes(name)) {
        this._depends.push(name)
        this._depends[name] = dependencies;
        for(let i in dependencies) {
            if(!this._depends.includes(dependencies[i])) {
                alert("Dependency ["+ dependencies[i] +"] not found for ["+ name +"]");
            }
        }
    }
}

/**
 * Checks if all dependencies of a given module are loaded.
 * @param {string} name - The name of the module.
 * @returns {boolean} - True if all dependencies are loaded, false otherwise.
 */
depLoaded(name) {
    let f = true;
    for (let d = 0; d < this._depends[name].length; d++) {
        if (!this._loaded.includes(this._depends[name][d])) {
            f = false;
            break;
        }
    }
    return f;
}

/**
 * Checks if all dependencies are loaded.
 * @returns {boolean} Returns true if all dependencies are loaded, false otherwise.
 */
allLoaded() {
    let f = true;
    for (let i = 0; i < this._depends.length; i++) {
        if (!this._loaded.includes(this._depends[i])) {
            f = false;
            break;
        }
    }
    return f;
}

/**
 * Executes a chain of dependent scripts.
 */
chain() {
    var ch = this
    for (let i = 0; i < this._depends.length; i++) {
        if (!this._loading.includes(this._depends[i]) && this.depLoaded(this._depends[i])) {
            var script = document.createElement('script');
            script.src = 'javascripts/' + ch._depends[i];
            script.onload = function(){
                ch._loaded.push(this.src.split('/').pop());
                if (ch.allLoaded()) {
                    ch._onHasDepends()
                } else {
                    ch.chain()
                }
            };
            ch._loading.push(ch._depends[i]);
            document.head.appendChild(script);
        }
    }
}

}

Answer 1

现代的方法是简单地使用 JavaScript 模块 和

import

。

如果

zcla_clusters.js

依赖于从

marker

导出的函数

markerClass.js

，它只需从那里导入它，浏览器将根据需要负责加载模块。

markerClass.js

// ...

export function marker(...) { ... }

zcla_clusters.js

import {marker} from './markerClass.js';

// ...