文档章节

JavaScript MVC框架backbone.js初探

微一
 微一
发布于 2013/01/07 14:25
字数 1914
阅读 248
收藏 15
MVC


什么是backbone

backbone不是脊椎骨,而是帮助开发重量级的javascript应用的框架。

主要提供了3个东西:1、models(模型) 2、collections(集合) 3、views(视图)

backbone.js文件本身很小,压缩后只有5.3KB,作为一个框架级别的核心JS文件,这个数字很可怕。

除此之外,这个JS还必须依赖于另一个JS文件:underscore.js(包含许多工具方法,集合操作,js模板等等)。

简介

用Backbone.Model表示应用中所有数据,models中的数据可以创建、校验、销毁和保存到服务端。

当models中值被改变时自动触发一个"change"事件、所有用于展示models数据的views都会侦听到这个事件,然后进行重新渲染。

Backbone.Collection和我们平时接触的JAVA集合类相似,具有增加元素,删除元素,获取长度,排序,比较等一系列工具方法,说白了就是一个保存models的集合类。

Backbone.View中可以绑定dom el和客户端事件。页面中的html就是通过views的render方法渲染出来的,当新建一个view的时候通过要传进一个model作为数据,例如:

Js代码:

    var view = new EmployeeView({model:employee});

也就是说model就是以这种方式和view进行关联的。

特点

创建models或者views的语法:extends,相当于类继承

models的创建,销毁,校验等一系列改变都会触发相应的事件

示例

需求:用backbone.js和jquery实现一个可编辑的员工信息表格。

功能:1、录入员工信息。2、删除员工信息。3、双击表格可对员工信息进行修改。4、能对员工信息进行有效性校验。5、能对员工信息进行持久化。

设计:

用Employee类(继承自Backbone.Model)表示员工信息,包含ID、姓名、性别、年龄和职位字段。

Js代码:

    window.Employee = Backbone.Model.extend({
    // 模型值校验
    validate:function(attrs){
    for(var key in attrs){
    if(attrs[key] == ''){
    return key + "不能为空";
    }//www.sctarena.com
    if(key == 'age' && isNaN(attrs.age)){
    return "年龄必须是数字";
    }
    }
    }
    });

声明Employee类之后就可以新增一个Employee的示例对象了:

Js代码:

    var employee = new Employee();

Employee类中不必声明ID、姓名等业务字段。当需要给employee设置这些信息时候,只需要调用

Js代码:

    employee.set({'id':1,'name':'Jason'});

当然,如果需要对employee的信息进行校验,需要给Employee类配置一个validate方法,这个方法的参数attrs就是set进去的json数据。这样,当employee里面的数据每次发生改变的时候都会先调用这个validate方法。

Model类定义好之后就可以开始定义集合类了,在集合类里面可以对里面的每个Model进行增加,删除等一系列操作,还可以调用fetch方法从server端获取集合的初始值。

Js代码:

    window.EmployeeList = Backbone.Collection.extend({
    model : Employee,
    // 持久化到本地数据库
    localStorage: new Store("employees"),
    });
    window.Employees = new EmployeeList();
成都java培训
设置 localStorage属性后Employees里面的数据自动会同步保存到本地数据库里面,每当调用Employees.fetch()后又会从localStorage里面恢复数据。

View类主要负责一切和界面相关的工作,比如绑定html模板,绑定界面元素的事件,初始的渲染,模型值改变后的重新渲染和界面元素的销毁等:

