refactor(runtime-dom): 重构patchProps函数

Author: coderwei99

packages/runtime-dom/src/index.ts

@@ -2,6 +2,10 @@
 import { isOn } from '@coderwei-mini-vue3/shared'
 import { createRenderer } from '@coderwei-mini-vue3/runtime-core'
 
+import { patchEvent } from './modules/event'
+import { patchClass } from './modules/class'
+import { patchStyle } from './modules/style'
+
 function createElement(type) {
   // console.log('create el 操作', type)
   const element = document.createElement(type)
@@ -23,15 +27,6 @@ function setElementText(el, text) {
   el.textContent = text
 }
 
-// 处理浏览器端 元素style样式
-function patchStyle(el, value) {
-  console.log(value)
-  const { style } = el
-  for (const key in value) {
-    style[key] = value[key]
-  }
-}
-
 function patchProp(el, key, preValue, nextValue) {
   // preValue 之前的值
   // 为了之后 update 做准备的值
@@ -40,35 +35,11 @@ function patchProp(el, key, preValue, nextValue) {
   // console.log(`key: ${key} 之前的值是:${preValue}`)
 
   if (isOn(key)) {
-    // 添加事件处理函数的时候需要注意一下
-    // 1. 添加的和删除的必须是一个函数，不然的话 删除不掉
-    //    那么就需要把之前 add 的函数给存起来，后面删除的时候需要用到
-    // 2. nextValue 有可能是匿名函数，当对比发现不一样的时候也可以通过缓存的机制来避免注册多次
-    // 存储所有的事件函数
-    const invokers = el._vei || (el._vei = {})
-    const existingInvoker = invokers[key]
-    if (nextValue && existingInvoker) {
-      // patch
-      // 直接修改函数的值即可
-      existingInvoker.value = nextValue
-    } else {
-      const eventName = key.slice(2).toLowerCase()
-      if (nextValue) {
-        const invoker = (invokers[key] = nextValue)
-        el.addEventListener(eventName, invoker)
-      } else {
-        el.removeEventListener(eventName, existingInvoker)
-        invokers[key] = undefined
-      }
-    }
+    patchEvent(el, key, nextValue)
   } else if (key === 'style') {
     patchStyle(el, nextValue)
   } else {
-    if (nextValue === null || nextValue === undefined) {
-      el.removeAttribute(key)
-    } else {
-      el.setAttribute(key, nextValue)
-    }
+    patchClass(el, key, nextValue)
   }
 }
 

packages/runtime-dom/src/modules/class.ts

@@ -0,0 +1,7 @@
+export function patchClass(el, key, nextValue) {
+  if (nextValue === null || nextValue === undefined) {
+    el.removeAttribute(key)
+  } else {
+    el.setAttribute(key, nextValue)
+  }
+}

packages/runtime-dom/src/modules/event.ts

@@ -0,0 +1,23 @@
+// 添加事件处理函数的时候需要注意一下
+// 1. 添加的和删除的必须是一个函数，不然的话 删除不掉
+//    那么就需要把之前 add 的函数给存起来，后面删除的时候需要用到
+// 2. nextValue 有可能是匿名函数，当对比发现不一样的时候也可以通过缓存的机制来避免注册多次
+// 存储所有的事件函数
+export function patchEvent(el: any, key: any, nextValue: any) {
+  const invokers = el._vei || (el._vei = {})
+  const existingInvoker = invokers[key]
+  if (nextValue && existingInvoker) {
+    // patch
+    // 直接修改函数的值即可
+    existingInvoker.value = nextValue
+  } else {
+    const eventName = key.slice(2).toLowerCase()
+    if (nextValue) {
+      const invoker = (invokers[key] = nextValue)
+      el.addEventListener(eventName, invoker)
+    } else {
+      el.removeEventListener(eventName, existingInvoker)
+      invokers[key] = undefined
+    }
+  }
+}

packages/runtime-dom/src/modules/style.ts

@@ -0,0 +1,8 @@
+// 处理浏览器端 元素style样式
+export function patchStyle(el, value) {
+  console.log(value)
+  const { style } = el
+  for (const key in value) {
+    style[key] = value[key]
+  }
+}