初探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'); // 我被修改了
複製代碼