说说backbone.js-阿里云开发者社区

开发者社区> 亦才> 正文

说说backbone.js

简介:
+关注继续查看

backbone是一个非常优秀的前端MVC框架,灵活度非常高,浏览器兼容支持的也很好,跟angularjs相比,它显得非常轻量,相关的中文API文档,可以点击这里,然后backbone深度依赖underscore,详情点击这里


今天谈谈我对backbone的一些理解.

关于Event

事件在框架里起着关键的作用,而且事件一般是独立模块,backbone的模型,集合,视图默认都会继承事件,下面简单的说下事件的用法

on 定义一个事件

var obj = {
    name: 'feenan'
};
// 使自定义对象拥有事件方法
_.extend(obj, Backbone.Event);

obj.on('go', function(){
    console.log(this.name);
});

obj.trigger('go');

trigger会触发事件,支持传递回调参数以及回调函数的上下文,在backbone里定义事件也可以指定到单个属性,比如下面Model里定义的change:xuwm.

下面说说在backbone里事件的几个特点

  • 模型的任务事件触发最后都会触发all事件,除非传递silent:true
  • 模型的任何属性改变事件都后都会触发change事件,除非传递silent:true
  • 对集合元素的添加删除都会触发元素集合的all事件,除非传递silent:true

关于Model

模型在一个框架里面一般用来定义基本数据以及数据相关的操作,在backbone里一般可以这样来定义Model

var Todo = Backbone.Model.extend({
    initialize: function(){
        this.on('invalid', function(){
            console.log('不能通过验证!');
        });
        this.on('change:xuwm', function(){
            console.log('change xuwm event...');
        });
        this.on('add', function(){
            log('被添加到集合中....');
        })
        this.on('change', function(){
            log('invoke change event!');
        });
        console.log('模型初始化...');
    },
    validate: function(attrs){
        if(attrs.xuwm == 'feenan'){
            return true;
        }else{
            return false;
        }
    },
    defaults: function(){
        return {
            name: 'xuwm',
            age: 20
        }
    }
});

extend方法主要是在Model的基础上扩展一些自定义的属性与方法,来看看Model本身支持的一些让开发者重载的方法或者属性

initialize 当模型被实例化完成时,会触发此方法,一般可以在这里定义事件

defaults 定义模型的默认值

validate 定义模型属性验证方法,在这里可以对将要设置的属性进行验证,返回true则不修改属性,返回false则修改属性

下面我们来使用上面定义的模型

var todo = new Todo;

todo.set({xuwm: 'feenan'});

这里要强调一下,验证属性不会发生在new模型的时候,只会发生在实例之后,因为定义验证事件是在实例生成之后绑定的.比如上面例子里的set方法,这是模型的一个核心方法.

关于Collection

集合是专门用来管理模型的,然后提供了数组相关的方法,跟underscore里的方法相似,因为底层都是调用它的方法.下面是一个定义集合的例子

var TodoList = Backbone.Collection.extend({
    model: Todo,
    localStorage: new Backbone.LocalStorage("todos-backbone"),
    rest: function(){
        return this.where({done: false});
    },
    done: function(){
        return this.where({done: true});
    }
});

集合一般用来跟后台数据相关联,比如增删改查,上面例子里的后端数据用的是本地localStorage,假如不定义localStorage属性,则后台数据请求默认用的是Backbone.ajax来处理,这里用到了一个backbone的一个本地存储插件backbone.localStorage.js

model属性代表此集合关联哪个类型的模型

下面说说集合常用的方法

create 创建一个模型并保存到后台

var todos = new TodoList;
todos.create({xuwm: 'tina'});

create 方法最后调用模型的save方法提交到后台,此处就是往本地存储里添加信息

fetch 从后台拉取数据集合

todos.fetch();

fetch 方法会调用后台服务里的read方法,后台服务在backbone里指Backbone.sync模块,最终调用set方法来依次添加数据到模型里,并绑定模型的all事件跟集合进行关联,保证模型的修改会提醒集合的更新.

以下是添加模型时跟集合进行关联的源码js // Internal method to create a model's ties to a collection. _addReference: function(model, options) { this._byId[model.cid] = model; if (model.id != null) this._byId[model.id] = model; if (!model.collection) model.collection = this; model.on('all', this._onModelEvent, this); }, // Internal method called every time a model in the set fires an event. // Sets need to update their indexes when models change ids. All other // events simply proxy through. "add" and "remove" events that originate // in other collections are ignored. _onModelEvent: function(event, model, collection, options) { if ((event === 'add' || event === 'remove') && collection !== this) return; if (event === 'destroy') this.remove(model, options); if (model && event === 'change:' + model.idAttribute) { delete this._byId[model.previous(model.idAttribute)]; if (model.id != null) this._byId[model.id] = model; } this.trigger.apply(this, arguments); }

where 根据参数查找出相关集合列表

todos.where({xuwm: 'feenan'});

类似的数组操作方法有很多,基本上思想跟underscore里的collection差不多,更多的方法可以参考underscore.

关于View

视图在backbone里起承上启下的作用,基本上在backbone里,集合和模型都在这里进行活动,下面给出一个定义视图的例子

var TodoView = Backbone.View.extend({
    tagName: 'li',
    template: _.template($('#item-template').html()),
    events: {
        'change .toggle': 'toggleOne',
        'click .destroy': 'destroyOne'
    },
    initialize: function(){
        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.model, 'destroy', this.remove);
    },
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        this.$el.toggleClass('done', this.model.get('done'));
        this.input = this.$el;
        return this;
    },
    toggleOne: function(){
        this.model.toggle();
    },
    destroyOne: function(){
        if(window.confirm('是否删除此任务?')){
            this.model.destroy();
        }
    }
});

视图首先要关联页面上一个元素,通过id,class,tag方式来绑定,然后绑定相关的dom事件,在事件里对模型或者集合进行处理

这里说下视图里比较常用的几个属性

  • initialize 初始化方法,定义一些对横型或者集合事件的绑定
  • events 以一个简单的方式来统一定义视图里事件通过委托方式
  • tagName/el 通过id,class,tag 来定义视图对应的页面元素

关于 Router

Routerbackbone里比较重要,支持html5的pushstate或者onhashchange的方式来管理路由的改变,下面是定义一个路由的例子

var Router = Backbone.Router.extend({
    routes: {
        '': 'home',
        'feenan': 'feenan'
    },
    home: function(){
        todos = new TodoList;
        var app = new AppView;
    },
    feenan: function(){
        var feenanView = new FeenanView;
    }
});

关于路由有几个常用的方法先介绍下

  • routes 跟视图里的events有点类似,也是以key,value的形式来定义多个路由,key为hash值,value为路由回调函数
  • navigate 在代码里指定要跳到哪个路由,传递{trigger: true}代表跳转时会执行路由回调函数

下面是使用路由的代码

var router = new Router;

Backbone.history.start();

Backbone.History是路由的核心模块,start方法是启动路由的关键方法,这里关键是算是浏览器的兼容以及初始路由事件的地方

关于 Sync

sync名为同步,实为同步后台数据,其实就是一个访问后台数据的统一调用方式,提供有增删改查的方法

默认会调用Backbone.ajax来访问后台接口,上面例子里的调用后台是用的本地存储的插件backbone.localStorage.js,调用后台接口的地方都在backbone内部发生

总结

本文只是对backbone的一个简单流程的梳理,更多详细的内容请查看backbone的源码.


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9980 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11576 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13752 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9139 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7317 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4450 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22346 0
+关注
77
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载