浅析JavaScript MVC 框架在Web 开发中的应用
来源:用户上传
作者: 代庆梅
摘要：为实现Web开发中客户端代码的可读性、易测试、可维护性和可扩展性，介绍和分析JavaScript MVC框架的基本结构和设计模式。以Backbone.js框架为例，通过实际应用开发中的部分代码演示了JavaScript MVC框架在Web开发中的应用，并阐述了Web开发中的其他注意事项。
关键词：JavaScript MVC框架；DOM；Backbone.js
中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2014）10-2242-04
Abstract： The basic structure and design pattern of JavaScript MVC framework are introduced and analyzed to achieve the client code readability， testability， maintainability and scalability in Web development. Taking the Backbone.js framework as examples， the codes of JavaScript MVC framework in Web Development are demonstrated and other precautions are elaborated in practical application.
Key words： JavaScript MVC Framework； DOM； Backbone.js
1 问题的提出
在传统的B/S软件开发中，服务器端进行业务逻辑和数据处理，客户端进行HTML页面显示，其中客户端JavaScript主要用于改善用户体验。而随着Ajax、JQuery及相关插件的推广，部分业务逻辑就无可避免地会在客户端实现。客户端的JavaScript文件很容易从几句变成几千行代码，开发人员也会陷入一系列的DOM操作和嵌套的JQuery回调函数中。开发的复杂性也日益明显，常常会出现一个人无法看懂另外一人开发的JavaScript代码的情况，很难做到客户端代码的可读性、易测试、可维护性和可扩展性。
2 MVC框架
MVC是模型（model）-视图（view）-控制器（controller）的缩写，是传统Web应用开发中服务器端广泛使用的软件开发模式，它用一种业务逻辑和数据显示分离的方法来组织代码，具有耦合性低、重用性高、可维护性高、有利于软件工程化管理的特点。最典型的MVC是JSP + servlet + javabean的模式。
1）模型（model）主要包括业务逻辑模块（web项目中的Action，dao类）和数据模块（pojo类）。模型与数据格式无关，这样一个模型能为多个视图提供数据。
2）视图（view）是用户与之交互的界面，在web中视图一般由jsp，html组成。
3）控制器（controller）接收来自界面的请求并交给模型进行处理。
典型的HTTP请求/响应过程MVC流程如下：
3 JavaScript MVC框架
当前Web应用程序在客户端有越来越多的逻辑判断和数据处理，尤其是客户端包括地理信息、本地化存储、websocket等功能时，客户端代码极难维护。为了解决这一问题，现在已有多个JavaScript MVC框架（Backbone.js、 Ember.js、 AngularJS、Knockout等）将传统的MVC框架引入到前端开发中。
JavaScript MVC框架中M代表数据，V代表DOM，C协调输入输出并操作数据，MVC框架就是将数据与DOM进行分离，它并不仅仅只是一种，还有多种扩展模式，表示为MV*（星号代表有不同选择），例如：MVP（Model-View-Presenter）、MVVM（Model-View-ViewModel）。
JavaScript MVC与传统的服务器端MVC有所不同，它主要是将数据和界面显示分开，即将模型和视图进行分离。事实上，不同的JavaScript MVC框架在控制器（controller）方面，其实现方式也各不相同。有些框架（例如Backbone.js）控制器与视图的界限比较模糊，原本部分应该在控制器中进行的操作直接就在视图中实现了，有些框架（例如Ember.js和ExtJS）则将控制器作为调度中心，用来启动应用程序、初始化数据模型、监测数据变化、调用相应操作等。
从设计模式来说，JavaScript MVC框架主要采用观察者模式、策略模式和组合模式，根据不同框架的实现方式，也可能会用到工厂模式和模板方法模式。JavaScript MVC框架采用观察者模式实现内部核心通信（当数据变化时通知观察者），通过这种方式实现多个视图绑定到一个模型并进行同步。
4 Backbone.js在Web开发中的应用
Backbone.js 是一个重量级javascript MVC框架，主要组件是模型、视图、集合和路由器。在 Backbone.js中，模型存储通过 RESTful JSON 接口从服务器检索到的数据，模型与视图密切关联，负责为特定 UI 组件渲染 HTML 并处理元素上触发的事件，路由器处理URL并在客户端进行逻辑处理。Backbone.js具有以下特点：
u强制依赖于 Underscore.js。
u非强制依赖于 jQuery/Zepto。
u根据模型的变更自动更新应用程序的 HTML，有助于代码维护。
u促进客户端模板使用，避免了在 JavaScript 中嵌入 HTML 代码。
转载注明来源:https://www.xzbu.com/8/view-5748576.htm
