(Backbone致力于缓解“复杂成堆的jQuery选择器与回调函数,疯狂的尝试保持HTML UI之间的数据同步” 这种现象,并且真正做到了这一点)
Backbone.js提供了一套web开发的框架,通过Models进行key-value绑定及Custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views进行事件处理和现有Application通过RESTful JSON接口进行交互。它是基于jquery和underscore的一个js框架。
整体上来说,backbone.js是一个web端javascript的mvc框架,算的上是重量级的框架。它能让你像写java代码写一些js代码,定义类,类属性以及方法。更重要的是它能够优雅的吧原本无逻辑的javascript代码进行组织,并且提供数据和逻辑的相互分离的方法,减少代码开发工程中的数据和逻辑混乱。
通过backbone,你可以把你的数据当做Models,通过Models你可以创建数据,进行数据验证,销毁或保存到服务器上。当界面上的操作引起model中属性的变化时,model会触发change的事件;那些用来显示model状态的views会接收到model触发change的消息,进而发出对应的响应,并且重新渲染新的数据到界面。在一个完整的backbone应用中,你并需要哪些胶水代码从DOM中通过特殊的id来获取节点,或者手工的更新HTML页面,因为在model发生变化时,views会喊简单的进行自我更新。(前端开发指定一套自己的规则)
backbone的应用范围:它既然是一个重量级的框架,那就不是随便什么地方都能用的,不然就会出现杀鸡用牛刀。如果单个网页有非常复杂的业务逻辑,那么用他很合适,它可以很容易的操作dom和组织js代码。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script src="underscore.js" type="text/javascript"></script>
<script src="backbone-min.js" type="text/javascript"></script>
</head>
<body>
<button id="check">报到</button>
<ul id="world-list">
</ul>
<script type="text/javascript">
(function ($) {
World = Backbone.Model.extend({//创建一个World的对象,拥有name属性
name: null
});
Worlds = Backbone.Collection.extend({//Word对象的集合
initialize: function (models, options) {
this.bind("add", options.view.addOneWorld);
}
});
AppView = Backbone.View.extend({
el: $("body"),
initialize: function () {
this.worlds = new Worlds(null, { view: this })
},
events: {
"click #check": "checkIn" //事件绑定,绑定Dom中id为check的元素
},
checkIn: function () {
var world_name = prompt("请问,您是哪里人?");
if (world_name == "")
world_name = "未知";
var world = new World({ name: world_name });
this.worlds.add(world);
},
addOneWorld: function (model) {
$("#world-list").append("<li>这里是来自<b>" + model.get("name") + "</b>星球的问候:hello world!</li>");
}
});
//实例化AppView
var appView = new AppView;
})(jQuery);
</script>
</body>
</html>
关于backbone,最基础的一个东西就是model,这个东西就像后端开发中的数据库映射那个model一样,也是数据对象的模型,并且应该和后端的model有相同的属性。
关于服务器的异步操作都是通过Backbone.sync这个方法来完成的,调用这个方法的时候会自动的传递一个参数过去,根据参数向服务器端发送对应的请求。比如你save,backbone会判断你的这个对象是不是新的,如果是新创建的则参数为Create,如果是已存在的对象只进行了改变,那么参数为Update,如果你调用fetch方法,那参数就是read