Backbone学习总结

Backbone中文学习文档：http://www.css88.com/doc/backbone/

来到公司已经有一段时间了，到现在深深的感觉到自己的能力弱的像只周黑鸭，又干涩又黝黑，充满了麻（手麻脑袋也麻）和辣（欲哭无泪），做全栈前后端都得好好学，这不，一个开源项目中出现Backbone，??!??...这是哪个朝代的语言？左打听右询问，才知道是一个上古框架，虽然古老但是很实用也必须要用到（我估计肯定有先东西替代它了，应该会更好用更人性化），懂前端人自然明白。所以各种掰翻找查，在一个做前端姑娘的博客里发现这篇让我看起来很舒服的Backbone，博客我先摘过来，放自己家里习惯点，我在里面也适当加一些自己理解的小东西，算是向这美女姑娘致敬，谢谢，下面会标明出处（不要追究我的法律责任，我不懂法，但是守法），不会白拿的，伸手党确实可恶！

so,什么way，开始学吧。。。。。。

什么是BACKBONE？

即一个实现了WEB前端的MVC模式的JS库，像JQUERY，angularjs等。

什么是MVC模式？

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

--设计模式：工厂模式，适配器模式，观察者模式等

--框架模式：MVC ，MVP,MVVM等

思想：模型和试图分离，通过控制器来连接他们。关于WEB前端MVC模式。web页面本身就是一个大的VIEW，不容易做到分离操作。其次BACKBONE适合复杂的大型开发。

图片解析MVC、MVP、MVVM：

backbone模块组成

events : 事件驱动方法

model ：数据模型

collection：模型集合器

router ：路由器（hash）

history：开启历史管理

SYNC ：同步服务器方式

view ：视图（含事件行为和渲染页面）下面，我们通过一张图，了解一下他们之间的关系。

Backbone学习总结

collection是model数据的集合。指对多条数据的操作，view是渲染页面的展示。router通过hash指，将对应的数据呈现在不同的view中，当然router必须指定历史管理，历史管理主要是检测hash的变化。模型数据的修改通过ajax的方式，传输到服务器中，进行同步服务器sync。

backbone的使用

1：基于jquery(针对试图的实现具体的效果，操作dom)，服务器环境，面向对象

2：基于underscore.js库--作用是：提供了80多种方法，包括数组，对象，事件中的方法，有利于对backbone中的数据模型和集合的操作。

下面来看一个单个模型实际列子，可自行贴代码测试：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4         <meta charset="utf-8">
 5         <title>测试backbone</title>
 6         <!-- 按照先后顺序，否则会报错 -->
 7         <script  src = "jquery-3.1.0.min.js"></script>
 8         <script  src = "underscore-min.js"></script>
 9         <script  src = "backbone-min.js"></script>
10         <script type="text/javascript">
11                      var  model = new  Backbone.Model(); //创建一个backbone的模型实列
12                      model.set('name' , 'jt');
13                      console.log( model . get('name'));  //使用set和get方法来获取属性值
14         </script>
15 </head>
16 <body> 
17 </body>
18 </html>

View Code