BackBone

charles_paul 發(fā)布于2019-08-19 18:37 / 2292人閱讀

摘要：弱化了使用依賴的工具庫等等創(chuàng)建模型構造函數(shù)默認值表示模型類的默認值，當模型實例化的時候，這些默認值就會被賦值上。

backbone

Backbone.js提供模型(models)、集合(collections)、視圖(views)的結構。

Models: 是引用程序的核心，也是表示數(shù)據(jù)，用于綁定鍵值數(shù)據(jù)和自定義事件

Collectoins：是對Model的一個容器，包含多個模型，并提供一些方法，來訪問這些模型，集合附有可枚舉函數(shù)的豐富API

View：可以在視圖中聲明時間，在視圖中處理集合或者模型，也可以地工藝方法啊，可以暴露出來一些借口，視圖可以聲明事件處理函數(shù)，并通過接口連接到應用程序。

Router：路由，看作簡化版的控制器。(Backbone弱化了Controller)

使用
依賴的工具庫
jquery.js,zepto.js 等
underscore.js/lodash.js 等

Model 創(chuàng)建模型

//構造函數(shù)：
var pink = new Backbone.Model({
    color: "pink"
});

//extend:
var Pink = Backbone.Model.extend({});

var p = new Pink({
    color: "pink"
});

默認值

defaults: 表示模型類的默認值，當模型實例化的時候，這些默認值就會被賦值上。

var WangCai = Backbone.Model.extend({
    
    //默認值
    defaults: {
        kg: 20,
        name: "wangcai",
        age: 2
    }
        
});

initalize

initialize: 在模型對象的實例化時，構造函數(shù)可以對模型再次更改

var WangCai = Backbone.Model.extend({

    //構造函數(shù)
    initialize: function () {
        
        if ( this.attributes.price ) {
            
            this.attributes.onSale = true;
            
        }
        
    }
    
});

獲取屬性

get，獲取模型實例化對象屬性的方法，直接在模型實例化對象上調用
參數(shù)：表示屬性值

var WangCai = Backbone.Model.extend({
    
    //默認值
    defaults: {
        kg: 20,
        name: "wangcai",
        age: 2
    },
    
    //構造函數(shù)
    initialize: function () {
        
        if ( this.attributes.price ) {
            
            this.attributes.onSale = true;
            
        }
        
    }
    
});

var ww = new WangCai({
    price: 1000
});

var price = ww.get("price");

console.log( price ); //1000

Json 轉化

toJSON：將模型對象的attributes屬性轉化為JSON對象，該方法直接在模型對象上調用
等同于JSON.parse(JSON.stringify(clothes))方法

var clothes = new Clothes({
    price: 158
})

var attributes = clothes.toJSON();

設置屬性

set()
設置模型實例化對象屬性方法，直接在實例化模型對象上調用

第一種傳參方式

參數(shù)1，屬性名稱

參數(shù)2，屬性值

第二種傳參方式
傳遞一個對象，這個對象映射到模型的attributes上的屬性對象

var ww = new WangCai({
    price: 1000
});

ww.set("color","pink");    
ww.set({
    say: function () {},
    zf: "dd"
});

Model事件

Backbone實例對象的繼承Backbone.Model，Backbone.Model繼承了事件的方法，所以就可以在構造函數(shù)中使用綁定事件的方法on，通過this訪問

on方法的使用：

第一個參數(shù)表示事件的名稱

第二個參數(shù)表示事件的回調函數(shù)
當調用set添加屬性時候會觸發(fā)change事件，但set傳遞{silent: true}參數(shù)時候，該事件就不能被觸發(fā)了

//構造函數(shù)
initialize: function () {
    
    //on事件可以使用命名空間
    this.on("change",function ( model ) {
        
        console.log(123);
        
    });
    
}

ww.set({
    say: function () {},
    zf: "dd"
},{silent: true });
//添加屬性不被事件捕獲， 通過 set的第二個參數(shù) {silent: true} 來設置

