Snabbdom is mentioned when looking at vue source code, and this library has a very important function H.

I’m just curious, why do you use h, h is short for what, what does it stand for?

Then I turned to the word hyperScript and found an explanation

Create HyperText with JavaScript, on client or server

HTML is the abbreviation of HyperText Markup Language, which is essentially text but written in a special Markup Language. It can represent plain text, media resources, forms and other non-text, so it is HyperText.

So hyperScript is actually using JS to create hypertext, here hypertext refers to HTML, and JS can use DOM (Document Object Model) to express HTML, but JS itself is DOM API, why the author also write this library?

Here’s an example:

Create a structure like this:

<div class="parent">
  <span class="son">Yan sauce cool</span>
</div>
Copy the code

The traditional way:

function createDiv() {
  const span = document.createElement("span");
  span.className = "son";
  const div = document.createElement("div");
  div.className = "parent";
  div.appendChild(span);
  return div;
}
Copy the code

Obviously, this is still a case of simple structure, few attributes, if there are many, very cumbersome, and not very readable.

So I came up with the idea of using simple statements to describe the DOM structure that I wanted, and then using functions to generate the structure that I wanted

There are actually three axes of an element: the tag name, other information about the tag itself, and child elements

function hyperScript(tagName, attrs, children) {
  / /...
}
const h = hyperScript;
// Execute this method to generate the div above
h("div", { className: "parent" }, h("span", { className: "son" }, "Yenjang is so cool."));
Copy the code

It’s much more readable, so the library’s h function uses the description of the node (tag name, attribute and event, child element) to create the real node and return the real node.

But snabbDOM is a library that deals with vNodes, so its h function creates a virtual node with the node’s description (tag name, other tag information, child elements) and returns the virtual node.

Therefore, when I see h function, I think of it as Create Virtual HyperText with JavaScript.

In plain English, the h function creates a virtual node with a description of the node (tag name, other information about the tag itself, child elements).

Why do we need vnode when we have h?

In fact, h function, most of the time, is convenient for users to pass parameters, users only need to consider three elements: tag name, other information of the tag itself, child elements.

However, a Vnode has six attributes, among which the key comes from data, so the vnode function needs five parameters. If the user calls it, it obviously increases the threshold of understanding. Therefore, h function is used to simplify the parameter transmission and reduce the threshold of calling

H function has at most three parameters, but only the first parameter is mandatory, and the second parameter and the third parameter are both transferable. Therefore, internal judgment has been made on various situations and the correct Vnode has been generated

// NPM I snabbdom can be quickly seen in the editor console, h three arguments, mandatory is the first, data is always an object, children can be an array or a string
const { h } = require("snabbdom");

console.log(h("div.only-sel"));
console.log(h("div.only-data", { name: "demo" }));
console.log(h("div.only-text"."qqq"));
console.log(
  h("div.only-text", { key: "Data, set key here." }, [h("span"), "The child text"]));Copy the code

reference

  • Snabbdom source code parsing, teach you to implement a streamlined Virtual DOM library #33