前端框架模板引擎

[laclys]

前端框架，核心能力--模板引擎实现

页面正常工作需要实现的功能流程：

• 监听操作
• 获取数据变量
• 使用数据变量拼接成HTML模板
• 将HTML内容塞到页面对应的地方
• 将HTML片断内需要监听的点击时间进行绑定

如果使用前端框架（数据驱动！！！）

• 使用将数据变量绑定到HTML模板的方式，来控制展示内容
• 配合一些条件判断、条件循环等逻辑，控制交互具体逻辑
• 通过改变数据变量，框架会自动更新页面内容

Vue为例页面渲染分4步

1. 解析语法生成 AST 对象；
2. 根据生成的 AST 对象，完成data数据初始化；
3. 根据 AST 对象和data数据绑定情况，生成虚拟 DOM 对象；
4. 将虚拟 DOM 对象生成真正的 DOM 元素插入到页面中，此时页面会被渲染。

• 为什么要经过AST这一步？
• 将 HTML 模板解析成 AST 对象，再根据 AST 对象生成 DOM 节点，在这个过程中前端框架可以实现以下功能：
  • 排除无效 DOM 元素（非自定义组件、也非默认组件的 DOM 元素），在构建阶段可及时发现并进行报错；
  • 可识别出自定义组件，并渲染对应的组件；
  • 可方便地实现数据绑定、事件绑定等功能；
  • 为虚拟 DOM Diff 过程打下铺垫；
  • HTML 转义（预防 XSS 漏洞）。