小程序学习 - mvvm

在以往的Web开发中（比如使用jQuery进行开发），程序通常会通过 JavaScript 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，js会记录一些状态到变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。

当项目越来越大的时候，代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM (View <--> View Model <--> Model) 的开发模式，提倡把渲染和逻辑分离。现在比较流行的前端开发框架例如 React 和 Vue都是采取这样的模式（当然值得一提的是，之前UWP课程也是这种模式）。小程序的原生框架也采取了MVVM的设计模式。

MVVM，简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。

image.png

具体项目代码展示:

WXML文件:

JavaScript文件

this.setData({
    taskList: tasks,
    taskList1: tasks1,
    taskList2: tasks2,
    taskList3: tasks3
})

但是值得一提的是，小程序不同于Vue，只支持数据的单向绑定，但我们可以自己手动实现双向绑定

1. 利用bindinput来触发改变
2. 利用data-name来绑定获取的数据
3. bindinput触发时利用event获取，name的值，然后用this.setData改变data-name绑定的参数。

具体可以参考这篇文章