您的位置：首页 > Web前端 > JavaScript

【转】Backbone.js学习笔记（一）

2015-07-26 21:38 816 查看

文章转自：

http://segmentfault.com/a/1190000002386651

基本概念

前言

昨天开始学

Backbone.js

，写篇笔记记录一下吧，一直对

MVC

模式挺好奇的，也对

js

中

MVC

的开创鼻祖怀着敬畏之心，唉，不说了，好虚伪，以下是我的学习心得和笔记。

给大家看一下全球

js

库和框架的使用比例：

这是通过搜索引擎抓取script标签统计而来的数据，可信度相当高啊，另外，不要迷恋

Angular.js

，

Avalon.js

还是挺不错的。

什么是Backbone.js？

Backbone.js

是十大JS框架之首，

Backbone.js

是一个重量级

js

MVC

应用框架，也是

js MVC

框架的鼻祖。它通过

Models

数据模型进行键值绑定及

custom

事件处理，通过模型集合器

Collections

提供一套丰富的

API

用于枚举功能，通过视图

Views

来进行事件处理及与现有的

Application

通过

JSON

接口进行交互。

简而言之，

Backbone

是实现了web前端

MVC

模式的

js

库

什么是MVC？

MVC：后端服务器首先（过程1）通过浏览器获取页面地址，对网址进行解析，得到视图

View

给它的一个网址，然后通过控制器

controller

进行解析，然后去找对应的数据（过程2），找到数据后，再将数据

Model

返回给控制器（过程3），控制器

controller

再对数据进行加工，最后返回给视图（过程4），即更新视图

View

。这种结构在后端是非常清晰且易实现的

Backbone中MVC的机制

Backbone

将数据呈现为模型, 你可以创建模型、对模型进行验证和销毁，甚至将它保存到服务器。当UI的变化引起模型属性改变时，模型会触发"change"事件；所有显示模型数据的视图会接收到该事件的通知，继而视图重新渲染。你无需查找

DOM

来搜索指定

id

的元素去手动更新

HTML

。 — 当模型改变了，视图便会自动变化。———百度百科

模式：一种解决问题的通用方法

—设计模式：工厂模式、适配器模式和观察者模式
—框架模式：MVC、MVP、MVVM

控制器：通过控制器来连接视图与模型。

MVC模式的思想：

就是把模型与视图分离，通过控制器来连接他们
服务器端MVC模式非常容易实现

Model：模型即数据，模型是所有

js

应用程序的核心，包括交互数据及相关的大量逻辑：转换、验证、计算属性和访问控制。你可以用特定的方法扩展

Backbone.Model

View：即你在页面上所能看到的视图。每一个单一的数据模型对应一个视图

View

web页面本身就是一个很大的

view

，不太容易做到分离操作，

backbone.js

适合复杂的大型开发，并为我们解决了这些难题

backbone的模块

backbone

有如下几个模块：

Events：事件驱动模块
Model：数据模型
Collection：模型集合器
Router：路由器（对应hash值）
History：开启历史管理
Sync：同步服务器方式
View：视图（含事件行为和渲染页面 相关方法）

集合器

Collection

是对单独的数据模型进行统一控制

直接创建对象

Backbone

依赖于

Underscore.js

， DOM 处理依赖于

Backbone.View

和

jQuery

，因此，在引入

Backbone.js

之前，

Underscore.js

必须在它之前引入，而

jQuery

也最好一并引入，最后再引入

Backbone.js

<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src = "jquery-2.0.3.min.js"></script>
<script src = "underscore-min.js"></script>
<script src = "backbone.js"></script>

</head>
<body>
var model = new Backbone.Model();
var col = new Backbone.Collection();
var view = new Backbone.View();
</body>

new

后面是一个构造函数，而

Backbone

是作为构造函数的命名空间来使用的

Model模块

Backbone.Model.extend(properties, [classProperties])

Backbone

通过

extend

来扩展实例方法和静态方法：

<script type="text/javascript">
//extend接收的第一个参数是json格式的字符串，用来扩展实例方法
//第二个参数也是json格式的字符串，用来扩展静态方法
var M = Backbone.Model.extend({
abc : function(){   //实例方法
alert("hello backbone");
}
},{
def : function(){ //静态方法
alert("hi");
}
});

var model = new M;
model.abc();//实例方法要用实例对象来访问
M.def();//静态方法直接挂载到了构造函数上，可以通过构造函数来直接访问
</script>

静态方法

其实就是多了一个命名空间。以上是给构造函数添加实例方法和静态方法

var M = Backbone.Model.extend({})

通过

extend

来为模型的构造函数扩展方法，

