Backbone.js学习笔记，你值得拥有

浏览数：23 / 时间：2015年06月09日

What is Backbone.js?

backbone.js提供了一套web开发的框架，通过Models进行key-value绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互.它是基于jquery和underscore的一个js框架。
主要组成：
1.model：创建数据，进行数据验证，销毁或者保存到服务器上
2.collection：可以增加元素，删除元素，获取长度，排序，比较等一系列工具方法，说白了就是一个保存 models的集合类
3.view：绑定html模板，绑定界面元素的事件，初始的渲染，模型值改变后的重新渲染和界面元素的销毁等
优势：
1. 将数据和界面很好的分离开来。
2. 将事件的绑定很好的剥离出来，便于管理和迭代。
3. 使得Javascript程序的模块化更加清晰、明了。
应用场景：
最适合的应用场景是单页面应用，并且页面上有大量数据模型，模型之间需要进行复杂的信息沟通。

简单的一个Hello World实例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4         <title>Hello World</title>
 5 </head>
 6 <body>
 7 <button id="btncheck">测试一下</button>
 8 <ul id="world-list">
 9 </ul>
10 </body>
11 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
12 <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
13 <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
14     
15 <script>
16 (function ($) {
17         var World = Backbone.Model.extend({
18                 //创建一个World的对象，拥有name属性
19                 name: null
20         });
21 
22         var Worlds = Backbone.Collection.extend({
23                 //World对象的集合
24                 model:World
25         });
26                 
27         var objWorlds = new Worlds();//初始化一个collection对象
28         objWorlds.bind("add", function(World) {//注册监听事件
29                     $("#world-list").append("<li>用户 <b>" + World.get(‘name‘) + "</b> 对你说：hello world！</li>"); 
30                 });
31         
32         var WorldView = Backbone.View.extend({
33                 el: $("body"),
34                 events: {
35                         "click #btncheck":  "checkIn",   //事件绑定，绑定Dom中id为check的元素
36                 },
37                 checkIn: function () {
38                         var world_name = prompt("你叫什名字?");
39                         if(world_name == "") world_name = ‘None‘;
40                         var world = new World({ name: world_name });
41                         objWorlds.add(world);
42                 }
43         });
44         //实例化AppView
45         var objWorldView = new WorldView();
46 })(jQuery);
47 </script>
48 </html>