作者:zccst
2015-06-10
模块间通信的原理:
发布方,publish("key1");
订阅方,subscribe("key1", context, fn);多个订阅方形成订阅数组。
当发布方publish时,执行pubsub的方法,把所有订阅key为key1的方法全部执行一遍(数组)。
PubSubJS是用来解决模块间通讯的问题。
比如,在一个列表上部创建了一个新case时,需要在创建成功的时候刷新列表,将新创建的内容显示到列表中。这种情况其实也可以直接调用。
但是再比如,有很多其他模块需要订阅刷新列表,这时优势就显现出来。
github地址:
https://github.com/mroderick/PubSubJS
如果在seajs
require('PubSub');
require('topic');
TOPIC是一个对象集合,字符串
订阅:
PubSub.subscribe(TOPIC.FEED.FEEDTEMPLATE.CREATE, $.proxy(function(){
this.queryTable();
}, this));
PubSub.subscribe(TOPIC.FEED.FEEDTEMPLATE.MODIFY, $.proxy(function(){
this.queryTable();
}, this));
PubSub.subscribe(TOPIC.FEED.FEEDTEMPLATE.DELETE, $.proxy(function(){
this.queryTable();
}, this));
发布:
ajax.post(DELETE_FEED_URL, {
args: {feedId:feedId},
success: jQuery.proxy(function(data, response, xhr){
//重点在这里
PubSub.publish(TOPIC.FEED.FEEDTEMPLATE.DELETE);
}, this),
fail: jQuery.proxy(function(msg, response, xhr){
alert(msg.length !== 0 ? msg.join('\r\n') : "系统繁忙,请稍后重试!");
}, this)
});
取消订阅:
destroy: function(){
this.undelegateEvents();
if(this.model){
this.model.unbind();
}
var $el = this.$el;
$el.unbind();
$el.empty();
//取消订阅
PubSub.unsubscribe(TOPIC.FEED.FEEDTEMPLATE.CREATE);
PubSub.unsubscribe(TOPIC.FEED.FEEDTEMPLATE.MODIFY);
PubSub.unsubscribe(TOPIC.FEED.FEEDTEMPLATE.DELETE);
}
feedListManage.prototype.destroy = function(){
this.view.destroy();
}
通过对外提供接口,在外部删除
需要在new之前先删除
//-----------------------------------外部文件----------------------------
//销毁主View
destroy: function() {
var currentView = this.currentView;
currentView && currentView.destroy && currentView.destroy();
},
feed: function(query){
//初始化feed管理页面,可传入query参数
//需要设置this.currentView
if(this.currentView && this.currentView instanceof FeedMain){
this.currentView.render(query);
} else {
this.destroy();
//初始化投放管理页面,可传入query参数
//需要设置this.currentView
this.currentView = new FeedMain($.extend(true, {}, {query: query}, this.options || {}))
}
this.renderLevel3Menu('feed');
}
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
相关推荐
PubSubJS设计为可在单个进程中使用,对于多进程应用程序(例如具有许多子进程的)不是一个很好的选择。 如果您的Node.js应用程序是单进程应用程序,那么您很好。 如果它是(或将要成为)多进程应用程序,那么最好...
而【前端项目-jquery-tiny-pubsub】正是为了解决这个问题,它提供了一个极简的jQuery插件,实现了基本的发布/订阅功能,具有体积小巧、易于理解和使用的优点。这个项目通常包含以下几个核心部分: 1. **发布...
在实际应用中,使用`PubSubJS`库可以帮助前端开发者轻松实现组件间的通信,如: - 用户界面元素之间的通信,例如,当一个按钮被点击时,更新另一个表格的数据。 - 异步操作的结果通知,比如从服务器获取数据后更新...
标题 "pubsub-with-nodejs" 暗示我们即将探讨的是使用 Node.js 实现发布/订阅(Pub/Sub)模式的相关知识。在分布式系统中,发布/订阅模式是一种通信方式,其中生产者(发布者)发布消息到一个主题,而消费者(订阅者...
完全同步(使用 gem 使用 Sidekiq 进行异步操作)。安装安装宝石 gem install event_bus或者将它添加到您的 Gemfile 并运行bundle 。 gem 'event_bus'用法发布活动每当您的应用程序中发生重大事件时发布事件: ...
jquery-pubsub 允许分层分类发布和订阅类别的 pubsub 实现是 . 分开了。 对base或base.item或base.item.action所有订阅base.item.action将消息发布到base.item.action但对base.item.action订阅不会将消息发布到base...
这是一个CMD模块,建议使用seajs加载调用该模块提供的功能。该模块抛出了一个JS的类(构造函数),这个类(构造函数)是通过createClass函数创建的,因此其依赖了createClass模块,关于createClass模块的使用请参考...
-save prop-typesaxiosnpm install --save axiosmarkdownnpm install --save showdownbootstrapnpm install --save bootstrap发布订阅PubSubJS库,组件间通信npm install --save pubsub-jsRouter react-router-dom...
前言 本案例是调用GitHub官方提供的API,基于axios,pubsub-js实现一个演示,目的是让自己更加熟悉vue组件化开发思想,和前分离开发中调用接口来获取数据渲染页面。 本文最初发表在博客园,喜欢看博客的同学也可以...