mvc模式与数据绑定的方式

| |

前言

页面渲染方式：

  • 服务端渲染，如smarty后端模板
    • 利于seo
    • 渲染速度更快
  • 浏览器端渲染，前端模板
    • 减少维护成本
    • 提高效率，前后端分离的合作模式

Image

模板引擎

工作原理：

  • 模板解析 / 编译 parse / compile
  • 数据渲染 render

String-based，基于string的parse和compile过程

  • 本质上是字符串拼接的形式，遍历html字符串
    • 基于正则表达式查找出模板 { { } }
    • es6模板字符串
  • 替换模型数据，实现视图渲染，依赖于innerHTML

典型库

  • art-template
  • mustache.js
  • doT

Dom-based，基于dom的link或compile过程

  • 遍历dom树节点属性和子节点，渲染render
  • 提取dom中的{ { } }关键词，替换数据模型
  • 基于mvc结构：模板视图，数据模型，引擎函数作为控制器实现数据与视图的绑定
  • 数据模型更新 -> 视图更新：双向绑定。局部渲染更新

典型库

  • Angular 脏检测，在特定事件下触发视图刷新
  • React 虚拟dom算法检查dom变化
  • Vue2 Getter/Setter机制与虚拟dom
  • avalonjs

数据双向绑定的实现

  • 监听vue实例中data属性，遍历此对象的属性，并使用Object.defineProperty 把这些属性转为getter/setter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var obj = {
    a: 1
}
// a,b属性值互相依赖，更容易监听对象的变化
Object.defineProperty(obj, "b", { // 对象，属性，属性描述符
    get: function () {
        return this.a + 1
    },
    set: function (value) {
        this.a = value / 2
    }
})
// 更新 obj.a
obj.a = 3
console.log(obj.a) // 3
console.log(obj.b) // 4
// 更新 obj.b
obj.b = 10
console.log(obj.a) // 5
console.log(obj.b) // 6
  • 数据描述符
    • 可写 / 不可写
  • 属性描述符
  • 存取描述符
    • getter / setter

Living templating，基于string的parse和基于dom的compile过程

  • htmlbar
  • ractivejs
  • regularjs