如何在JavaScript中使用嵌套、显示模块模式的链接?
我正努力让我的头脑集中在几个JS模式上:显示模块模式和链接模式 理想情况下,我希望能够从一个初始化函数调用多个方法,如下所示:如何在JavaScript中使用嵌套、显示模块模式的链接?,javascript,jquery,chaining,method-chaining,revealing-module-pattern,Javascript,Jquery,Chaining,Method Chaining,Revealing Module Pattern,我正努力让我的头脑集中在几个JS模式上:显示模块模式和链接模式 理想情况下,我希望能够从一个初始化函数调用多个方法,如下所示: components .loader() .menu() .toolbar(); components .menu .close(); 只要我公开定义的任何方法都返回这个函数,这个函数就可以完美地工作 然而,当我需要嵌套暴露的模块模式以暴露在初始化之外调用的更深层次的方法时,事情开始出错,如下所示: component
components
.loader()
.menu()
.toolbar();
components
.menu
.close();
只要我公开定义的任何方法都返回这个函数,这个函数就可以完美地工作代码>
然而,当我需要嵌套暴露的模块模式以暴露在初始化之外调用的更深层次的方法时,事情开始出错,如下所示:
components
.loader()
.menu()
.toolbar();
components
.menu
.close();
这样做的问题是菜单
不再返回组件
,而是返回它的子方法,这意味着它在这一点上断开了链。以下是一个“完整”的示例,以说明我试图实现的目标:
var组件=函数(){
变量加载器=函数(){
console.log(“components.loader初始化”);
归还这个;
}
变量菜单=函数(){
控制台日志(“组件菜单初始化”);
var open=函数(){
console.log(“components.menu.open”);
归还这个;
}
var close=函数(){
console.log(“components.menu.close”);
归还这个;
}
返回{
开:开,,
关闭:关闭
}
}();
var toolbar=函数(){
console.log(“components.toolbar初始化”);
归还这个;
}
返回{
加载器:加载器,
菜单:菜单(),
工具栏:工具栏
}
}();
$(函数(){
组件
.loader()
.菜单()
.toolbar();
组件
.菜单
.open();
});代码>
var组件=(函数(){
变量加载器=函数(){
console.log(“components.loader初始化”);
归还这个;
};
变量菜单=函数(){
变量菜单=函数(){
控制台日志(“组件菜单初始化”);
归还这个;
};
menu.open=函数(){
console.log(“components.menu.open”);
归还这个;
};
menu.close=函数(){
console.log(“components.menu.close”);
归还这个;
};
返回菜单;
};
var toolbar=函数(){
console.log(“components.toolbar初始化”);
归还这个;
};
返回{
加载器:加载器,
菜单:菜单(),
工具栏:工具栏
};
})();
$(函数(){
组件
.loader()
.菜单()
.toolbar();
组件
.菜单
.open();
});代码>
var组件=(函数(){
变量加载器=函数(){
console.log(“components.loader初始化”);
归还这个;
};
变量菜单=函数(){
变量菜单=函数(){
控制台日志(“组件菜单初始化”);
归还这个;
};
menu.open=函数(){
console.log(“components.menu.open”);
归还这个;
};
menu.close=函数(){
console.log(“components.menu.close”);
归还这个;
};
返回菜单;
};
var toolbar=函数(){
console.log(“components.toolbar初始化”);
归还这个;
};
返回{
加载器:加载器,
菜单:菜单(),
工具栏:工具栏
};
})();
$(函数(){
组件
.loader()
.菜单()
.toolbar();
组件
.菜单
.open();
});代码>
首先,您希望菜单是什么?组件或模块的一种方法。这两种方法(虽然可能)都有点含糊不清。因此,为了澄清这一点,您希望components.menu
返回components
(以及open
和close
方法)和components.menu.close()
也返回components
或只返回components.menu.close()
要返回组件
?也许更新帖子以包含一些查询所需的输出会有所帮助。很抱歉,我将添加一些进一步的示例进行澄清。@Thomas我需要菜单来设置菜单中的代码,所以它有打开和关闭等事件,但我需要允许其他函数调用打开和关闭,以便工具栏项可能触发菜单打开或关闭。这有意义吗?首先,你希望菜单是什么?组件或模块的一种方法。这两种方法(虽然可能)都有点含糊不清。因此,为了澄清这一点,您希望components.menu
返回components
(以及open
和close
方法)和components.menu.close()
也返回components
或只返回components.menu.close()
要返回组件
?也许更新帖子以包含一些查询所需的输出会有所帮助。很抱歉,我将添加一些进一步的示例进行澄清。@Thomas我需要菜单来设置菜单中的代码,所以它有打开和关闭等事件,但我需要允许其他函数调用打开和关闭,以便工具栏项可能触发菜单打开或关闭。这有意义吗?太好了谢谢!你介意解释一下为什么这在RMP上有效吗?为什么菜单既作为函数.menu()
又作为对象.menu
?在Javascript中,函数也是对象。每个对象都可以包含自己的属性。所以内部变量菜单是一个函数(可以用作menu()),这个内部菜单有属性close和open(可以用作menu.close())。太好了,谢谢!你介意解释一下为什么这在RMP上有效吗?为什么菜单既作为函数.menu()
又作为对象.menu
?在Javascript中,函数也是对象。每个对象都可以包含自己的属性。所以内部变量菜单是一个函数(可以用作menu()),这个内部菜单有属性close和open(可以用作menu.close())。