BackboneJs入门学习[03]—Model实践(1)

⭐️ 本文首发自 前端修罗场(点击即可加入)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见！

唉，最近公司在研发分布式高性能的云计算平台，其中涉及到了 AI 方面的处理。所以我也在自学 Python，发现没啥门槛😂。不过在 AI 方面的知识却是需要花功夫花时间学习的。在学习的过程中我发现了一个不错的学习教程，推荐给大伙😋，我个人觉得这个教程讲解的通俗易懂，帮我省去了自己苦苦专研的时间，能够得到快速的进步。下一阶段，我也会在这里和大家分享我的学习笔记。

BackboneJs入门学习之模块—Model实践(1)

上一篇中，我们简单了解了Backbone中Model这个模块。这一篇中，将具体介绍Model中的一些操作。

---

用一张图来回顾backbone中各个模块的关联：

Ok，切入本篇正题。

1. Model中对象属性的赋值方法

在Model中对属性的赋值可以使用两种方法：

1.方式一： 使用直接定义的方式赋值——设置默认值（defaults）

示例：

var Man=Backbone.Model.extend({
    initialize:function(){
       alert('Hello world.');
},
   //设置默认值
   defaults:{
     name:'张三',
     age:'38'
  }
});
//实例化
var man=new Man;
alert(man.get('name'));//使用get获取属性值

1.方式二：赋值时定义——set()
示例：

var Man=Backbone.Model.extend({
      initialize：function(){
              alert('Hello world');
  }
});
var man=new Man;
//使用set方法对man添加属性和属性值，这类似{key:value}的方式
man.set({name:'张三',age:'10'});
alert(man.get('name'));

怎么样？是不是很轻松！

2. 对象的方法

---

既然对象有属性，那就得要有方法了。

其实，在所有的定义或是赋值中，都是通过字典的方式来完成的，如extend
Backbone中德Model,以及定义方法和定义属性。所以，对方法的定义很类似。
示例：

  var Man=new Backbone.Model.extend({
      initialize:function(){
             alert('Hello world');

},
 defaults:{
    name:'张三',
    age:'10'
},
//定义方法
aboutMe:function(){
   return '我叫'+this.get('name')+',今年'+this.get('age')+'岁';
}
});
var man=new Man;
alert(man.aboutMe());//调用方法

3.监听对象中属性的变化——change

以上介绍了对象的属性和方法，那么当属性变化时该如何做出相应呢？Backbone中使用change事件进行监听

change事件:当属性发生变化时，就会被触发；

示例：

var Man=Backbone.model.extend({
      initialize:function(){
      alert('Hello world');
 //初始化时绑定监听
 this.bind('change:name',function(){
   var name=this.get("name");
   alert("你改变了name属性，值为:"+name);

});
},
defaults:{
     name:'张三'，
     age:'38'
},
aboutMe:function(){
  return '我叫'+this.get('name')+'今年'+this.get('age')+'岁';
}
});
var man=new Man;
man.set({name:'李四'});//将张三改为李四，于是触发change事件，弹出提示信息

这就相当于js中的onchange()事件。

---

每篇一语

当你发现你喜欢做一件事情时，就应该持续的做下去！

❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步，不走弯路，不吃亏~