JavaScript的Backbone.js框架入门学习指引

1.简介
最近在做一个大型网上银行项目前端的优化,需要使用一个胖客户端的优化,大概思路就是前端通过Ajax 请求去后端获取数据,以Jason的格式返回,然后显示在页面上。由于这个系统非常庞大,胖客户端方案难免需要在客户端写大量的JS代码。我想对于任何团队来说,大量的,非结构化的代码维护起来都非常的不方便。所以BackBone进入了我的视线。
它提供了一种途径可以让你结构化你的JS代码,让你以面向对象的方式来组织你的前端JS代码。这就好比我们在前端应用Domain Driven Design. 我们可以把一个非常大的项目按模块切分。 每个模块里面又可以按照BackBone的要求切分成View,  Model, Router。
通过backbone,你可以把你的数据当作Models,通过Models你可以创建数据,进行数据验证,销毁或者保存到服务器上。当界面上的操作引起model中属性的变化时,model会触发change的事件;那些用来显示model状态的views会接受到model触发change的消息,进而发出对应的响应,并且重新渲染新的数据到界面。在一个完整的backbone应用中,你不需要写那些胶水代码来从DOM中通过特殊的id来获取节点,或者手工的更新HTML页面,因为在model发生变化时,views会很简单的进行自我更新。

2.特点
Backbone是一个轻量级的前端框架,用于结构化管理页面中的大量JS,建立与服务器、视图间的无缝连接,为构建复杂的应用提供基础框架。
下面我先简单地阐述下Backbone的主要特点及特性:

2.1 轻量级
Backbone的源码只有1000行左右(去注释和空行后),文件大小只有16KB,加上依赖库Underscore,也仅有29KB。
你只需要花一点时间,就能轻松了解Backbone内部实现;或编写少量代码,来重载Backbone的部分机制;如果你想在Backbone的基础上做二次开发,也并不是一件复杂的事情。

2.2 结构化
Backbone可以轻松将页面中的数据、逻辑、视图解耦,依照Backbone进行代码结构组织,你可以将项目中的数据交互、业务逻辑、用户界面等工作,分配给多个同事同时开发,并能有序地组织到一起。同时,这对于大型和复杂项目的维护开发非常有帮助。

2.3 继承机制
在Backbone中,模块是可以被继承的,你可以通过面向对象的方式将应用中的数据模型、集合、视图有序地组织,让整个架构更加清晰;也可以方便地重载和扩展自定义方法。

2.4 建立与服务器的无缝连接
在Backbone中内置了一套与服务器数据的交互规则(如果你了解REST架构,就能够轻松地理解它们),而数据的同步工作会在Model中自动进行,前端开发人员只需对客户端数据的进行操作,Backbone会自动将操作的数据同步到服务器。
这是件非常有趣的事情,因为服务器数据接口对前端开发者来说是透明的,他们不需要再关心如何和服务器交互。
然而服务器提供的数据接口也需要兼容Backbone的规则,对于一个新的项目来说,我们可以尝试使用这套规则来构建接口。但如果你的项目中已经有一套稳定的接口,你可能会担心接口改造的风险。
没关系,我们可以通过重载Backbone.sync方法来适配现有的数据接口,针对不同的客户端环境,我们还可以实现不同的数据交互方式。例如:用户通过PC浏览器使用服务时,数据会实时同步到服务器;而用户通过移动终端使用服务时,考虑到网络环境问题,我们可以先将数据同步到本地数据库,在合适的时候再同步到服务器。而这些只需要你重载一个方法就可以实现。

2.5 界面事件管理
在MVC中,我们希望能将界面展现和业务逻辑完全分离,但对于用户产生的交互事件(如单击事件),我们却常常通过类似jQuery中的bind方法进行获取和绑定。
Backbone中的视图帮助我们将用户事件和执行方法有序的组织起来,这只需要我们声明一个简单的表达式,例如:

events: {
  // 单击id为”save”的元素时,执行视图的add方法
  'click #save': 'add',
  'mousedown .button': 'show',
  'mouseover .button': 'hide'
}

