<input id="ohw05"></input>
  • <table id="ohw05"><menu id="ohw05"></menu></table>
  • <var id="ohw05"></var>
  • <code id="ohw05"><cite id="ohw05"></cite></code>
    <label id="ohw05"></label>
    <var id="ohw05"></var>
  • js中訂閱發布模式bus

    export default {
      list: {}, // 事件中心集中地
      /**
       * 發布訂閱
       * @param {string} name 事件名
       * @param  [...args]
       */
      $emit: function (name) {
        if (this.list[name]) {
          for (let i = 0; i < this.list[name].length; i++) {
            this.list[name][i].apply(this, Array.from(arguments).slice(1));
          }
        }
      },
      /**
       * 訂閱一次后取消訂閱
       * @param {string} name 事件名
       * @param {*} fn
       */
      $once: function (name, fn) {
        function on() {
          // 觸發一次后移除
          fn.apply(this, arguments);
          this.$off(name, on);
        }
        // 加個標識,如一次都沒觸發的時候也可以手動移除訂閱
        on.fn = fn;
        this.$on(name, on);
      },
      /**
       * 訂閱
       * @param {string|Array<strig>} name 事件名
       * @param {Function} fn
       * @returns
       */
      $on: function (name, fn) {
        // 傳入的數組循環調用訂閱
        if (Array.isArray(name)) {
          for (let i = 0; i < name.length; i++) {
            this.$on(name[i], fn);
          }
          return;
        }
        if (this.list[name]) {
          this.list[name].push(fn);
        } else {
          this.list[name] = [fn];
        }
      },
      /**
       * 取消訂閱
       * @param {string|Array<string>|null} name 事件名
       * @param {Function|null} fn
       * @returns
       */
      $off: function (name, fn) {
        // 沒傳入參數,清空所有訂閱
        if (!name) {
          this.list = {};
          return;
        }
        if (Array.isArray(name)) {
          for (let i = 0; i < name.length; i++) {
            this.$off(name[i], fn);
          }
          return;
        }
        const cbs = this.list[name];
        // 沒有訂閱,直接返回
        if (!cbs) return;
        // 沒有傳入對應的訂閱,清空所有相關訂閱
        if (!fn) {
          this.list[name] = null;
          return;
        }
        // 找到對應的訂閱刪除
        for (let i = 0; i < cbs.length; i++) {
          if (cbs[i] === fn || cbs[i].fn === fn) {
            cbs.splice(i, 1);
            break;
          }
        }
      }
    };
    
    
    event 用法
    $on $on(evnet,callback), $on([evnet,evnet2],callback)
    $off $off(), $off(event), $off(event,callback)
    $once $once(evnet,callback)
    $emit $emit(event), $emit(event,[...args])

    html中使用

    // 引入
    <script type="module">
    import bus from './bus.js';
    // 掛載到window上
    window.$bus = bus;
    </script>
    <script>
    // 用法
    // window.$bus.$on(event,callback), 訂閱
    // window.$bus.$once(event,callback), 訂閱一次后移除訂閱
    // window.$bus.$off(event,callback), 移除訂閱
    // window.$bus.$emit(event,[...args]), 發布
    </script>
    

    vue2中使用

    // main.js中引入
    import bus from './bus.js';
    // 掛在到原型上,創建事件總線
    Vue.prototype.$bus = bus;
    
    // 用法
    // this.$bus.$on(event,callback), 訂閱
    // this.$bus.$once(event,callback), 訂閱一次后移除訂閱
    // this.$bus.$off(event,callback), 移除訂閱
    // this.$bus.$emit(event,[...args]), 發布
    
    posted @ 2022-06-28 15:31  蘿卜愛吃肉  閱讀(7)  評論(0編輯  收藏  舉報
    国产美女a做受大片观看