国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

擼一個JS的事件管理模塊

harryhappy / 2835人閱讀

摘要:列舉一個生活中的例子來幫助大家理解這一種模式。例子中的小明就是訂閱者訂閱的是飯涼了,而媽媽則是發布者將信號飯涼了發布出去。這樣就不用把小明和媽媽強耦合在一起,當小明的弟弟妹妹都想在飯涼了在吃飯,只需告訴媽媽一聲。

關于事件
在我們使用javascript開發時,我們會經常用到很多事件,如點擊、鍵盤、鼠標等等,這些物理性的事件。而我們今天所說的我稱之為事件的,是另一種形式的事件,訂閱---發布,又叫做觀察者模式,他定義了一對多的依賴關系,當一個對象狀態發生改變時,所有依賴于它的對象都會收到通知,而在javascript中,一般習慣性的用事件模型來替代發布---訂閱模式。

列舉一個生活中的例子來幫助大家理解這一種模式。炎熱的夏天,媽媽燒好了飯盛上桌,冒著熱氣,這時媽媽喊小明吃飯(小明在旁邊的屋子里餓著肚子大吉大利晚上吃雞...),小明出來一看,跟媽媽說,等一會 ‘飯涼了’ 再叫我,太燙了...十分鐘后...媽媽喊你 ‘飯涼了’,快來吃飯,而這時小明聽到了媽媽的喊話說 ‘飯涼了’,便快速的出來吃完了。這個例子,就是以上介紹的訂閱---發布模式。例子中的小明就是訂閱者(訂閱的是 ‘飯涼了’),而媽媽則是發布者(將信號 ‘飯涼了’ 發布出去)。

使用訂閱---發布模式的有著顯而易見的優點:訂閱者不用每時每刻都詢問發布者飯是否涼了,在合適的事件點,發布者會通知這些訂閱者,告訴他們飯涼了,他們可以過來吃了。這樣就不用把小明和媽媽強耦合在一起,當小明的弟弟妹妹都想在飯涼了在吃飯,只需告訴媽媽一聲。就像每個看官肯定都接觸過的一種訂閱---發布:DOM事件的綁定

document.body.addEventListener("click", function (e) {
     console.log("我執行了...")
}, false)
回歸正題:
*event-mange 通過訂閱-發布模式實現的*
一步一步的實現

event-mange 模塊的主要方法

on:訂閱者,添加事件

emit:發布者, 出發事件

once: 訂閱者,添加只能監聽一次之后就失效的事件

removeListener:刪除單個訂閱(事件)

removeAllListener: 刪除單個事件類型的訂閱或刪除全部訂閱

getListenerCount:獲得訂閱者的數量

event-mange 模塊的主要屬性

MaxEventListNum: 設置單個事件最多訂閱者數量(默認為10)

基本骨架

首先,我們希望通過 event.on , event.emit 來訂閱和發布,通過構造函數來創建一個event實例,而on,emit分別為這個實例的兩個方法, 同樣的,以上列出的所有主要方法,都是event的對象的原型方法。

function events () {};

// 列舉去我們想要實現的event對象的方法

event.prototype.on = function () {};

event.prototype.emit = function () {};

event.prototype.once = function () {};

event.prototype.removeListener = function () {};

event.prototype.removeAllListener = function () {};

event.prototype.getListenerCount = function () {};

似乎丟了什么,沒錯,是event對象我們上面列出來的MaxEventListNum屬性,我們給他補上

function event () {
    //因為MaxEventListNum屬性是可以讓開發者設置的
    //所以在沒有set的時候,我們將其設置為 undefind
    this.MaxEventListNum = this.MaxEventListNum || undefined;

    //如果沒有設置set,我們不能讓監聽數量無限大
    //這樣有可能會造成內存溢出
    //所以我們將默認數量設置為10(當然,設置成別的數量也是可以的)
    this.defaultMaxEventListNum = 10;
}