模型對象是否被修改

hasChanged() 當模型調用了set更改屬性的時候，該方法返回true，表示被修改過。

//  ww 實例對象 未被修改
console.log( ww.hasChanged() );// false 
//            ww.set("color","pink",{silent: true });    
ww.set({
    say: function () {},
    zf: "dd"
},{silent: true });
//實例對象  已經(jīng)被修改，添加 其它屬性和方法 
console.log( ww.hasChanged() );// true

刪除屬性

unset() 刪除模型實例化對象上屬性，直接在實例化對象上調用
參數(shù)1：刪除的屬性名
參數(shù)2：一些配置

ww.unset("zf");

validate：檢驗刪除是否合理，但是刪除方法unset時候，必須傳遞{validate： true}才能校驗
validate 驗證刪除是否合理，在unset第二個參數(shù)傳遞。

參數(shù)，是該實例化對象的attributes對象
返回：
true 刪除失敗
false 刪除成功

ww.validate = function (attr) {
    if (!attr.width) {
        return true;
        }
    return false;
}
// 驗證刪除操作
var result = a.unset("width", {validate: true})

View

backbone 視圖層

創(chuàng)建

//構造函數(shù)
var App = new Backbone.View({
    tanName: "h1",
    id: "app",
    className: "app"
});

// extend
var App = Backbone.View.extend({
    
    initialize: function () {
        
        this.$el.html("￥79.00").css({
            "background": "tan"
        })
        
    }
    
});

view實例化對象

cid：該視圖實例化id
el：該元素
$el: jquery的對象

視圖元素

el：表示視圖的元素

實例化創(chuàng)建添加屬性

var divView = new App({
    el: $("#app")
});

initialze

initialze 表示視圖類的構造函數(shù)

var App = Backbone.View.extend({
    
    initialize: function () {
        
        this.$el.html("￥79.00").css({
            "background": "tan"
        })
        
    }
    
});

更改元素

setElement 將新元素替換原有的元素
divView.setElement();

參數(shù)可以是字符串，那么就將該字符串渲染成元素

參數(shù)也可以是dom元素，那么就直接該元素替換

在實例化后更改，所以不會影響到原構造函數(shù)已經(jīng)執(zhí)行的邏輯

divView.setElement("123");

獲取視圖內部的元素

$:視圖實例化對象為我們提供了一個方法來獲取其自身的元素

this.$el.html();

視圖模板

template, underscore提供獲取并格式化模板的方法

tpl: _.template("￥<%= price%>");

//moduel
var Price = Backbone.Model.extend({
    defaults: {
        price: 100,
        info: "xixihaha"
    }
})

//view
var View = Backbone.View.extend({
    
    model: new Price(),
    tpl: _.template("￥<%= price%><%= info%>"),
    
    initialize: function () {
        
        //數(shù)據(jù)
        var data = this.model.toJSON();
        
        //html
        var html = this.tpl(data);
        
        this.$el.html(html).css("background","pink");
        
    }
    
})

var appView = new View({
   // model: new Price(),  //model 也可以在 new View() 實例化的時候 進行
    el: $("#app")
});

渲染視圖

render：為了讓視圖實例對象可以在外部渲染視圖，定義的方法

              
// 視圖
var App = Backbone.View.extend({
    render: function () {
        // 渲染父頁面的視圖
        var item = new Item({
            model: new Price() //子視圖實例化
        })
        item.render();
        // console.log(item.el)
        this.$el.append(item.el)
    }
});            

var app = new App({
    el: $("#app")
});
app.render();

view 事件監(jiān)聽

events：基于委托模式，對el元素委托

{
    "事件名 委托元素的選擇器": "事件回調方法"
}

