javascript - 像加载一个文件一样加载多个 JS 文件?

标签 javascript

<分区>

我正在尝试拆分一个非常大的 JavaScript 文件。在这个文件中,我们有一个类的层次结构,有许多根类的子类。但是,根类有一个带有 switch 语句的函数,该函数根据参数返回其子类之一的不同对象。它看起来像这样:

class RootClass {
  static FromArg(arg) {
    switch (arg.Type) {
      case FirstType:
        return new FirstSubclass()
      case SecondType:
        return new SecondSubclass()
      ...
    }
  }
}

我将子类保留在其他 JavaScript 文件中。它们看起来像这样:

class FirstSubclass extends RootClass {
  ...
}

当它们保存在一个单独的 JS 文件中时,效果很好,因为所有内容都在一个文件中定义。但是,当我尝试将其分开并在外部引用这两个 JS 文件时,我遇到了问题。我不能首先加载带有根类的 JS 文件,因为现在子类没有定义。我也不能首先加载带有子类的 JS 文件,因为它们继承的根类没有定义。是否有技巧可以将这两个文件加载到 html 页面中,就好像它们仍在单个 JavaScript 文件中一样?

编辑: This问题没有解决我的问题,因为我没有尝试将 JS 文件导出到另一个 JS 文件,但我正在寻找一种方法将多个 JS 文件加载到 HTML 文件中,就好像它们在一个页面中一样。

最佳答案

考虑将您的工厂模式与根类分开。像这样:

class RootClassFactory {
    static ObjectFromArg(arg) {
        switch (arg.Type) {
            case FirstType:
                return new FirstSubclass()
            case SecondType:
                return new SecondSubclass()
            ...
        }
    }
}

class RootClass {

}

class FirstSubclass extends RootClass {
  ...
}

然后按依赖顺序加载,最后加载工厂类。

https://en.wikipedia.org/wiki/Factory_method_pattern

关于javascript - 像加载一个文件一样加载多个 JS 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56796670/

相关文章:

javascript - 无法在字符串angularjs上创建属性

javascript - SquishIt : How to minfy CSS files inside asp. 网络默认主题和来自 asp :ScriptManager? 的 Javascript 文件

javascript - MVC : How to pass back next page url in the html to the client?

javascript - 使用 $ ('#id' ).val() 不会返回下拉列表的选定值

javascript - 我想在点击它和其他启用后禁用链接按钮。使用 javascript 在两个链接按钮之间切换启用/禁用

javascript - 删除 ' + e.link[0].href + ' 开头和结尾的字符?

javascript - 如何在 Vue 转换开始之前读取大小并移动隐藏元素?

javascript - 当属性被访问但对象中不存在时抛出错误

javascript - AJAX XML回复节点值迭代

javascript - 我应该总是删除 EventListener 吗?