我目前的代码:
- (function (myNamespace,$,undefined) {
- myNamespace.className = {
- init:function { } // do stuff
- }
- } (window.myNamespace= window.myNamespace|| {},jQuery)));
- (function (myNamespace,undefined) {
- myNamespace.className2 = {
- init:function { } // do stuff
- }
- } (window.myNamespace= window.myNamespace|| {},jQuery)));
显然,使用上面的代码,我可以使用相同的命名空间(根据页面/站点部分)并通过myNamespace.className.init()等调用它们.如果我愿意,我也可以组合它们,但我要封装类可读性.
现在,我一直在阅读关于调解员概念的http://addyosmani.com/largescalejavascript/.我的第二个问题是何时(以及如果)我应该使用这些?从className2显然我可以这样做:
- myNamespace.className2 = {
- init:function { myNamespace.className.init() } // do stuff
- }
那么为什么要订阅className如mediator.subscribe(“classNameInit”)并在className中发布该事件呢?
我非常乐意接受有关代码结构的建议,因为在我改变编写JavaScript的方式时,这是我需要做的事情.
解决方法
假设您正在构建一个社交媒体应用程序,并且您编写了一个类来封装用户列表.在某些屏幕上,单击列表中的用户会打开他们的个人资料,在另一个屏幕上可能会点击用户搜索他们留下的每个评论,而在第三个屏幕上则会发生其他情况.
如果你不使用mediator / pubsub写这个,你最终得到的是onclick事件中的一堆if语句……
- UserList.prototype.onUserClick = function(user) {
- // Check if we're supposed to open a popup
- if (this.mode === 'profile')
- // Check for something else
- else if (this.mode === 'something else')
- // Check for another case
- else if (this.mode === 'foo')
- }
Mediator是这个问题的解决方案,因为它不要求UserList了解它可能最终会遇到的每一种情况.相反,当用户点击时,UserList中的上述代码可以简化为广播…
- UserList.prototype.onUserClick = function(user) {
- this.publish('user-click',user);
- }
然后,您的其他每个屏幕或UI部件都可以只是监听用户点击消息…
- // On pages where there needs to be a popup profile
- Mediator.onMessage('user-click',function(data) {
- showProfilePopup(data);
- });
- // Or perhaps on a search page
- SearchBox.onMessage('user-click',function(data) {
- this.searchByUser(data);
- });
此外,介体开始闪耀的原因是,当UserList触发用户单击时,这些其他UI组件(如SearchBox)并不特别感兴趣,只有在发布用户单击时,它们才会感兴趣,页面上的其他UI控件才会触发用户点击也可以对这些部分作出反应.
另外,className = {}没有创建类.你可能想要的是className = function(){}.