就是扩展之后的构造函数

继承

<script type="text/javascript">
//继承
var Mod = backbone.Model.extend({
abc : function(){
alert(123);
}
});

var ChildMod = Mod.extend();

var model = new ChildMod;
model.abc();//子类继承了父类的方法
</script>

事件驱动模块

自定义事件：自定义事件比较适合多人合作开发，因为我们知道，函数名如果一样的话，那么后面的函数会覆盖前面的，而事件在绑定的情况下是不会被覆盖的。

<script type="text/javascript">
//自定义事件
var Mod = backbone.Model.extend({
defaults : {
name : 'trigkit4';
},
initialization : function(){  //初始化构造函数
this.on('change',function(){    //绑定change事件，当数据改变时执行此回调函数
alert(123);
});
}
});

var model = new Mod;
model.set('name' ,'backbone');//修改默认的name属性值为backbone，此时数据被改变，弹出123
</script>

事件绑定

除此之外，我们还可以自定义要绑定的被改变的数据类型：

object.on(event, callback, [context])

绑定一个回调函数到一个对象上，当事件触发时执行回调函数：

<script type="text/javascript">
//自定义事件
var Mod = backbone.Model.extend({
defaults : {
name : 'trigkit4',
age : 21;
},
initialization : function(){  //初始化构造函数
this.on('change:age',function(){    //绑定change事件，当数据改变时执行此回调函数
alert(123);
});
}
});

var model = new Mod;
model.set('name' ,'backbone');//修改默认的name属性值为backbone，此时数据被改变，弹出123
</script>

listenTo

<script type="text/javascript">
$(function(){
var Mod = Backbone.Model.extend({
defaults : {
name : 'trigkit4'
}
});
var V = Backbone.View.extend({
initialize : function(){
this.listenTo(this.model,'change',this.show);//listenTo比on多了个参数
},
show : function(model){
$('body').append('<div>' + model.get('name') + '</div>');
}
});

var m = new Mod;
var v = new V({model:m});//model指定创建的模型对象m,即前面的路由，哈希值的对应
m.set('name','hello');//对模型进行就改时，触发事件，页面也就更新了
});
</script>

模型集合器

Backbone.Collection

集合是模型的有序组合，我们可以在集合上绑定 "

change

" 事件，从而当集合中的模型发生变化时获得通知，集合也可以监听 "

add

" 和 “

remove

" 事件，从服务器更新，并能使用

Underscore.js

提供的方法

路由与历史管理

<script type="text/javascript">
var Workspace = Backbone.Router.extend({
routes: {
"help":                 "help",
"search/:query":            "search",
"search/:query/p:page":"        search"
},

help : function(){
alert(123);
},

search : function(query,page){
alert(345);
}
});

var w = new Workspace;

Backbone.history.start();//backbone通过hash值找到对应的回调函数
</script>

事件委托

<script type="text/javascript">
$(function(){
var V = Backbone.View.extend({
el : $('body'),
//对events进行集体操作
events : {
"click input" : "hello",
"mouseover li" : "world"
},
hello : function(){
alert(1234);
},
world : function(){
alert(123)
}
});
var view = new V;
});
</script>
<body>
<imput type = "button" value = "hwx" />
<ul>
<li>1234</li>
<li>1234</li>
<li>1234</li>
<li>1234</li>
<li>1234</li>
</ul>
</body>

事件委托 格式：事件 + 空格 + 由谁来触发：对应的回调函数

underscore.js是什么？

underscore.js

在不扩展任何

js

的原生对象的情况下提供很多实用的功能。它弥补了部分

jQuery

没有实现的功能，同时又是

Backbone.js

必不可少的部分。

underscore

也针对模型和集合，提供了数组，对象，事件的常用方法。

Underscore

提供了80多个函数,包括常用的:

map, filter, invoke

— 当然还有更多专业的辅助函数，如:函数绑定,

JavaScript

模板功能，创建快速索引，强类型相等测试，等等。

一张图让你看懂

javascript

各类型的关系

在

underscore.js

源码中，我们可以看到：

(function() {
var root = this;//创建root对象,在浏览器里指的是window对象，在服务器指的是global对象
var previousUnderscore = root._;//保存前面的值到变量底线（" _ "）中，
//这样做只是为了避免命名冲突

…
})

_.

这个符号代表

underscore

，就像$可以用来代表

jQuery

一样。例如：

_.find(list, predicate, [context])

几个常用属性：

list：待遍历的集合对象

literator：迭代器，即转换函数

memo：初始值

最后：
一个经典的

MVC

实例：
http://backbonejs.org/examples/todos/index.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航