前端软件架构之MVC、MVP、MVVM

最新推荐文章于 2024-10-31 13:48:35 发布

weixin_30764883

最新推荐文章于 2024-10-31 13:48:35 发布

阅读量60

点赞数

文章标签：测试前端设计模式 ViewUI

原文链接：http://www.cnblogs.com/yankfy/p/qdrjjg.html

版权

一、MVC

1.1 MVC简化模型

MVC是模型（Model）-视图（view）-控制器（Controller）的缩写，是设计模式中最常用的软件架构

视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存

各部分之间的通信方式如下：

View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的。

1.2 MVC互动模式

接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受指令，传递给 Controller。

另一种是直接通过controller接受指令。

1.3 MVC代码模型

 1 //页面加载后创建MVC对象
 2 $(function(){
 3     //创建MVC对象
 4     var MVC=MVC||{}；
 5     //初始化MVC数据模型层
 6     MVC.model=function(){}();
 7     //初始化MVC视图层
 8     MVC.view=function(){}();
 9     //初始化MVC控制器层
10     MVC.controller=function(){}();
11 });

1.3.1MVC数据模型层

 1 //MVC数据模型层
 2 MVC.model=function(){
 3     //内部数据对象
 4     var M={};
 5     //服务器端获取数据，通常通过Ajax获取并存储
 6     M.data={};
 7     //配置数据
 8     M.config={};
 9     return {
10         //获取服务器端数据
11         getData:function(m){
12             return M.data[m];
13         },
14         //获取配置数据
15         getConfig:function(c){
16             //根据数据字段获取数据
17             return M.config[c]
18         },
19         //设置服务器数据
20         setData:function(m,v){
21             M.data[m]=v;
22             return this;
23         },
24         //设置配置数据
25         setConfig:function(c,v){
26             M.data[c]=v;
27             return this;
28         }
29     };
30 }();

1.3.2MVC视图层

 1 //MVC视图层
 2 MVC.view=function(){
 3     //模型数据层对象操作方法引用
 4     var M=MVC.model;
 5     //内部视图创建方法对象
 6     var V={};
 7     //获取视图的接口方法
 8     return function(v){
 9         //根据视图名词返回视图
10         V[v]();
11     }
12 }();

1.3.3MVC控制器层

1 //MVC控制器层
2 MVC.controller=function(){
3     //模型数据层对象操作方法引用
4     var M=MVC.model;
5     //视图数据层对象操作方法引用
6     var V=MVC.view;
7     //控制器创建方法对象
8     var C={};
9 }();