前端的MVC
2016-03-24 23:18
232 查看
MVC,是model(模型)— view(视图)— controller(控制器)的缩写,MVC从最初存在于桌面应用中发展到后来成为非常受开发人员欢迎的设计软件模式,在各个方向开发过程中都很受用。下面,我们就简单看一看前端开发中的MVC。
MVC已经实现了对html、css、javascript的完全控制,就以一个事件发生过程为例说一说吧:首先人机交互;控制器事件处理被触发;接着控制器从模型中请求数据交给视图;最后视图将数据呈献给用户。下面来简单说一个小例子(给按钮添加click事件):
①model、view、controller完全混合时:
<html>
<head>
<title></title>
</head>
<body>
<button id="btn" onclick="alert("您点了我")">点击</button>
</body>
</html>
②view与model和controller分离
<html>
<head>
<title></title>
</head>
<body>
<button id="btn">点击</button>
</body>
<script src="ex.js"></script>
</html>
ex.js:
var oDiv=document.getElementById("btn");
oDiv.onclick=function(){
alert("您点击了我");
}
③view、model、controller彻底分离
<html>
<head>
<title></title>
</head>
<body>
<button id="btn" >点击</button>
</body>
<script src="module.js"></script>
<script src="controller.js"></script>
</html>
model.js(真正处理逻辑操作):
function pro(){
alert("您点击了我");
}
controller.js(事件的注册)
function get(obj){
return document.getElementById(obj);
}
var oU={}
oU.deal=function(id,ev,f){
get(id)["on"+ev]=function(){f();}
}
oU.deal("btn","click",pro);
根据这个简单例子,我们能对MVC在前端中的应用有一个简单地了解,其中model中主要是存放着数据;view主要是显示,
与用户交互;controller主要是事件绑定。
MVC给我们的开发带来了很多便利:代码重用性高;可维护性高;耦合度低;部署快等等;但是也存在一些缺陷,比如:没有
明确定义,使得我们理解起来较难;不适合中小型应用程序;增加了实现的复杂性等。
MVC有利也有弊,所以在开发过程中,我们要能够有效地使用它。
MVC已经实现了对html、css、javascript的完全控制,就以一个事件发生过程为例说一说吧:首先人机交互;控制器事件处理被触发;接着控制器从模型中请求数据交给视图;最后视图将数据呈献给用户。下面来简单说一个小例子(给按钮添加click事件):
①model、view、controller完全混合时:
<html>
<head>
<title></title>
</head>
<body>
<button id="btn" onclick="alert("您点了我")">点击</button>
</body>
</html>
②view与model和controller分离
<html>
<head>
<title></title>
</head>
<body>
<button id="btn">点击</button>
</body>
<script src="ex.js"></script>
</html>
ex.js:
var oDiv=document.getElementById("btn");
oDiv.onclick=function(){
alert("您点击了我");
}
③view、model、controller彻底分离
<html>
<head>
<title></title>
</head>
<body>
<button id="btn" >点击</button>
</body>
<script src="module.js"></script>
<script src="controller.js"></script>
</html>
model.js(真正处理逻辑操作):
function pro(){
alert("您点击了我");
}
controller.js(事件的注册)
function get(obj){
return document.getElementById(obj);
}
var oU={}
oU.deal=function(id,ev,f){
get(id)["on"+ev]=function(){f();}
}
oU.deal("btn","click",pro);
根据这个简单例子,我们能对MVC在前端中的应用有一个简单地了解,其中model中主要是存放着数据;view主要是显示,
与用户交互;controller主要是事件绑定。
MVC给我们的开发带来了很多便利:代码重用性高;可维护性高;耦合度低;部署快等等;但是也存在一些缺陷,比如:没有
明确定义,使得我们理解起来较难;不适合中小型应用程序;增加了实现的复杂性等。
MVC有利也有弊,所以在开发过程中,我们要能够有效地使用它。
相关文章推荐