无法在父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这样的捆绑器，因为这将提前导入并留下您要下载的单个文件，而不是在尝试时从服务器来回拨打乒乓球下载所有模块化文件。