Может кто помочь разобраться с классами и импортами в JavaScript?

Question

[symnoob]

Всем привет, к сожалению не могу до конца понять этот Javascript и как он работает.

Я имею в виду ооп и импорты...
К примеру есть у меня простой класс:

import {Modal} from 'bootstrap'

class ModalForms {

    constructor() {
        this.modalFormLink = document.querySelector('.modalFormLink')
        this.initActions(this);
    }

    initActions(self) {
        [...document.getElementsByClassName("modal-form")].forEach(
            (element, index, array) => {
                element.addEventListener('click', (event) => {
                    self.openModal(event, self)
                })
            }
        );
    }

    openModal(event, self) {
        event.preventDefault();
        let modalElement = document.querySelector('.modal');
        let modalElementLink = event.currentTarget.href

        let modal = new Modal(modalElement);

        $.ajax(modalElementLink).done(
            (data) => {
                let modalContent = new DOMParser().parseFromString(data, 'text/html').querySelector('.modal-content');
                modalElement.querySelector('.modal-dialog').childNodes.item(0).remove();
                modalElement.querySelector('.modal-dialog').appendChild(modalContent);
            }
        )

        modal.show();
    }
}

new ModalForms()

тут вроде не чего особенного просто, устанавливается событие на клик подгружается контент всё это дело открывается в модальном окне.

но теперь охота расширить это дело разными фишками, ну например подгружается форма и в полях выбора (Select input) охота привинтить такую фишку как Select2 , но залез в документацию и все примеры только под jQuery и выглядят примерно так: $(какой то селектор).select2();

Так как использовать такие вещи когда работаешь с классом?

import select2 from 'select2';

а потом в своём методе document.getElementById('мойID').select2(); не работает, так как в методе этот импортированный select2 по каким то мне неизвестным причинам не доступен...

Comments

[VladimirAsmo]

select2 у вас походу это jquery плагин, который добавляет свой метод в прототип объекта, который возвращает jquery(selector). Попробуйте так:

import 'select2'; 
document.querySelectorAll('#id').select2();

Но не думаю, что все так просто, ведь сам select2 тоже скорее всего использует jquery внутри. В итоге вам нужно или подключать jquery или менять select2 на что-то более модульное.

Answer 1

[profesor08]

Инициализировать всегда, когда обновляется html.

Comments

[symnoob]

да, это понятно, но как в вопросе и было сказано, не понятно как пользоваться этими импортами?
например с bootstrap работает. а вот с select2 не выходит. И документация с примерами вся только под jquery.

[profesor08]

symnoob, пользоваться так как написано в документации. Либо использовать что-то более современное, отвязанное от jquery и поддерживающее модульность.

Еще можно попробовать почитать как использовать плагины для jquery с помощью импортов, но оно того не стоит.

[symnoob]

profesor08, для меня очень стоит, подскажите ссылку если есть пожалуйста