在表达式中,事件名称可以是任意的DOM事件(如click、mouseover、keypress等),元素可以是jQuery支持的任意选择器(如标签选择器、id选择器、class选择器等)。
视图会自动将表达式中的事件绑定到选择器元素,当元素的事件被触发后,视图会自动调用表达式中绑定的方法。

2.6 轻量级模板解析
模板解析是Underscore中提供的一个方法。为什么我要在介绍Backbone特性时引入Underscore中的方法?因为该方法能帮助我们更好地分离视图结构和逻辑,且Underscore是Backbone必须依赖的库。
模板解析方法能允许我们在HTML结构中混合嵌入JS代码,就像在JSP页面中嵌入Java代码一样:

<ul>
  <% for(var i = 0; i < len; i++) { %>
  <li><%=data[i].title%></li>
  <% } %>
</li>

通过模板解析,我们不需要在动态生成HTML结构时拼接字符串,更重要的是,我们可以将视图中的HTML结构独立管理(例如:不同的状态可能会显示不同的HTML结构,我们可以定义多个单独的模板文件,按需加载和渲染即可)。

2.7 自定义事件管理

在Backbone中,你可以使用on或off方法绑定和移除自定义事件。在任何地方,你都可以使用trigger方法触发这些绑定的事件,所有绑定过该事件的方法都会被执行,如:

var model = new Backbone.Model();
// 在model对象中向自定义事件custom绑定两个函数
model.on('custom', function(p1, p2) {
  // todo
});
model.on('custom', function(p1, p2) {
  // todo
});
// 触发custom事件,将调用上面绑定的两个函数
model.trigger('custom', 'value1', 'value2');
// 移除custom事件中绑定的所有方法
model.off('custom');
// 触发custom事件,但不会执行任何函数,已经事件中的函数已经在上一步被移除
model.trigger('custom');

如果你熟悉jQuery,你会发现它们与jQuery中的bind、unbind和trigger方法非常类似。
另外,Backbone支持一个特殊事件”all”,当在一个对象中绑定了名为”all”的事件后,该对象在触发任何事件时,都会同时触发”all”事件中绑定的方法。有时这种方法会非常有用,例如我们可以通过”all”事件监听对象状态的变化。

3.路由器
在单页应用中,我们通过JavaScript来控制界面的切换和展现,并通过AJAX从服务器获取数据。
可能产生的问题是,当用户希望返回到上一步操作时,他可能会习惯性地使用浏览器“返回”和“前进”按钮,而结果却是整个页面都被切换了,因为用户并不知道他正处于同一个页面中。
对于这个问题,我们常常通过Hash(锚点)的方式来记录用户的当前位置,并通过onhashchange事件来监听用户的“前进”和“返回”动作,但我们发现一些低版本的浏览器(例如IE6)并不支持onhashchange事件。
Backbone提供了路由控制功能,通过Backbone提供的路由器,我们能通过一个简单的表达式将路由地址和事件函数绑定在一起,例如:

var CustomRouter = Backbone.Router.extend({
  routes : {
    '' : 'index', // 当URL Hash在根目录时执行index方法:url#
    'list' : 'getList', // 当URL Hash在list节点时执行getList方法:url#list
    'detail/:id' : 'query', // 当URL Hash在detail节点时执行query方法,并将detail后的数据作为参数传递给query方法:url#list/1001
    '*error' : 'showError' // 当URL Hash不匹配以上规则时, 执行error方法
  },
  index : function() {
    alert('index');
  },
  getList : function() {
    alert('getList');
  },
  query : function(id) {
    alert('query id: ' + id);
  },
  showError : function(error) {
    alert('error hash: ' + error);
  },
}); 

var custom = new CustomRouter();
Backbone.history.start();

请尝试将这段代码复制到你的页面中,并依次访问以下地址(其中URL表示你的页面地址):

URL
URL#list
URL#detail/1001
URL#hash1
URL#hash2

  请再试着使用浏览器的“返回”和“前进”按钮来回切换刚刚输入的地址。
  你可以看到,当URL Hash发生变化时,会执行所绑定的方法,当遇到没有定义的Hash时,都会执行showError方法,并将未定义的Hash传递给该方法。
  Backbone默认会通过Hash的方式来记录地址的变化,对于不支持onhashchange的低版本浏览器,会通过setInterval心跳监听Hash的变化,因此你不必担心浏览器的兼容性问题。
  对于支持HTML5 pushState特性的浏览器,Backbone还允许你通过pushState来创建个性化的URL,但是这需要你的Web服务器做一些适配。
