前端web开发的MVC模式 - 从一个简单实例讲起

前端web开发的MVC模式 - 从一个简单实例讲起

MVC是一种设计模式,它将应用划分为3个部分:数据(模型)、展现层(视图)和用户交互(控制器)。其中:

M - MODEL(模型)

V - VIEW(视图)

C - CONTROLLER(控制器)

一个事件的发生是这样的过程:
  1. 用户和应用产生交互。
  2. 控制器的事件处理器被触发。
  3. 控制器从模型中请求数据,并将其交给视图。
  4. 视图将数据呈现给用户。
不用类库或框架就可以实现这种MVC架构模式。关键是要将MVC的每部分按照职责进行划分,将代码清晰地分割为若干部分,并保持良好的解耦。这样可以对每个部分进行独立开发、测试和维护。

M-模型

  模型用来存放应用的所有数据对象。比如,可能有一个User模型,用以存放用户列表、他们的属性及所有与模型有关的逻辑。模型不必知道视图和控制器的逻辑。任何事件处理代码、视图模板,以及那些和模型无关的逻辑都应当隔离在模型之外。将模型的代码和视图的代码混在一起,是违反MVC架构原则的。模型是最应该从应用中解耦出来的部分。
当控制器从服务器抓取数据或创建新的记录时,它就将数据包装成模型实例。也就是说,我们的数据是面向对象的,任何定义在这个数据模型上的函数或逻辑都可以直接被调用。

V-视图

  视图层是呈现给用户的,用户与之产生交互。在JavaScript应用中,视图大都是由HTML、CSS、JavaScript模板组成的。除了模板中简单的条件语句之外,视图不应当包含任何其他逻辑。将逻辑混入视图之中是编程的大忌,这并不是说MVC不允许包含视觉呈现相关的逻辑,只要这部分逻辑没有定义在视图之内即可。我们将视觉呈现逻辑归类为“视图助手”(helper):和视图相关的独立的小工具函数。

C-控制器

  控制器是模型和视图之间的纽带。控制器从视图获取事件和输入,对它们(很可能包含模型)进行处理,并相应地更新视图。当页面加载时,控制器会给视图添加事件监听,比如监听表单提交或按钮点击。然后,当用户和你的应用产生交互时,控制器中的事件触发器就开始工作了。


例如 需要给一个页面上的button注册一个onclick事件。

         1、我们可以有如下最简洁的写法:(view和model control完全混合)

<HTML>

<HEAD>

<TITLE> example </TITLE>

</HEAD>

<BODY>

<input type="button" value="baidu" οnclick="alert(this.value);"/>

</BODY>

</HTML>

         说明:如上写法的好处:简单、直接;严重的弊端:如果都是这样写法,页面代码很大的时候,修改js代码还需要查找整个页面,导致整个页面非常混乱。

        

批注:类似与 jsp中直接嵌入java片段语句。

         2、将html和js代码进行适当分离:(view和model control在同一页面适当分离)

         修改以上的写法:

<HTML>

<HEAD>

<TITLE> example </TITLE>

</HEAD>

<BODY>

<input type="button" value="baidu" οnclick="tipInfo(this);"/>

<SCRIPT LANGUAGE="JavaScript">

<!--

    function tipInfo(o){

           alert(o.value);

    }

//-->

</SCRIPT>

</BODY>

</HTML>

         这是将页面上所有的js代码操作放到<script></script>标签中进行。使得js逻辑代码相对集中,易于后期修改。

         但是我们还是需要在html标签中写tipInfo(this)的js调用代码。即html和js仍然有混合。

         3、将html和js代码彻底分离:(view和model control完全分离)

         修改写法:

         视图view的html代码:

<HTML>

<HEAD>

<TITLE> example </TITLE>

</HEAD>

<BODY>

<input type="button" value="baidu" id="baidu"/>

</BODY>

<script src="example.js"></script>

</HTML>

         分离出来的模型model和控制control的综合example.js代码:

   

var o = document.getElementById("baidu");

    o.onclick = function(){

           alert(this.value);

    }


         说明:button节点的操作和事件注册等工作完全与html页面分离。但是仔细想想,这还不是一个基于MVC的模式,control和model完全混合在一起。

         批注:与jsp中的javabean实现类似。

         4、符合MVC框架的实现:(view、mode和control完全分离)

         View视图的view.html代码:

<HTML>

<HEAD>

<TITLE> example </TITLE>

</HEAD>

<BODY>

<input type="button" value="baidu" id="baidu"/>

</BODY>

    <script src="model.js"></script>

<script src="control.js"></script>

</HTML>


         实现control控制功能的control.js代码:

  

 function G(id){

           return document.getElementById(id);

    }

    var UI = new Object();

    UI.register = function(id,even,fun,arr){

           if(G(id)) G(id)["on"+even] = function(){ fun(arr);};

    }

    UI.register("baidu","click",tipInfo,[1,2]);


    /*

           第一参数:为button节点id

           第二参数:为需要注册的触发事件

           第三参数:事件触发函数

           第四参数:需要传递的参数。

*/

         说明:control.js的代码就是实现html页面节点事件的注册。使得节点的各种事件知道会触发什么函数去执行。

         具体的函数操作,可以放到model模块中执行,在model中,才是真正处理逻辑操作。看model.js代码:

   

function tipInfo(arr){

           alert(arr[1]);

           //实现其他组件功能,例如popup、form等。都属于model模型

    }

        进行分层之后,各个层次的功能清晰:V层控制界面显示,将界面与数据连接;M层存放数据,处理逻辑,C层用于连接M和V,但是,代码变复杂了。的确,层次越多,需要做的工作也越多,这里需要处理各层的通信。所以,具体怎么设计,还是要分析场景,因地制宜。


总结:

         View:只管页面的显示和样式展示

         Control:进行页面节点事件的注册和控制,以及页面加载性能的实现(例如方荣的硬盘缓存)。

         Model:真正的逻辑处理,例如jslib库中的form、popup、drag等功能组件都属于model模块。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值