到這里,基本上我們想實現的時間管理模塊屬性和方法的初態也就差不多了,也就是說,骨架出來了,我們就需要填飽他的代碼邏輯,讓他變的有血有肉(看似像個生命...)

值得思考的是,骨架我們構建完了,我們要做的是一個訂閱--發布模式,我們應該怎么去記住眾多的訂閱事件呢? 首先,對于一個訂閱,我們需要有一個訂閱的類型,也就是topic,針對此topic我們要把所有的訂閱此topic的事件都放在一起,對,可以選擇Array,初步的構造

event_list: {
    topic1: [fn1, fn2, fn3 ...]
    ...
}

那么接下來我們將存放我們事件的event_list放入代碼中完善,作為event的屬性

function event () {
    // 這里我們做一個簡單的判斷,以免一些意外的錯誤出現
    if(!this.event_list) {
        this.event_list = {};
    }

    this.MaxEventListNum = this.MaxEventListNum || undefined;
    this.defaultMaxEventListNum = 10;
}
on 方法實現
event.prototype.on = function () {};

通過分析得出on方法首先應該接收一個訂閱的topic,其次是一個當此topic響應后觸發的callback方法

event.prototype.on = function (eventName, content) {};

eventName作為事件類型,將其作為event_list的一個屬性,所有的事件類型為eventName的監聽都push到eventName這個數組里面。

event.prototype.on = function (eventName, content) {
    ...
    var _event, ctx;
    _event = this.event_list;
    // 再次判斷event_list是否存在,不存在則重新賦值
    if (!_event) {
      _event = this.event_list = {};
    } else {
      // 獲取當前eventName的監聽
      ctx = this.event_list[eventName];
    }
    // 判斷是否有此監聽類型
    // 如果不存在,則表示此事件第一次被監聽
    // 將回調函數 content 直接賦值
    if (!ctx) {
      ctx = this.event_list[eventName] = content;
      // 改變訂閱者數量
      ctx.ListenerCount = 1;
    } else if (isFunction(ctx)) {
      // 判斷此屬性是否為函數(是函數則表示已經有且只有一個訂閱者)
      // 將此eventName類型由函數轉變為數組
      ctx = this.event_list[eventName] = [ctx, content];
      // 此時訂閱者數量變為數組長度
      ctx.ListenerCount = ctx.length;
    } else if (isArray(ctx)) {
      // 判斷是否為數組,如果是數組則直接push
      ctx.push(content);
      ctx.ListenerCount = ctx.length;
    }
    ...
};
once 方法實現
event.prototype.once = function () {};

once方法對已訂閱事件只執行一次,需執行完后立即在event_list中相應的訂閱類型屬性中刪除該訂閱的回調函數,其存儲過程與on方法幾乎一致,同樣需要一個訂閱類型的topic,以及一個響應事件的回調 content

event.prototype.once = function (eventName, content) {};

在執行完本次事件回調后立即取消注冊此訂閱,而如果此時同一類型的事件注冊了多個監聽回調,我們無法準確的刪除當前once方法所注冊的監聽回調,所以通常我們采用的遍歷事件監聽隊列,找到相應的監聽回調然后將其刪除是行不通的。還好,偉大的javascript語言為我們提供了一個強大的閉包特性,通過閉包的方式來裝飾content,包裝成一個全新的函數。

events.prototype.once = function (event, content) {
    ...
    // once和on的存儲事件回調機制相同
    // dealOnce 函數 包裝函數
    this.on(event, dealOnce(this, event, content));
    ...
  }

// 包裝函數
function dealOnce(target, type, content) {
    var flag = false;
    // 通過閉包特性(會將函數外部引用保存在作用域中)
    function packageFun() {
      // 當此監聽回調被調用時,會先刪除此回調方法
      this.removeListener(type, packageFun);
      if (!flag) {
        flag = true;
        // 因為閉包,所以原監聽回調還會保留,所以還會執行
        content.apply(target, arguments);
      }
      packageFun.content = content;
    }
    return packageFun;
  }

