MVC模式和MVVC模式

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.model
	var 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.model
	var v = MVC.view
	var 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 = fn
	data[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 = newVal
					for(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 = fn
	if(typeof exp === 'function'){
		exp()
		return
	}
	data[exp]
}
//watch('a',render)
watch(render,render)
data.a = 2
data.b = 3