var ItemView = Backbone.View.extend({
    tpl: _.template($("#itemView").html()),
    events: {
        "mouseleave .item": "hideSeeDom"
    },
    hideSeeDom: function (e) {
            this.$(".see").hide().css("top", 290)
    }
})

collection

集合：表示數(shù)據(jù)模型的一個有序集合

每個方法都有返回值

每個方法通常會有一個對應的事件，這個事件的名稱大部分是方法的名稱

創(chuàng)建collection

var ItemContainer = Backbone.Collection.extend({
    model: ItemModel //集合對應的模型
});

實例化collection

//可以傳遞  js 對象,但是沒有id {} ,不建議
var item = new ItemModel();
var itemContainer = new ItemContainer(item); //一個 模型
var itemContainer = new ItemContainer([item1,item2]); //多個模型

collection添加模型

向集合中增加一個模型（或一個模型數(shù)組），會觸發(fā)"add"事件.
重復添加模型實例化對象會被去重的

var item = new ItemModel();
itemContainer.add(item);
itemContainer.add([item1]);

轉成JSON

可以將一個集合轉化為一個JSON對象
得到的結果是一個新的對象，不是對原有對象的引用

itemContainer.toJSON()

獲取模型

get ：接收模型參數(shù)，接收id，或者cid（如果對象有id，可以通過對象獲取，如果對象沒有id就不能通過id獲?。?
在創(chuàng)建模型的時，傳遞id屬性，此時，id屬性會被傳遞到模型的最外成屬性（attributes，cid，changed在一個層次）

itemContainer.get(item);
itemContainer.get(id);
itemContainer.get(cid);

刪除模型

remove：刪除集合中的模型

可以傳遞一個模型

也可以傳遞一個模型組成的數(shù)組

還可以傳遞一個具有id的對象

返回的結果是刪除的模型實例化對象

itemContainer.remove(item);
itemContainer.remove([item,time2]);

// remove 函數(shù)
//collection
var ItemCollection = Backbone.Collection.extend({
    model: ItemModel,
    initialize: function () {

        this.on("remove",function ( model ) {
            
            console.log( model );
            
        });
        
    }
})

collection initialize

collection構造函數(shù)，是在collection被實例化的時候調用，在它里面添加的事件會監(jiān)聽所有的實例化對象

var IterContainer = Backbone.Collection.extend({
    model: ItemModel,

    initialize: function () {

        this.on("add",function ( model ) {

            console.log(model); //false

        });

    }
});

collection events

collection 添加事件，事件有兩種添加方式

添加在構造函數(shù)內，此時會監(jiān)聽所有實例化對象
添加在實例化對象上，只能監(jiān)聽后面添加的行為，只能監(jiān)聽該實例化對象上添加行為

//collection
var ItemCollection = Backbone.Collection.extend({
    model: ItemModel,
    initialize: function () {
        
        // add 添加  //在 initialize內添加
        this.on("add",function (model) {

            console.log( model );

        });
        
    }
})

//itemCollection.add([item,item2]); 觸發(fā)事件

//實例化對象上添加
itemContainer.on("add", function ( model ) {

    console.log( model );

});

重置collection

reset() 清空collection

reset事件與其他方法的事件的區(qū)別，reset事件的回調函數(shù)中的參數(shù)是一個集合實例化對象，該對象就是構造函數(shù)中的this，
其他方法的事件的回調函數(shù)的參數(shù)是一個模型實例化對象，不等于構造函數(shù)中的this
reset事件與其他方法的事件區(qū)別，reset事件的回調函數(shù)中的參數(shù)是一個集合實例化對象，該對象就是構造函數(shù)中的this。
其它方法的時間的回調函數(shù)

colletion.reset();

//reset 事件