once的實現其實將我們自己傳遞的回調函數做了二次封裝,再綁定上封裝后的函數,封裝的函數首先執行了removeListener()移除了回調函數與事件的綁定,然后才執行的回調函數

emit 方法實現
event.prototype.emit = function () {};

emit方法用來發布事件,驅動執行相應的事件監聽隊列中的監聽回調,故我們需要一個事件type的topic

event.prototype.emit = function (eventName[,message][,message1][,...]) {};

當然,發布事件是,也可以像該事件監聽者傳遞參數,數量不限,則會依次傳遞給所有的監聽回調

event.prototype.emit = function (eventName[,message]) {
    var _event, ctx;
    //除第一個參數eventNmae外,其他參數保存在一個數組里
    var args = Array.prototype.slice.call(arguments, 1);
    _event = this.event_list;
    // 檢測存儲事件隊列是否存在
    if (_event) {
      // 如果存在,得到此監聽類型
      ctx = this.event_list[eventName];
    }
    // 檢測此監聽類型的事件隊列
    // 不存在則直接返回
    if (!ctx) {
      return false;
    } else if (isFunction(ctx)) {
      // 是番薯則直接執行,并將所有參數傳遞給此函數(回調函數)
      ctx.apply(this, args);
    } else if (isArray(ctx)) {
      // 是數組則遍歷調用
      for (var i = 0; i < ctx.length; i++) {
        ctx[i].apply(this, args);
      }
    }
};

emit從理解程度上來說應該是更容易一些,只是從存儲事件的對象中找到相應類型的監聽事件隊列,然后執行隊列中的每一個回調

removeListener 方法實現
event.prototype.removeListener = function () {};

刪除某種監聽類型的某一個監聽回調,顯然,我們仍然需要一個事件type,以及一個監聽回調,當事件對列中的回調與該回調相同時,則移除

event.prototype.removeListener = function (eventName, content) {};

需要注意的是,如果我們確實存在要移除某個監聽事件的回調,在on方法時一定不要使用匿名函數作為回調,這樣會導致在removeListener是無法移除,因為在javascript中匿名函數是不相等的。

// 如果需要移除

// 錯誤
event.on("eatting", function (msg) {

});

// 正確
event.on("eatting", cb);
// 回調
function cb (msg) {
    ...
}
event.prototype.removeListener = function (eventName, content) {
    var _event, ctx, index = 0;
    _event = this.event_list;
    if (!_event) {
      return this;
    } else {
      ctx = this.event_list[eventName];
    }
    if (!ctx) {
      return this;
    }
    // 如果是函數  直接delete
    if (isFunction(ctx)) {
      if (ctx === content) {
        delete _event[eventName];
      }
    } else if (isArray(ctx)) {
      // 如果是數組 遍歷
      for (var i = 0; i < ctx.length; i++) {
        if (ctx[i] === content) {
          // 監聽回調相等
          // 從該監聽回調的index開始,后面的回調依次覆蓋掉前面的回調
          // 將最后的回調刪除
          // 等價于直接將滿足條件的監聽回調刪除
          this.event_list[eventName].splice(i - index, 1);
          ctx.ListenerCount = ctx.length;
          if (this.event_list[eventName].length === 0) {
            delete this.event_list[eventName]
          }
          index++;
        }
      }
    }
};
removeAllListener 方法實現
event.prototype.removeAllListener = function () {};

此方法有兩個用途,即實現當有參數事件類型eventName時,則刪除該類型的所有監聽(清空此事件的監聽回調隊列),當沒有參數時,則將所有類型的事件監聽對壘全部移除,還是比較好理解的直接上代碼

event.prototype.removeAllListener = function ([,eventName]) {
    var _event, ctx;
    _event = this.event_list;
    if (!_event) {
      return this;
    }
    ctx = this.event_list[eventName];
    // 判斷是否有參數
    if (arguments.length === 0 && (!eventName)) {
      // 無參數
      // 將key 轉成 數組  并遍歷
      // 依次刪除所有的類型監聽
      var keys = Object.keys(this.event_list);
      for (var i = 0, key; i < keys.length; i++) {
        key = keys[i];
        delete this.event_list[key];
      }
    }
    // 有參數 直接移除
    if (ctx || isFunction(ctx) || isArray(ctx)) {
      delete this.event_list[eventName];
    } else {
      return this;
    }
};

