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.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模式下进行改造，实现的其重在数据驱动视图的一种设计模式
如何去实现数据和视图绑定

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

//练习
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

MVC模式和MVVC模式相关推荐

MVC+LINQToSQL的Repository模式之(二）数据基类
namespace Data.TEST { /// <summary> /// 数据操作基类 /// </summary> public abs ...
MVC模式和DDD模式对比，谁才是银弹？
目录 MVC模式和DDD模式对比,谁才是银弹? 从DDD的角度看MVC架构的问题第一层:初出茅庐第二层:草船借箭(战术设计) 第三层:运筹帷幄(战略设计) DDD的不足总结 MVC模式和DDD模 ...
php cli python,PHP MVC框架 CodeIgniter CLI模式简介
PHP MVC框架 CodeIgniter CLI模式简介分类:PHP_Python| 发布:佚名| 查看: | 发表时间:2014/7/25 让我们以Hello World为例,首先创建一个简单的 ...
MVC三层架构的模式
大家好,今天给大家分享一下MVC 三层架构的模式首先你要知道,所谓的MVC就是一种面向于javaee企业级开发的设计模式这里要强调一点,MVC 不是一种技术,不是一种像spring 那样的框架,它 ...
【Django框架设计模式】MVC模式与MTV模式区别
在Django中的MTV模式是MVC模式的迁移,其中MTV模式中将MVC模式中的V(视图)= V(视图)+ T(模板). MVC设计模式 MVC,是模型(Model).视图(View).控制器(Con ...
vue源码尝试mvvc模式实现
注意点:本文是最简化的mvvc模式,并没有考虑深度拷贝,深度监听等较为复杂的东西. 1.第一步,建立mvvc.js(建立mvvc模式),observer.js(监听),compile.js(渲染),w ...
基于MVC模型和分层模式完成登录和注册
1.MVC概述 Model.view.Controller即模型.视图.控制器.是软件的一种架构模式(Architecture pattern).MVC要实现的目标是将软件的用户界面和业务逻辑分离,可 ...
这是一份全面清晰的架构设计指南：MVC、MVP MVVM模式（含实例讲解）
前言在Android开发中,当你梳理完需求后,你要做的并不是马上写下你的第一行代码,而是需先设计好整个项目的技术框架今天,我将全面介绍Android开发中主流的技术框架MVC.MVP 与 MVVM ...
Repository模式与UnitOfWorks模式的运用
软件开发就像是一个江湖,而设计模式就是一本高深的秘籍每读一次.用一次.想一次都能得到新的领悟,让我们的设计技能有所提高.开始时我们可能会"为了模式而模式",让代码变得乱78糟甚至难 ...

MVC模式和MVVC模式

MVC模式

MVVC模式

MVC模式和MVVC模式相关推荐

最新文章

热门文章