初探backbone

什么是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'); // 我被修改了
复制代码