想要学习requireJS,backbone.js，大神有没有好的资料推荐
最近在搞前端，用到backbone,才工作没多久，感觉学起来挺累的，大家有没有好的学习资料推荐呢，想要快点成长起来。
百度文科资料一打把。
关于伯乐小组
这里有好的话题，有启发的回复和值得信任的圈子。
新浪微博：
推荐微信号
（加好友请注明来意）
- 好的话题、有启发的回复、值得信赖的圈子
- 分享和发现有价值的内容与观点
- 为IT单身男女服务的征婚传播平台
- 优秀的工具资源导航
- 翻译传播优秀的外文文章
- 国内外的精选博客文章
- UI,网页，交互和用户体验
- 专注iOS技术分享
- 专注Android技术分享
- JavaScript, HTML5, CSS
- 专注Java技术分享
- 专注Python技术分享
& 2017 伯乐在线热爱前端开发，专注于前端
&&&& 入职第三天，新公司项目用到backbone+underscore+require等框架，前两天把项目的开发环境都配置好啦，项目也能跑起来，现在准备好好学习公司自己的框架以及用到的框架，有点想吐槽，开发工具必须得用VS10+VS13还得配合起来使用，一脸懵逼，比起我用的sublime差好远。而且装vs10和vs13，下载的时候，我都想吐啦，整整就搞了2天，还碰到一些问题，不过在同事帮助下都解决了，项目也能正常跑起来。现在好好学习下backbone的用法。嘎嘎嘎，上古的框架，不知道为什么还在用。（萌萌哒）
&&& backbone中文学习文档：
什么是BACKBONE？
& & 即一个实现了WEB前端的MVC模式的JS库，像JQUERY，angularjs等。
什么是MVC模式？
& & 模式：一种解决问题的通用方法
& & & &--设计模式：工厂模式，适配器模式，观察者模式等
& & & &--框架模式：MVC ，MVP,MVVM等
& & 思想：模型和试图分离，通过控制器来连接他们。关于WEB前端MVC模式。web页面本身就是一个大的VIEW，不容易做到分离操作。其次BACKBONE适合复杂的大型开发。
backbone模块组成
& & events : 事件驱动方法
& & model ：数据模型
& & collection： 模型集合器
& & router ：路由器（hash）
& & history：开启历史管理
& & SYNC ： 同步服务器方式
& & view ： 视图（含事件行为和渲染页面）下面，我们通过一张图，了解一下他们之间的关系。
& & &collection是model数据的集合。指对多条数据的操作，view是渲染页面的展示。router通过hash指，将对应的数据呈现在不同的view中，当然router必须指定历史管理，历史管理主要是检测hash的变化。模型数据的修改通过ajax的方式，传输到服务器中，进行同步服务器sync。
&backbone的使用
&1：基于jquery(针对试图的实现具体的效果，操作dom)，服务器环境，面向对象
&2：基于underscore.js库--作用是：提供了80多种方法，包括数组，对象，事件中的方法，有利于对backbone中的数据模型和集合的操作。
下面来看一个单个模型实际列子，可自行贴代码测试：
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&title&测试backbone&/title&
&!-- 按照先后顺序，否则会报错 --&
src = "jquery-3.1.0.min.js"&&/script&
src = "underscore-min.js"&&/script&
src = "backbone-min.js"&&/script&
&script type="text/javascript"&
model = new
Backbone.Model(); //创建一个backbone的模型实列
model.set('name' , 'jt');
console.log( model . get('name'));
//使用set和get方法来获取属性值
控制台打印出来的为：
下面看下将多个模型数据连接起来的列子，这里不再整个贴代码，看js即可：
Backbone.Model({'name':'jt'}); //直接赋值进行数据初始化
Backbone.Model({'name':'lkm'});
//创建一个数据模型集合
Backbone.Collection();
//通过add方法将单个模型添加到模型集合中
models.add(model_1);
models.add(model_2);
console.log(JSON.stringify(models));//JSON解析，将数据集合打印出来
控制台打印出来的效果为：
关于模型的扩展
其实相当于类里面的继承，子类可以使用其继承的方法和属性，在BACKBONE里面，新创建的实列可以使用其模型的方法。看下实列代码：
//模型的构造函数的扩展,相当于继承，则声称的实列可以使用其父类的方法
Backbone.Model.extend({
//第一个参数写实列方法,第二个参数写静态方法
aaa : function(){
//实列方法
console.log('jt');
bbb : function(){
//静态方法
console.log('lkm');
model.aaa(); //实列方法，直接使用实列来进行调用
M.bbb(); //静态方法是挂载在构造函数下面的，所以需要使用构造函数来直接调用
控制台打印结果如下：
再来看下属性的列子，可自行贴代码进行测试：
Backbone.Model.extend({
defaults: {
name : 'jt'
model = new
console.log(model.get('name'));
这里defaults相当于是默认的数据值，当进行创建实列时，进行GET方法调用时，直接使用的是默认的数据值。
关于在BACKBONE中对象如何实现继承，我们直接看下代码：
Backbone.Model.extend({
aaa: function(){
console.log('婷风');
M.extend(); //继承父类的模型
model = new
//声称一个实列的对象
model.aaa();
控制台打印结果为：
关于自定义事件
BACKBONE有很多事件，比如on事件，这里了举个栗子。具体的可看官网给的列子。
object.on(event, callback, [context])
在 object 上绑定一个callback回调函数。 只要event触发，该回调函数就会调用。
M = Backbone.Model.extend({
defaults : {
name : '婷风'
initialize : function(){
this.on('change',function(){
console.log(123);
model = new M;
model.set('name' , 'lkm');
这里给初始的default改变了其name属性，所以会触发change事件，从而发生相对应的行为。
打印结果如下：
上面那个是不管什么属性发生改变都会触发该事件，下面来看下特定的事件触发。
M = Backbone.Model.extend({
defaults : {
name : '婷风'
initialize : function(){
this.on('change : name',function(){
//这里指定了只当name属性发生改变时才会触发该事件
console.log(123);
model = new M;
model.set('name' , 'lkm');
下面来看下回调函数里面带参数的，看下代码
M = Backbone.Model.extend({
defaults : {
name : '婷风'
initialize : function(){
this.on('change : name',function(model){
console.log(model);
model = new M;
model.set('name' , 'lkm');
我们看下打印台打印出来的东西：
打印出来的都是model里面的一些属性。可自行贴码测试。
如何将模型和试图联系起来？
当然，肯定是MODEL和view想结合，举个列子看看。
$(function(){
M = Backbone.Model.extend({
defaults : {
name : '婷风'
//创建一个试图，listenTo比on多一个参数，改写了this指向
V = Backbone.View.extend({
initialize : function (){
this.listenTo(this.model , ' change' , this.show); //操作的元素 |数据发生改变的时候，发生show事件
show : function (model){
$('body').append('&div&' + model.get('name') + '&/div&');
V({model:m});
m.set('name' , 'jt' );
打印出来的结果如下：该DIV渲染到body中
&关于数据与服务器
Backbone.sync 是 Backbone 每次向服务器读取或保存模型时都要调用执行的函数。 默认情况下，它使用 jQuery.ajax 方法发送 RESTful json 请求，并且返回一个 jqxhr。 如果想采用不同的持久化方案，比如 WebSockets, XML, 或 Local Storage，我们可以重载该函数。
Backbone.sync 的语法为 sync(method, model, [options])。
默认 sync 映射 REST 风格的 CRUD 类似下面这样：
create & POST & /collection
read & GET & /collection[/id]
update & PUT & /collection/id
patch & PATCH & /collection/id
delete & DELETE & /collection/id
来看下列子：
Backbone.sync = function(method , model){
//AJAX请求
cnsole.log(method + ":" + JSON.stringify(method));
Backbone.Model.extend({
defaults : {
name : '婷风'
url : '/user'
//后台的地址
m.save(); //将数据保存到服务器上
m.save({name : 'jt'});//更新操作
我们看下控制台效果：
再来看下如何更新数据库里面的数据：
Backbone.sync = function(method , model){
//AJAX请求
console.log(method + ":" + JSON.stringify(method));
var C = Backbone.Collection.extend({ //集合绑定事件
initialize : function(){
this.on('reset', function(){
//当服务器数据获取成功，调用该事件
console.log('jt');
url : '/users'
models = new C;
models.fetch();//从服务器上进行数据的更新
看下控制台打印效果：
其实原理和我们平常请求数据的增删改查是一样的，后端给API，前端根据字段发送AJAX请求，获取数据等。
先写到这么多，下篇关于路由，事件委托，前端模板，继续学习中.如有不对的地方，请大家给我指正哈！
作者：婷风
&如果您觉得阅读本文对您有帮助，请点一下&推荐&按钮，您的&推荐&将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意&
转载文章之后必须在 文章页面明显位置给出作者和原文连接否则保留追究法律责任的权利。
阅读(...) 评论()Backbone.js系列教程十：Backbone.View_脚本技术_前端技术
您的位置： &
& 详细内容
在前几节中我们介绍了Backbone基础知识，如果你还没有阅读过，那么我建议你从第一节开始学习&&，尤其希望你能完全理解相 关知识，这对于学习今后的内容有很大帮助。在接下来的几个小节中，我们将深入Backbone，讨论Backbone
views、models和collections。相信大家在阅读前文之后，已经对Backbone.View、Backbone.Model、 Backbone.Collection构造函数与响应的对象实例并不陌生了。在正文开始前，我先介绍一下接下来几个章节的目录。
大家普遍认为学习Backbone通常从学习模型开始，我则认为当外围部分的知识点掌握以后，由视图开始学习是最快捷的方式。我强烈建议首先学习视 图，然后再尝试用数据填充视图（模型或模型集合），并利用事件将视图与数据保持同步。之后学习模型，最后是集合。在这几个部分结束之后，我们将运用所学知 识运行一个，我建议你现在就先浏览一下这个代码程序，对将要学习的知识点有个大体概念。
Backbone.View概述
大家习以为常的把一个视图看做独立于网页应用的区域，也就是说任何的UI逻辑块，当被分成几个小部分单独开发，都可以被当成一个视图。于是可以把Backbone.View当做JavaScript逻辑的容器（也就是对象）来呈现与更新这个独立的区域。请注意，一个Backbone.View并不存储数据，也不组织数据。它通常作为一个枢纽，引用模型或集合中的数据，并利用这些数据完成某些目的。
或者可以这样说，视图就是代码中汇集与控制下面这几个部分的内容：
数据（模型或集合中的模型）
引用包含HTML标记的DOM元素，形成UI
驱动UI的事件和函数
视图的作用就是结合这些部分（包括数据、模板、DOM、事件）来呈现UI区域，关于Backbone视图有以下几个特征：
Backbone视图包括构建网页应用程序中一个独立的逻辑区域所需要的所有内容部分。Backbone.View对象粘合数据、模板和事件，然后呈现与再次渲染数据发生变化时的逻辑关系。
视图不需要附加到一个模型或者集合（也就是数据）上。一个视图能够简单管理网页应用程序中一个独立的逻辑区域。
常用示例是一个视图引用一个模板（html），或许有些人干脆就把视图当成模板，但在Backbone中的视图并不是这样的。
子分类与创建一个Backbone.View
我们只需要实例化一个Backbone.View的实例，就能创建一个普通的视图：
var myView = new Backbone.View();
然而，在实例化一个实例之前，你还需要继承/子分类那个基本的Backbone.View，添加你自己域特定的属性。
在下面的代码中，我继承了Backbone.View构造函数，创建了一个子构造函数（子类），并让实例继承一些被定义的特殊作用域属性。
Backbone.View.extend({
//Note the uppercase M, it's a constructor&
myViewProperty :
myViewMethod:
}});&var myViewInstance =
//create instance&console.log(myViewInstance.myViewProperty);
//logs '... 'console.log(myViewInstance.myViewMethod());
//logs '...'
视图实例有一个内部cid属性（myViewInstance.cid），它是创建视图时被自动分配给视图的唯一标识符。这个值。
利用选项配置一个Backbone.View
当在继承或实例化一个视图时，你可以传递以下的特殊属性，它们由Backbone劫持和使用：
//继承一个view&var
Backbone.View.extend({&model:
function(){return
{}}collection:
function(){return
className:
function(){return
function(){return
attributes:
{'attribute':'value','attribute':'value'}&});&//实例化一个view&var myView =
Backbone.View({&model:
function(){return
{}}collection:
function(){return
className:
function(){return
function(){return
attributes:
{'attribute':'value','attribute':'value'}&});
在实例化过程中，当以上特殊的视图选项作为选项被传递时，它们就成为视图实例的属性以及options属性的属性。下面的代码中，我展示了这两个过程。
var myView =
Backbone.View({
//options...
function(){return
collection:
function(){return
className:
function(){return
function(){return
attributes:
{'attribute':'value','attribute':'value'}});//实例上的特殊选项console.log(Object.keys(myView));//special & non-special options stored on options property (e.g. foo)console.log(Object.keys(myView.options));
请注意，non-special选项(也就是foo)只在options属性中体现。
Backbone.View方法、属性和事件
Backbone视图实例包含以下：
setElement()
attributes
delegateEvents()
undelegateEvents()
&在本小节中我们将检查上述所有的方法及属性。此外，视图还可以利用以下嵌入事件：
事件类型：'all'
传递给回调函数的参数：事件名
描述：这类特殊的事件响应所有被触发的事件（不仅仅是嵌入事件），并将事件名作为第一个传递参数
Backbone视图实例化之后运行initialize()函数
&所有视图实例在被实例化以后都将调用一个内部初始化函数，这个初始化函数在继承Backbone.View的过程中被定义。下面的代码中，我创建了一个视图实例，并运行一个初始化函数。
Backbone.View.extend({
initialize:function(){
console.log('initialize is invoked');
console.log(this);
//note this function is scope to the instance created
}});&//创建实例并调用初始化函数var myViewInstance =
初始化函数是一个理想的地方用于放置创建视图实例之后的运行逻辑。
初始化函数中的this值局限于创建出的myViewInstance。
初始化函数通常包含的事件，可用于监听模型与集合中的变化。
渲染一个视图
视图对象伴随一个默认的以便能够被重写。这个渲染函数，是有意被用来存放创建视图时所需的逻辑。在下面代码中，我在实例化过程中，利用初始化函数调用实例渲染函数。
Backbone.View.extend({
initialize:function(){
this.render()
//just like calling myViewInstance.render();
render:function(){
console.log('rendering view');
console.log(this);
//note this function is scope to the instance created
}});&//创建视图,运行初始化，让初始化函数调用渲染函数var myViewInstance =
&正在发生的渲染不会太多，因为我们还没有把视图与一个元素节点连接到一起，不过单独的render函数已经包含了创建一个视图的逻辑。
在渲染函数里的return this可以链接到视图方法，所有的嵌入Backbone视图方法都遵循这个原则。
把一个元素节点与一个视图连接到一起
Backbone视图应当与一个绑定在一起，无论这个元素节点是在HTML UI或是在内存中。通常来说，当实例化一个视图时，将利用el或tagname属性把视图实例与一个元素节点连接到一起。下面代码中，我展示这两种情形。
运用CSS选择器连接一个视图与一个HTML页面中的元素节点：
Backbone.View.extend({
initialize:function(){
this.render();
render:function(){
console.log(this.el);
//logs &div id=&myView&&
}});&//在html文档中el是一个元素，拥有一个名为#myView的idvar myViewInstance =
MyView({el:'#myView'});
连接一个视图与内存中的一个元素节点：
Backbone.View.extend({
initialize:function(){
this.render()
//just like calling myViewInstance.render();
render:function(){
console.log(this.el);
//logs &div&
//this创建了一个div在内存中，也就是$('&div&')var myViewInstance =
MyView({tagName:'div'});
请注意，连接一个视图与一个内存中的元素节点时仍然需要定义一个el属性值，可以将el看作是一个节点。你可以设定它使用CSS选择器引用一个html页面节点，或者利用tagname属性创建一个内存中的元素节点。
el属性，当连接一个视图与浏览器DOM的一个元素时，要么接收一个CSS选择器字符串（'#myView'），要么接收一个jQuery对象本身（jQuery('myView')），包装加载到浏览器HTML文档中的一个节点元素。
设置内存中一个元素节点的元素属性
视图选项id、className以及attributes提供属性，添加属性值到连接着一个视图的元素节点上，与此同时。下面我使用了这三种特殊属性，用来设置连接着myViewInstance的内存节点的属性值。
Backbone.View.extend({
tagname:'div',
className:
attributes:{'data-foo':'foo','data-bar':'bar'},
initialize:function(){
this.render()
//just like calling myViewInstance.render();
render:function(){
//logs &div id=&myView& class=&views& data-foo=&foo& data-bar=&bar&&
console.log(this.el);
}});&var myViewInstance =
//look in render()
特殊属性id、className以及attributes不能用在已经存在与HTML DOM中的节点上。
使用jQuery包装el的简称（即this.$el）
无论连接着一个视图（el）的元素在内存中，或者在html页面中，Backbone都将会在元素外围设置一个jQuery包装器，你就不必再进行这个步骤了。这是在连接着视图的元素外围创建一个你自己的包装器（jQuery(this.el);）的简要表达形式。下面的代码中，我验证了this.$el代表了用jQuery方法包装el。
Backbone.View.extend({
initialize:function(){
this.render()
render:function(){
//this.$el是jQuery(this.el);的简称
console.log(this.$el.attr('id'));
//logs myView,
//如果上面不使用简称的话，则表达为$(this.el).attr('id')
}});&var myViewInstance =
MyView({el:'#myView'});
使用jQuery局域包装el的简称（即this.$()）
Backbone提供一个简单方式，用以。这看上去很复杂，但是使用this.$()是一个简单的表述方式，当在连接着视图的元素节点上执行jQuery任务时，能够不用每次都写$(this.el).find()或者this.$el.find()。在下面的代码中，我利用this.$()选择包含在myViewInstance中的&span&。
Backbone.View.extend({
initialize:function(){
this.render()
render:function(){
//this.$()是jQuery(this.el).find('span');的简称
//通过$('span')能够找到所有的span元素
//使用this.$('span')只能找到/筛选出el节点中的span
this.$('span').css('font-weight','bold');
}});&var myViewInstance =
MyView({el:'#myView'});
请注意，使用this.$()的时候，我们约束了jQuery只能选择el的子元素节点。这就是为什么在el中只有&span&用粗体CSS样式表现了。(&div id=&myView&&&/div&)。
利用events属性为一个Backbone视图设置委托事件
Backbone为一个视图设置el节点的事件，从继承Backbone.View或实例化一个视图时设定的events对象。在下面的代码中，我在继承Backbone.View时提供了一个事件对象，添加了一个click和mouseover事件到视图中的&button&元素。
Backbone.View.extend({
'click button':
//click is event, button is selector
'mouseover button':
'aboutToSayHi'
console.log('hi');
aboutToSayHi:
console.log('over the button, almost about to click');
}});&var myViewInstance =
MyView({el:
'#myView'});
定义事件的格式以及事件连接的视图内部节点（也就是el内部）格式如下：
// event: {'event selector' : 'callback function'}&//基于之前的调试结果:&'click button':
'sayHi'&//注意空格把事件与选择器分隔开了
当利用方法进行事件委托时，jQuery通常把事件和选择器作为同样的参数值。
如果把选择器省略掉，那么Backbone就默认事件应当被直接绑定到el节点。这种情况下简单意味着jQuery.on()没有被传递一个用于事件委托的选择器。
附件到一个事件的回调函数能够作为一个函数值，也能够作为一个视图实例方法名称，如同字符串（即sayHi）。
在一个对象中，被存储在视图实例上的事件，叫做events。
利用setElement()把元素节点与一个视图关联起来
利用视图可用的setElement()方法，我们能改变关联视图的节点元素。在下面代码中，myViewInstance初始相关页面中的&div&，有一个id &myView&。利用setElement()方法，可以把myViewInstance视图关联的元素节点&div&的值更改为&anotherMyView&。
Backbone.View.extend({
{'click button':
{console.log('hi');},
this.$el.html('&button&sayHi&/button&');
initialize:function(){this.render();}});&var myViewInstance =
MyView({el:
'#myView'});//change el for myViewInstance, and re-render, note event worksmyViewInstance.setElement('#anotherMyView').render();
在视图上运用setElement()方法时，你应当记住Backbone将删除初始元素节点上的所有事件，还将把视图设置在新的节点上（调用delegateEvents()）。这就是为什么在上面的代码示例中，第二个&Say Hi!&按钮不再响应点击事件但仍然起作用。
利用remove()从DOM上删除一个视图
Backbone.View的方法能够调用与视图关联的元素节点jQuery remove()方法。不使用简单的调用jQuery方法（也就是this.$el.remove();），而是采用这种方法的原因是同时能够调用视图实例的stopListening()事件，删除视图的所有监听者。
在下面代码中，我设置渲染后的视图在被激活后进行自我删除。激活&invoke remove()&按钮将会引发按钮本身被删除。&
Backbone.View.extend({
{'click button':
'callRemove'},
callRemove:
this.remove();
//从DOM上删除视图,清除DOM上所有事件
console.log($('#myView').length);
//verify its gone, logs 0
this.$el.html('&button&invoke remove()&/button&');
initialize:function(){this.render();}});&var myViewInstance =
MyView({el:
'#myView'});
请记住，jQuery remove()事件将删除调用的元素，也会删除其内部所有内容。
Backbone依赖jQuery的remove()方法，该方法能够在删除任何元素之前，正确的删除掉所有事件。
利用delegateEvents()附加委托事件
实例化一个视图时，Backbone会默认的在内部调用delegetEvents()，为需要设置的所有事件引用events选项对象。如果，无论什么原因，附加到视图上的事件都将被删除，因为delegateEvents()方法就是被用来重新附加/刷新事件到视图上的。
为了演示delegateEvents()方法，在下面的代码中，我在继承或实例化视图的时候，没有设置事件进行渲染。在视图被创建以后，我将更新视图events属性，当&button&被激活时sayHi回调函数将被调用。然后我使用delegateEvents()方法附加任意事件对象中的事件到我的视图。
Backbone.View.extend({
{console.log('hi');},
this.$el.html('&button&sayHi&/button&');
$('body').append(this.el);
initialize:function(){this.render();}});&var myViewInstance =
//create viewmyViewInstance.events =
{'click button':'sayHi'};
//set events object&//需要调用delegateEvents，因为我们在视图创建之后设置事件myViewInstance.delegateEvents();//现在事件应当工作，能调用undelegatedEvents进行删除
调用delegetEvents()将删除所有初始委托事件回调函数，然后再添加回去。从某种程度来讲，就是刷新的过程。
在视图实例上调用undelegateEvents()，以便删除视图中的委托事件。
使用视图模板
Backbone不强制使用特殊的模板引擎或模式来渲染一个视图。然而，提供了一个模板解决方案，用于呈现复杂的源于JSON数据的大量HTML。我将利用一个小型示例为大家展示如何使用underscore.js（lodash.underscore.js）中的模板。
'&%=firstName%& &%=lastName%& / &%=telephone%&';&var data =
{firstName:
'John',lastName:
'Doe',telephone:
'111-111-1111'};&var
Backbone.View.extend({
el:'#myView',
initialize:function(){this.render()},
render:function(){
var compiledTemplate = _.template(template, data);
//编译模板
//在Backbone &el&中加载编译的HTML
this.$el.html(compiledTemplate);
}});&var myViewInstance =
此处的模板用法并不表示模板的通用性，事实上，模板在构建任何的Backbone应用程序中都很常使用到。在渲染一个视图过程中，应当充分考虑到模板引擎的情况，否则视图就会被DOM操作逻辑塞满。
( 13:58:12)
( 13:58:10)
( 13:58:09)
( 13:58:07)
( 13:58:04)
( 13:58:03)
( 13:58:01)
( 13:57:59)
相关排行总榜