Web前端开发中的MCRV模式.docVIP

Web前端开发中的MCRV模式 针对前端开发中基于ajax的复杂页面开发所面临的代码规模大，难以组织和维护，代码复用性、扩展性和适应性差等问题，本文尝试以MVC思想为基础，结合Web前端开发中内容-结构-表现-行为相分离的开发标准，提出一种将Web页面代码分为视图(View，页面静态部分，包括内容、结构、表现)、模型(Model，负责数据缓存、数据校验与本地逻辑处理、发起ajax请求)、控制器(Controller，负责用户和系统事件响应、模型和呈现器调度)、呈现器(Renderer，对视图的渲染，控制器与事件的绑定、数据搜集)的页面开发新模式，并基于此模式提出了一个开发框架原型。 　　摘要 　　针对前端开发中基于ajax的复杂页面开发所面临的代码规模大，难以组织和维护，代码复用性、扩展性和适应性差等问题，本文尝试以MVC思想为基础，结合Web前端开发中内容-结构-表现-行为相分离的开发标准，提出一种将Web页面代码分为视图(View，页面静态部分，包括内容、结构、表现)、模型(Model，负责数据缓存、数据校验与本地逻辑处理、发起ajax请求)、控制器(Controller，负责用户和系统事件响应、模型和渲染器调度)、渲染器(Renderer，对视图的渲染，控制器与事件的绑定、数据搜集)的页面开发新模式，并基于此模式提出了一个开发框架原型。 　　关键字: 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等应用，统称为oneWeb应用。同时，在企业级Web开发中，一个Web页同时完成多个复杂功能的情况也越来越多。在这些复杂Web页应用中， Javascript代码是此类富客户端应用程序的核心，负责与用户的复杂交互和页面展现。OneWeb页面javascript代码规模往往非常庞大，逻辑复杂，动则千行以上，有时甚至需要一个团队来完成一个页面的开发。如何合理组织大量的javascript代码，使之具有良好的扩展性，能够适应需求的变化，使代码易于维护，是广大Web前端开发人员面临的一大挑战。纵观Web应用程序开发的历史，Web后端开发(PHP、J2EE、ASP.NET)与Web客户端开发的发展过程有一定的相似性，曾面临类似的问题。最初，Web程序功能简单，代码较少时，所有的控制、逻辑、UI展现代码混杂在一起;随着Web发展，程序规模变大，按原有方式开发出的程序显然不具有良好的结构，不利于大规模开发和后期维护，也不利于Web开发人员工作和角色的进一步细分，代码复用性差，瓶颈开始出现。Web后端程序设计者的解决方法是进行代码分类，将控制代码与展现代码开始分离， 于是Web后端开发从所谓的Model1发展到Model2;同时，传统桌面程序设计中的MVC(模型-视图-控制器)设计模式被引入，负责程序数据与逻辑计算的部分进一步分离出来，形成了Web后端开发中的MVC开发模式。MVC设计模式贯穿了软件工程分而治之的思想，有效解决了Web后端程序设计中的代码组织和复用问题。采用同一设计模式(