前端的MVC

2 篇文章 0 订阅
1 篇文章 0 订阅

MVC,是model(模型)— view(视图)— controller(控制器)的缩写,MVC从最初存在于桌面应用中发展到后来成为非常受开发人员欢迎的设计软件模式,在各个方向开发过程中都很受用。下面,我们就简单看一看前端开发中的MVC。

MVC已经实现了对html、css、javascript的完全控制,就以一个事件发生过程为例说一说吧:首先人机交互;控制器事件处理被触发;接着控制器从模型中请求数据交给视图;最后视图将数据呈献给用户。下面来简单说一个小例子(给按钮添加click事件):

①model、view、controller完全混合时:
<html>

<head>

<title></title>

</head>

<body>

<button id="btn" οnclick="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.οnclick=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有利也有弊,所以在开发过程中,我们要能够有效地使用它。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值