MVC模式

• mvc是由三个单词的首字符组成的：分别是模型model-视图view-控制器controller
• 他是一种使用业务逻辑、数据、视图进行分离的方式来组织架构代码的一种模式。
• 复杂项目中改变数据，很难判断那里改变

var MVC = {}
MVC.model = (function(){var data = {sidebar:[{title: 'sidebar1',href: './a.html'},{title: 'sidebar2',href: './b.html'},{title: 'sidebar3',href: './c.html'}]}return {getData: function(key){return data[key]},setData: function(key,value){data[key] = value}}
})()
MVC.view = (function(){var m = MVC.modelvar view = {createSidebar: function(){var data = m.getData('sidebar')var html = '',html += '<div id="siderbar">'for(var i = 0; i<data.length;i++){html += '<div class="sidebar-item" href="`+data[i].herf +`">`+ data[i].title +`</a></div>'}html += '</div>'document.body.innerHTML = html}}return function(v){view[v]();}
})()
MVC.ctrl = (function(){var m = MVC.modelvar v = MVC.viewvar c = {initSideBar: function(){v('createSidebar');}updateSideBar: function(){m.setDate('sidebar',[{title:'new sidebar', herf: './aa.html'}])}}return c
})()window.onload = function(){MVC.ctrl.initSideBar()setTimeout(function(){MVC.ctrl.updateSideBar()},3000)
}

MVVC模式

• mvvm模式在mvc模式下进行改造，实现的其重在数据驱动视图的一种设计模式
  
• 如何去实现数据和视图绑定

1. 需要知道那个数据改变啦，一般我们可以使用数据访问对象的方法。在vue中我们使用的是es5的对象访问属性get/set
2. 需要知道修改的这个数据跟那个视图有关联，观察者模式。
3. 修改视图

//练习
var test = {_a: undefined,get a(){return this._a	}set a(newVal){this._a = newVal}
}
console.log(test.a)var test3 = {_a:111}
Object.defineProperty(test3,'a',{get: function(){return this._a}set: function(newVal){this._a = newVal}
})
console.log(test3.a)
test.a = 'abc'
console.log(test3.a)

/*var data = {a:1
}
var dep = [] //收集消息，消息中心
var target = null //订阅者或者叫做观察者
Object.defineProperty(data,'a',{get: function(){dep.push(target)},set: function(newVal){for(var i = 0;i<dep.length;i++){dep[i]()}}
})
function watch(exp,fn){target = fndata[exp]
}
watch('a',function(){console.log('我是监听a改变的函数')
})
data.a = 2*/
//几个问题
// 1. 我们现在访问不到a,并且a的值需要_a暂存
// 2. 目前只做啦一个数据的收集工作
// 3. 如果再次访问属性的时候就会重复收集依赖
var data = {a:1,b:2
}
for(var key in data){(function(key){var dep = [];var value = data[key]object.defineProperty(data,key,{get:function(){for(var i = 0;i < dep.length;i++){if(dep[i]===target){return value}}dep.push(target)return value},set: function(newVal){if(newVal !== value){value = newValfor(var i =0;i < dep.length; i++){dep[i]();}}}})})()
}
//var dep = [] //收集消息，消息中心
var target = null //订阅者或者叫做观察者
/*Object.defineProperty(data,'a',{get: function(){dep.push(target)},set: function(newVal){for(var i = 0;i<dep.length;i++){dep[i]()}}
})*/
function render(){document.write(`<div><h3>想显示一些文案`+ data.a +`</h3></div>`)
}
function watch(exp,fn){target = fnif(typeof exp === 'function'){exp()return}data[exp]
}
//watch('a',render)
watch(render,render)
data.a = 2
data.b = 3