Js代码:

    window.EmployeeView = Backbone.View.extend({
    tagName : 'tr',
    template : _.template($('#item-template').html()),
    events : {
    "dblclick td" : "edit",
    "blur input,select" : "close",
    "click .del" : "clear",
    },
    initialize : function(){
    // 每次更新模型后重新渲染
    this.model.bind('change', this.render, this);
    // 每次删除模型之后自动移除UI
    this.model.bind('destroy', this.remove, this);
    },
    setText : function(){
    var model = this.model;
    this.input = $(this.el).find('input,select');
    this.input.each(function(){
    var input = $(this);
    input.val(model.get(input.attr("name")));
    });
    },
    close: function(e) {
    var input = $(e.currentTarget);
    var obj = {};
    obj[input.attr('name')] = input.val();
    this.model.save(obj);
    $(e.currentTarget).parent().parent().removeClass("editing");
    },
    edit : function(e){
    // 给td加上editing样式
    $(e.currentTarget).addClass('editing').find('input,select').focus();
    },
    render: function() {
    $(this.el).html(this.template(this.model.toJSON()));
    // 把每个单元格的值赋予隐藏的输入框
    this.setText();
    return this;
    },
    remove: function() {
    $(this.el).remove();
    },
    clear: function() {
    this.model.destroy();
    }
    });

这个类里面的代码比较多,但主要和界面的渲染有关。一个EmployeeView对象对应table里面的一个tr元素。每次new一个EmployeeView对象的时候都会先调用initialize方法,这个方法里面绑定的事件确保了tr元素对应的model值每次发生改变或者被删除时都会同步到界面。也就是说当每次操作界面对数据进行修改后都是先把当前的变更保存到view绑定的model对象里面,然后model里面的事件机制会自动触发一个"change"事件对界面进行修改。

template中使用的方法_.template($('#item-template').html())是前面提到的underscore.js中提供一个工具方法,可以通过界面的HTML模板和一个JSON生成动态的HTML,说白了就是把JSON里面的值填充到HTML模板中对应的占位符里面去,牛X的是HTML模板里面支持一些常用的逻辑表达式如if,else,foreach等:

Html代码:

    <script type="text/template" id="item-template">
    <td><%= eid %></td>
    <td class="username">
    <div class="display"><%= username %></div>
    <div class="edit"><input class="username" name="username"></input></div>
    </td>
    <td class="sex">
    <div class="display"><%= sex=="1" ? "女":"男" %></div>
    <div class="edit">
    <select name="sex" class="sex" style="width:45px">
    <option value="0">男</option><option value="1">女</option>
    </select>
    </div>
    </td>
    <td class="age">
    <div class="display"><%= age %></div>
    <div class="edit">
    <input class="age" name="age"></input>
    </div>
    </td>
    <td class="position">
    <div class="display"><%= position %></div>
    <div class="edit">
    <input class="position" name="position"></input>
    </div>
    </td>
    <td>
    <a href="#" class="del">删除</a>
    </td>
    </script>

setText方法主要负责把model里面的数据设置到每个tr里面的隐藏输入域里面。

close方法被绑定到了input和select元素的blur事件中。当用户对单元格数据进行修改后都会把鼠标点击到界面其他地方然后输入框会自动隐藏并且把修改的数据显示在表格上面。close方法首先从当前被编辑的元素中拿到最新值,然后封装成一个对象,调用model的save方法后首先执行model的validate方法,如果校验通过则保存到本地存储并触发"change"事件。

最后还需要一个主界面View,这个View主要绑定了界面中的录入表单的“增加”按钮事件,Employees的相关事件以及页面初始化时从本地存储中恢复数据:

Js代码:

    window.AppView = Backbone.View.extend({
    el : $("#app"),
    events : {
    "click .#add-btn" : "createOnEnter"
    },
    // 绑定collection的相关事件
    initialize: function() {
    Employees.bind('add', this.addOne, this);
    // 调用fetch的时候触发reset
    Employees.bind('reset', this.addAll, this);
    Employees.fetch();
    },
    createOnEnter : function(e) {
    var employee = new Employee();
    var attr = {};
    $('#emp-form input,#emp-form select').each(function(){
    var input = $(this);
    attr[input.attr('name')] = input.val();
    });
    employee.bind('error',function(model,error){
    alert(error);
    });
    // set方法中会自动调用model的validate方法进行校验,如果不通过则返回false
    if(employee.set(attr)){
    Employees.create(employee);
    }
    },
    addOne : function(employee){
    employee.set({"eid":employee.get("eid")||Employees.length});
    employee.bind('error',function(model,error){
    alert(error);
    });
    var view = new EmployeeView({model:employee});
    $(".emp-table tbody").append(view.render().el);
    },
    addAll : function(){
    Employees.each(this.addOne);
    }
    });

