资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/BackBone

BackBone

charles_paul / 2262人阅读

摘要：弱化了使用依赖的工具库等等创建模型构造函数默认值表示模型类的默认值，当模型实例化的时候，这些默认值就会被赋值上。

backbone

Backbone.js提供模型(models)、集合(collections)、视图(views)的结构。

Models: 是引用程序的核心，也是表示数据，用于绑定键值数据和自定义事件

Collectoins：是对Model的一个容器，包含多个模型，并提供一些方法，来访问这些模型，集合附有可枚举函数的丰富API

View：可以在视图中声明时间，在视图中处理集合或者模型，也可以地工艺方法啊，可以暴露出来一些借口，视图可以声明事件处理函数，并通过接口连接到应用程序。

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

使用
依赖的工具库
jquery.js,zepto.js 等
underscore.js/lodash.js 等

Model 创建模型 
//构造函数：
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: 在模型对象的实例化时，构造函数可以对模型再次更改

var WangCai = Backbone.Model.extend({

    //构造函数
    initialize: function () {
        
        if ( this.attributes.price ) {
            
            this.attributes.onSale = true;
            
        }
        
    }
    
});
获取属性

get，获取模型实例化对象属性的方法，直接在模型实例化对象上调用
参数：表示属性值

var WangCai = Backbone.Model.extend({
    
    //默认值
    defaults: {
        kg: 20,
        name: "wangcai",
        age: 2
    },
    
    //构造函数
    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()
设置模型实例化对象属性方法，直接在实例化模型对象上调用

第一种传参方式

参数1，属性名称

参数2，属性值

第二种传参方式
传递一个对象，这个对象映射到模型的attributes上的属性对象

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

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

Backbone实例对象的继承Backbone.Model，Backbone.Model继承了事件的方法，所以就可以在构造函数中使用绑定事件的方法on，通过this访问

on方法的使用：

第一个参数表示事件的名称

第二个参数表示事件的回调函数
当调用set添加属性时候会触发change事件，但set传递{silent: true}参数时候，该事件就不能被触发了

//构造函数
initialize: function () {
    
    //on事件可以使用命名空间
    this.on("change",function ( model ) {
        
        console.log(123);
        
    });
    
}

ww.set({
    say: function () {},
    zf: "dd"
},{silent: true });
//添加属性不被事件捕获， 通过 set的第二个参数 {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 });
//实例对象  已经被修改，添加 其它属性和方法 
console.log( ww.hasChanged() );// true
删除属性

unset() 删除模型实例化对象上属性， 直接在实例化对象上调用
参数1：删除的属性名
参数2：一些配置

ww.unset("zf");

validate：检验删除是否合理，但是删除方法unset时候，必须传递{validate： true}才能校验
validate 验证删除是否合理，在unset第二个参数传递。

参数，是该实例化对象的attributes对象
返回：
true 删除失败
false 删除成功

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

backbone 视图层

创建 
//构造函数
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：表示视图的元素

实例化创建添加属性

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

initialze 表示视图类的构造函数

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

setElement 将新元素替换原有的元素
divView.setElement();

参数可以是字符串，那么就将该字符串渲染成元素

参数也可以是dom元素，那么就直接该元素替换

在实例化后更改，所以不会影响到原构造函数已经执行的逻辑

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 () {
        
        //数据
        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 事件监听

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

集合：表示数据模型的一个有序集合

每个方法都有返回值

每个方法通常会有一个对应的事件，这个事件的名称大部分是方法的名称

创建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添加模型

向集合中增加一个模型（或一个模型数组），会触发"add"事件.
重复添加模型实例化对象会被去重的

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

可以将一个集合转化为一个JSON对象
得到的结果是一个新的对象，不是对原有对象的引用

itemContainer.toJSON()
获取模型

get ：接收模型参数，接收id，或者cid（如果对象有id，可以通过对象获取，如果对象没有id就不能通过id获取）
在创建模型的时，传递id属性，此时，id属性会被传递到模型的最外成属性（attributes，cid，changed在一个层次）

itemContainer.get(item);
itemContainer.get(id);
itemContainer.get(cid);
删除模型

remove：删除集合中的模型

可以传递一个模型

也可以传递一个模型组成的数组

还可以传递一个具有id的对象

返回的结果是删除的模型实例化对象

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

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

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

collection构造函数，是在collection被实例化的时候调用，在它里面添加的事件会监听所有的实例化对象

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

    initialize: function () {

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

            console.log(model); //false

        });

    }
});
collection events

collection 添加事件，事件有两种添加方式

