backbonejs学习之路一

由于项目的关系，需要用到基于MVC的JavaScript Web富应用开发，backbonejs是移动端开发的一个不错选择。我将记录我的backbonejs的学习之路。

关于backbonejs是用来干嘛的，我就不再做太多的赘述了。

我先学的是backbonejs的Model层。Backbone models 包含为实现应用交互的数据同时也包含了业务逻辑。比如说我们可以用一个model去代表一张照片的概念，包含了一张照片所拥有的各种属性。不多说，直接上代码吧.

 1 <script type="text/javascript">

 2         $(function(){
 3             
 4             var Photo = Backbone.Model.extend({
 5                 defaults: {
 6                     src: 'placeholder.jpg',
 7                     title: 'an image placeholder',
 8                     coordinates: [0,0]
 9                 },
10                 //如果attribs.src == undefined，验证不通过
11                 validate: function(attribs){
12                     //underfined与null的区别，null只的是有传参数，参数为"" 而undefined指连参数都没有传
13                     if(attribs.src == undefined){
14                         return "Remember to set a source for your image!";
15                     }
16                 },
17                 initialize: function(){
18                     //在Photo对象的src属性上的change事件上绑定方法
19                     this.on("change:src", function(){
20                         var src = this.get("src");
21                         console.log('Image source updated to ' + src);
22                     });
23                     this.on("error", function(model, error){
24                         console.log(error);
25                     });
26                 },
27                 changeSrc: function( source ){
28                     //getter setter方法,其他参数没有发生改变还是defaults的值
29                     this.set({ src: source });
30                 }
31                 });//实例化对象
32                 var somePhoto = new Photo({ src: "test.jpg", title:"testing"});
33                 somePhoto.changeSrc("magic.jpg"); // which triggers "change:src" and logs an update message to the console.
34         });

35     </script>

其实刚刚开始看这些代码的时候我都不太习惯，以前都是用jQuery写的js代码，写起来自然没有那么复杂，个人感觉对js面向对象的概念原理也不需要太多就可以上路了。写几个不错的交互就感觉o啦了。backbonejs对js的要求比较高，里面用到很多的钩子函数(callback回调函数)。

Backbone model提供很多的内置方法比如initialize()顾名思义在创建一个model对象时调用的构造函数,validate()判断model的每个属性值赋值是否合法，当然了判定规则还是由你定义的。

好了，个人感觉model层还是蛮简单的。。。。

对了，要让这段代码执行起来，要应用backbonejs、jQuery的类库，同时backbonejs重度依赖underscorejs

 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
2     <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

3     <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>     

ps:博客园的code编辑器真心不给力