[[413634]]

在大多數(shù)低代碼平臺(tái)中的設(shè)計(jì)器都支持組件拖拽的功能，這樣大大地提高了用戶的設(shè)計(jì)體驗(yàn)。而拖拽另一個(gè)比較常見(jiàn)的場(chǎng)景就是文件上傳，通過(guò)拖拽的方式，可以讓用戶方便地上傳文件。其實(shí)利用拖拽功能，我們還可以 跨越瀏覽器的邊界，實(shí)現(xiàn)數(shù)據(jù)共享。

那么如何 跨越瀏覽器的邊界，實(shí)現(xiàn)數(shù)據(jù)共享 呢?本文阿寶哥將介紹谷歌的一個(gè)開(kāi)源項(xiàng)目 —— transmat，利用該項(xiàng)目可以實(shí)現(xiàn)上述功能。不僅如此，該項(xiàng)目還可以幫助我們實(shí)現(xiàn)一些比較好玩的功能，比如針對(duì)不同的可釋放目標(biāo)，做出不同的響應(yīng)。

下面我們先通過(guò) 4 張 Gif 動(dòng)圖來(lái)感受一下，使用 transmat 開(kāi)發(fā)的 神奇、好玩 的拖拽功能。

圖 1(把可拖拽的元素，拖拽至富文本編輯器)

圖 2(把可拖拽的元素，拖拽至 Chrome 瀏覽器，也支持其他瀏覽器)

圖 3(把可拖拽的元素，拖拽至自定義的釋放目標(biāo))

圖 4(把可拖拽的元素，拖拽至 Chrome 開(kāi)發(fā)者工具)

以上示例使用的瀏覽器版本：Chrome 91.0.4472.114(正式版本) (x86_64)

以上 4 張圖中的 可拖拽元素都是同一個(gè)元素，當(dāng)它被放置到不同的可釋放目標(biāo)時(shí)，產(chǎn)生了不同的效果。同時(shí)，我們也跨越了瀏覽器的邊界，實(shí)現(xiàn)了數(shù)據(jù)的共享?？赐暌陨? 4 張動(dòng)圖，你是不是覺(jué)得挺神奇的。其實(shí)除了拖拽之外，該示例也支持復(fù)制、粘貼操作。不過(guò)，在詳細(xì)介紹如何使用 transmat 實(shí)現(xiàn)上述功能之前，我們先來(lái)簡(jiǎn)單介紹一下 transmat 這個(gè)庫(kù)。

一、Transmat 簡(jiǎn)介

Transmat 是一個(gè)圍繞 DataTransfer API 的小型庫(kù) ，它使用 drag-drop 和 copy-paste 交互簡(jiǎn)化了在 Web 應(yīng)用程序中傳輸和接收數(shù)據(jù)的過(guò)程。DataTransfer API 能夠?qū)⒍喾N不同類型的數(shù)據(jù)傳輸?shù)接脩粼O(shè)備上的其他應(yīng)用程序，該 API 所支持的數(shù)據(jù)類型，常見(jiàn)的有這幾種：text/plain、text/html 和 application/json 等。

(圖片來(lái)源：https://google.github.io/transmat/)

了解完 transmat 是什么之后，我們來(lái)看一下它的應(yīng)用場(chǎng)景：

• 想以便捷的方式與外部應(yīng)用程序集成。
• 希望為用戶提供與其他應(yīng)用程序共享數(shù)據(jù)的能力，即使是那些你不知道的應(yīng)用程序。
• 希望外部應(yīng)用程序能夠與你的 Web 應(yīng)用程序深度集成。
• 想讓你的應(yīng)用程序更好地適應(yīng)用戶現(xiàn)有的工作流程。

現(xiàn)在你已經(jīng)對(duì) transmat 有了一定的了解，下面我們來(lái)分析如何使用 transmat 實(shí)現(xiàn)以上 4 張 Gif 動(dòng)圖對(duì)應(yīng)的功能。

二、Transmat 實(shí)戰(zhàn)

2.1 transmat-source

html

在以下代碼中，我們?yōu)?div#source 元素添加了 draggable 屬性，該屬性用于標(biāo)識(shí)元素是否允許被拖動(dòng)，它的取值為 true 或 false。

