使用 观察者模式/订阅者模式

在vue中，有eventHub 可以使用，但是在 react，组件间想要传递 事件就是一件麻烦的事情，

虽然有 redux、mobx 可以使用，但是终归不方便

所以这次项目里，就引入了观察者模式

// utils/observe.js
const Observer = (function () {
  // 事件的容器
  var __message = {};
  return {
    // 注册 事件
    regist(type, fn) {
      if (typeof __message[type] === 'undefined') {
        __message[type] = [fn];
      } else {
        __message[type].push(fn);
      }
    },
    // 触发 事件
    fire(type, ...args) {
      if (!__message[type]) return;
      for (const fn of __message[type]) {
        fn.apply(this, args);
      }
    },
    // 移除 事件 
    remove(type, fn) {
      if (__message[type] instanceof Array) {
        var i = __message[type].length - 1;
        for (; i >= 0; i--) {
          __message[type][i] === fn && __message[type].splice(i, 1);
        }
      }
    }
  }
})()
window.Observer = Observer;
export default Observer

这里为了方便，就全局共享了一个观察者

import observer from '@/utils/observer';

useEffect(() => {
    //  注册
    observer.regist('onclick', handleSearch);
    return () => {
      //  解除注册
      observer.remove('onclick', handleSearch);
    };
  }, [])

这样在 其他的组件乃至于 控制台可以使用 Observer.fire('onclick')  来触发

使用的时候，要

注意 regist 注入的函数 和 remove 尽量是 是一个命名函数，在 react hook中使用 useCallback 可以完成，否则是找不到并去除的

在 vue 父子组件的 自定义事件中，其实 就是使用了 观察者模式

实现方式其实 就是 通过 @function="function" 的 方式，将 function 这个变量 传递给子组件，然后 子组件 默认地  $on 了 这个函数，所以在 $emit 的时候，其实就触发了 自定义事件

所以不要看 是写在 父组件的，其实是 绑定在了 子组件那里