如何在 JavaScript 中使用带有嵌套、显示模块模式的链接？

Question

我正在努力理解几种结合在一起的 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>

所以我想我的问题是，我该如何使用；嵌套、显示模块并链接在一起（如果可能的话）？

Answer 1

var components = (function () {

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

    return this;
};

var menu = function () {

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

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

        return this;
    };

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

        return this;
    };

    return menu;
};

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>