%20(2).svg)
项目简介
easy-renderer 是一个简化版的响应式框架，为快速开发单独 JS 插件提供方法，能减少打包后的体积。它可自动监听数据更新视图，支持类 vue 语法和 jsx，适合快速开发轻量级前端应用。
项目的主要特性和功能
主要特性
- 响应式数据绑定：自动监听数据变化并更新视图。
- 类 vue 语法：提供类似 vue 的组件化开发体验。
- 支持 jsx：可使用 jsx 语法编写组件。
- 高效渲染：优化渲染效率，支持批量渲染。
功能介绍
- 组件化开发：定义组件实现代码模块化和复用。
- 数据驱动视图：数据变化自动更新视图。
- 自定义指令：注册自定义指令扩展功能。
- 生命周期方法：支持组件的 created、mounted 等生命周期方法。
- 特殊语法：支持 $eventName 自定义事件、ref 标记节点等特殊语法。
安装使用步骤
1. 安装
该项目未发布到 npm，暂无法通过 npm 安装。
2. 使用前的准备
安装 babel-plugin-transform-react-jsx 插件。
3. 全局解析 jsx
在 babel 配置文件（.babelrc 或 babel.config.js）中添加以下内容：
json
"plugins": [
["transform-react-jsx", { "pragma":"ERer.createElement" }]
]
4. 单文件解析 jsx
在文件头部写入编译注释：
js
/** @jsx ERer.createElement */
5. 引入并使用 easy-renderer
引入 easy-renderer 后，可直接使用或调用 window.ERer 来使用。按照项目提供的 API 和方法，定义组件、渲染组件等。
全局对象和方法
引入 easy-renderer 后获得的全局对象提供以下方法和属性： - component：定义(注册)组件的函数。 - render：在页面指定 dom 位置渲染（插入）dom。 - renderWrap：指定 dom 是组件一部分时，可包裹指定 dom 进行渲染。 - createElement：虚拟 dom 的生产函数。 - directive：注册自定义指令。
组件的配置和特性
1. 组件的配置
组件配置包含生命周期、数据、方法等。生命周期有 created 和 mounted 等，数据是组件内部数据，方法是组件功能实现。
2. 组件的特性和功能
组件支持自定义事件、标记节点、特殊语法等特性。特殊语法有 $-if、$-show 等自定义命令。
渲染根节点例子和注意事项
1. 渲染根节点例子
项目中需执行一次插入操作将根节点插入页面，否则组件不会实例化。示例代码如下：
tsx
let div = document.createElement('div')
ERer.render(
<div class='todo-list-app'>
<div class="title">ToDoList</div>
{ undefined }
{ div }
<Todo></Todo>
<App></App>
</div>,
document.getElementById('root')
)
2. 注意事项
项目还在开发中，存在以下待修复问题和待增加功能： - 框架 class 属性的优化，支持多个 class 配置合并；支持 json 形式配置。 - 框架 computed。 - 框架 watch 不支持 "data.list" 这种形式。 - 框架 $-if 在列表渲染中失效。 - 框架自定义指令，几个 option 周期有误。当 render 重新创建 dom 时，不能正确触发 bind，inserted。 - 框架数据变动，渲染过于频繁，导致 diff 的结果和 patch 无法对应。考虑合并渲染帧。 - 框架无法监听 $props 数据。 - 框架 $-if ，$-show 等命令在 slot （插槽）内失效。 - 框架 slot 使用 ref 标记组件的 slot 时，外层无法使用 $refs 正确获取。 - 框架 slot 子组件未渲染，插槽内容变化，会导致无效的 patch。 - 框架 slot patch DIFF_TYPE.TEXT: 文本替换，报错。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】