MVC与双向绑定与单向绑定

上次的笔记：MVC&MVVM

MVC 思想（前端）

• model 只负责存储数据、请求数据、更新数据
• view 只负责渲染 HTML（可接受一个 data 来定制数据）
• controller 负责调度 model 和 view

例子1：https://jsbin.com/yuwopuf/3/edit?js,output

模板代码（也就是类）

一个页面或模块只需要 model view controller 三个对象
第二个页面就需要再来 model2 view2 controller2 三个对象
第三个页面就需要再来 model3 view3 controller3 三个对象
……
第N个页面就需要再来 modelN viewN controllerN 三个对象

进化：把重复的代码写到一个类（class）里面
之前的笔记：面向对象

例子2：https://jsbin.com/sodojac/5/edit?js,output

双向绑定

上例还是有一些问题：

• 每次用 model 获取数据之后，还要「手动」渲染HTML
• 每次 render 都会更新 整个#app 的 innerHTML，这可能会丢失用户的写在页面某个 input 里面的数据。

解决办法：

• 用户只要输入了什么，就记录在 JS 的 data 里。（数据绑定的初步思想出现了）
• 不要粗暴的操作 innerHTML，而是只更新需要更新的部位（虚拟 DOM 的初步思想出现了）

还有人提出：
events 能不能直接写到 HTML 上面，而不是写到 JS 里。这样写代码更直观。
（与内容与行为分离的观点相冲突。这种争论到 2017 年才渐渐休止，大家逐渐都接受了直接在 HTML 上绑定 JS 事件的写法。）

Vue 的双向绑定

双向绑定：
改DOM，自动映射到内存。
改内存，自动映射到DOM。

vue还实现了局部更新，并且代替了Controller

React 的单向绑定

双向绑定在遇到跨组件，父子组件共用一个data时，有些问题。

React 的单向绑定：

总结

换一句话说：
单向绑定：半自动的双向绑定
双向绑定：全自动的双向绑定

推荐：
用户数据（mysql）:用单向绑定
UI数据：双向绑定

拓展（要点）：
单向绑定：redux 虚拟DOM。
双向绑定实现方式：

• Dirty Checking（AngularJS 1.x）的方式

• Reactive （vue）

  • 使用 getter setter，(在setter里面更新dom)，缺点是无法监听不存在的属性
  • 使用 Proxy