`
zccst
  • 浏览: 3319987 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

PubSubJS的使用

阅读更多
作者: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:JavaScript的依赖关系免费发布订阅

    PubSubJS设计为可在单个进程中使用,对于多进程应用程序(例如具有许多子进程的)不是一个很好的选择。 如果您的Node.js应用程序是单进程应用程序,那么您很好。 如果它是(或将要成为)多进程应用程序,那么最好...

    前端项目-jquery-tiny-pubsub.zip

    而【前端项目-jquery-tiny-pubsub】正是为了解决这个问题,它提供了一个极简的jQuery插件,实现了基本的发布/订阅功能,具有体积小巧、易于理解和使用的优点。这个项目通常包含以下几个核心部分: 1. **发布...

    前端项目-pubsub-js.zip

    在实际应用中,使用`PubSubJS`库可以帮助前端开发者轻松实现组件间的通信,如: - 用户界面元素之间的通信,例如,当一个按钮被点击时,更新另一个表格的数据。 - 异步操作的结果通知,比如从服务器获取数据后更新...

    pubsub-with-nodejs

    标题 "pubsub-with-nodejs" 暗示我们即将探讨的是使用 Node.js 实现发布/订阅(Pub/Sub)模式的相关知识。在分布式系统中,发布/订阅模式是一种通信方式,其中生产者(发布者)发布消息到一个主题,而消费者(订阅者...

    event_bus:一个简单的 pubsub 事件总线

    完全同步(使用 gem 使用 Sidekiq 进行异步操作)。安装安装宝石 gem install event_bus或者将它添加到您的 Gemfile 并运行bundle 。 gem 'event_bus'用法发布活动每当您的应用程序中发生重大事件时发布事件: ...

    jquery-pubsub:允许分层分类发布和订阅的 pubsub 的实现

    jquery-pubsub 允许分层分类发布和订阅类别的 pubsub 实现是 . 分开了。 对base或base.item或base.item.action所有订阅base.item.action将消息发布到base.item.action但对base.item.action订阅不会将消息发布到base...

    pubSub:发布订阅设计模式的JS实现,其主要作用就是提供了一套管理自定义事件的API

    这是一个CMD模块,建议使用seajs加载调用该模块提供的功能。该模块抛出了一个JS的类(构造函数),这个类(构造函数)是通过createClass函数创建的,因此其依赖了createClass模块,关于createClass模块的使用请参考...

    react:2020年给自己的礼物

    -save prop-typesaxiosnpm install --save axiosmarkdownnpm install --save showdownbootstrapnpm install --save bootstrap发布订阅PubSubJS库,组件间通信npm install --save pubsub-jsRouter react-router-dom...

    Vue-axios-pubsub-js:基于vue-axios和利用pubsub-js实现组件通信的前相互作用案例

    前言 本案例是调用GitHub官方提供的API,基于axios,pubsub-js实现一个演示,目的是让自己更加熟悉vue组件化开发思想,和前分离开发中调用接口来获取数据渲染页面。 本文最初发表在博客园,喜欢看博客的同学也可以...

Global site tag (gtag.js) - Google Analytics