<script src="https://unpkg.com/transmat/lib/index.umd.js"></script> 
<div id="source" draggable="true" tabindex="0">大家好，我是阿寶哥</div> 

 css

#source { 
  background: #eef; 
  border: solid 1px rgba(0, 0, 255, 0.2); 
  border-radius: 8px; 
  cursor: move; 
  display: inline-block; 
  margin: 1em; 
  padding: 4em 5em; 
} 

js

const { Transmat, addListeners, TransmatObserver } = transmat; 
 
const source = document.getElementById("source"); 
 
addListeners(source, "transmit", (event) => { 
  const transmat = new Transmat(event); 
  transmat.setData({ 
    "text/plain": "大家好，我是阿寶哥!", 
    "text/html": ` 
       <h1>大家好，我是阿寶哥</h1> 
       <p>聚焦全棧，專注分享 TS、Vue 3、前端架構(gòu)等技術(shù)干貨。 
          <a href="https://juejin.cn/user/764915822103079">訪問(wèn)我的主頁(yè)</a>! 
       </p> 
       <img src="https://sf3-ttcdn-tos.pstatp.com/img/user-avatar/ 
         075d8e781ba84bf64035ac251988fb93~300x300.image" border="1" /> 
     `, 
     "text/uri-list": "https://juejin.cn/user/764915822103079", 
     "application/json": { 
        name: "阿寶哥", 
        wechat: "semlinker", 
      }, 
   }); 
 }); 

在以上代碼中，我們利用 transmat 這個(gè)庫(kù)提供的 addListeners 函數(shù)為 div#source 元素，添加了 transmit 的事件監(jiān)聽(tīng)。在對(duì)應(yīng)的事件處理器中，我們先創(chuàng)建了 Transmat 對(duì)象，然后調(diào)用該對(duì)象上的 setData 方法設(shè)置不同 MIME 類型的數(shù)據(jù)。

下面我們來(lái)簡(jiǎn)單回顧一下，示例中所使用的 MIME 類型：

• text/plain：表示文本文件的默認(rèn)值，一個(gè)文本文件應(yīng)當(dāng)是人類可讀的，并且不包含二進(jìn)制數(shù)據(jù)。
• text/html：表示 HTML 文件類型，一些富文本編輯器會(huì)優(yōu)先從 dataTransfer 對(duì)象上獲取 text/html 類型的數(shù)據(jù)，如果不存在的話，再獲取 text/plain 類型的數(shù)據(jù)。
• text/uri-list：表示 URI 鏈接類型，大多數(shù)瀏覽器都會(huì)優(yōu)先讀取該類型的數(shù)據(jù)，如果發(fā)現(xiàn)是合法的 URI 鏈接，則會(huì)直接打開(kāi)該鏈接。如果不是的合法 URI 鏈接，對(duì)于 Chrome 瀏覽器來(lái)說(shuō)，它會(huì)讀取 text/plain 類型的數(shù)據(jù)并以該數(shù)據(jù)作為關(guān)鍵詞進(jìn)行內(nèi)容檢索。
• application/json：表示 JSON 類型，該類型對(duì)前端開(kāi)發(fā)者來(lái)說(shuō)，應(yīng)該都比較熟悉了。

介紹完 transmat-source 之后，我們來(lái)看一下圖 3 自定義目標(biāo)(transmat-target)的實(shí)現(xiàn)代碼。

2.2 transmat-target

html

<script src="https://unpkg.com/transmat/lib/index.umd.js"></script> 
<div id="target" tabindex="0">放這里喲！</div> 

css

body { 
  text-align: center; 
  font: 1.2em Helvetia, Arial, sans-serif; 
} 
#target { 
  border: dashed 1px rgba(0, 0, 0, 0.5); 
  border-radius: 8px; 
  margin: 1em; 
  padding: 4em; 
} 
.drag-active { 
   background: rgba(255, 255, 0, 0.1); 
} 
.drag-over { 
   background: rgba(255, 255, 0, 0.5); 
} 

