Backbone.js系列教程二:Backbone.js深入解析之基础要求

在网上关于Backbone的描述很少,现有的关于Backbone的内容五花八门,基本上都不同程度的提到了如何运用Backbone来实现应用程序的创建,当然也有很多的是讨论它是否匹配Model/View/Whatever。有挺多华而不实的视频教程是讲程序设计的,但其实没有什么太大的价值。我认为关键是缺少了关于Backbone本身的详细介绍,以及对于每行代码的真正用意的细节描述。有篇文档专门讲述Backbone各部分的功能,在一定程度上解答了上述问题,并且提供带有注释的源代码,还有更多相关Backbone.js的内容介绍。这些虽然远远不够,但最起码,能换个角度带大家了解Backbone的组成部分与功能。

在这套Backbone.js解构系列教程中,我们将从代码层面验证Backbone库的功能。

具体而言,在这套教程的前一部分中我们将探讨学习Backbone的基础,介绍单页面应用程序(SPAs)所需一些关键的细节,以便能更好的掌握Backbone的组成与用途。在对SPAs有一定基础之后,我们将系统深入到Backbone代码部分各个细节,包括Backbone.Events、创建Backbone对象、Backbone.Router()、Backbone.History()和Backbone utilities。在Backbone.js解构系列教程的后半部分中,我们则会分别探讨Backbone.Model、Backbone.View和Backbone.Collection。

在这套系列教程中没有提到关于MVC、MVVM、MVP和MV-Whatever模式的深入知识,我刻意回避了任何有关这些模式的深入讨论,因为我 认为Backbone是个简单的库,如果你掌握了代码功能,那么实现部分就比较顺其自然了,建立匹配你自己域名的Backbone应该不是难事。

本系列文章不是教你如何创建一个应用程序,而是采用最普通的方法跟新手讲解Backbone的知识,以及讲述Backbone.js基础的内容。此外,本文的目的也不是为了简单概述模型(Models)与视图(Views)的。

在本文中,我们会剖析Backbone主要组成部分,运用代码测试每个组分的具体功能,下面就开始吧!

Backbone基础要求

需要具备JavaScript和DOM中级知识

Backbone抽象化了能够由原生DOM和HTML5 JavaScript APIs完成的大量重复性的任务。正是因为这样,如果你没有用过DOM和JavaScript,那么学习Backbone的时候将会感到难度很大,过程漫 长,令人沮丧。考虑到Backbone本身在实现DOM处理时需要寻求第三方解决方案(即jQuery、Ender、Zepto),如果你没有把握好原生 DOM脚本和现代JavaScript APIs (例如XHR),则很可能在过程中出错。如果不至少是个中级JavaScript开发人员,那么在学习Backbone知识和理解本文方便将会非常困难。

掌握HTTP、XHR和RESTful JSON APIs

Backbone需要与某些工具一起来完成保存/同步数据到后端末节。假设一个JSON API,如果你不熟悉HTTP、XHR,不知道如何利用基于REST的JSON API从服务器读取和写入数据,你就无法理解到底Backbone能做什么,也无法体验到Backbone能帮你节省哪些步骤。

熟悉函数式编程库

一旦Backbone被创建,就有一个附带的实用库叫做Underscore.js,它的作用是提供Backbone函数式编程实用工具。Underscore.js库是独立的工具,在Backbone之外也能使用,只不过Backbone在很大程度上依赖于它。运用Underscore.js或Lo-Dash.js这类实用库有助于更好的学习Backbone代码,还能帮助你理解Backbone继承和可用的Model和Collection对象的功能化方法。如果你没有花时间弄清基于Underscore.js或Lo-Dash.js的编程方法,那么我建议你先花点功夫学习这类程序库。

提示

  • 函数编程实用程序库Lo-Dash.js是Underscore.js的一个替代。
  • 最起码的,在开始学习Backbone之前,你应该对实用工具method extend()到底是做什么用的有一定的了解,它是Backbone源代码中最有用的工具方法。如果你更喜欢Lo-Dash.js,那么请注意了。Lo-Dash.js库中把extend()叫做assign()extend()assign()的一个别称。

了解Models和Views

Backbone致力于缓解“复杂成堆的jQuery选择器与回调函数,疯狂的尝试保持HTML UI之间的数据同步”这种现 象,并且真正做到了这一点。当然,创建大量事件、模型、集合和视图也是同样轻松的。在Backbone中,你可以恣意尝试,直到找到正确的方式。不过,总 体理解model和view对开发者学习与运用Backbone是很有帮助的。不幸的是,哪怕得到松散的概念有关应用构架模式或者接头设计模式都是不容易 的。我建议最好是粗狂的了解model和view,至少不要执着于某个特定的架构模式中,限制了对model和view的了解。如果你没有任何基础知识, 下文将简要介绍Backbone中这两个词语的定义。如果你已经很了解了,那么请跳过这部分内容,我就不加以赘述了。

Model:一个Model通常包含应用程序的状态state(就像JSON中的data或Backbone属性),起到管理和接收状态/数据发生changes的一系列基本功能(就像.set()/.get()methodschange等 事件)。此外,在浏览器中model能够协调这些state/data组成内存,并持续的把它们传送到服务器(这个功能就是同步)。一组有序组合的 models就叫做集合collection。在Backbone中,collections包含多个模型,有特定的功能。一个典型的模型示例就是一个 to-do事件的数据(也就是to-do以及它的完成状态)。一系列to-do列表可以被看做为一组to-do模型的集合。如果把 collection(也就是to-do集合)比喻成一张表单,表单的头文件就是model(即title、status),表单行中的内容就是数据(即get a dog,done)。

