vue diff算法与虚拟dom知识整理(2) snabbdom简介并搭建开发环境

news2024/12/23 13:29:01

snabbdom算是diff算法和虚拟dom 的一个鼻租了

vue源码借鉴了snabbdom

这个单词翻译出来叫速度
在这里插入图片描述
命名还是用了点心的后面是 dom 这个我们大概去猜作者的意思大概想表示的就是一个比较快的dom操作

snabbdom的get地址如下
https://github.com/snabbdom/snabbdom
这里的简介也简单讲述了整体的一个概念
在这里插入图片描述
大概就是一个简单、模块化、强大和高性能的虚拟DOM库

重点来了这个虚拟dom库的核心源码仅有200行代码且代码真的是把简化和优化做到了很高的程度
在这里插入图片描述
这两百行代码的思想和其中的算法是面试官经常喜欢去问的所以掌握的程度还是非常重要的

snabbdom实际是TS写的而get上是不提供编译好的JavaScript版本的
我们这里点src目录进去
在这里插入图片描述
看到很多文件都还是 ts结尾的

但这样就还是有点麻烦其实我们可以直接通过

npm i -D snabbdom

下载到 JavaScript版本的snabbdom

这里就不建议大家去克隆get上的snabbdom了因为你get克隆下来还是一个TypeScript版本的还是要编译成js版本的

好那么我们现在来搭建环境
我们现在电脑里创建一个文件夹然后打开
在这里插入图片描述
然后在终端打开这个目录输入

npm init

这样我们就创建一个基本的 package.json 依赖
在这里插入图片描述
然后我们在终端输入

npm i -S snabbdom

然后我们的snabbdom就进来了
在这里插入图片描述
安装好之后打开新出来的 node_modules
打开下面的src
你会发现它Ts的源码其实也进来了

但其实还有 build 里面就还有js的源码

而这里大家会注意到这里都有一个 .d.ts 这个就是 ts转js留下的一个保存类型的文件

snabbdom是一个dom库简单说就是他是有界面的
你可以在上面写任何html标签但他不能在node环境下运行

那我们就需要一个 webpack和webpack-dev-server的开发环境
webpack是构建工具 webpack-dev-server则是让程序在端口上跑起来

但大家一定要注意 webpack要装5啊你要是装4那就没有读取exports的一个能力的

我们在终端执行这样一段代码

npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3

这样我们的依赖就进来了在这里插入图片描述
然后我们在项目根目录创建 webpack.config.js
参考代码如下

//通过node获取到当前文件的位置
const path = require('path')

module.exports = {
    //设置当前入口文件
    entry: './src/index.js',
    //出口配置
    output: {
      //设置打包后文件的名字
      filename: 'bundle.js',
      //设置虚拟打包  文件并不会真正打包到项目中 而是出现在指定端口上
      publicPath: 'xuni'
    },
    devServer: {
        port: 8080,
        contentBase: 'www'
    }
}

这里我们指定了入口为 src下的index.js文件那么目前还没有我们创建一下

在根目录下创建目录叫 src
在src下面创建一个文件叫 index.js
内容先不用管先创建出来

然后我们这里指定了contentBase为一个 3w目录

我们在根目录下创建一个文件夹叫 www
在项目创建一个文件叫 index.html
参考代码如下

<!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>