querySelector недоступен внутри объекта

#javascript #jquery

Вопрос:

Итак, я разрабатываю объектно-ориентированный подход к своему модальному, и я пытаюсь преобразовать все существующие jQuery в чистые вызовы JavaScript, и у меня возникают некоторые проблемы.

Итак, вот базовая основа, которая у меня есть:

 // Initialize modal
let modal = {

// Define an element for namespacing / This will be class based.
    el: null,

    settings: {

        // Define the title
        title: null,

        // If it has a cogwheel or not
        cogwheel: false,

        // Cogwheel trigger
        cogwheel_trigger: '',

    },

    /**************************************************************************/

    header_el: function() {
        // Break down into title/cogwheel?
        // The close button was removed in top right corner
    },

    body_el: function() {
        // Will it be a container?
        // Will there be levels/columns?
    },

    footer_el: function() {
        // What buttons will be included?
        // Do we data target the Save/Close separately?
        // What buttons should we provide?
    },

    /**************************************************************************/

    // Find the modal parent/child.
    findAncestor: function() {
        // Empty
    },

    // Show the modal
    show_modal: function() {
        // Empty
    },

    // Close the modal
    close_modal: function() {
        // Empty
    },

    /**************************************************************************/
    // Controls: Things the user can interact with.

    cogwheel_ctrl: function() {
        // Empty
    },

    add_icon_ctrl: function() {
        // Empty
    },

    remove_icon_ctrl: function() {
        // Empty
    },

    add_button_ctrl: function() {
        return modal
            .body_el()
            document.querySelector('[data-ctrl="add-button"]');
    },

    save_button_ctrl: function() {
        return modal
            .footer_el()
            .find('[data-ctrl="save-button"');
    },

    close_button_ctrl: function() {
        return modal
            .footer_el()
            .find('[data-ctrl="close-button"');
    },
}

По какой-то причине при использовании .find() вызова jQuery все это отлично работает, но при вызове альтернативы JS с использованием document .querySelector Я получаю unreachable code сообщение об ошибке, как показано ниже:

Может ли кто-нибудь объяснить мне, в чем основное различие между вызовом .find() и традиционным JS?

1. Ваш оператор return вызывает эту проблему. вы возвращаетесь model.body_el() , поэтому следующая строка никогда не будет выполнена. Что вы пытаетесь сделать?

2. Разница (ваш вопрос) заключается в том, что метод find привязан к .footer_el() вызову, а document.querySelector() метод find — нет. Результат цепочки делает его одним вызовом вместо двух отдельных вызовов.

3. Предполагая, что modal.body_el() возвращает объект элемента DOM, все, что вам нужно сделать, это связать querySelector() оператор. Вот так: return modal.body_el().querySelector('[data-ctrl="add-button"]')

4. Большое спасибо, Рэнди! Это хорошее знание.

Ответ №1:

Это связано с тем, что с помощью jQuery вы объединяете методы в цепочку (объединяете их), поэтому вы возвращаете только одну вещь.

С помощью ванильного JavaScript вы не связываете методы в цепочку (и вы не можете связать методы jQuery с чистыми методами JavaScript. Итак, вы возвращаете modal.body_el() и после вызова querySelector , но вы не можете вызвать querySelector, потому что вы уже что-то вернули.

Решение:

При возврате используйте либо только методы jQuery, либо только чистые методы JavaScript.