MVC
即模型（Model）- 视图（View）- 控制器（Controller），用一种将业务逻辑、数据、视图分离的方式组织架构代码。
MVC设计模式模板
~(function () {
// 初始化MVC对象
const MVC = {
};
// MVC数据模型层
MVC.model = (function () {
// 内部数据对象
var M = {
};
// 服务器端获取的数据，通常通过Ajax获取并存储，后面的案例为简化实现，直接作为同步数据
// 写在页面中，减少服务器端异步请求操作
M.data = {
};
// 配置数据，页面加载时即提供
M.conf = {
};
// 返回数据模型层对象操作方法
return {
// 获取服务器端数据
getData: function (m) {
// 根据数据字段获取数据
return M.data[m];
},
// 获取配置数据
getConf: function (c) {
// 根据配置数据字段获取配置数据
return M.conf[c]
},
// 设置服务器端数据（通常将服务器端异步获取到的数据，更新该数据）
setData: function (m, v) {
// 设置数据字段m对应的数据v
M.data[m] = v;
return this;
},
// 设置配置数据（通常在页面中执行某些操作，为做记录而更新配置数据）
setConf: function (c, v) {
// 设置配置数据字段c对应的配置数据v
M.conf[c] = v;
return this;
},
// ...
}
}());
// MVC视图层
MVC.view = (function () {
// 模型数据层对象操作方法引用
var M = MVC.model;
// 内部视图创建方法对象
var V = {
}
// 获取视图接口方法
return function (v) {
// 根据视图名称返回视图（由于获取的是一个方法，这里需要将该方法执行一遍以获取相应视图）
V[v]();
}
}());
// MVC控制器层
MVC.ctrl = (function () {
// 模型数据层对象操作方法引用
var M = MVC.model;
// 视图数据层对象操作方法引用
var V = MVC.view;
// 控制器创建方法对象
var C = {
};
}());
}());
示例
~(function () {
// 初始化MVC对象
const MVC = {
};
// MVC数据模型层
MVC.model = (function () {
// 内部数据对象
var M = {
};
// 服务器端获取的数据，通常通过Ajax获取并存储，后面的案例为简化实现，直接作为同步数据
// 写在页面中，减少服务器端异步请求操作
M.data = {
navList: [
{
id: 'nav-001', label: '首页', href: '#' },
{
id: 'nav-002', label: '推荐', href: '#' },
{
id: 'nav-003', label: '我的', href: '#' },
]
};
// 返回数据模型层对象操作方法
return {
// 获取服务器端数据
getData(m) {
return M.data[m];
},
// 整和 数据 + HTML字符串
formateString(str, data) {
return str.replace(/\{#(\w+)#\}/g, function (_match, key) {
return data[key];
})
},
// ...
}
}());
// MVC视图层
MVC.view = (function () {
// 模型数据层对象操作方法引用
var M = MVC.model;
// 内部视图创建方法对象
var V = {
// 创建导航
createNav() {
let html = '';
let data = M.getData('navList');
// 屏蔽无效数据
if (!data || !data.length) {
return;
}
// 创建dom容器
let container = document.createElement('div');
container.className = 'container';
// 模板
let tpl = {
container: `<ul id="nav">{#content#}</ul>`,
item: `<li id="{#id#}"><a href="{#href#}">{#label#}</a></li>`,
};
data.forEach(d => {
html += M.formateString(tpl.item, d);
});
container.innerHTML = M.formateString(tpl.container, {
content: html });
document.body.appendChild(container);
},
};
// 获取视图接口方法
return function (v) {
// 根据视图名称返回视图（由于获取的是一个方法，这里需要将该方法执行一遍以获取相应视图）
V[v]();
}
}());
// MVC控制器层
MVC.ctrl = (function () {
// 模型数据层对象操作方法引用
var M = MVC.model;
// 视图数据层对象操作方法引用
var V = MVC.view;
// 控制器创建方法对象
var C = {
// 模块
initNav() {
// 渲染导航栏模块视图
V('createNav');
}
};
// 初始化导航
C.initNav();
}());
}());
特点
MVC架构模式很好地
解决了页面中数据层、视图层、业务逻辑层（控制器）之间的耦合关系，使它们得到显性的区分，这也使得层次之间的耦合度降低。我们在开发中可以不用顾忌所有需求而专注于某一层次开发，降低了开发与维护成本，提升了开发效率。如果页面系统足够复杂，某些视图要共享同一组数据，或者某些需求的实现引用类似视图，此时MVC模式便可提高某些视图与数据的复用率。
因此
对于大型页面系统的开发，三个层次各司其职。每一层次专注于自己的事情，有利于工程化、模式化开发并管理代码；便于大型页面系统的可持续开发与维护；也是降低层次耦合、提升代码复用的良好实践。