js

const { Transmat, addListeners, TransmatObserver } = transmat; 
 
const target = document.getElementById("target"); 
 
addListeners(target, "receive", (event) => { 
  const transmat = new Transmat(event); 
  // 判斷是否含有"application/json"類型的數(shù)據(jù) 
  // 及事件類型是否為drop或paste事件 
  if (transmat.hasType("application/json")  
    && transmat.accept() 
  ) { 
    const jsonString = transmat.getData("application/json"); 
    const data = JSON.parse(jsonString); 
    target.textContent = jsonString; 
  } 
}); 

在以上代碼中，我們利用 transmat 這個(gè)庫(kù)提供的 addListeners 函數(shù)為 div#target 元素，添加了 receive 的事件監(jiān)聽(tīng)。顧名思義，該 receive 事件表示接收消息。在對(duì)應(yīng)的事件處理器中，我們通過(guò) transmat 對(duì)象的 hasType 方法過(guò)濾了 application/json 的消息，然后通過(guò) JSON.parse 方法進(jìn)行反序列化獲得對(duì)應(yīng)的數(shù)據(jù)，同時(shí)把對(duì)應(yīng) jsonString 的內(nèi)容顯示在 div#target 元素內(nèi)。

在圖 3 中，當(dāng)我們把可拖拽的元素，拖拽至自定義的釋放目標(biāo)時(shí)，會(huì)產(chǎn)生高亮效果，具體如下圖所示：

這個(gè)效果是利用 transmat 這個(gè)庫(kù)提供的 TransmatObserver 類來(lái)實(shí)現(xiàn)，該類可以幫助我們響應(yīng)用戶的拖拽行為，具體的使用方式如下所示：

const obs = new TransmatObserver((entries) => { 
  for (const entry of entries) { 
    const transmat = new Transmat(entry.event); 
    if (transmat.hasType("application/json")) { 
      entry.target.classList.toggle("drag-active", entry.isActive); 
      entry.target.classList.toggle("drag-over", entry.isTarget); 
    } 
  } 
}); 
obs.observe(target); 

第一次看到 TransmatObserver 之后，阿寶哥立馬想到了 MutationObserver API，因?yàn)樗鼈兌际怯^察者且擁有類似的 API。利用 MutationObserver API 我們可以監(jiān)視 DOM 的變化。DOM 的任何變化，比如節(jié)點(diǎn)的增加、減少、屬性的變動(dòng)、文本內(nèi)容的變動(dòng)，通過(guò)這個(gè) API 我們都可以得到通知。如果你對(duì)該 API 感興趣的話，可以閱讀 是誰(shuí)動(dòng)了我的 DOM? 這篇文章。

現(xiàn)在我們已經(jīng)知道 transmat 這個(gè)庫(kù)如何使用，接下來(lái)阿寶哥將帶大家一起來(lái)分析這個(gè)庫(kù)背后的工作原理。

Transmat 使用示例：Transmat Demo

https://gist.github.com/semlinker/c40baa3d4a0567e555e2e839c84d10dd

三、Transmat 源碼分析

在 transmat 源碼分析環(huán)節(jié)，因?yàn)樵谇懊鎸?shí)戰(zhàn)部分，我們使用到了 addListeners、Transmat、TransmatObserver 這三個(gè) “函數(shù)” 來(lái)實(shí)現(xiàn)核心的功能，所以接下來(lái)的源碼分析，我們將圍繞它們展開(kāi)。這里我們先來(lái)分析 addListeners 函數(shù)。

3.1 addListeners 函數(shù)

addListeners 函數(shù)用于設(shè)置監(jiān)聽(tīng)器，調(diào)用該函數(shù)后會(huì)返回一個(gè)用于移除事件監(jiān)聽(tīng)的函數(shù)。在分析函數(shù)時(shí)，阿寶哥習(xí)慣先分析函數(shù)的簽名：

