не удалось дважды вызвать метод дочернего класса в родительском 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 импорт / экспорт синтаксис .

Я предполагаю, что проблема в том, что, поскольку $.getScript делает http-запрос на повторную загрузку файла сценария, он фактически запускает файл сценария дважды (по одному для каждой загрузки); во второй загрузке он столкнется с конфликтом имен. Импорт / экспорт ES6 решит эту проблему для вас, не давая переопределить BookingReport.

Вы должны знать пару вещей, однако:

(1) Используя настройки JQuery, вы получаете выгоду от отложенной загрузки. Чтобы получить то же самое в ES6, вам придется использовать немного более сложный динамический импорт (см. Ту же ссылку выше) - однако для этого приложения это не выглядит так, как будто вам это нужно.

(2) Возможно, вы захотите ознакомиться с пакетом, таким как Webpack , так как он будет выполнять импорт заранее и предоставит вам один файл для загрузки, а не необходимость пинг-понга назад и далее с сервера при попытке загрузить все модульные файлы.