javascript - 如何在 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>