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

資訊專欄INFORMATION COLUMN

addEvent.js源碼解析

RaoMeng / 1086人閱讀

摘要:在看源碼時,發現了這段注釋源碼行的庫為的事件綁定提供了很多想法,我們就來看下年的。五內存泄漏簡單說只綁定一次,只綁定一次。并通過來為每一個定一個,然后依次添加進中,并通過執行如果一直調用來綁定事件的話,內存開銷會很大。最后完整代碼請看完

前言:
看兩三遍即可。

在看 jQuery 源碼時,發現了這段注釋:

  //源碼5235行
  /*
 * Helper functions for managing events -- not part of the public interface.
 * Props to Dean Edwards" addEvent library for many of the ideas.
 */
  jQuery.event = { }

Dean Edwards 的 addEvent.js 庫為 jQuery 的事件綁定提供了很多想法,我們就來看下 2005 年的 addEvent.js 。

〇、先復習下 Object 的內存地址指向的知識

  let a={ }
  let b=a
  b[0]="111"
  
  console.log(a,"a55") //{0:"111"}

b 改變屬性,a 也會改變,因為 b 與 a 指向同一地址(b=a)

一、addEvent()
作用:
為目標元素綁定事件(如 click)

源碼:

  //addEvent即為DOM元素綁定事件

  // a counter used to create unique IDs
  //為每一個事件添加唯一的id
  addEvent.guid = 1;

  function addEvent(element, type, handler) {
    // assign each event handler a unique ID
    //如果用戶自定義的回調函數沒有$$guid的話,
    //為每個handler添加唯一的id
    if (!handler.$$guid) handler.$$guid = addEvent.guid++;
    // create a hash table of event types for the element
    //為目標元素添加events屬性
    if (!element.events) element.events = {};
    // create a hash table of event handlers for each element/event pair
    //events是目標元素綁定的事件的集合
    //第一次使用addEvent綁定往往是undefined
    let handlers = element.events[type];
    if (!handlers) {
      handlers = element.events[type] = {};
      // store the existing event handler (if there is one)
      //handlers的0屬性作為目標元素的原生綁定事件
      if (element["on" + type]) {
        handlers[0] = element["on" + type];
      }
    }
    // store the event handler in the hash table
    //將每次綁定的事件保存到handler的id屬性中
    handlers[handler.$$guid] = handler;

    // assign a global event handler to do all the work
    //為目標元素的原生事件綁定處理程序(handleEvent)
    element["on" + type] = handleEvent;
  }

解析:
注意let handlers = element.events[type],handlers 與 element.events[type] 指向同一地址,接下來都是對 handlers 進行操作,實際上也就是對 element.events 進行操作

關鍵!
addEvent 的目的是讓目標元素的結構如下:

element:{
  //依次執行了 click 對象里的每個 handler
  onclick:handleEvent(MouseEvent)
  events:{
    click:{
      // 如果先onclick了,就會在這里
      // 0 : onclick(也就是 function (e) {console.log("原生點擊了one")})
      1 : handler(也就是 function(){console.log("點擊了one")}  )
      2 : handler ( xxx )
      3 : ...
     .. : ...    
    },
    foucus:{
      
    }, 
    ..... :{
    
    }

  }
}

注意里面的注釋。
(1)可以看到通過 addEvent 綁定的"click"事件并不是真的綁定在 element 上,而是把綁定的事件處理程序(handler)都放到了 element 的 events 上,即綁定事件和目標元素的分離

(2)由 handleEvent 來統一執行 click 事件

二、handleEvent()
作用:
執行事件的處理程序

源碼:

  //執行事件的處理程序
  function handleEvent(event) {
    // grab the event object (IE uses a global event object)
    console.log(event,"event55")
    //event即MouseEvent,原生的鼠標事件集合
    event = event || window.event;
    // get a reference to the hash table of event handlers
    //找到相同事件的處理程序
    //注意這個this,指的是目標元素
    //找到handlers集合
    let handlers = this.events[event.type];
    // execute each event handler

    //依次執行事件的處理程序
    for (let i in handlers) {
      this.$$handleEvent = handlers[i];
      this.$$handleEvent(event);
    }
  }

解析:
(1)看到上面的關鍵,再看 handleEvent 就簡單地多,就是把 element->events->click 里的事件處理程序都執行下

(2)主要看for 里面,多了個handlers 和 handleEvent,我感覺是多余的(不知道下面說的對不對,因為想到了中學解數學題,當你覺得題干中的條件你用不到時,往往是自己想錯了),因為直接這么寫就好了啊:

寫法一:

  function handleEvent(event) {
    event = event || window.event;
    for (let i in this.events[event.type]) {
      this.events[event.type][i](event)
    }
 }

