Как использовать цепочку с вложенными, раскрывающими шаблонами модулей в JavaScript?

Я изо всех сил пытаюсь понять пару шаблонов JS, объединенных вместе: шаблон раскрывающегося модуля и шаблон цепочки.

В идеале я хотел бы иметь возможность вызывать несколько методов из одной функции инициализации, например:

components
    .loader()
    .menu()
    .toolbar();

И это прекрасно работает до тех пор, пока любые методы, которые я определяю публично return this;.

Однако все начинает идти не так, как надо, когда мне нужно вложить раскрывающиеся шаблоны модулей, чтобы открыть более глубокие методы, которые вызываются вне инициализации, например:

components
    .menu
        .close();

Проблема в том, что menu больше не возвращает components, а вместо этого возвращает свои дочерние методы, что означает, что в этот момент цепочка разрывается. Вот полный пример, иллюстрирующий то, чего я пытаюсь достичь:

var components = function () {

    var loader = function () {
        console.log("components.loader initialisation");

        return this;
    }

    var menu = function () {
        console.log("components.menu initialisation");

        var open = function () {
            console.log("components.menu.open");

            return this;
        }
        var close = function () {
            console.log("components.menu.close");

            return this;
        }

        return {
            open: open,
            close: close
        }
    }();

    var toolbar = function () {
        console.log("components.toolbar initialisation");

        return this;
    }

    return {
        loader: loader,
        menu: menu(),
        toolbar: toolbar
    }
}();

$(function () {

    components
        .loader()
        .menu()
        .toolbar();

    components
        .menu
            .open();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Итак, я думаю, мой вопрос в том, как я могу использовать; вложенные, раскрывающие модули и связывающие вместе (если это вообще возможно)?


javascript jquery chaining method-chaining revealing-module-pattern
person Chris Spittles    schedule 29.06.2016    source источник
comment
во-первых, какое вы ожидаете меню? метод компонента или модуля. Оба варианта (хотя и возможны) неоднозначны.   -  person Thomas    schedule 29.06.2016
comment
Итак, просто чтобы уточнить, вы ожидаете, что components.menu вернет components (вместе с методами open и close), а components.menu.close() также вернет components или только components.menu.close() вернет components? Возможно, было бы полезно обновить сообщение, включив в него результаты, ожидаемые для нескольких запросов.   -  person m-a-r-c-e-l-i-n-o    schedule 29.06.2016
comment
Мои извинения, я добавлю еще несколько примеров для пояснения.   -  person Chris Spittles    schedule 29.06.2016
comment
@Thomas Мне нужно меню, чтобы настроить код внутри меню, чтобы в нем были события для открытия и закрытия и т. д. Но мне нужно разрешить вызов Open и Close другими функциями, чтобы элемент панели инструментов мог, например, вызвать открытие или закрытие меню. Имеет ли это смысл?   -  person Chris Spittles    schedule 29.06.2016

Ответы (1)


arrow_upward

arrow_downward

person    schedule
comment
Это идеально спасибо! Не могли бы вы просто объяснить, почему это работает поверх RMP? Почему меню работает и как функция .menu(), и как объект .menu? - person Chris Spittles; 29.06.2016
comment
В Javascript функция также является объектом. И каждый объект может содержать свои собственные свойства. Таким образом, меню внутренней переменной является функцией (может использоваться как menu()), и это внутреннее меню имеет свойства close и open (может использоваться как menu.close()). - person Ann Sorokina; 29.06.2016