// src/transmat.ts 
function addListeners<T extends Node>( 
  target: T, 
  type: TransferEventType, 
  listener: (event: DataTransferEvent, target: T) => void, 
  options = {dragDrop: true, copyPaste: true} 
): () => void 

通過(guò)觀察以上的函數(shù)簽名，我們可以很直觀的了解該函數(shù)的輸入和輸出。該函數(shù)支持以下 4 個(gè)參數(shù)：

• target：表示監(jiān)聽(tīng)的目標(biāo)，它的類型是 Node 類型。
• type：表示監(jiān)聽(tīng)的類型，該參數(shù)的類型 TransferEventType 是一個(gè)聯(lián)合類型 —— 'transmit' | 'receive'。
• listener：表示事件監(jiān)聽(tīng)器，它支持的事件類型為 DataTransferEvent，該類型也是一個(gè)聯(lián)合類型 —— DragEvent | ClipboardEvent，即支持拖拽事件和剪貼板事件。
• options：表示配置對(duì)象，用于設(shè)置是否允許拖拽和復(fù)制、粘貼操作。

在 addListeners 函數(shù)體中，主要包含以下 3 個(gè)步驟：

• 步驟 ①：根據(jù) isTransmitEvent 和 options.copyPaste 的值，注冊(cè)剪貼板相關(guān)的事件。
• 步驟 ②：根據(jù) isTransmitEvent 和 options.dragDrop 的值，注冊(cè)拖拽相關(guān)的事件。
• 步驟 ③：返回函數(shù)對(duì)象，用于移除已注冊(cè)的事件監(jiān)聽(tīng)。

// src/transmat.ts 
export function addListeners<T extends Node>( 
  target: T, 
  type: TransferEventType, // 'transmit' | 'receive' 
  listener: (event: DataTransferEvent, target: T) => void, 
  options = {dragDrop: true, copyPaste: true} 
): () => void { 
  const isTransmitEvent = type === 'transmit'; 
  let unlistenCopyPaste: undefined | (() => void); 
  let unlistenDragDrop: undefined | (() => void); 
 
  if (options.copyPaste) { 
    // ① 可拖拽源監(jiān)聽(tīng)cut和copy事件，可釋放目標(biāo)監(jiān)聽(tīng)paste事件 
    const events = isTransmitEvent ? ['cut', 'copy'] : ['paste']; 
    const parentElement = target.parentElement!; 
    unlistenCopyPaste = addEventListeners(parentElement, events, event => { 
      if (!target.contains(document.activeElement)) { 
        return; 
      } 
      listener(event as DataTransferEvent, target); 
 
      if (event.type === 'copy' || event.type === 'cut') { 
        event.preventDefault(); 
      } 
    }); 
  } 
 
  if (options.dragDrop) { 
    // ② 可拖拽源監(jiān)聽(tīng)dragstart事件，可釋放目標(biāo)監(jiān)聽(tīng)dragover和drop事件 
    const events = isTransmitEvent ? ['dragstart'] : ['dragover', 'drop']; 
    unlistenDragDrop = addEventListeners(target, events, event => { 
      listener(event as DataTransferEvent, target); 
    }); 
  } 
 
  // ③ 返回函數(shù)對(duì)象，用于移除已注冊(cè)的事件監(jiān)聽(tīng) 
  return () => { 
    unlistenCopyPaste && unlistenCopyPaste(); 
    unlistenDragDrop && unlistenDragDrop(); 
  }; 
} 

以上代碼的事件監(jiān)聽(tīng)最終是通過(guò)調(diào)用 addEventListeners 函數(shù)來(lái)實(shí)現(xiàn)，在該函數(shù)內(nèi)部會(huì)循環(huán)調(diào)用 addEventListener 方法來(lái)添加事件監(jiān)聽(tīng)。以前面 Transmat 的使用示例為例，在對(duì)應(yīng)的事件處理回調(diào)函數(shù)內(nèi)部，我們會(huì)以 event 事件對(duì)象為參數(shù)，調(diào)用 Transmat 構(gòu)造函數(shù)創(chuàng)建 Transmat 實(shí)例。那么該實(shí)例有什么作用呢?要搞清楚它的作用，我們就需要來(lái)了解 Transmat 類。

