您的位置：首页 > 其它

浅谈MVC模式

2019-02-10 19:44 66 查看

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 allen = {};
allen.model = (function(){
var M = {};
M.data = {
//数据
"newstitle":["neirong1","neirong2"],
"newscontent":["congng1","congng2"]
};
return {
getData:function(m){
return M.data[m];
}
}
})();

allen.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();
}
}
})();

allen.ctrl = (function(){
var V = allen.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航