其主要實現思路大致如上所述,貌似還漏了一些什么,哦,是對于是否超過艦艇數量的最大限制的處理
在on方法中

...
// 檢測回調隊列是否有maxed屬性以及是否為false
if (!ctx.maxed) {
      //只有在是數組的情況下才會做比較
      if (isArray(ctx)) {
        var len = ctx.length;
        if (len > (this.MaxEventListNum ? this.MaxEventListNum : this.defaultMaxEventListNum)) { 
        // 當超過最大限制,則會發除警告
          ctx.maxed = true;
          console.warn("events.MaxEventListNum || [ MaxEventListNum ] :The number of subscriptions exceeds the maximum, and if you do not set it, the default value is 10");
        } else {
          ctx.maxed = false;
        }
      }
    }

...

現在Vue可謂是紅的發紫,沒關系,events-manage也可以在Vue中掛在到全局使用哦

events.prototype.install = function (Vue, Option) {
    Vue.prototype.$ev = this;
  }

不用多解釋了吧,想必看官都明白應該怎么使用了吧(在Vue中)

關于本庫更具體更詳細的使用文檔,趕緊戳這里

碼字不易啊,如果覺得對您有一些幫助,還請給一個大大的贊

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96402.html

相關文章

  • 手把手教你一個網頁聊天室

    摘要:前端邏輯搞定之后,思考一下這個聊天室的交互是怎么實現的。在前端監聽一個事件,這個事件的觸發條件是成功和服務端建立連接。攜帶一個參數,即用戶的輸入。別人發送的消息現在就需要在前端建立一個響應服務端有新消息的監聽事件了。 一些廢話:) 最近在學校比較閑,終于有這么一塊時間可以自由支配了,所以內心還是十分的酸爽舒暢的。當然了,罪惡的事情也是有的,比如已經連續一周沒有吃早飯了,其實現在回頭想想...

    nemo 評論0 收藏0
  • 手把手教你一個網頁聊天室

    摘要:前端邏輯搞定之后,思考一下這個聊天室的交互是怎么實現的。在前端監聽一個事件,這個事件的觸發條件是成功和服務端建立連接。攜帶一個參數,即用戶的輸入。別人發送的消息現在就需要在前端建立一個響應服務端有新消息的監聽事件了。 一些廢話:) 最近在學校比較閑,終于有這么一塊時間可以自由支配了,所以內心還是十分的酸爽舒暢的。當然了,罪惡的事情也是有的,比如已經連續一周沒有吃早飯了,其實現在回頭想想...

    leiyi 評論0 收藏0
  • 手摸手,帶你用vue后臺 系列一(基礎篇)

    摘要:詳細具體的使用可以見文章手摸手,帶你優雅的使用。為了加速線上鏡像構建的速度,我們利用源進行加速并且將一些常見的依賴打入了基礎鏡像,避免每次都需要重新下載。 完整項目地址:vue-element-admin系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰篇)系類文章四:手摸手,帶你用vue擼后臺 系列四(vueAdmin 一...

    xiaotianyi 評論0 收藏0
  • 手摸手,帶你用vue后臺 系列三(實戰篇)

    摘要:社區的認可目前已經是相關最多的開源項目了,體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰篇)系類文章四:手摸手,帶你用vue擼后臺 系列...

    Channe 評論0 收藏0
  • 手摸手,帶你用vue后臺 系列三(實戰篇)

    摘要:社區的認可目前已經是相關最多的開源項目了,體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰篇)系類文章四:手摸手,帶你用vue擼后臺 系列...

    zgbgx 評論0 收藏0

發表評論

0條評論

harryhappy

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<