snabbdom can be regarded as a nasal rent of diff algorithm and virtual dom
Vue source code draws on snabbdom
The translation of this word is called speed,
and the name is still named after the dim sum. It is followed by dom. We can probably guess what the author means. It probably means a faster dom operation.
The get address of snabbdom is as follows
https://github.com/snabbdom/snabbdom
The introduction here also briefly describes the overall concept
, which is probably a simple, modular, powerful and high-performance virtual DOM library
The point is that the core source code of this virtual dom library is only 200 lines of code, and the code is really simplified and optimized to a high degree. The
idea of these two hundred lines of code and the algorithm in it are what interviewers often like to ask. So The degree of mastery is still very important
snabbdom is actually written by TS, and the compiled JavaScript version is not available on get.
Let’s go to the src directory here
and see that many files still end in ts.
But this is still a bit troublesome. In fact, we can directly pass
npm i -D snabbdom
Download to JavaScript version of snabbdom
It is not recommended to clone the snabbdom on get here, because the cloned version of get is still a TypeScript version or it needs to be compiled into a js version.
Ok, so let's build the environment now.
We create a folder in the computer and open it,
then open this directory in the terminal and enter
npm init
So we create a basic package.json dependency
and then we type in the terminal
npm i -S snabbdom
Then our snabbdom comes in.
After installation, open the newly released node_modules
and open the src below,
and you will find that the source code of Ts has actually come in,
but in fact, there is also the source code of js in the build
, and everyone will notice here. There is a .d.ts, which is a saved type file left by ts to js
snabbdom is a dom library. Simply put, it has an interface.
You can write any html tags on it, but it cannot run in the node environment.
Then we need a development environment of webpack and webpack-dev-server
webpack is a construction tool webpack-dev-server is to let the program run on the port
But everyone must pay attention to the fact that webpack needs to be installed with 5. If you install 4, you will not have the ability to read exports.
We execute such a piece of code in the terminal
npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3
In this way, our dependencies come in. 
Then we create webpack.config.js in the project root directory.
The reference code is as follows
//通过node获取到当前文件的位置
const path = require('path')
module.exports = {
//设置当前入口文件
entry: './src/index.js',
//出口配置
output: {
//设置打包后文件的名字
filename: 'bundle.js',
//设置虚拟打包 文件并不会真正打包到项目中 而是出现在指定端口上
publicPath: 'xuni'
},
devServer: {
port: 8080,
contentBase: 'www'
}
}
Here we have specified the entry as the index.js file under src, so we haven’t created it yet
Create a directory under the root directory called src
and create a file under src called index.js
Contents are created first
Then we specified contentBase here as a 3w directory
We create a folder called www in the root directory
and create a file called index.html in the project.
The reference code is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>你好!!!</h1>
</body>
</html>
It is a relatively basic html structure code
Then we open package.json in the root directory of the project
and add a command under scripts
"serve": "webpack-dev-server"
Ok, then let's try to package and execute in the terminal for the first time
npm run serve
Ok, so our project is running
Then we try to access the 8080 port we specified
http://localhost:8080/
and the effect of our html code comes out
So because our webpack configuration is virtual packaged, we can't see the package in the project
Then we can access the packaged back-end files through http://localhost:8080/xuni/bundle.js
because our webpack.config.js configuration
specifies the port and then specifies the folder name of the packaged file as xuni The file inside is called bundle.js, which is configured by ourselves.
Then we introduce this packaged file in index.html under www
<script src="/xuni/bundle.js"></script>
Then let's test writing a piece of code in index.js under src
alert(123);
Then we visit the port again
, and this prompt pops up to indicate success.
He successfully packaged the script of the entry file index.js and executed it.
In this way, the environment is basically ok. The good news is that there is no need to install any loader,
especially ts, because the pure js script we want to do does not require ts, and
it will be very convenient for us.
Then we find this location in
https://github.com/snabbdom/snabbdom and test this code into the src entry file index.js
Then see that an element with the id of container is added to the index.html under the www directory,
because this js code has been written quite clearly to find a box with the id of container
Then access the project port,
if this interface appears, it means success