关注小编微信公众号公众号【前端基础教程从0开始】回复“1”,拉你进程序员技术讨论群,群内有大神,可以免费提供问题解答。公众号回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。公众号回复“领取资源”,领取300G前端,Java,产品经理,微信小程序,Python等资源合集大放送,让我们一起学前端。
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>