vue3模塊創(chuàng)建runtime-dom源碼解析

更新時(shí)間：2023年01月12日 10:30:51 作者：騶虞

這篇文章主要為大家介紹了vue3模塊創(chuàng)建runtime-dom源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

runtime-dom 是針對瀏覽器的運(yùn)行時(shí)，包括 DOM 操作、props（例如class、事件、樣式以及其它attributes）的更新等內(nèi)容；本小節(jié)我們開啟 runtime-dom 的篇章。

創(chuàng)建模塊

在 packages/runtime-dom/ 目錄下創(chuàng)建目錄文件：

│  │  └─ src
│  │     ├─ index.ts
│  │     ├─ modules
│  │     │  ├─ attr.ts  // attributes 的更新方法
│  │     │  ├─ class.ts // class 的更新
│  │     │  ├─ event.ts // 事件綁定的更新
│  │     │  └─ style.ts // style屬性的更新
│  │     ├─ nodeOps.ts  // dom操作方法
│  │     └─ patchProp.ts    // 屬性更新操作

創(chuàng)建 runtime-dom/package.json 文件：

{
  "name": "@vue/runtime-dom",
  "version": "1.0.0",
  "main": "index.js",
  "module": "dist/runtime-dom.esm-bundler.js",
  "unpkg": "dist/runtime-dom.global.js",
  "buildOptions": {
    "name": "VueRuntimeDOM",
    "formats": [
      "esm-bundler",
      "cjs",
      "global"
    ]
  }
}

nodeOptions

先創(chuàng)建一些操作 DOM 的方法，例如元素和文本的增刪改查：

// runtime-dom/src/nodeOps.ts
export const nodeOps = {
  // 1. 創(chuàng)建元素
  createElement(tagName) {
    return document.createElement(tagName);
  },
  // 創(chuàng)建文本節(jié)點(diǎn)
  createText(text) {
    return document.createTextNode(text);
  },
  // 2. 插入元素
  insert(child, parent, anchor) {
    // 元素移動(dòng)；
    // 當(dāng)?shù)诙€(gè)參數(shù)為null時(shí)，插入到末尾；
    parent.insertBefore(child, anchor || null);
  },
  // 3. 移除元素
  remove(child) {
    const parent = child.parentNode;
    if (parent) {
      parent.removeChild(child);
    }
  },
  // 4. 查詢元素
  querySelector(selector) {
    return document.querySelector(selector);
  },
  parentNode(node) {
    return node.parentNode;
  },
  nextSibling(node) {
    return node.nextSibling;
  },
  // 5. 設(shè)置文本內(nèi)容
  setElementText(el, text) {
    el.textContent = text;
  },
  setText(node, text) {
    node.nodeValue = text;
  },
};

patchProps

patchProp

再來實(shí)現(xiàn)一些屬性的更新方法：

// runtime-dom/src/patchProp.ts
import { patchAttr } from "./modules/attr";
import { patchClass } from "./modules/class";
import { patchEvent } from "./modules/event";
import { patchStyle } from "./modules/style";
export const patchProp = (el, key, prevValue, nextValue) =&gt; {
  if (key === "class") {
    // 1. class 類名
    patchClass(el, nextValue);
  } else if (key === "style") {
    // 2. 樣式
    patchStyle(el, prevValue, nextValue);
  } else if (/^on[^a-z]/.test(key)) {
    // 3. onXxx 事件
    patchEvent(el, key, nextValue);
  } else {
    // 4. 其它 attributes 屬性
    patchAttr(el, key, nextValue);
  }
};

我們將 props 分成四種類型：class、style、onXxx 事件、以及其它 attributes 屬性；分別用四種方法來處理這四種 prop。

patchClass

更新 class 屬性：

value 為空時(shí)，使用 el.removeAttribute("class") 去掉 class 屬性；
否則設(shè)置元素的 className 屬性。

// runtime-dom/src/modules/class.ts
export const patchClass = (el, value) => {
  if (value == null) {
    el.removeAttribute("class");
  } else {
    el.className = value;
  }
};

patchStyle

更新 style 屬性：

style 沒有新值時(shí)，去掉 style 屬性；style 有新值時(shí)才進(jìn)行更新；
將新的樣式添加到 style 上，如果老的 style 中有重復(fù)的，則直接將老的樣式覆蓋
對于老的 style 中有、新的 style 中沒有的樣式，需要將其移除

// runtime-dom/src/modules/style.ts
export const patchStyle = (el, prev, next) => {
  if (next) {
    const style = el.style;
    // 1. 將新的樣式添加到style上，如果有重復(fù)的直接覆蓋
    for (let key in next) {
      style[key] = next[key];
    }
    for (let key in prev) {
      // 2. 老的有，新的沒有，要移除掉
      if (next[key] == null) {
        style[key] = null;
      }
    }
  } else {
    el.removeAttribute("style");
  }
};

patchEvent

更新事件（事件是以 onXxx 的形式綁定的）：

通過一個(gè)調(diào)用器 invoker 來存儲(chǔ)事件的回調(diào)函數(shù)（存儲(chǔ)到invoker.value上），以及執(zhí)行回調(diào)（執(zhí)行invoker.value()）
需要將老事件緩存起來，緩存到 el._vei 屬性上（緩存的是 invoker）
情況一：如果存在新的事件回調(diào)函數(shù)，且在 el._vei 中存在該事件的緩存，則是更新事件；直接更新 invoker.value 即可
情況二：如果存在新的事件回調(diào)函數(shù)，但緩存中不存在，則是綁定新的事件；先創(chuàng)建 invoker，并將invoker 緩存到 el._vei 中，然后通過 el.addEventListener() 綁定事件
情況三：如果不存在新的事件回調(diào)函數(shù)，則是移除事件，直接使用 el.removeEventListener() 將該事件移除。

// runtime-dom/src/modules/event.ts
function createInvoker(initialValue) {
  const invoker = (e) => invoker.value(e);
  // 將事件的回調(diào)綁定到 invoker.value 上，后續(xù)更新事件回調(diào)的時(shí)候，只需更新 invoker.value 即可
  invoker.value = initialValue;
  return invoker;
}
export const patchEvent = (el, key, nextValue) => {
  const invokers = el._vei || (el._vei = {}); // _vei 是 vue event invoker 的縮寫
  const name = key.slice(2).toLowerCase(); // 獲取事件名
  const existingInvoker = invokers[name]; // 取緩存
  // 1. 如果是更新事件的回調(diào)
  if (nextValue && existingInvoker) {
    // 事件是存儲(chǔ)到 invoker.value 上的，更新該屬性即可
    existingInvoker.value = nextValue;
  } else {
    // 2. 如果是綁定新的事件
    if (nextValue) {
      // 2.1 創(chuàng)建 invoker（事件的回調(diào)函數(shù)），并緩存起來（本質(zhì)是緩存到el._vei上）
      const invoker = (invokers[name] = createInvoker(nextValue));
      // 2.2 綁定事件
      el.addEventListener(name, invoker);
    } else {
      // 3. 如果是移除事件
      // 3.1 解綁事件
      el.removeEventListener(name, existingInvoker);
      // 3.2 清除緩存
      invokers[name] = null;
    }
  }
};

patchAttr

更新其它 attributes：

使用 el.removeAttribute() 移除屬性；
使用 el.setAttribute() 新增和更新屬性

// runtime-dom/src/modules/attr.ts
export const patchAttr = (el, key, value) => {
  if (value == null) {
    el.removeAttribute(key);
  } else {
    el.setAttribute(key, value);
  }
};