3.2 Transmat 類

Transmat 類被定義在 src/transmat.ts 文件中，該類的構(gòu)造函數(shù)含有一個(gè)類型為 DataTransferEvent 的參數(shù) event：

// src/transmat.ts 
export class Transmat { 
  public readonly event: DataTransferEvent; 
  public readonly dataTransfer: DataTransfer; 
 
  // type DataTransferEvent = DragEvent | ClipboardEvent; 
  constructor(event: DataTransferEvent) { 
    this.event = event; 
    this.dataTransfer = getDataTransfer(event); 
  } 
} 

在 Transmat 構(gòu)造函數(shù)內(nèi)部還會(huì)通過(guò) getDataTransfer 函數(shù)來(lái)獲取 DataTransfer 對(duì)象并賦值給內(nèi)部的 dataTransfer 屬性。DataTransfer 對(duì)象用于保存拖動(dòng)并放下(drag and drop)過(guò)程中的數(shù)據(jù)。它可以保存一項(xiàng)或多項(xiàng)數(shù)據(jù)，這些數(shù)據(jù)項(xiàng)可以是一種或者多種數(shù)據(jù)類型。

下面我們來(lái)看一下 getDataTransfer 函數(shù)的具體實(shí)現(xiàn)：

// src/data_transfer.ts 
export function getDataTransfer(event: DataTransferEvent): DataTransfer { 
  const dataTransfer = 
    (event as ClipboardEvent).clipboardData ?? 
    (event as DragEvent).dataTransfer; 
  if (!dataTransfer) { 
    throw new Error('No DataTransfer available at this event.'); 
  } 
  return dataTransfer; 
} 

在以上代碼中，使用了空值合并運(yùn)算符 ??。該運(yùn)算符的特點(diǎn)是：當(dāng)左側(cè)操作數(shù)為 null 或 undefined 時(shí)，其返回右側(cè)的操作數(shù)，否則返回左側(cè)的操作數(shù)。即先判斷是否為剪貼板事件，如果是的話就會(huì)從 clipboardData 屬性獲取 DataTransfer 對(duì)象。否則，就會(huì)從 dataTransfer 屬性獲取。

對(duì)于可拖拽源，在創(chuàng)建完 Transmat 對(duì)象之后，我們就可以調(diào)用該對(duì)象上的 setData 方法保存一項(xiàng)或多項(xiàng)數(shù)據(jù)。比如，在以下代碼中，我們?cè)O(shè)置了不同類型的多項(xiàng)數(shù)據(jù)：

transmat.setData({ 
  "text/plain": "大家好，我是阿寶哥!", 
  "text/html": ` 
    <h1>大家好，我是阿寶哥</h1> 
  ... 
   `, 
  "text/uri-list": "https://juejin.cn/user/764915822103079", 
  "application/json": { 
     name: "阿寶哥", 
     wechat: "semlinker", 
   }, 
}); 

了解完 setData 方法的用法之后，我們來(lái)看一下它的具體實(shí)現(xiàn)：

// src/transmat.ts 
setData( 
  typeOrEntries: string | {[type: string]: unknown}, 
  data?: unknown 
): void { 
  if (typeof typeOrEntries === 'string') {  
    this.setData({[typeOrEntries]: data}); 
  } else { 
    // 處理多種類型的數(shù)據(jù) 
    for (const [type, data] of Object.entries(typeOrEntries)) { 
      const stringData = 
        typeof data === 'object' ? JSON.stringify(data) : `${data}`; 
      this.dataTransfer.setData(normalizeType(type), stringData); 
     } 
   } 
} 

由以上代碼可知，在 setData 方法內(nèi)部最終會(huì)調(diào)用 dataTransfer.setData 方法來(lái)保存數(shù)據(jù)。dataTransfer 對(duì)象的 setData 方法支持兩個(gè)字符串類型的參數(shù)：format 和 data。它們分別表示要保存的數(shù)據(jù)格式和實(shí)際的數(shù)據(jù)。如果給定數(shù)據(jù)格式不存在，則將對(duì)應(yīng)的數(shù)據(jù)保存到末尾。如果給定數(shù)據(jù)格式已存在，則將使用新的數(shù)據(jù)替換舊的數(shù)據(jù)。

