十二、MVC模式
MVC 模式代表 Model-View-Controller（模型-视图-控制器） 模式。这种模式用于应用程序的分层开发。
Model（模型） - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。
View（视图） - 视图代表模型包含的数据的可视化。
Controller（控制器） - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。
他是一种使用业务逻辑、数据和视图进行分类的方式来进行组织架构代码的一种模式
1、MVC模式例子
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 一个简单的mvc实例
var MVC = {}
MVC.model = (function () {
var data = {
sidebar: [
{
title: 'sidebar1',
href: './a.html'
},
{
title: 'sidebar2',
href: './aa.html'
},
{
title: 'sidebar3',
href: './aaaa.html'
}
]
};
return {
getData: function (key) {
return data[key];
},
setData: function (key, value) {
data[key] = value;
MVC.view('createSidebar')
}
}
})()
MVC.view = (function () {
var m = MVC.model;
var view = {
createSidebar: function () {
var data = m.getData('sidebar')
var html = '';
html = '<div id="#sidebar">';
for(var i = 0; i < data.length; i ) {
html = '<div class="sidebar-item"><a href="' data[i].href '">' 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.setData('sidebar', [{title: 'new sidebar', href:'./aaa.html'}])
}
}
return c
})()
window.onload = function () {
MVC.ctrl.initSideBar()
setTimeout(function () {
MVC.ctrl.updateSideBar()
}, 3000)
}
</script>
</head>
<body>
</body>
</html>