View一个Views通常呈现模型和集合中state\data交互式UI的逻辑关系。Views允许state/data脱离DOM,从而多样的Views能使用相同的模型和集合。因此,如果改变一个模型或集合中的模型,多样的Views就能监测到变化并自动更新。所以,"the truth",或state/data没有绑定到view,而是脱离view的,具体的说,就是脱离DOM/HTML的

时间: 2024-12-22 15:58:13

Backbone.js系列教程二:Backbone.js深入解析之基础要求的相关文章

Backbone.js系列教程一 - Backbone.js简介

JavaScript在web应用程序开发前端技术和后端技术的逻辑与运行一块占有越来越大的比重.为了帮助维护和循环访问前期逻辑和模块性,MVC模式在近几年中渐渐普及.其中一种运用广泛的MVC框架就是Backbone.js. Backbone中的Models(模型).Views(视图)和Controller(控制器) Backbone.js包含以下几个主要功能: 创建模型(以及模型集合): 创建视图: 管理绑定,管理事件兼用不同的模型以及视图与框架其他部分的联系: 在模型中使用观察者模式,一旦模型触

站内优化系列教程二:网站头部和底部优化

前面给大家讲了<站内优化系列教程一:导航优化和结构优化>和<站内优化系列教程二:URL和网站地图优化>两课,今天讲第三课<站内优化系列教程二:网站头部和底部优化>.给网站做站优化最基本的目的就是为了提高网站的排名,相对来说这也是大部分站长优化的主要目的,毕竟如果网站排名不靠前,自然就无法从搜索引挚获取大量的流量,而对于网站运营.提高网站知名度.打造网站特有的品牌则是难之又难.回归正题,大部分站长做网站优化都是特别的重视站外优化,而忽视站内的基本优化,其实最基本的提高用户

站内优化系列教程二:URL和网站地图优化

前面说了<站内优化系列教程一:导航与结构的优化>,今天说第二课<站内优化系列教程二:URL和网站地图优化>.网站优化中影响最直接的就是网站URL,也就是网站网址.一般站长都会认为静态的网址对于收录和排名都非常的友好.而动态和伪静态则是以次类推.其实这种想法大部分都出现在对搜索引挚识别能力不够了解的基础上的,如果大家不信,可以看看百度知道的URL,其用的最多的还是动态的URL,所以,对于静态的收录排名比动态的好这种说法并不成立,百度知道就是一个很明显的例子.而对于蜘蛛爬行网站,则有地

C#微信公众号开发系列教程二(新手接入指南)

原文:C#微信公众号开发系列教程二(新手接入指南) 此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可直接跳过,也欢迎大神吐槽. 目录 C#微信公众号开发系列教程一(调试环境部署) C#微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南)   微信公众平台消息接口的工作原理大概可以这样理解:从用户端到公众号端一个流程是这样的,用户发送消息到微信服务器,微信服务器将接收到的消息post到用

黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级)

原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级) 本章介绍的是企业库加密应用程序模块Cryptographyproviders中为对称加密配置Key文件的3种方式: create a new key  : 使用一串字符串作为Key,然后通过加密保存到一个Key文件中. use an existing DPAPI-protected key file  : 使用一个现有的Key文件进

黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (初级)

原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (初级) 企业库加密应用程序模块提供了2种方式让用户保护自己的数据: Hashingproviders:  离散加密法, 简单来说就是把你的信息保存到内存中后用一个离散值表示并返回给程序,这样在程序中只能看到离散值而不是明文,这样就起到简单的加密效果啦. Cryptographyproviders: 密钥加密法. 用对称加密方法对数据进行加密

Backbone.js系列教程十二:Backbone.Collection

Backbone.Collection概述 一个Backbone集合表示了一组模型逻辑有序的组合,并提供使用(组合,分类,过滤)这些模型组的方法与属性.在本文中为了说明这样的联系关系 (模型=表单中的一行有标签的联系数据),你可以把一个集合看做是整张表单,其中包含了很多行联系数据.下面我更新了表单中联系内容的细节,在上一章节开 头我们讲述过,于是整张表单能够被当作一个联系表单. 当然,一个Backbone.Collection不仅仅是一个像之前表单表现的那种标签.集合还可以捕捉模型以及集合上被触

Backbone.js系列教程九:Backbone实用程序库

利用Backbone.noConflict()存储和创建一个特殊的(就是自定义命名空间)引用到Backbone 当Backbone被浏览器解析时,Backbone做的第一件事就是存储一个引用到包含在全局作用域(也就是window.Backbone)中 的Backbone的值.这是因为Backbone重写或占据了这个命名空间,希望给开发者机会去存储在Backbone被解析之前使用的初值.这就是 Backbone.noConflict()起作用的时候了.调用Backbone.noConflict()

Backbone.js系列教程四:Backbone全面介绍

Backbone的原理 Backbone的初衷在于单页面应用程序中添加架构,尤其是在创造DocumentCloud应 用程序的过程中,以避免重复性的DOM交叉以及DOM中用于保持UI同步的数据发生混乱.Backbone通过一套构造函数来完成这个步骤,于是就形成了 模型.集合与视图对象,目的在于组织应用程序的数据.逻辑和显示.一旦这些对象被具现化,它们彼此之间就存在特殊的关系,共同保证了应用程序的模块化.松 耦合性(利用event系统沟通).可扩展性. Backbone提供应用程序架构,还能帮助构