ARTICLE

如何做一个mvvm框架

1/21 2018

自己写博客的时候,用的js太冗长太拖沓了,而需求只是一些简单功能和操作,并不需要那么复杂的东西,于是就折腾了一个非常轻量的框架,这里只做简单的介绍,不做详细的代码讲解,具体可以看我的写的 文档

前言

mvvm

主要是分为两点

  • 数据驱动:视图由数据来渲染,当数据变动时,自动的更新对应的视图
  • 逻辑分离:逻辑通过更新数据来更新页面,视图与逻辑的解耦,增强页面复用性

更新视图

主要是指js将变量渲染成节点,有很多种

  • 通过js操作dom赋值innerHTML
  • 通过模板语法赋值
  • 其他自定义的渲染方法

但无论采用何种办法,在函数式的视角里,只需要有一个函数,能负责将指定变量,渲染出唯一的输出即可

更新数据

主要是指,当数据更新的时候,能够自动的执行相应视图更新的操作,这样的数据关联关系,称之为依赖

同样的,将数据更新导致视图重新渲染的过程封装成函数,称之为观察函数

<script>
const observer = function () {
if (updateData()) {
updateView();
}
}
</script>
  • 有用Object.defineProperty进行依赖收集的
  • 也有用es6的Proxy进行依赖收集的
  • 有一些使用脏检查
  • 或者也可以显示的定义更新(本框架采用的办法
OLDER >