3. Backbone的适用性

Backbone并不像jQuery那样具有非常强的适用性,如果你正准备构建一个大型或复杂的单页Web应用,那么Backbone再适合不过。
如果想将Backbone应用到你的网站页面中,且页面中并没有复杂的逻辑和结构,那么这只会让你的页面更加繁琐和难以维护。
如果你的项目并不复杂,但你却深深喜欢它的某个特性(可能是数据模型、视图管理或路由器),那么你可以将这部分源码从Backbone中抽取出来,因为在Backbone中,各模块间的依赖并不是很强,你能轻易的获取并使用其中的某一个模块。

4. 依赖库

你不能独立使用Backbone,因为它的基础函数、DOM操作、AJAX都依赖于第三方库。

4.1 Underscore
(必选)
Underscore是一个用于提高开发效率的基础函数库,它封装了对集合、数组、对象、函数的常用操作,就像jQuery封装DOM对象一样,你能通过Underscore轻易地访问和操作JavaScript内部对象。
Underscore还提供了一些非常实用的函数方法,如:函数节流、模板解析等。
关于Underscore中一些主要的方法,我会在下一章详细介绍,但在此之前你必须了解:Underscore是Backbone必须依赖的库,因为在Backbone中许多实现都是基于Underscore。

4.2 jQuery和Zepto
(可选)
相信你对jQuery一定不会陌生,它是一个跨浏览器的DOM和AJAX框架。
而对于Zepto你可以理解为“移动版的jQuery”,因为它更小、更快、更适合在移动终端设备的浏览器上运行,它与jQuery语法相同,因此你能像使用jQuery那样使用它。
Zepto目前仅支持Webkit内核的浏览器,因此它能兼容iOS、Adnroid、塞班、黑莓和Meego等大部分移动系统,而对于Windows Phone或Firefox OS,它暂时还不支持。
因为jQuery和Zepto语法相同,因此对于Backbone来说,你无论是使用jQuery还是Zepto,都没有问题(当然,你不可能两个同时都用到)。
在Backbone中,DOM选择器、DOM事件和AJAX,都使用了jQuery的方法。这里之所以所它们是可选的,是假设你没有用到Backbone中的视图和AJAX数据同步功能,那么就不需要导入它们。
如果你不想使用jQuery或Zepto,而是使用其它的、或自定义库,只要你的库中实现了与jQuery语法相同的DOM选择器、事件管理和AJAX方法,那么就不会任何问题。
Backbone允许你通过setDomLibrary方法动态配置需要使用的第三方库,这种情况常常用于:
你的自定义库虽然包含了和jQuery相同语法的方法,但全局变量并不是$,而且你想保持现有的命名。这时你可以通过setDomLibrary方法将其设置为Backbone内部引用的对象。
你希望通过检查用户的环境,来决定更适合使用哪一个库。例如:如果用户使用PC浏览器访问,则载入jQuery,如果用户通过移动终端访问,则载入Zepto。

(0)

