PubSub JS library realizes "cross component" data transfer

One 、 Reference resources

1. pubsub-js npm Address

Application scenario description

stay React and Vue In development , If you encounter data transfer between peer components or across multi-level components , have access to pubsub-js Library implementation “ Subscribe and publish ” The ability of , Realization “ Data transfer across components ”

Instructions

Quick start ( subscribe —— Release )

//  Reference resources  https://www.npmjs.com/package/pubsub-js
import PubSub from 'pubsub-js'

/** * create a function to subscribe to topics * @param {*} msg  Name of subject ,  In the case of  msg  yes  'MY TOPIC' * @param {*} data  Parameters passed by the subscription topic  */
var mySubscriber = function (msg, data) {
    
  console.log( msg, data );
};

//  Subscribe to a  'MY TOPIC'  The theme ,  The corresponding method is  mySubscriber
var token = PubSub.subscribe('MY TOPIC', mySubscriber);

//  Release theme  'MY TOPIC',  namely   The transmitted parameters are  'hello world! publish'
//  Asynchronous push 
PubSub.publish('MY TOPIC', 'hello world! publish');

//  Synchronous push 
PubSub.publishSync('MY TOPIC', 'hello world! publishSync');

test('pubsubjs demo', (done) => {
    
  //  Asynchronous push 
  // PubSub.publish('MY TOPIC', 'hello world! publish');
  setTimeout(()=>{
    
    done()
  }, 2000)
})

The publication matches multiple subscriptions The rules

//  Reference resources  https://www.npmjs.com/package/pubsub-js
import PubSub from 'pubsub-js'

var myFunc1 = function (msg, data) {
    
  console.log( msg, 'myFunc1', data );
};
var myFunc2 = function (msg, data) {
    
  console.log( msg, 'myFunc2', data );
};
var myFunc3 = function (msg, data) {
    
  console.log( msg, 'myFunc3', data );
};


test('pubsubjs demo', (done) => {
    
  PubSub.subscribe('a', myFunc1);
  PubSub.subscribe('a.b', myFunc2);
  PubSub.subscribe('a.b.c', myFunc3);

  
  // PubSub.publish('a')
  //  Will trigger a method  myFunc1
  // PubSub.publishSync('a', 'publishSync')
  //  Three methods are triggered 
  // PubSub.publishSync('a.b.c', 'publishSync')

  //  Smart trigger  myFunc3  Method 
  // PubSub.unsubscribe('a.b');
  // PubSub.publishSync('a.b.c', 'publishSync')

  //  All subscriptions are cancelled , Neither method will happen 
  PubSub.clearAllSubscriptions();
  PubSub.publishSync('a.b.c', 'publishSync')

  setTimeout(()=>{
    
    done()
  }, 2000)
})

Publications match public and personalized subscriptions The rules

//  Reference resources  https://www.npmjs.com/package/pubsub-js
import PubSub from "pubsub-js";

test("pubsubjs demo", (done) => {
    
  // create a subscriber to receive all topics from a hierarchy of topics
  var myToplevelSubscriber = function (msg, data) {
    
    console.log("top level: ", msg, data);
  };

  // subscribe to all topics in the 'car' hierarchy
  PubSub.subscribe("car", myToplevelSubscriber);

  // create a subscriber to receive only leaf topic from hierarchy op topics
  var mySpecificSubscriber = function (msg, data) {
    
    console.log("specific: ", msg, data);
  };

  // subscribe only to 'car.drive' topics
  PubSub.subscribe("car.drive", mySpecificSubscriber);

  // Publish some topics
  PubSub.publish("car.purchase", {
     name: "my new car" }); //  Trigger  myToplevelSubscriber
  PubSub.publish("car.drive", {
     speed: "14" }); //  Trigger  myToplevelSubscriber  and  mySpecificSubscriber
  PubSub.publish("car.sell", {
     newOwner: "someone else" }); //  Trigger  myToplevelSubscriber

  setTimeout(() => {
    
    done();
  }, 2000);
});

Similar applications

Reference resources Vue2.x eventBus Manage events globally “ subscribe / Release ”