The story of fully automatic jQuery and the scumbag

Hi everyone, this is Kasong.

I am an old- Github person. The avatar of 060f5775ce6f99 is still a screenshot of Legend of Sword and Fairy

For the front end, I would be very happy jQuery

React and Vue has made everyone accustomed to the existence of virtual DOM. But virtual DOM must be the optimal solution?

For example, to perform the following DOM move operation:

// 变化前
abcd
// 变化后
dabc

When using jQuery , call insertBefore to d to the front of a The React based virtual DOM- Diff will turn on abc execution appendChild , they in turn will be moved to the end.

One DOM operation vs. three DOM operations. Obviously the former is more efficient.

So is there a framework that can cut off the virtual DOM and directly DOM node to achieve fully automatic jQuery ?

Yes, this is the recently petite-vue .

After reading this article, you will understand the framework from the principle level. If you still have energy, you can dive into the framework source code on this basis.

Fully automatic jQuery implementation

The principle can be summarized in one sentence:

Establish a link between the state and the method of updating the DOM

For example, for the following DOM :

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

Desired showName state changes can affect p explicit and implicit (by changing diaplay ).

In fact, it is to establish the between the and calling the following method :

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

Among them, el represents p , and get() obtains the current value of showName

For another example, for the following DOM :

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

name changed, p of textContent will become the corresponding value.

In fact, it is to establish a name change and calling the following method :

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

Therefore, the working principle of the whole framework is ready to come out: traverse all DOM during initialization, and establish the DOM between and 160f5775ce7325 method based on various v-xx attributes.

When the state is changed, it will automatically call the DOM operation method , which is simply fully automatic jQuery .

So, the core of the framework is: how to make connections?

The story of a scumbag

This part of the source code is converged in the @vue/reactivity library. I don't want to take you to intensively read the source code, because it is very boring, and it is easy to forget after reading it.

Next, I will show you its working principle through a story. After you understand the principle, you can go to the source code if you are interested.

Our goal is to describe: The state change and update DOM method . To put it more broadly, it is to establish a link between the state and the side effects of

Namely: state change -> execution side effects

For a relationship, it can be described from the perspective of both parties, such as:

The boy pointed to the girl and said: This is my girlfriend.

Then the girl pointed to the boy and said: This is my boyfriend.

As a bystander, you know that they are in a romantic relationship through the description of both parties.

Generalized to state and side effects, then:

side effect points to the status and says: I rely on this status, and I will execute it if it changes.

status points to the side effect and said: I have subscribed to this side effect, and I will notify him when I change.

It can be seen that publishing and subscribing is actually an elaboration of a relationship from the perspective of both parties

For example, the following DOM structure:

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

The relationship diagram after petite-vue

The interaction process of the framework is:

1. The click event is triggered, and the status changes to num
2. Notify its subscribed side effects ( effect1 and effect2 ), and perform the corresponding DOM operation

If you read it from the perspective of the relationship, it is:

num pointed to effect1 said: This is my girlfriend.

effect1 pointed to num said: This is my boyfriend.

num pointed to effect2 said: This is my girlfriend.

effect2 pointed to num said: This is my boyfriend.

to sum up

Today we learned a framework petite-vue . Its bottom layer is composed of multiple chaotic relationships between men and women, and the upper layer is a method DOM

I wonder if you are interested in understanding this relationship in depth after reading it?

Interested can look at Vue Mastery of Vue 3 Reactivity course.