相关推荐

  • 分享别人写的一个小型js框架

    主要是集成了常用的扩展,包括Dom与String.Array.StringBuffer.NameSpace等,当然还少不了Ajax.体积约8k.因为严格控制体积,所以功能有限.如果只要Ajax部分,就1k而已. 这个小框架已经应用到公司的项目,并开始逐步在前端展示页面上接替prototype.js.以后将围绕这个框架做一些应用. 复制代码 代码如下: /* *    My JavaScript Framework *    Version    :    1.0 beta *    Author

  • Bootstrap整体框架之JavaScript插件架构

    本文实例为大家介绍了JavaScript插件架构的知识点,供大家参考,具体内容如下 1. JavaScript插件架构 如下是插件alert的全部代码,每个插件都定义在如下类似的作用域中: +function ($) { 'use strict'; // ALERT CLASS DEFINITION // ====================== var dismiss = '[data-dismiss="alert"]' var Alert = function (el) { $

  • 前端框架Vue.js构建大型应用浅析

    真正的模块化 前端模块化很早就开始了,无论是 require.js,browserify 进行模块化打包, 还是 Angular 进行依赖注入,我们都可以把JS代码分成一个个小的模块并组装起来.然后我们还会通过 less 或者 sass 来把CSS文件也拆成一个个小的模块来写,甚至我们在CSS代码中感受到了 封装,继承,多态 等面向对象的特性. 然而,在 webpack 出来之前,我们所谓的模块化根本不能算作模块化.为什么这么讲,因为我们存在一个重要的问题没有解决,就是JS模块对CSS模块的依赖

  • 2014年最火的Node.JS后端框架推荐

    Node.js框架是可以帮助你建立网站应用服务的javascript框架.它可以帮助你更快地开发Web应用 Node.js 是基于Chrome的JavaScript运行环境.可方便地构建快速.可扩展的网络应用.节点. 当涉及到Web应用程序的开发,你就需要JS框架,加快你的开发过程. Node.js有非常多不同类型的框架,如MVC框架,REST API和generators,全栈框架,大量的服务器库,它完全能够提供Web服务,无需使用Apache等外部软件. Node.js使用谷歌的V8 Jav

  • 详细介绍8款超实用JavaScript框架

    1. Hammer.jsHammer.js是被广泛使用的轻量级JavaScript框架,它提供了常用触摸操作的规范,比如收缩.拖放.双击和删除等等.它支持大多数移动平台像iOS,Windows Mobile, Android 和 BlackBerry. 2. jQuery UIjQuery UI非常适合那些用jQuery JS 库开发App的用户.提到jQuery UI,就不得不提到跟它非常相似的Kendo UI.Kendo UI可帮助创建原生的移动和桌面应用,对性能和易用性方面都做了大量优化,

  • 第一次接触神奇的前端框架vue.js

    前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组合.以至于我都有些感觉out.各种vue+webpack.vue+react.vue+es6+npm等等.琳琅满目.真是三天不学习赶不上刘少奇. 开篇主要是初次了解下vue.js,包括v-model.v-if.v-else.v-show.v-for(2.0对$index和$key舍弃,2.0要用in

  • 十大热门的JavaScript框架和库

    JavaScript 框架和库可以说是开源项目中最庞大也是最累的类目了,目前在github 上这一类的项目是最多的,并且几乎每隔一段时间就会出现一个新的项目席卷网络社区,虽然这样推动了创新的发展,但不得不说苦了前端的开发者们.因此本文罗列出了一些优秀的 Javascript 框架和库的特及其在 github 上的 star 数,旨在为各位开发者提供一些参考. 1.ReactJS(Star: 59989,Fork: 10992) 主页:https://facebook.github.io/reac

  • 移动端脚本框架Hammer.js

    一.前言 移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了.虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接触移动端脚本的过程中,最开始想到的是juqery.Jquery2.0版本及以上已经开始偏向移动端,如对h5的支持,但支持还是不够完善,希望jq在后面的版本能够逐渐支持起来. 最初在开发移动端Web的时候使用w3c标准的语法结构和原生的js开发,但相对来说开发量比较大,而且每一步都要考虑各移动端浏览器的兼容,像比较让程序员头痛的大wp手机,很多事

  • JavaScript的Backbone.js框架的一些使用建议整理

    Backbone 为复杂Javascript应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视图可以声明事件处理函数,并通过RESTful JSON接口连接到应用程序. 当我们开发含有大量Javascript的web应用程序时,首先你需要做的事情之一便是停止向DOM对象附加数据. 通过复杂多变的jQuery选择符和回调函数创建Javascript应用程序,包括在HTML UI,Ja

  • AngularJs Javascript MVC 框架

    在6月google发布了AngularJs 1.0稳定版, 并宣称:AngularJS可以让你扩展HTML的语法,以便清晰.简洁地表示应用程序中的组件,并允许将标准的HTML作为你的模板语言,AngularJS可以通过双向数据绑定自动从拥有JavaScript对 象(模型)的UI(视图)中同步数据. 开始接触AngularJs是在4月份来到新项目组,这时AngularJs还处于0.8未稳定版,项目中已经开始使用了,并且这套框架应用到了项目整个UI端,服务端也是未稳定的web api,真心佩服团队

随机推荐