手写 — 简单的虚拟dom渲染
最后更新于：2022-04-02 08:12:26
>[success] # 手写一个虚拟dom 渲染
~~~
1.通过上面的分析，对整个虚拟dom渲染有了一个大致的思路，可以做一个
简化版本的'snabbdom'
2.简化版本需要的方法
2.1'h' 函数将参数格式转换成'vnode' 对象-- 虚拟dom
3.整个手写项目将采用的webpack的打包方式，关于webpack更多的使用
可以参考我的同类章节
文件目录：
├─public
│ └─ └─index.html # 打包的html 模板
├─src # 项目源代码
│ ├─vdom # 整虚拟dom 文件目录
│ │ ├─create-element.js # 虚拟dom对象定义
│ │ ├─h.js # 将函数表达式的形式渲染成 虚拟dom
│ │ ├─index.js # 我们手写的入口
│ └─ └─patch.js #
├─index.js # 打包的入口
└─webpack.config.js # webpack 配置
~~~
>[danger] ##### webpack 配置
~~~
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/index.js', // 以我们的src的index.js 作为入口进行打包
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
devtool:'source-map' ,// 可以产生source-map
plugins:[
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'public/index.html')
})
]
}
~~~
>[danger] ##### vdom 文件夹下的index.js 入口文件
~~~
1.导出对外一些方法
~~~
~~~
// 文件入口
import h from './h'
import {
render
} from './patch'
export {
h,
render
}
~~~
';