一，前言
1.1 MVC---Model-View-Controller
m:model 数据模型层? v:view 视图层? c:controller控制器
原理：c层需要控制model层的数据在view层进行显示
1.2 MVVM---Model-View-ViewModel
在MVVM架构下，View和Model之间并没有直接的联系，而是通过viewModel进行交互的，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上
VUE是基于MVVM的设计模式开发的
二，代码实例
我们做一个很简单的DIV显示隐藏的效果，点击toggle可以切换下面div显示隐藏
html:
<div id="box">
? ? ? ? <button class="btn">toggle</button>
? ? ? ? <button class="btn2">big</button>
? ? ? ? <div class="box">
?
? ? ? ? </div>
? ? </div>
JS:
下面是我们不用设计模式写的JS，这种写法不利于维护，纯粹的面向过程去写代码：
? ? ? ? let btn = document.getElementsByClassName("btn")[0];
? ? ? ? let boxDom = document.getElementsByClassName("box")[0];
? ? ? ? let flag = true;
? ? ? ? btn.onclick = function(){
? ? ? ? ? ? if(flag){
? ? ? ? ? ? ? ? boxDom.style.display = "none";
? ? ? ? ? ? ? ? flag = false;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? boxDom.style.display = "block";
? ? ? ? ? ? ? ? flag = true;
? ? ? ? ? ? }
? ? ? ? }
MVC的写法：
? ? ? ? ?//view
? ? ? ? let boxDom = document.getElementsByClassName("box")[0];
? ? ? ? //model
? ? ? ? let model = {
? ? ? ? ? ? isShow:true,
? ? ? ? ? ? isBig:false
? ? ? ? }
?
? ? ? ? //controller 业务逻辑
? ? ? ? function Controller(){
? ? ? ? ? ? this.init();//初始化
? ? ? ? }
? ? ? ? Controller.prototype = {
? ? ? ? ? ? constructor:Controller,
? ? ? ? ? ? init:function(){
? ? ? ? ? ? ? ? this.addEvent()
? ? ? ? ? ? },
? ? ? ? ? ? addEvent:function(){
? ? ? ? ? ? ? ? let btn = document.getElementsByClassName("btn")[0];
? ? ? ? ? ? ? ? let btn2 = document.getElementsByClassName("btn2")[0];
? ? ? ? ? ? ? ? let that = this;
? ? ? ? ? ? ? ? btn.onclick = function(){
? ? ? ? ? ? ? ? ? ? model.isShow = !model.isShow;
? ? ? ? ? ? ? ? ? ? //更改视图了
? ? ? ? ? ? ? ? ? ? that.render();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? btn2.onclick = function(){
? ? ? ? ? ? ? ? ? ? model.isBig = true;
? ? ? ? ? ? ? ? ? ? //更改视图了
? ? ? ? ? ? ? ? ? ? that.render();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? render:function(){//数据驱动视图的更改
? ? ? ? ? ? ? ? boxDom.style.display = model.isShow?"block":"none";
? ? ? ? ? ? ? ? boxDom.style.width = model.isBig?"300px":"100px";
? ? ? ? ? ? }
? ? ? ? }
?
? ? ? ? new Controller();//初始化一下
虽然MVC代码比较长，不过以后用起来很方便，只要是相同的效果拿过来用就行
?
mvvm与mvc最大的区别：
MVVM实现了view与model的自动同步，也就是model属性改变的时候，?我们不需要再自己手动操作dom元素去改变view的显示，而是改变属性后该属性对应的view层会自动改变。
