当前位置：网站首页>JS to implement publish and subscribe

JS to implement publish and subscribe

2022-07-03 07:52:00 【Peter Sue】

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Simple publish subscription </title>
</head>

<body>
  <!--  In publish and subscribe mode , There are two objects , One is the publisher of the event , One is the subscriber .  Brief ideas ： 1. Create an object ( Cache list ) 2.on Method is used to call the callback function fn Are added to the cache list  3.emit Method to get arguments The first one in the class is key, according to key Value to execute the function in the corresponding cache list  4.remove The method can be based on key Value unsubscribe  -->
  <script> let event = {
       list: {
      }, //  Subscription events  on(key, fn) {
       //  If there is no corresponding... In the object key value  //  That means you haven't subscribed to  //  Then give it to key Create a cache list  if (!this.list[key]) {
       this.list[key] = [] } //  Add the function to the corresponding key In the cache list  this.list[key].push(fn) }, //  Release events  emit() {
       //  The first parameter corresponds to key value , Use the array directly shift Method take out  let key = [].shift.call(arguments), fns = this.list[key]; //  If there is no function in the cache list, it returns false if (!fns || fns.length === 0) {
       return false } //  Traverse key Value corresponds to the cache list  //  The method of executing functions in turn  fns.forEach(fn => {
       fn.apply(this, arguments) }) }, //  Unsubscribe event  remove(key, fn) {
       console.log(' Unsubscribe event '); let fns = this.list[key]; //  If there are no functions in the cache list , return false if (!fns) return false; //  If the corresponding function is not passed  //  Will be key The functions in the cache list corresponding to the value are cleared  if (!fn) {
       fns && (fns.length = 0); } else {
       //  Traverse the cache list , Look at the incoming fn With which function  //  If it is the same, delete it directly from the cache list  fns.forEach((cb, i) => {
       if (cb == fn) {
       fns.splice(i, 1) } }) } } } function cat() {
       console.log(' I'm a cat '); } function dog() {
       console.log(' I'm Wangcai '); } event.on('pet', data => {
       console.log(data); }); event.on('pet', cat); event.on('pet', dog); //  Cancel dog Method  event.remove('pet', dog); //  Release  event.emit('pet', [' Persian cat 1', ' Pipa dog 1']) </script>
</body>

</html>

//  The trigger event has two parameters （ Event name , Parameters ）
  emit (type, ...params) {
    
    //  If the event is not registered, an error is thrown 
    if (!(type in this.handlers)) {
    
      return new Error(' The event is not registered ')
    }
    //  Convenience trigger 
    this.handlers[type].forEach(handler => {
    
      handler(...params)
    })
  }

原网站

版权声明
本文为[Peter Sue]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202150602274409.html

当前位置：网站首页>JS to implement publish and subscribe

JS to implement publish and subscribe

边栏推荐

猜你喜欢

随机推荐