寫法二:

  function handleEvent(event) {
    event = event || window.event;
    let handlers = this.events[event.type];
    for (let i in handlers) {
      handlers[i].call(this,event)
    }
 }

根據this誰調用的,this就是誰的原則,那么handleEvent thiselement["on"+type],即element.onclick在調用handleEvent 方法,既然是element的屬性onclick在調用的話,那么執行的上下文就是elementthiselement

Dean Edwards用this.$$handleEvent來執行handler,目的也是保證正確的作用域,即this

三、removeEvent

  //移除監聽事件
  function removeEvent(element, type, handler) {
    // delete the event handler from the hash table
    console.log(handler,"handler52")
    if (element.events && element.events[type]) {
      delete element.events[type][handler.$$guid];
    }
  }

注意:不把自定義事件包成一個變量,是移除不了監聽事件的:

  let one=document.querySelector("#one")
  addEvent(one,"click",function () {
    console.log("點擊了one")
  })
  removeEvent(one,"click",function () {
    console.log("點擊了one")
  })

寫成這樣才可以:

  let one=document.querySelector("#one")
  let handler=function () {
    console.log("點擊了one")
  }
  addEvent(one,"click",handler)
  removeEvent(one,"click",handler)

四、實驗

干我
let one=document.querySelector("#one") one.onclick=function (e) { console.log("原生點擊了one") } addEvent(one,"click",function () { console.log("點擊了one") })

輸出:原生點擊了one 點擊了one

干我
let one=document.querySelector("#one") addEvent(one,"click",function () { console.log("點擊了one") }) one.onclick=function (e) { console.log("原生點擊了one") }

輸出:原生點擊了one ,原因是后面的 one.onclick 覆蓋了 addEvent() 里的事件綁定

當然 jQuery 是都會觸發的。

五、內存泄漏
簡單說:
element只綁定一次onclick,只綁定一次events
并通過guid來為每一個handler定一個id,然后依次添加進events.click中,并通過onclick執行

如果一直調用onclick來綁定事件的話,內存開銷會很大。

最后:
完整代碼請看https://github.com/AttackXiaoJinJin/jQueryExplain/blob/master/addEvent.js.html

(完)

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

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

相關文章

  • Flink Metrics 源碼解析

    摘要:有如下模塊源碼解析源碼解析源碼解析源碼解析源碼解析源碼解析源碼解析源碼解析源碼解析使用和監控和博客從到學習介紹從到學習上搭建環境并構建運行簡單程序入門從到學習配置文件詳解從到學習介紹從到學習如何自 Flink Metrics 有如下模塊: Flink Metrics 源碼解析 —— Flink-metrics-core Flink Metrics 源碼解析 —— Flink-metr...

    sshe 評論0 收藏0
  • Flink 源碼解析 —— 深度解析 Flink Checkpoint 機制

    摘要:機制博客從到學習介紹從到學習上搭建環境并構建運行簡單程序入門從到學習配置文件詳解從到學習介紹從到學習如何自定義從到學習介紹從到學習如何自定義從到學習轉換從到學習介紹中的從到學習中的幾種詳解從到學習讀取數據寫入到從到學習項目如何運行從 Flink Checkpoint 機制 https://t.zsxq.com/ynQNbeM 博客 1、Flink 從0到1學習 —— Apache Fl...

    0x584a 評論0 收藏0
  • Flink 源碼解析 —— 深度解析 Flink 序列化機制

    摘要:序列化機制博客從到學習介紹從到學習上搭建環境并構建運行簡單程序入門從到學習配置文件詳解從到學習介紹從到學習如何自定義從到學習介紹從到學習如何自定義從到學習轉換從到學習介紹中的從到學習中的幾種詳解從到學習讀取數據寫入到從到學習項目如何 Flink 序列化機制 https://t.zsxq.com/JaQfeMf 博客 1、Flink 從0到1學習 —— Apache Flink 介紹 2...

    y1chuan 評論0 收藏0
  • Flink Clients 源碼解析

    摘要:模塊中的類結構如下博客從到學習介紹從到學習上搭建環境并構建運行簡單程序入門從到學習配置文件詳解從到學習介紹從到學習如何自定義從到學習介紹從到學習如何自定義從到學習轉換從到學習介紹中的從到學習中的幾種詳解從到學習讀取數據寫入到從到學 Flink-Client 模塊中的類結構如下: https://t.zsxq.com/IMzNZjY showImg(https://segmentfau...

    xiao7cn 評論0 收藏0

發表評論

0條評論

RaoMeng

|高級講師

TA的文章

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