一個(gè)removeEventListener引發(fā)的思考

jeyhan 發(fā)布于2019-08-26 10:33 / 2661人閱讀

摘要：而為對(duì)象時(shí)，可用選項(xiàng)如下之所以第三個(gè)參數(shù)有兩種形態(tài)，是在舊版本中只存在一個(gè)布爾值，即屬性但隨著時(shí)間推移以及發(fā)展的需要，需要支持設(shè)置更多的特性設(shè)置，所以有了選項(xiàng)這個(gè)對(duì)象傳參，又為了兼容以前的老程序，所以對(duì)兩者進(jìn)行了兼容。

起因

最近在看以前的代碼時(shí)，發(fā)現(xiàn)年初在熟悉react hooks新特性時(shí)寫下了這樣一段代碼：

let i = 0;
function Test(props) {
  const { loading, error, startFetch } = props;
  useEffect(() => {
    const $btn = document.querySelector(".btn"); // .info-con 存在于外層的dom中
    $btn.addEventListener("click", () => {
      const action =`action data${i++}`;
      console.log("resbtn", action);
    }, false);
    return $btn.removeEventListener("click", () => {});
  });
  if (error) {
    return {error.msg};
  }
  return (
    
      {loading && loading}
      finished
      
      Saga模擬測試
    
  );
}

我用了addEventListener和removeEventListener來嘗試useEffect的掛載和清除功能，細(xì)心的你，發(fā)現(xiàn)這段代碼有幾個(gè)錯(cuò)誤呢？
自我觀察，自認(rèn)為是有如下幾個(gè)的：

清除函數(shù)使用方式錯(cuò)誤，應(yīng)該返回的是一個(gè)函數(shù)，like：() => { $btn.removeEventListener("click", () => {}); }，而我這里是一個(gè)語句；

removeEventListener使用語法錯(cuò)誤；

useEffect未使用第二個(gè)參數(shù)，導(dǎo)致addEventListener掛載會(huì)多次執(zhí)行（可以優(yōu)化）

第1個(gè)和第3個(gè)錯(cuò)誤，是可以原諒的，當(dāng)時(shí)自己對(duì)hooks還不熟悉。但第二個(gè)錯(cuò)誤，是不可原諒的，這是需要檢討的。本文后面不會(huì)對(duì)useEffect做深入講解，官方文檔已經(jīng)足夠清楚，后面圍繞removeEventListener來剖析。

認(rèn)清removeEventListener

第二個(gè)錯(cuò)誤，拆開看，又可分為兩個(gè)方面：removeEventListener使用方式多余與語法錯(cuò)誤。

使用方式多余：雖然$btn添加了click監(jiān)聽事件回調(diào)，但由于這個(gè)節(jié)點(diǎn)屬于當(dāng)前Test組件，所以組件銷毀時(shí)，其相關(guān)節(jié)點(diǎn)的監(jiān)聽事件也會(huì)一并銷毀，這個(gè)在自己剛接觸前端時(shí)就做過這一方面的解析，所以這里的removeEventListener使用是多余的。但如果換成一個(gè)組件外的節(jié)點(diǎn)，比如我后面替換的.info-con節(jié)點(diǎn)，這是一直存在于Layout組件中的，使用removeEventListener是必要的。

語法錯(cuò)誤：指使用removeEventListener，前面兩個(gè)參數(shù)是必傳的，事件類型（type:click），事件回調(diào)函數(shù)（listener: callback），由于使用addEventListener是為事件添加的一個(gè)隊(duì)列（即同一個(gè)事件，可添加多個(gè)監(jiān)聽回調(diào)），所以事件回調(diào)函數(shù)（listener）是必傳，且其引用與添加的事件監(jiān)聽回調(diào)函數(shù)指向相同。詳細(xì)描述見官方文檔

關(guān)于語法錯(cuò)誤，官方文檔中有這樣一段描述：

由于我在添加監(jiān)聽時(shí)，使用的是箭頭函數(shù)，所以刪除時(shí)無法找到相同引用的監(jiān)聽事件，所以第一件事就是改變監(jiān)聽函數(shù)的寫法。完善后，寫法是下面這樣的：

let i = 0;
function Test(props) {
  const { loading, error, startFetch } = props;
  useEffect(() => {
    const $btn = document.querySelector(".info-con");
    const eventAction = () => {
      const action =`action data${i++}`;
      console.log("resbtn:", action);
    };
    $btn.addEventListener("click", eventAction);
    return () => {
      $btn.removeEventListener("click", eventAction);
    };
  }, []);
  if (error) {
    return {error.msg};
  }
  return (
    
      {loading && loading}
      finished
      
      Saga模擬測試
    
  );
}

到此，看似已經(jīng)結(jié)束了。但既然已經(jīng)打開了，就深入的學(xué)習(xí)一下這個(gè)api吧，常用的前兩個(gè)參數(shù)，我們都很熟悉，第三個(gè)參數(shù)寫成布爾值也偶爾會(huì)有，但是否已足夠了解呢？

第三個(gè)參數(shù)

addEventListener和removeEventListener傳參是一樣的，第三個(gè)可選參數(shù)都是一個(gè)對(duì)象或者一個(gè)布爾值：

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

當(dāng)參數(shù)為布爾值時(shí)，意指useCapture，是否在捕獲階段觸發(fā)監(jiān)聽函數(shù)。而為對(duì)象時(shí)，可用選項(xiàng)如下：

clipboard.png
之所以第三個(gè)參數(shù)有兩種形態(tài)，是在舊版本中只存在一個(gè)布爾值，即useCapture屬性；但隨著時(shí)間推移以及發(fā)展的需要，需要支持設(shè)置更多的特性設(shè)置，所以有了options選項(xiàng)這個(gè)對(duì)象傳參，又為了兼容以前的老程序，所以對(duì)兩者進(jìn)行了兼容。once和passive屬性非常有趣，但我還沒想到合適的使用它們的場景。查看官方文檔，發(fā)現(xiàn)里面確實(shí)有好多以前沒有關(guān)注到的東西，值得細(xì)細(xì)品味。
其實(shí)在js很多api中，我們都只用了一些常用的用法，而忽略了一些存在且也很適用的不常用傳參，比如下面這些：

setTimout(callback, time, ...params): 這個(gè)有多有用呢，有一道網(wǎng)紅面試題，關(guān)于閉包的，就可以利用這個(gè)參數(shù)來解決，在詳解網(wǎng)紅前端經(jīng)典面試題：setTimeout與循環(huán)閉包提到過

    function test(){
         for (var i=0; i<5; i  ) {
            setTimeout( function timer() {
                console.log(new Date(),i);
            }, 1000);
        }
        console.log("end",new Date(),i);
    }

bind(thisArg, ...params): 為函數(shù)預(yù)先傳參，在react中用的比較多；

replace(reg, str | function): replace第二參數(shù)也可以為一個(gè)函數(shù)，用于自定義替換

split(reg, length): split其實(shí)也是有第二個(gè)參數(shù)的，用以指定返回?cái)?shù)組的長度不超過指定大小；

暫時(shí)想不起來了...

思考

這一次關(guān)于對(duì)removeEventListener的使用錯(cuò)誤，讓我不得不意識(shí)到，對(duì)于自己下一步技術(shù)提升的著重點(diǎn)還是該多關(guān)注基礎(chǔ)，不要學(xué)的太寬泛，而成為泛而不精的人，最后一無是處。最近這一年確實(shí)太癡迷（yilai）于框架（React），基礎(chǔ)關(guān)注的太少。框架與基礎(chǔ)，框架層出不窮，但基礎(chǔ)只是持續(xù)在演進(jìn)。