initialize方法中绑定了Employees的add和reset事件,也就是说每当往Employees中添加一个model的时候都会调用AppView的addOne方法,这个方法主要绑定了model的error事件以及把EmployeeView生成的html插入到界面中的合适位置。

OK,万事俱备,只欠启动,整个应用的初始化方法就是AppView的initialize方法,因此只需要新建一个AppView就可以了:

Js代码

    window.App = new AppView();

整个示例的JS代码很少,加上注释只有100行左右,感兴趣的可以下载看看。由于示例使用到了本地存储,所以不要用IE运行示例,你懂的。

本文转载自:

微一
粉丝 0
博文 5
码字总数 0
作品 0
海口
私信 提问
Backbone.js 样例站点与入门指南

本文的来源 前段时间,我的工作中开始接触到 Backbone.js 这个开源框架,于是我就在网上搜索了下相关资料开始学习,结果找来找去,发现这些资料都不够全面,都是只涉及到关键点的一部分,只有...

苗哥
2012/08/06
8.3K
3
MVC与Backbone.js的demo简析

MVC简介 MVC是一种软件设计模式,它将应用程序分为Model、View、Controller三个部件,可以有效地将业务逻辑和数据显示分离。 Model包括算法实现、数据管理和数据库设计等。Model与数据格式无...

wsd1
2013/10/07
982
0
Node.js的学习资源、教程和工具

这篇文章编译整理自Stack Overflow的一个如何开始学习Node.js的Wiki帖,这份资源列表在SO上面浏览接近60万次,数千个收藏和顶。特意整理发布到这里,其中添加了部分中文参考资料。 学习指南和...

90后爱国
2015/07/21
189
0
如何编写可维护的 jQuery 应用

这年头,你没有一些 jQuery 使用经验还真不敢称自己为 web 开发者。jQuery 在例如浏览器兼容性、ajax 调用、DOM 操作、常用工具上能带来很多的帮助,能够辅助我们这些 “慵懒” 的web开发者更...

oschina
2012/12/19
1K
1
JavaScript MVC 开源框架

腾讯Web前端框架库 JX by Tencent AlloyTeam 简介 JX 是模块化的非侵入式Web前端框架,开发于2008年,并于2009年开源于GoogleCode - http://code.google.com/p/j-et/,于2012年切换到Github,...

wewelove
2014/06/04
345
0

没有更多内容

加载失败,请刷新页面

加载更多

使用CSS自定义属性构建骨架屏

写在前面 几天前看到薄荷前端团队分享的《前端骨架屏方案小结》,突然回想起一年前看到的max bock写的《Building Skeleton Screens with CSS Custom Properties》,翻译整理写下出此文,分享...

前端老手
昨天
9
0
Docker常用命令小记

除了基本的<font color="blue">docker pull</font>、<font color="blue">docker image</font>、<font color="blue">docker ps</font>,还有一些命令及参数也很重要,在此记录下来避免遗忘。 ......

程序员欣宸
昨天
9
0
MAT使用-jvm内存溢出问题分析定位

1.MAT简介: MAT 全称 Eclipse Memory Analysis Tools 是一个分析 Java堆数据的专业工具,可以计算出内存中对象的实例数量、占用空间大小、引用关系等,看看是谁阻止了垃圾收集器的回收工作,...

xiaomin0322
昨天
5
0
内网和外网之间的通信(端口映射原理)

首先解释一下“内网”与“外网”的概念: 内网:即所说的局域网,比如学校的局域网,局域网内每台计算机的IP地址在本局域网内具有互异性,是不可重复的。但两个局域网内的内网IP可以有相同的...

Jack088
昨天
6
0
3.深入jvm内核-原理、诊断与优化-4. GC算法和种类

一、GC算法和种类 GC的概念 GC算法 引用计数法 标记清除 标记压缩 复制算法 可触及性 Stop-The-World GC的对象是堆空间和永久区 引用计数法 老牌垃圾回收算法 通过引用计算来回收垃圾 使用者...

hexiaoming123
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部