下圖是 dataTransfer.setData 方法的兼容性說(shuō)明，由圖可知主流的現(xiàn)代瀏覽器都支持該方法。

(圖片來(lái)源：https://caniuse.com/mdn-api_datatransfer_setdata)

Transmat 類除了擁有 setData 方法之外，它也含有一個(gè) getData 方法，用于獲取已保存的數(shù)據(jù)。getData 方法支持一個(gè)字符串類型的參數(shù) type，用于表示數(shù)據(jù)的類型。在獲取數(shù)據(jù)前，會(huì)調(diào)用 hasType 方法判斷是否含有該類型的數(shù)據(jù)。如果有包含的話，就會(huì)通過(guò) dataTransfer 對(duì)象的 getData 方法來(lái)獲取該類型對(duì)應(yīng)的數(shù)據(jù)。

// src/transmat.ts 
getData(type: string): string | undefined { 
  return this.hasType(type) 
    ? this.dataTransfer.getData(normalizeType(type)) 
    : undefined; 
} 

此外，在調(diào)用 getData 方法前，還會(huì)調(diào)用 normalizeType 函數(shù)，對(duì)傳入的 type 類型參數(shù)進(jìn)行標(biāo)準(zhǔn)化操作。具體的如下所示：

// src/data_transfer.ts 
export function normalizeType(input: string) { 
  const result = input.toLowerCase(); 
  switch (result) { 
    case 'text': 
      return 'text/plain'; 
    case 'url': 
      return 'text/uri-list'; 
    default: 
      return result; 
  } 
} 

同樣，我們也來(lái)看一下 dataTransfer.getData 方法的兼容性：

(圖片來(lái)源：https://caniuse.com/mdn-api_datatransfer_getdata)

好的，Transmat 類中的 setData 和 getData 這兩個(gè)核心方法就先介紹到這里。接下來(lái)我們來(lái)介紹另一個(gè)類 —— TransmatObserver 。

3.3 TransmatObserver 類

TransmatObserver 類的作用是可以幫助我們響應(yīng)用戶的拖拽行為，可用于在拖拽過(guò)程中高亮放置區(qū)域。比如，在前面的示例中，我們通過(guò)以下方式來(lái)實(shí)現(xiàn)放置區(qū)域的高亮效果：

const obs = new TransmatObserver((entries) => { 
  for (const entry of entries) { 
    const transmat = new Transmat(entry.event); 
    if (transmat.hasType("application/json")) { 
      entry.target.classList.toggle("drag-active", entry.isActive); 
      entry.target.classList.toggle("drag-over", entry.isTarget); 
    } 
  } 
}); 
obs.observe(target); 

同樣，我們先來(lái)分析一下 TransmatObserver 類的構(gòu)造函數(shù)：

// src/transmat_observer.ts 
export class TransmatObserver { 
  private readonly targets = new Set<Element>(); // 觀察的目標(biāo)集合 
  private prevRecords: ReadonlyArray<TransmatObserverEntry> = []; // 保存前一次的記錄 
  private removeEventListeners = () => {}; 
 
  constructor(private readonly callback: TransmatObserverCallback) {} 
} 

由以上代碼可知，TransmatObserver 類的構(gòu)造函數(shù)支持一個(gè)類型為 TransmatObserverCallback 的參數(shù) callback，該參數(shù)對(duì)應(yīng)的類型定義如下：

// src/transmat_observer.ts 
export type TransmatObserverCallback = ( 
  entries: ReadonlyArray<TransmatObserverEntry>, 
  observer: TransmatObserver 
) => void; 

TransmatObserverCallback 函數(shù)類型接收兩個(gè)參數(shù)：entries 和 observer。其中 entries 參數(shù)的類型是一個(gè)

只讀數(shù)組(ReadonlyArray)，數(shù)組中每一項(xiàng)的類型是 TransmatObserverEntry，對(duì)應(yīng)的類型定義如下：

// src/transmat_observer.ts 
export interface TransmatObserverEntry { 
  target: Element; 
  /** type DataTransferEvent = DragEvent | ClipboardEvent */ 
  event: DataTransferEvent; 
  /** Whether a transfer operation is active in this window. */ 
  isActive: boolean; 
  /** Whether the element is the active target (dragover). */ 
  isTarget: boolean; 
} 

在前面 transmat-target 的示例中，當(dāng)創(chuàng)建完 TransmatObserver 實(shí)例之后，就會(huì)調(diào)用該實(shí)例的 observe 方法并傳入待觀察的對(duì)象。observe 方法的實(shí)現(xiàn)并不復(fù)雜，具體如下所示：

// src/transmat_observer.ts 
observe(target: Element) { 
  /** private readonly targets = new Set<Element>(); */ 
  this.targets.add(target); 
  if (this.targets.size === 1) { 
    this.addEventListeners(); 
  } 
} 

在 observe 方法內(nèi)部，會(huì)把需觀察的元素保存到 targets Set 集合中。當(dāng) targets 集合的大小等于 1 時(shí)，就會(huì)調(diào)用當(dāng)前實(shí)例的 addEventListeners 方法來(lái)添加事件監(jiān)聽(tīng)：

// src/transmat_observer.ts 
private addEventListeners() { 
  const listener = this.onTransferEvent as EventListener; 
  this.removeEventListeners = addEventListeners( 
    document, 
    ['dragover', 'dragend', 'dragleave', 'drop'], 
    listener, 
    true 
  ); 
} 

在私有的 addEventListeners 方法內(nèi)部，會(huì)利用我們前面介紹的 addEventListeners 函數(shù)來(lái)為 document 元素批量添加與拖拽相關(guān)的事件監(jiān)聽(tīng)。而對(duì)應(yīng)的事件說(shuō)明如下所示：

• dragover：當(dāng)元素或選中的文本被拖到一個(gè)可釋放目標(biāo)上時(shí)觸發(fā);
• dragend：當(dāng)拖拽操作結(jié)束時(shí)觸發(fā)(比如松開(kāi)鼠標(biāo)按鍵);
• dragleave：當(dāng)拖拽元素或選中的文本離開(kāi)一個(gè)可釋放目標(biāo)時(shí)觸發(fā);
• drop：當(dāng)元素或選中的文本在可釋放目標(biāo)上被釋放時(shí)觸發(fā)。

其實(shí)與拖拽相關(guān)的事件并不僅僅只有以上四種，如果你對(duì)完整的事件感興趣的話，可以閱讀 MDN 上 HTML 拖放 API 這篇文章。下面我們來(lái)重點(diǎn)分析 onTransferEvent 事件監(jiān)聽(tīng)器：

private onTransferEvent = (event: DataTransferEvent) => { 
  const records: TransmatObserverEntry[] = []; 
  for (const target of this.targets) { 
    // 當(dāng)光標(biāo)離開(kāi)瀏覽器時(shí)，對(duì)應(yīng)的事件將會(huì)被派發(fā)到body或html節(jié)點(diǎn) 
    const isLeavingDrag = 
      event.type === 'dragleave' && 
        (event.target === document.body || 
         event.target === document.body.parentElement); 
 
    // 頁(yè)面上是否有拖拽行為發(fā)生 
    // 當(dāng)拖拽操作結(jié)束時(shí)觸發(fā)dragend事件 
    // 當(dāng)元素或選中的文本在可釋放目標(biāo)上被釋放時(shí)觸發(fā)drop事件 
    const isActive = event.type !== 'drop' 
      && event.type !== 'dragend' && !isLeavingDrag; 
 
    // 判斷可拖拽的元素是否被拖到target元素上 
    const isTargetNode = target.contains(event.target as Node); 
    const isTarget = isActive && isTargetNode  
      && event.type === 'dragover'; 
 
    records.push({ 
      target, 
      event, 
      isActive, 
      isTarget, 
   }); 
 } 
     
 // 僅當(dāng)記錄發(fā)生變化的時(shí)候，才會(huì)調(diào)用回調(diào)函數(shù) 
 if (!entryStatesEqual(records, this.prevRecords)) { 
   this.prevRecords = records as ReadonlyArray<TransmatObserverEntry>; 
   this.callback(records, this); 
 } 
} 

在以上代碼中，使用了 node.contains(otherNode) 方法來(lái)判斷可拖拽的元素是否被拖到 target 元素上。當(dāng) otherNode 是 node 的后代節(jié)點(diǎn)或者 node 節(jié)點(diǎn)本身時(shí)，返回 true，否則返回 false。此外，為了避免頻繁地觸發(fā)回調(diào)函數(shù)，在調(diào)用回調(diào)函數(shù)前會(huì)先調(diào)用 entryStatesEqual 函數(shù)來(lái)檢測(cè)記錄是否發(fā)生變化。entryStatesEqual 函數(shù)的實(shí)現(xiàn)比較簡(jiǎn)單，具體如下所示：

// src/transmat_observer.ts 
function entryStatesEqual( 
  a: ReadonlyArray<TransmatObserverEntry>, 
  b: ReadonlyArray<TransmatObserverEntry> 
): boolean { 
  if (a.length !== b.length) { 
    return false; 
  } 
  // 如果有一項(xiàng)不匹配，則立即返回false。 
  return a.every((av, index) => { 
    const bv = b[index]; 
    return av.isActive === bv.isActive && av.isTarget === bv.isTarget; 
  }); 
} 

與 MutationObserver 一樣，TransmatObserver 也提供了用于獲取最近已觸發(fā)記錄的 takeRecords 方法和用于 “斷開(kāi)” 連接的 disconnect 方法：

// 返回最近已觸發(fā)記錄 
takeRecords() { 
  return this.prevRecords; 
} 
 
// 移除所有目標(biāo)及事件監(jiān)聽(tīng)器 
disconnect() { 
  this.targets.clear(); 
  this.removeEventListeners(); 
} 

到這里 Transmat 源碼分析的相關(guān)內(nèi)容已經(jīng)介紹完了，如果你對(duì)該項(xiàng)目感興趣的話，可以自行閱讀該項(xiàng)目的完整源碼。該項(xiàng)目是使用 TypeScript 開(kāi)發(fā)，已入門(mén) TypeScript 的小伙伴可以利用該項(xiàng)目鞏固一下所學(xué)的 TS 知識(shí)及 OOP 面向?qū)ο蟮脑O(shè)計(jì)思想。

四、總結(jié)

本文阿寶哥介紹了谷歌 transmat 開(kāi)源項(xiàng)目的應(yīng)用場(chǎng)景、使用方式及相關(guān)源碼。在源碼分析環(huán)節(jié)，我們一起回顧了與拖拽相關(guān)的事件及 DataTransfer API。此外，我們還分析了可以幫助我們響應(yīng)用戶的拖拽行為的 TransmatObserver 類，希望分析完該類之后，你對(duì) MutationObserver API 能有更深刻的理解。同時(shí)，在今后的工作中，若遇到類似的場(chǎng)景可以參考 TransmatObserver 類來(lái)實(shí)現(xiàn)自己的 Observer 類。

雖然自定義負(fù)載(自定義 JSON 數(shù)據(jù))對(duì)于你控制的應(yīng)用程序之間的通信很有用，但它也限制了將數(shù)據(jù)傳輸?shù)酵獠繎?yīng)用程序的能力。要解決這個(gè)問(wèn)題，你可以考慮使用輕量的 JSON-LD(Linked Data) 數(shù)據(jù)格式，它對(duì)應(yīng)的 MIME 類型是 'application/ld+json'。利用該數(shù)據(jù)格式，可以更好地組織和鏈接數(shù)據(jù)，從而創(chuàng)建更好的 Web 應(yīng)用。如果你對(duì)該數(shù)據(jù)格式感興趣，想深入學(xué)習(xí) JSON-LD(Linked Data) 的話，可以閱讀這篇文章。