认识达内从这里开始

今天带给大家的干货知识是web前端MCRV设计模式

MCRV设计模式 Javascript MVC Web开发标准

1.Web前端开发面临的问题

早期的Web页开发(Web前端开发)中，Web页面较为简单，大多数Web页面的功能仅限于用HTML和简单样式展示静态信息，或向服务器发送数据，Web页面与用户的交互较少。随着Web的发展，DHTML、CSS

javascript等技术出现，Web页不再仅限于展示静态信息，动态、交互成为Web页的主流功能之一。与此同时，Web页代码规模也变的较大，页面中的HTML、CSS、Javascript等代码往往混杂在一起，如何很好的组织这些代码

使Web客户端程序具有很好的结构，易于阅读和维护，成为Web前端开发人员面临的一个难题。在实践中，业界提出了内容(Content)-结构(Structure)-表现(Presentation)-行为(Behavior)相分离的Web页开发标准。在这种

准中，一个Web页代码可以分为如下四个部分： 内容：页面实际要传达的真正信息,包含数据、文档或者图片等。
结构：对内容的划分，使内容更加具有逻辑性，易用性。类似页面的标题、作者、章、节、段落和列表。

表现：用来描述内容外观，称之为“表现”，主要指CSS样式。

行为：行为就是对内容的交互及操作效果。行为控制主要通过javascript实现。

内容-结构-表现-行为(CSPB)开发标准对Web页包含的的代码进行了分类，使代码各个部分得到很好的分离，使Web页初步具有了良好的结构。随后，Web进入了崭新的Web2.0时代，以Gmail为代表的Web2.0应用大量出现，并且取得很大的成功。这类Web页的典型特征是用一个基于ajax技术的无刷新的页面完成大量复杂的功能。此类页面包括Web IM、Web Map、Gmail等应用，统称为one-page Web应用。同时，在企业级Web开发中，一个Web页同时完成多个复杂功能的情况也越来越多。在这些复杂Web页应用中， Javascript代码是此类富客户端应用程序的核心，负责与用户的复杂交互和页面展现。One-page Web页面javascript代码规模往往非常庞大，逻辑复杂，动则千行以上，有时甚至需要一个团队来完成一个页面的开发。如何合理组织大量的javascript代码，使之具有良好的扩展性，能够适应需求的变化，使代码易于维护，是广大Web前端开发人员面临的一大挑战。纵观Web应用

序开发的历史，Web后端开发(PHP、J2EE、ASP.NET)与Web客户端开发的发展过程有一定的相似性，曾面临类似的问题。最初，Web程序功能简单，代码较少时，所有的控制、逻辑、UI展现代码混杂在一起;随着Web发展，程序规模变大，按原有方式开发出的程序显然不具有良好的结构，不利于大规模开发和后期维护，也不利于Web开发人员工作和角色的进一步细分，代码复用性差，瓶颈开始出现。Web后端程序设计者的解决方法是进行代码分类，将控制代码与展现代码开始分离， 于是Web后端开发从所谓的Model1发展到Model2;同时，传统桌面程序设计中的MVC(模型-视图-控制器)设计模式被引入，负责程序数据与逻辑计算的部分进一步分离出来，形成了Web后端开发中的MVC开发模式。MVC设计模式贯穿了软件工程分而治之的思想，有效解决了Web后端程序设计中的代码组织和复用问题。采用同一设计模式(MVC)也使代码更容易被他人理解，保证代码可靠性;它使Web开发工作可以细分为业务逻辑开发和UI展现开发。因此，MVC也利于团队开发。那么，MVC设计思想是否也能应用在前端开发中解决相关问题呢?既然问题具有许多相似性，笔者沿着相同的解决思路来试图解决前端开发中的代码组织问题。

2.MVC设计模式

在提出本文提出的MCRV设计模式之前，有必要对其所基于的MVC设计模式进行阐述。MVC这个概念很早之前就被人提起[1]，它代表一种设计思想。MVC是Model-View-Conroller的缩写，即模型-视图-控制器。这种开发模式将一个应用程序分为三个部分，模型(model)实现商业逻辑，提供数据;视图(view)负责向用户呈现界面和接受用户交互;控制器(controller)则负责响应用户交互请求，对用户请求进行翻译，根据不同的请求调用模型，执行商业逻辑。控制器本质上是一个调度器 (dispatcher)，通过其包含的各个方法(action)来执行具体的商业逻辑。MVC各个部件以最小的耦合性协同工作，从而使程序具有良好的可扩展性和可维护性和复用性。MVC设计模式最开始被用于桌面程序设计，典型地用于相同的数据需要不同的用户交互界面的设计场景。在经典的MVC设计思想中，控制器负责响应用户事件，根据事件类型和参数调用模型或改变视图。每个模型对应一个或者多个视图，当模型被控制器调用而得到改变时，模型向所有向其注册过的视图发送通知，视图根据从模型的中得到的信息改变外观。这种设计模式可以用图1表示。可以看出经典MVC设计模式中Controller、Model 都可以改变视图。

经典MVC基于MVC模式的Web开发(后端)一般可以用图2表示。在这种模式下，controller负责解析用户浏览器请求的URL，根据URL自动调用controller中的不同的Action响应用户请求。Action调用model，然后将model返回的数据填充到view中，view被返回给用户浏览器。Web服务端开发中典型的采用MVC模式的框架有CakePHP、Structs、Spring等等。

Server端Web开发中的MVC相对于早期的经典MVC模式，Web开发中的MVC模式存在一些变化，因为对于一个桌面应用程序而言，可以很方便地将视图注册给模型，当模型数据发生改变时，即时通知视图页面发生改变;而对于Web应用而言，即使将多个页面注册给一个模型，当模型发生变化时，模型无法主动发送消息给Web页面(因为Web应用都是基于请求/响应模式的)，只有当用户请求浏览该页面时，控制器才负责调用模型数据来更新We

页面。同时，Web开发中的MVC也比经典MVC具有更小的耦合性，因为Model不再与View发生交互，因此程序的结构更加良好，使Web前端开发和业务逻辑开发相分离变的简单。对于具有复杂交互逻辑和丰富界面的程序来说，MVC已被实践证明是一种行之有效的设计和开发思想。采用MVC设计模式的系统具有较好的结构，较低的耦合性，代码具有很好的维护性，能够适应复杂的业务逻辑和视图展现变化。它也非常适合团队开发，使开发人员

为不同的角色，专注于自己负责部分的开发。

今天关于web前端MCRV设计模式就讲到这里，更多关于web教程请关注达内武汉IT培训官方网站，或者需要了解武汉达内软件测试培训方面的，可以在线咨询武汉达内教育老师。