什么是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 = new Backbone.Model();
const models = new Backbone.Collection();
const view = new Backbone.View();

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

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

const newModel = Backbone.Model.extend({
    a: () => console.log('a'), // 实例方法
}, {
    b: () => console.log('b'), // 静态方法
});

const model = new newModel();
model.a(); // a
M.b(); // b

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

const newMadel2 = Backbone.Model.extend({
    defaults: {
        name: 'wyk',
    },
});
const model2 = new newModel2();
console.log(model2.get('name')); // wyk

如何自定义事件

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

例子:

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