什么是backbone

• 一个实现了web前端MVC模式的JS库

什么是MVC模式

• 模式: 一种解决问题的通用方法
  • 设计模式
  • 框架模式
• M(model) V(view) C(controller)
• MVC 模式思想: 就是把模型与视图分离, 通过控制器来连接他们
• 服务端MVC模式非常容易实现

web前端MVC模式

• web页面本身就是一个大的view, 不容易做到分离操作
• backbone适合复杂的大型项目的开发, backbone官网

backbone 中的模块

• Event: 事件驱动方法
• Model: 数据模型
• Collection: 模型集合器
• Router: 路由器(hash)
• History: 开启历史管理
• Sync: 同步服务器方式
• View: 视图(含事件行为和渲染页面)

backbone 所依赖的库

• Backbone唯一重度依赖的是Underscore.js
• 可能会用到jQuery

在backbone中创建对象

const model &＃61; new Backbone.Model();
const models &＃61; new Backbone.Collection();
const view &＃61; new Backbone.View();


如何扩展model相关方法或属性

通过原型上extend扩展实例或静态方法

const newModel &＃61; Backbone.Model.extend({a: () &＃61;> console.log(&＃39;a&＃39;), // 实例方法
}, {b: () &＃61;> console.log(&＃39;b&＃39;), // 静态方法
});const model &＃61; new newModel();
model.a(); // a
M.b(); // b


通过原型上extend扩展默认属性

const newMadel2 &＃61; Backbone.Model.extend({defaults: {name: &＃39;wyk&＃39;,},
});
const model2 &＃61; new newModel2();
console.log(model2.get(&＃39;name&＃39;)); // wyk


如何自定义事件

在开发中, 需要修改某些特定事件, backbone中提供了一下事件修改hook

例子:

const newMadel3 &＃61; Backbone.Model.extend({defaults: {name: &＃39;wyk&＃39;,},initialize: () &＃61;> { // 初始化钩子函数this.on(&＃39;change&＃39;, () &＃61;> console.log(&＃39;我被修改了&＃39;));}
});
const model3 &＃61; new newModel3();
model3.set(&＃39;name&＃39;, &＃39;123&＃39;); // 我被修改了