javascript - 无法在父js文件中调用子类方法两次

Question

我有一个类别下拉菜单(在父js中)，其子类别填充父页面加载以及下拉更改。子类别将从子 js 方法填充。我必须创建子 js 实例两次。在页面加载和下拉菜单更改时。

我不想在 document.ready 中创建对象或作为全局变量

我应该在哪里创建子类对象，以便它可以在各处使用？

问题是jquery不让我打电话

 $.getScript('../Reports/assets/js/BookingReports.js'

两次发送错误，子类名称(BookingReports)标识符已创建。

class ReportsInterface extends ReportBase { 
    constructor() {
        super();
        this.fillSubCategory;
    }

    init() {
        this.Categories();  
    }

    Categories() {
        //fill category 
        this.FillSubCategory(); 
    }

    FillSubCategory() {
        if(!this.fillSubCategory) {
            $.getScript(
                '../Reports/assets/js/BookingReports.js',
                function() {
                    this.fillSubCategory=new FillSubCategory("1");
                    obj.GetSubCategory();
                }
            )
        }
    }
}

$(document).ready(function() {
    $("#ddlcategory").on('change', function() {
        (new ReportsInterface()).showReportBooking();
    })
})

我还尝试将对象保存在父类属性中，但稍后无法将其用作对象。如何在不创建任何全局变量的情况下调用子类方法两次？

Answer 1

如果您使用 ES6，我建议不要使用 JQuery 导入单独的文件，而是使用 ES6 import/export syntax .

我想问题在于，由于 $.getScript 发出了重新下载脚本文件的 http 请求，因此它实际上运行了脚本文件两次(每次下载一次)；在第二次下载时，会遇到命名冲突。 ES6 导入/导出将为您解决这个问题，防止重新定义 BookingReport。

但是您应该注意以下几点:

(1) 使用 JQuery 设置，您可以获得延迟加载的好处。要在 ES6 中获得相同的效果，您必须使用稍微复杂的动态导入(请参阅上面的相同链接)——但是，对于此应用程序，您似乎并不真正需要它。

(2) 您可能想熟悉像 Webpack 这样的 bundler 。因为这将提前进行导入，并让您下载一个文件，而不必在尝试下载所有模块化文件时在服务器之间来回切换。