浅谈javascriptmvc框架在web开发中应用

《浅谈javascriptmvc框架在web开发中应用》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、浅谈JavaScriptMVC框架在Web开发中应用摘要：为实现Web开发中客户端代码的可读性、易测试、可维护性和可扩展性，介绍和分析JavaScriptMVC框架的基本结构和设计模式。以Backbone,js框架为例，通过实际应用开发中的部分代码演示了JavaScriptMVC框架在Web开发中的应用，并阐述了Web开发中的其他注意事项。关键词:JavaScriptMVC框架；DOM；Backbone,js中图分类号：TP311文献标识码：A文章编号：1009-3044(2014)10-2242-04Abstract：Thebasicstruetureanddesignpat

2、ternofJavaScriptMVCframeworkareintroducedandanalyzedtoachievethedientcodereadability,testability,maintainabilityandscalabilityinWebdevelopment・TakingtheBackbone.jsframeworkasexamples,thecodesofJavaScriptMVCframeworkinWebDevelopmentaredemonstratedandotherprecautionsareelaboratedinpracticalapp

3、lication.Keywords:JavaScriptMVCFramework；DOM；Backbone・js1问题的提出在传统的B/S软件开发中，服务器端进行业务逻辑和数据处理，客户端进行HTML页面显示，其中客户端JavaScript主要用于改善用户体验。而随着Ajax、JQuery及相关插件的推广，部分业务逻辑就无可避免地会在客户端实现。客户端的JavaScript文件很容易从几句变成几千行代码，开发人员也会陷入一系列的DOM操作和嵌套的JQuery回调函数中。开发的复杂性也日益明显，常常会出现一个人无法看懂另外一人开发的JavaScript代码的情况，很难做到客户端代

4、码的可读性、易测试、可维护性和可扩展性。2MVC框架MVC是模型(model)-视图(view)-控制器(controller)的缩写，是传统Web应用开发中服务器端广泛使用的软件开发模式，它用一种业务逻辑和数据显示分离的方法来组织代码，具有耦合性低、重用性高、可维护性高、有利于软件工程化管理的特点。最典型的MVC是JSP+servlet+javabean的模式。1)模型(model)主要包括业务逻辑模块(web项目中的Action,dao类)和数据模块(pojo类)。模型与数据格式无关，这样一个模型能为多个视图提供数据。2)视图(view)是用户与之交互的界面，在web中视图

5、一般由jsp,html组成。3)控制器(controller)接收来自界面的请求并交给模型进行处理。典型的HTTP请求/响应过程MVC流程如下：2JavaScriptMVC框架当前Web应用程序在客户端有越来越多的逻辑判断和数据处理，尤其是客户端包括地理信息、本地化存储、websocket等功能时，客户端代码极难维护。为了解决这一问题，现在已有多个JavaScriptMVC框架(Backbone.js>Ember,js、AngularJS>Knockout等)将传统的MVC框架引入到前端开发中。JavaScriptMVC框架中M代表数据，V代表DOM,C协调输入输出并操作数据，

6、MVC框架就是将数据与D0M进行分离，它并不仅仅只是一种，还有多种扩展模式，表示为MV*(星号代表有不同选择)，例如：MVP(Model-View-PresenterMVVM(Mode1-View-ViewMode1)oJavaScriptMVC与传统的服务器端MVC有所不同，它主要是将数据和界面显示分开，即将模型和视图进行分离。事实上，不同的JavaScriptMVC框架在控制器(controller)方面，其实现方式也各不相同。有些框架(例如Backbone,js)控制器与视图的界限比较模糊，原本部分应该在控制器中进行的操作直接就在视图中实现了,有些框架(例如Ember,j

7、s和ExtJS)则将控制器作为调度中心，用来启动应用程序、初始化数据模型、监测数据变化、调用相应操作等。从设计模式来说，JavaScriptMVC框架主要采用观察者模式、策略模式和组合模式，根据不同框架的实现方式，也可能会用到工厂模式和模板方法模式。JavaScriptMVC框架采用观察者模式实现内部核心通信（当数据变化时通知观察者），通过这种方式实现多个视图绑定到一个模型并进行同步。2Backbone,js在Web开发中的应用Backbone,js是一个重量级javascriptMVC框架