elmer-ui-core web前端框架
简介
- 学习使用主流前端框架知识积累,为更好理解底层原理而写。项目中所使用的虚拟dom,diff算法都为本人从零开始编写而来的,和现主流框架的算法是有区别的。如果有您有兴趣研究,请做参考使用。
2.0版本的改动
- 2.0版本以后将虚拟dom渲染和diff算法合并同步执行,为减少变量虚拟dom提升性能。
- 增加支持多个子元素,通过ChildrenWrapper为前缀的标签装载dom,使用Context前缀的标签引用子元素,使用教程参考: Children
- 增加forEach列表循环渲染标签
- 增加函数组件。 教程
- 增加支持函数组件,增加hook函数给函数组件增强状态,事件管理: Hooks
- 建议自定义组件使用if控制是否显示时将其放在一个独立的元素中,防止位置错乱
3.0版本更新
- 分离数据绑定和未绑定数据节点,再次渲染时通过遍历有变化的节点提升渲染性能
- 将数据渲染过程迁移至Worker
- 对有数据变化的节点和绑定事件的操作保存到全局状态管理模块,通过映射实现最快定位变化节点
如何使用
现在已经有脚手架自动初始化项目,不需要在个人手动配置
- 全局安装脚手架
npm i -g elmer-cli
- 初始化项目, 执行init命令,选择:
创建UI开发项目
elmer-cli init
- 按脚手架提示输入项目信息,然后等待安装依赖包结束,安装过程时间比较长请耐心等待,如果安装过程失败请自行转到创建项目文件夹执行install命令安装依赖
- 在Package.json文件配置运行开发模式命令
elmer-cli start -e ./example/index.ts -t ./example/index.html
有问题反馈
在使用中有任何问题,欢迎反馈给我,可以用以下联系方式跟我交流
- 邮件: 250933400@qq.com
- 微信: qq250933400