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这样的捆绑器，因为这将提前进行导入，并且只剩下一个文件供下载，而不必来回乒乓尝试下载所有模块化文件时，请从服务器上下载。

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

1 个答案: