MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
下面是一个简单的MVC的架子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="container">
</div>
<script>
var iwen = {};
iwen.model = (function(){
var M = {};
M.data = {
//数据
"newstitle":["neirong1","neirong2"],
"newscontent":["congng1","congng2"]
};
return {
getData:function(m){
return M.data[m];
}
}
})();
iwen.view = (function(){
var M = iwen.model; //视图和数据的接口
var V = {
//视图
addView:function(){
for(var i = 0;i< M.getData("newstitle").length;i++){
var p = document.createElement("p");
p.className = "ptext";
p.innerHTML = M.getData("newstitle")[i];
document.getElementById("container").appendChild(p);
}
}
};
return{
setView:function(){
return V.addView();
}
}
})();
iwen.ctrl = (function(){
var V = iwen.view; //视图和控制器接口
var C = {
setStyle:function(className){
var ptext = document.getElementsByClassName(className);
for(var i = 0;i<ptext.length;i++){
ptext[i].style.backgroundColor = "red";
}
},
initView:V.setView()
};
C.initView;
C.setStyle("ptext");
})();
</script>
</body>
</html>