前端框架

共计 796 字，约需阅读 2.89 分钟

DOM 操作时代

代表库 jQuery 和 zepto

  • 简化选择器
  • 简化 DOM 操作
  • 简化 AJAX 操作
  • 统一事件绑定
  • 兼容性实现
  • 延时对象（$.Deferred）

DOM 操作的一般流程

  1. DOM 加载
  2. js 脚本加载
  3. js脚本执行，发送异步请求获取数据
  4. 操作 DOM 进行数据渲染
  5. 对 DOM 节点进行事件绑定

DOM 操作流程

MV* 交互模式

MVC 模式

将 DOM 交互部分的内容分为数据模型、视图和事件控制三部分

  • Model：存放请求的数据结果和数据对象
  • View: 页面 DOM 的更新与修改
  • Controller: 根据前端路由条件调用不同的 Model 和 View渲染不同的数据内容

用户的操作直接通过 Controller 控制

MVP 模式

Model-View-Presenter，将 DOM 交互部分的内容分为数据模型、视图和 Presenter 三部分

  • Model：存放请求的数据结果和数据对象（仅提供数据）
  • View: 页面 DOM 的更新与修改（仅提供视图模板）
  • Presenter: 根据前端路由条件调用不同的 Model 和 View渲染不同的数据内容（主要的逻辑处理）

Presenter 与 View 的绑定是双向的，Presenter 的改变会改变 View，View 的改变也会触发 Presenter，所有的逻辑调用数据和渲染视图 View 模板都在 Presenter 中完成，同时用户在 View 层操作的改变反馈到 Presenter 改变 Model并渲染新的 View 视图。

  • 优点：只需关注 Presenter 的逻辑
  • 缺点：内容较重

MVVM 模式

自动化的 MVP 框架，用 ViewModel 代替 Presenter，Model 的调用和 View 由 ViewModel 自动触发完成
用户操作时， ViewModel 捕获数据变化，将变化反应到 View 上。 ViewModel 的数据操作最终在页面上以 Directive 的形式体现，通过对 Directive 的识别来渲染数据或绑定事件。

通用基本设计
  • Directive: 指令，即自定义执行函数
  • Filter: 过滤器，对传入的初始数据信进行处理，然后把处理结果交给下一步（Directive 或 Filter）。
  • 表达式：控制页面内容按照具体条件展示
  • ViewModel: 实现传入的 Model 数据在内存中存放，也提供一些基本的读取或修改数据的 API
  • 数据变更检查： 即数据变化自动触发其它操作，通过手动触发、脏检测、对象劫持、Proxy 等
数据变更检查
  • 手动触发: 通过在数据对象上定义 get 和 set 方法，调用时手动触发 get 和 set 来获取和修改数据，改变后主动触发 get 和 set 中 View 层的重新渲染功能
  • 脏检测: 在 ViewModel 对象的某个属性值发生变化时找到与这个属性值相关的所有元素，然后比较数据变化，如果有变化则进行 Directive 指令调用，对这个元素进行重新扫描渲染
  • 前端数据对象劫持： 使用 Object.defineProperty 和 Object.defineProperties 对 ViewModel 数据对象进行属性 get 和 set 的监听，当有数据读取和赋值时则扫描节点元素，运行指定对应节点的 Directive 指令。
  • ES6 Proxy:类似与 Object.defineProperty 和 Object.defineProperties