导读
最近一段时间,我在研究移动WebApp应用开发,想在设计WebApp前端JS构架时,使用MVC分层技术,经过一段时间的技术选型,最终确定使用Backbone JS作为底层基础MVC框架。在使用Backbone写示例时,总是觉得非常怪,但又说不出怪在哪,所以,就想通过Backbone与Ext JS 4 MVC的对比,来发现Backbone的缺点与优化点。PS:由于我在做Desktop前端JS开发时,十分青睐Ext JS这一类的框架,Ext JS 4 MVC是我认为在所有框架中做得最好的。
特性对比
在对比两个MVC框架之前,必须理解四个十分重要的特性:
- UI Bindings:[UI 绑定] 我想说的不仅仅是模板,而是想谈一种在底层模型出现变化时,视图层能够自动刷新的方法。一旦您用过了支持 UI Binding 的框架(例如Ext)就很难放手回头了。
- Composed Views:[组件化视图] 与所有的软件开发者一样,我也喜欢编写模块化、可重用的代码。基于这样的原因,当给 UI 编程的时候,我喜欢使用视图的方法来开发(个人更偏好在模板层时使用),当然这样也就需要拥有足够丰富的视图组件来支持。
- Web Presentation Layer:[web 表示层] 我们在编写 web 程序时想要 Native 风格的组件,但是也没有理由来为一个 web 框架来创建它自己的布局管理器。HTML 和 CSS 是目前解决样式与布局的最好的方法,框架也应该以这一点为核心。
- Play Nicely With Others:[兼容,友好] 不得不承认jQuery是十分犀利的。我不喜欢那种绑定着一个定制的jQuery副本的框架,而推荐直接使用jQuery。
下面是两个框架对于四种特性支持程度的对比
实例对比
咱们先看一个简单的小例子,分别使用Ext JS与Backbone实现。这个例子也是Ext JS 4官方源码中的一个例子,参见http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/app/simple/simple.html
对Ext JS 4 MVC不熟悉的同学,可以阅读文章ExtJS 4 MVC架构讲解,这篇文章对Ext JS 4 MVC讲解得很透彻。
Ext JS 4 MVC例子
1、目录结构。
2、定义Application。你可以把app当作是一个应用入口,app包含应用的全局配置,同时也负责维护模型、视图、控制器的引用。Ext.app.Application本身也是继承自Ext.app.Controller,具体参见源码与官方文档。
Ext.application({ name: 'AM', // automatically create an instance of AM.view.Viewport autoCreateViewport: true, controllers: [ 'Users' ] });
3、定义Viewport。Viewport中定义了app被加载时的初始视图。
Ext.define('AM.view.Viewport', { extend: 'Ext.container.Viewport', layout: 'fit', items: [{ xtype: 'userlist' }] });
4、定义控制器。Controller是Model与View的粘合剂,Controller的control()函数使用ComponentQuery表达式设置组件视图的事件监听,这样就很好的将视图的控制逻辑与View本身分离,达到View重用的目的,当View是由组件构成时,组件的重用就显得很重要。不熟悉ComponentQuery请参见官方文档。
Ext.define('AM.controller.Users', { extend: 'Ext.app.Controller', stores: ['Users'], models: ['User'], views: ['user.Edit', 'user.List'], refs: [ { ref: 'usersPanel', selector: 'panel' } ], init: function() { this.control({ 'viewport > userlist dataview': { itemdblclick: this.editUser }, 'useredit button[action=save]': { click: this.updateUser } }); }, editUser: function(grid, record) { var edit = Ext.create('AM.view.user.Edit').show(); edit.down('form').loadRecord(record); }, updateUser: function(button) { var win = button.up('window'), form = win.down('form'), record = form.getRecord(), values = form.getValues(); record.set(values); win.close(); this.getUsersStore().sync(); } });
5、Model和View。在此略过代码部分,对于不熟悉Ext的同学,参见官方的源码及例子。Ext JS的Model、Store和View实现了UI Binding,当Model数据发生变化时自动完成View刷新。在上面的例子中,有一行代码record.set(values);,Record就是一个Model实例,当record被赋值时视图被刷新,这部分代码在ExtJS 4 MVC架构讲解文中有详细描述。
Backbone MVC例子
1、定义Model。Backbone的Model与Ext Model差不多,但是,Ext Model支持对象依赖关联,这个在特性复杂的企业应用中会比较有用,文章末尾会详细的解释对象依赖关联。Collection与Ext Store在概念上相似,但是,Collection仅仅是一个集合,而Store则是Ext非常重要的一个功能,它是Ext实现数据交互的重要中间件,功能非常强大,有兴趣的同学可以翻阅官方文档。
var User = Backbone.Model.extend({ idAttribute: 'id', url: '../testdata' }); var uer = new User(); var UserList = Backbone.Collection.extend({ url: '../testdata', model: User }); var users = new UserList();
2、定义View。Backbone的View可以结合JS模版引擎实现视图渲染,视图事件控制使用事件委托的方式,例子中,el对象绑定一个委托click事件,当点击tr时调用函数showProfile,具体View事件请参见Backbone官方源码。视图控制事件监听应该出现在Controller中,由于Backbone没有Controller的概念,所以视图控制事件监听在View中实现,与视图渲染混在一起,导致视图无法重用,没有达到MVC分层的目的。现在,我们换一种思路思考,把Backbone View看作是一个Controller,View仅仅使用是一个HTML模版,虽然有点牵强,但视乎也是MVC。Backbone在早期的版本是有Controller这个类,但在新版本将Controller重命名成Router,我想Backbone作者也意识到了这个问题的存在吧!
var HomeView = Backbone.View.extend({ el: $('#mainview'), events: { 'click tr': 'showProfile' }, showList: function() { var html = ['<table>']; users.each(function(uer) { html.push('<tr>'); html.push('<td>', uer.get('firstname'), '</td>'); html.push('<td>', uer.get('lastname'), '</td>'); html.push('</tr>'); }); html.push('</table>'); this.$el.html(html.join('')); }, showProfile: function() { this.$el.html('Hello, ' + uer.get('firstname') + ' ' + uer.get('lastname')); } }); var home = new HomeView();
3、定义Router。Router是个好东西,可以监听地址栏hash改变,实现页面跳转的控制逻辑。这视乎和Controller有点关系,但又能不说Router是Controller,这也是Controller重命名成Router的一个原因。
var AppRouter = Backbone.Router.extend({ routes: { 'list': 'list', 'profile/:id': 'getProfile' }, getProfile: function(id) { uer.set('id', id); uer.fetch({ type: 'POST', data: { id: id }, success: function() { home.showProfile(); } }); }, list: function() { users.fetch({ type: 'POST', success: function() { home.showList(); } }); } }); new AppRouter(); Backbone.history.start();
总结
Ext JS 4 MVC是我认为非常完美的MVC框架之一,但是太依赖Ext的体系,很难从体系中剥离出来。
Backbone JS优点、缺点都比较明显:
- 优点:小巧、轻便可以很容易的集成到应用中,Backbone MVC可以适用大部分的项目需求。
- 缺点:Backbone是MVC的不完整实现,只实现了部分,功能比较弱。
我会考虑增加一些Backbone的功能,如Collection和Model的离线缓存,UI绑定数据改变自动渲染,在业务层封装出类似Ext的MVC,模版与组件化是视图渲染的两种主要方式。
扩展阅读------对象依赖关联
一个Model对象与其他Model对象存在依赖关系。定义两个Model:User、Post,User与Post的关系是一对多。
服务端响应JSON格式:
{ id: 'user1', posts: [{ id: 'post1', user_id: 'user1', }, { id: 'post2', user_id: 'user1', }, { id: 'post3', user_id: 'user1', }] }
使用Ext JS 4定义Model:
Ext.define('Post', { extend: 'Ext.data.Model', fields: ['id', 'user_id'], belongsTo: 'User' }); Ext.define('User', { extend: 'Ext.data.Model', fields: ['id'], hasMany: {model: 'Post', name: 'posts'} });
数据访问:
User.load('user1', { success: function(user){ user.posts().each(function(rec){ console.log(rec.get('id')); }); } });
参考资料
- The Top 10 Javascript MVC Frameworks Reviewed
- Backbone JS框架指南
- Backbone源码分析-Backbone架构+流程图
- ExtJS 4 MVC架构讲解
原创文章,转载请注明出处http://zhangdaiping.iteye.com
相关推荐
Backbone.js是基于JavaScript的一种前端MVC框架,它的设计理念遵循了传统的模型-视图-控制器(Model-View-Controller)结构。相较于Angular.js等其他前端框架,Backbone.js显得更加轻巧,它专注于提供一组基础的工具...
BackBone.js 是一个轻量级的JavaScript库,它引入了MVC(模型-视图-控制器)设计模式,为Web应用开发提供了结构化的组织方式。BackBone的主要目标是使JavaScript代码更加有序,便于维护和扩展。在这个框架中,我们...
Backbone.js是一个轻量级的JavaScript库,它引入了MVC(Model-View-Controller)模式,帮助开发者更好地组织前端代码结构,提供模型管理、视图渲染和事件处理等功能。将TypeScript与Backbone.js结合,可以利用...
Backbone.js是一款轻量级的JavaScript库,它遵循MVC(Model-View-Controller)设计模式,用于构建结构化的前端应用。在MVC架构中: 1. **Model**:代表数据模型,负责存储和处理业务逻辑,与服务器进行数据交换。 2...
backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,...
backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,...
You'll learn how to create structured JavaScript applications, using Backbone's own flavor of model-view-controller (MVC) architecture. Start with the basics of MVC, SPA, and Backbone, then get your ...
Backbone.js提供了一套Web开发的框架,为复杂的JavaScript应用程序提供了一个MVC结构。 《Backbone.js应用程序开发》详细介绍了如何使用Backbone.js完成Web应用开发。全书从了解MVC、SPA和Backbone.js的基本知识...
Backbone.js是一款轻量级的JavaScript库,专为构建丰富的Web应用程序而设计。它通过提供模型(Models)、视图(Views)、集合(Collections)和路由器(Routers)等核心概念,帮助开发者组织代码并实现MVC(Model-...
Backbone.js是一个轻量级的MVC(模型-视图-控制器)框架,主要目标是帮助开发者组织代码结构,使得前端应用更加有序和可维护。它通过提供模型、视图、集合、路由器等核心概念,帮助开发者管理数据和界面更新。 1. *...
backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,...
Backbone.js 是一款轻量级的 JavaScript 框架,它为 Web 开发提供了 MVC(Model-View-Controller)架构的基础组件。该框架的目标是简化客户端应用的开发流程,通过提供 Models、Collections 和 Views 的抽象层次结构...
You'll learn how to create structured JavaScript applications, using Backbone's own flavor of model-view-controller (MVC) architecture. Start with the basics of MVC, SPA, and Backbone, then get your ...
Backbone.js 是一个轻量级的JavaScript库,主要用于构建可维护性和结构化的Web应用。它提供了一套模型-视图-控制器(MVC)架构,帮助开发者组织代码,使得前端开发更加有序。在深入探讨Backbone.js的开发秘笈源码...
You’ll learn how to create structured JavaScript applications, using Backbone’s own flavor of model-view-controller (MVC) architecture. Start with the basics of MVC, SPA, and Backbone, then get ...
"backbone-cart:Backbone + require.js MVC-cart" 这个标题指出这是一个基于Backbone.js和Require.js构建的MVC(模型-视图-控制器)模式的购物车应用。Backbone.js是一个轻量级的JavaScript库,用于创建结构化的Web...
Backbone.js是一个轻量级的JavaScript库,专为构建可维护和模块化的Web应用而设计。它基于MVC(Model-View-Controller)模式,帮助开发者组织和管理前端代码结构,使得复杂的应用程序更容易理解和扩展。在“Backbone...