乐趣区

关于前端:全自动jQuery与渣男的故事

大家好,我是卡颂。

我是个恋旧的人,Github头像还是上古期间端游 仙剑奇侠传 的截图。

对于前端,如果能 jQuery 一把梭,我是很开心的。

ReactVue的遍及让大家习惯了 虚构 DOM的存在。然而 虚构 DOM肯定是最优解么?

举个例子,要进行如下 DOM 挪动操作:

// 变动前
abcd
// 变动后
dabc

jQuery 时调用 insertBefored挪到 a 后面就行。而 React 基于 虚构 DOMDiff 会顺次对 abc 执行appendChild,将他们顺次挪到最初。

1 次 DOM 操作 vs 3 次 DOM 操作,显然前者更高效。

那么有没有框架能砍掉 虚构 DOM,间接对 DOM 节点执行操作,实现全自动jQuery

有的,这就是最近出的petite-vue

浏览完本文,你会从原理层面理解该框架,如果你还有精力,能够在此基础上深刻框架源码。

全自动 jQuery 的实现

能够将原理概括为一句话:

建设 状态 更新 DOM 的办法 之间的分割

比方,对于如下DOM

<p v-show="showName"> 我是卡颂 </p>

冀望 showName 状态的变动能影响 p 的显隐(通过扭转diaplay)。

理论是建设 showName 的变动调用如下办法 的分割:

() => {el.style.display = get() ? initialDisplay : 'none'
}

其中 el 代表 pget() 获取 showName 以后值。

再比方,对于如下DOM

<p v-text="name"></p>

name扭转后 ptextContent会变为对应值。

理论是建设 name 的变动调用如下办法 的分割:

() => {el.textContent = toDisplayString(get())
}

所以,整个框架的工作原理跃然纸上:初始化时遍历所有 DOM,依据各种v-xx 属性建设 DOM操作 DOM 的办法 之间的分割。

当扭转状态后,会主动调用与其无关的 操作 DOM 的办法,几乎就是全自动jQuery

所以,框架的外围在于:如何建立联系?

一个渣男的故事

这部分源码都收敛在 @vue/reactivity 库中。我并不想带你精读源码,因为这样很没意思,看了还容易忘。

接下来我会通过一个故事为你展现其工作原理,当你理解原理后如果感兴趣能够本人去看源码。

咱们的指标是形容:状态变动 更新 DOM 的办法 之间的分割。说得再宽泛点,是建设 状态 副作用 之间的分割。

即:状态变动 -> 执行副作用

对于一段关系,能够从当事单方的角度形容,比方:

男生指着女生说:这是我女朋友。

接着女生指着男生说:这是我男朋友。

你作为旁观者,通过单方的形容就晓得他们处于一段恋爱关系。

推广到 状态 副作用,则是:

副作用 指着 状态 说:我依赖这个 状态,他变了我就会执行。

状态 指着 副作用 说:我订阅了这个 副作用,当我变了后我会告诉他。

能够看到,公布订阅其实是对一段关系站在单方视角的论述

举个例子,如下 DOM 构造:

<div v-scope="{num: 0}">
  <button @click="num++">add 1</button>
  <p v-show="num%2">
    <span v-text="num"></span>
  </p>
</div>  

通过 petite-vue 遍历后的关系图:

框架的交互流程为:

  1. 触发点击事件,状态 num 变动
  2. 告诉其订阅的 副作用 effect1effect2),执行对应 DOM 操作

如果从情侣关系角度解读,就是:

num指着 effect1 说:这是我女朋友。

effect1指着 num 说:这是我男朋友。

num指着 effect2 说:这是我女朋友。

effect2指着 num 说:这是我男朋友。

总结

明天咱们学习了一个框架 petite-vue,他的底层实现由多段凌乱的男女关系组成,下层是一个个间接操作DOM 的办法。

不晓得看完后你有没有趣味深刻理解下这种关系呢?

感兴趣的话能够看看 Vue MasteryVue 3 Reactivity课程。

退出移动版