添加在构造函数内，此时会监听所有实例化对象
添加在实例化对象上，只能监听后面添加的行为，只能监听该实例化对象上添加行为
//collection
var ItemCollection = Backbone.Collection.extend({
    model: ItemModel,
    initialize: function () {
        
        // add 添加  //在 initialize内添加
        this.on("add",function (model) {

            console.log( model );

        });
        
    }
})

//itemCollection.add([item,item2]); 触发事件

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

    console.log( model );

});
重置collection

reset() 清空collection

reset事件与其他方法的事件的区别，reset事件的回调函数中的参数是一个集合实例化对象，该对象就是构造函数中的this，
其他方法的事件的回调函数的参数是一个模型实例化对象，不等于构造函数中的this
reset事件与其他方法的事件区别，reset事件的回调函数中的参数是一个集合实例化对象，该对象就是构造函数中的this。
其它方法的时间的回调函数

colletion.reset();

//reset 事件

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

fetch
从服务端拉取数据映射到集合中

注意：在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();

//拉取数据
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();
路由规则

通过 "/" 进行路由切分,自由匹配获取，再前面加":" (注意：第一个"/"可有可无)

#search/:query:page

*other 表示其它不匹配的规则都到该路由下，通常将该规则放到最后

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 );
    
});
发送事件

trigger()

events.trigger("dd","info");
注销事件

off()
注销事件，写在触发事件的前面
注销带有命名空间的事件，需要添加上命名空间

myEvent.off("change")
myEvent.off("change:color")
取消其它对象监听

stopListening()
参数：

可以不传，取消所有对所有对象的监听

一个参数：被监听的对象，此时取消该对象上的所有的事件监听

两个参数：此时取消该对象上该事件的监听

// 取消监听
ev1.stopListening();

// 仅仅取消对ev2的监听
ev1.stopListening(ev2);

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

多个对象消息监听 
//多个事件 联系
 
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消息监听 
//模型 和  视图  之间的 事件联系  collection 和 view 之间的联系
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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79776.html

相关文章

  • Backbone.js学习笔记（二）细说MVC

    摘要：因为是一条数据记录，也就是说，相当于是一个数据集。通常我们需要重载函数，声明，以及通过或为视图指定根元素。通过绑定视图的函数到模型的事件模型数据会即时的显示在中。实例属性参数以及类属性参数会被直接注册到集合的构造函数。 对于初学backbone.js的同学可以先参考我这篇文章：Backbone.js学习笔记（一） Backbone源码结构 showImg(https://segme...

    taoszu 评论0 收藏0

  • backbone源码解读

    摘要：个人认为，读懂老牌框架的源代码比会用流行框架的要有用的多。另外，源代码中所有的以开头的方法，可以认为是私有方法，是没有必要直接使用的，也不建议用户覆盖。 写在前面 backbone是我两年多前入门前端的时候接触到的第一个框架，当初被backbone的强大功能所吸引(当然的确比裸写js要好得多)，虽然现在backbone并不算最主流的前端框架了，但是，它里面大量设计模式的灵活运用，以及令...

    Kross 评论0 收藏0

  • backbone源码解读

    摘要：个人认为，读懂老牌框架的源代码比会用流行框架的要有用的多。另外，源代码中所有的以开头的方法，可以认为是私有方法，是没有必要直接使用的，也不建议用户覆盖。 写在前面 backbone是我两年多前入门前端的时候接触到的第一个框架，当初被backbone的强大功能所吸引(当然的确比裸写js要好得多)，虽然现在backbone并不算最主流的前端框架了，但是，它里面大量设计模式的灵活运用，以及令...

    wangxinarhat 评论0 收藏0

  • Backbone.js学习笔记（一）

    摘要：它通过数据模型进行键值绑定及事件处理，通过模型集合器提供一套丰富的用于枚举功能，通过视图来进行事件处理及与现有的通过接口进行交互。 本人兼职前端付费技术顾问，如需帮助请加本人微信hawx1993或QQ345823102，非诚勿扰 1.为初学前端而不知道怎么做项目的你指导 2.指导并扎实你的JavaScript基础 3.帮你准备面试并提供相关指导性意见 4.为你的前端之路提供极具建设性的...

    FrancisSoung 评论0 收藏0

  • Backbone精髓，观察者模式和事件

    摘要：原文精髓，观察者模式和事件交互逻辑更需要设计模式设计模式将人们在以往的开发过程中的经验加以总结，以指导后人。的事件根据上面讨论，要实现观察者模式，事件是非常重要的机制。总结虽然是模式的框架，但是其核心却是界面的观察者模式和事件机制。 前言 本人并非专业的前端，只是由于需要被迫转做一段时间的前端，一段时间以来开始探索javascript上的MVC模式，最终打算从Backbone下手。在...

    Snailclimb 评论0 收藏0

发表评论

登陆后可评论

0条评论

charles_paul

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<