//collection
var ItemCollection = Backbone.Collection.extend({
    model: ItemModel,
    initialize: function () {
        
        //綁定事件
        this.on("reset",function ( model ) {
            
            console.log( model );
            
        });
        
    }
}

collection 映射數(shù)據(jù)

fetch
從服務端拉取數(shù)據(jù)映射到集合中

注意：在collection中聲明屬性 url

var ItemModel = Backbone.Model.extend({});
            
var ListCollection = Backbone.Collection.extend({
    model: ItemModel,
    url: "data/list.json",  //聲明
    initialize: function () {
        
        this.on("add",function ( model ) {
            
            console.log( model );
            
        });
        
    }
});

var listCollection = new ListCollection();

//拉取數(shù)據(jù)
listCollection.fetch({
    success: function ( collections ) {
        
        console.log( collections,"collections" );
        
    }
});

路由 router

//路由

var Routers = Backbone.Router.extend({
    
    routes: {
        home: "showHome",
        "en/ch/:dict": "showSerch"
    },
    
    showHome: function () {

        console.log("showHome");
        
    },
    
    showSerch: function ( dict ) {
        
        var dictView = new DictView({
            el: $(".div")
        });
        
        dictView.render( dict );
        
    }
    
});

var router = new Routers();

//開啟 路由 //需要在 history 開始
Backbone.history.start();

路由規(guī)則

通過 "/" 進行路由切分,自由匹配獲取，再前面加":" (注意：第一個"/"可有可無)

#search/:query:page

*other 表示其它不匹配的規(guī)則都到該路由下，通常將該規(guī)則放到最后

var Routers = Backbone.Router.extend({

routes: {
    home: "showHome",
    "en/ch/:dict": "showSerch",
    "*other": "showDefault"
},

showHome: function () {
    console.log("showHome");
},

showSerch: function ( dict ) {
    
    var dictView = new DictView({
        el: $(".div")
    });
    
    dictView.render( dict );
    
},

showDefault: function () {
    
    console.log("showDefault");
    
}

});

var router = new Routers();

//開啟 路由
Backbone.history.start();

Events

在backbone中用events表示事件對象，但是它是單體對象，不要直接使用它，將它的屬性和方法繼承下來。
為了避免沖突，需要使用空對象添加屬性和方法。

var myEvent = _.extend({}, Backbone.Events);

訂閱事件

on方法訂閱事件

var EventsModel =  Backbone.Model.extend();


var events = new EventsModel();

events.on("dd",function ( msg ) {
    
    console.log( msg );
    
});

發(fā)送事件

trigger()

events.trigger("dd","info");

注銷事件

off()
注銷事件，寫在觸發(fā)事件的前面
注銷帶有命名空間的事件，需要添加上命名空間

myEvent.off("change")
myEvent.off("change:color")

取消其它對象監(jiān)聽

stopListening()
參數(shù)：

可以不傳，取消所有對所有對象的監(jiān)聽

一個參數(shù)：被監(jiān)聽的對象，此時取消該對象上的所有的事件監(jiān)聽

兩個參數(shù)：此時取消該對象上該事件的監(jiān)聽

// 取消監(jiān)聽
ev1.stopListening();

// 僅僅取消對ev2的監(jiān)聽
ev1.stopListening(ev2);

// 僅僅取消ev2上面的change事件
ev1.stopListening(ev2, "change");

多個對象消息監(jiān)聽

//多個事件 聯(lián)系
 
var ev1 = _.extend({},Backbone.Events);
var ev2 = _.extend({},Backbone.Events);
var ev3 = _.extend({},Backbone.Events);

ev2.listenTo(ev1, "change", function ( msg ) {
    
    console.log( msg );
    
});

ev2.listenTo(ev1, "add", function ( msg ) {
    
    console.log(msg);
    
});

ev2.listenTo(ev1, "dd", function ( msg ) {
    
    console.log(msg);
    
});

ev2.stopListening(ev1, "change");

ev1.trigger("change", "hello");
ev1.trigger("add", "world");

ev1.trigger("dd", "pink");

M、V、Collections消息監(jiān)聽

//模型 和  視圖  之間的 事件聯(lián)系  collection 和 view 之間的聯(lián)系
var eventModel = new Backbone.Model();

var eventView = new Backbone.View();

var EventCollection = Backbone.Collection.extend();

var eventCollection = new EventCollection();

eventView.listenTo(eventModel,"change",function ( msg ) {
    
    console.log(msg);
    
});

eventView.listenTo(eventCollection, "remove", function ( msg ) {
    
    console.log( msg,"--" );
    
});

eventModel.set({
    color: "pink",
    age: 2
});

eventCollection.add(eventModel);
eventCollection.remove(eventModel);

GPU云服務器云服務器 Backbone backbone.js

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/79776.html

Backbone.js學習筆記（二）細說MVC

摘要：因為是一條數(shù)據(jù)記錄，也就是說，相當于是一個數(shù)據(jù)集。通常我們需要重載函數(shù)，聲明，以及通過或為視圖指定根元素。通過綁定視圖的函數(shù)到模型的事件模型數(shù)據(jù)會即時的顯示在中。實例屬性參數(shù)以及類屬性參數(shù)會被直接注冊到集合的構造函數(shù)。對于初學backbone.js的同學可以先參考我這篇文章：Backbone.js學習筆記（一） Backbone源碼結構 showImg(https://segme...

taoszu 2019-08-21 10:29 評論0 收藏0
backbone源碼解讀

摘要：個人認為，讀懂老牌框架的源代碼比會用流行框架的要有用的多。另外，源代碼中所有的以開頭的方法，可以認為是私有方法，是沒有必要直接使用的，也不建議用戶覆蓋。寫在前面 backbone是我兩年多前入門前端的時候接觸到的第一個框架，當初被backbone的強大功能所吸引(當然的確比裸寫js要好得多)，雖然現(xiàn)在backbone并不算最主流的前端框架了，但是，它里面大量設計模式的靈活運用，以及令...

Kross 2019-08-20 14:08 評論0 收藏0
backbone源碼解讀

摘要：個人認為，讀懂老牌框架的源代碼比會用流行框架的要有用的多。另外，源代碼中所有的以開頭的方法，可以認為是私有方法，是沒有必要直接使用的，也不建議用戶覆蓋。寫在前面 backbone是我兩年多前入門前端的時候接觸到的第一個框架，當初被backbone的強大功能所吸引(當然的確比裸寫js要好得多)，雖然現(xiàn)在backbone并不算最主流的前端框架了，但是，它里面大量設計模式的靈活運用，以及令...

wangxinarhat 2019-08-01 16:15 評論0 收藏0
Backbone.js學習筆記（一）

摘要：它通過數(shù)據(jù)模型進行鍵值綁定及事件處理，通過模型集合器提供一套豐富的用于枚舉功能，通過視圖來進行事件處理及與現(xiàn)有的通過接口進行交互。本人兼職前端付費技術顧問，如需幫助請加本人微信hawx1993或QQ345823102，非誠勿擾 1.為初學前端而不知道怎么做項目的你指導 2.指導并扎實你的JavaScript基礎 3.幫你準備面試并提供相關指導性意見 4.為你的前端之路提供極具建設性的...

FrancisSoung 2019-08-21 10:21 評論0 收藏0
Backbone精髓，觀察者模式和事件

摘要：原文精髓，觀察者模式和事件交互邏輯更需要設計模式設計模式將人們在以往的開發(fā)過程中的經(jīng)驗加以總結，以指導后人。的事件根據(jù)上面討論，要實現(xiàn)觀察者模式，事件是非常重要的機制?？偨Y雖然是模式的框架，但是其核心卻是界面的觀察者模式和事件機制。前言本人并非專業(yè)的前端，只是由于需要被迫轉做一段時間的前端，一段時間以來開始探索javascript上的MVC模式，最終打算從Backbone下手。在...

Snailclimb 2019-08-21 12:16 評論0 收藏0