前端框架---backbone.js之个人愚见

最新推荐文章于 2023-08-26 09:47:58 发布

置顶 HaleyLiu123

最新推荐文章于 2023-08-26 09:47:58 发布

阅读量909

点赞数

分类专栏：【前端】文章标签： backbone 前端框架

本文链接：https://blog.csdn.net/HaleyLiu123/article/details/72795652

版权

【前端】专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一.简介：

api资料链接：http://www.css88.com/doc/backbone/

数据驱动UI的思想

Backbone.js为复杂WEB应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件；集合附有可枚举函数的丰富API；视图可以声明事件处理函数，并通过RESRful JSON接口连接到应用程序。

通过Backbone，你可以将数据呈现为 Models, 你可以对模型进行创建，验证和销毁，以及将它保存到服务器。任何时候只要UI事件引起模型内的属性变化，模型会触发"change"事件；所有显示模型数据的 Views 会接收到该事件的通知，继而视图重新渲染。你无需查找DOM来搜索指定id的元素去手动更新HTML。 — 当模型改变了，视图便会自动变化。

二.BackBone的组成（数据驱动UI的思想）

Backbone.Events（事件）---事件驱动方法

Events 是一个可以融合到任何对象的模块, 给予对象绑定和触发自定义事件的能力. Events 在绑定之前不需要声明, 并且还可以传递参数.

Backbone.Model（模型）-----数据模型

Models（模型）是任何Javascript应用的核心，包括数据交互及与其相关的大量逻辑：转换、验证、计算属性和访问控制。你可以用特定的方法扩展 Backbone.Model，Model 也提供了一组基本的管理变化的功能。

Backbone.Collection（集合）----模拟集合器

集合是模型的有序组合，我们可以在集合上绑定 "change" 事件，从而当集合中的模型发生变化时fetch（获得）通知，集合也可以监听 "add" 和 "remove" 事件，从服务器更新，并能使用 Underscore.js 提供的方法。

Backbone.Router（路由hash）

web应用程序通常需要为应用的重要位置提供可链接，可收藏，可分享的 URLs。直到最近，猫点（hash）片段（#page）可以被用来提供这种链接，同时随着 History API 的到来，猫点已经可以用于处理标准 URLs （/page）。 Backbone.Router 为客户端路由提供了许多方法，并能连接到指定的动作（actions）和事件（events）。对于不支持 History API 的旧浏览器，路由提供了优雅的回调函数并可以透明的进行 URL 片段的转换

Backbone.history（历史）---开启历史管理

History 作为全局路由服务用于处理 hashchange 事件或 pushState，匹配适合的路由，并触发回调函数。我们不需要自己去做这些事情 — 如果使用带有键值对的路由，Backbone.history 会被自动创建。

Backbone.sync（同步）-----同步服务管理

Backbone.sync 是 Backbone 每次向服务器读取或保存模型时都要调用执行的函数。默认情况下，它使用 jQuery.ajax 方法发送 RESTful json 请求，并且返回一个 jqXHR。如果想采用不同的持久化方案，比如 WebSockets, XML, 或 Local Storage，我们可以重载该函数。

Backbone.View（视图）----视图（含事件行为和渲染行为）

Backbone 视图几乎约定比他们的代码多 — 他们并不限定你的HTML或CSS，并可以配合使用任何JavaScript模板库。一般是组织您的接口转换成逻辑视图，通过模型的支持，模型变化时，每一个都可以独立地进行更新，而不必重新绘制该页面。我们再也不必钻进 JSON 对象中，查找 DOM 元素，手动更新 HTML 了，通过绑定视图的 render 函数到模型的 "change" 事件 — 模型数据会即时的显示在 UI 中。

三.相关Demo

Backbone是构建JavaScript应用程序的一个优秀的类库。他简洁、轻量级、功能实在。

Backbone采用MVC模式，本身提供了模型、控制器和视图从而我们应用程序的骨架便形成。

Backbone依赖于underscore，他是一个类库，提供了60多个函数处理数组操作、函数绑定，以及javascript模板机制。

步骤1. model，就是一个数据单体。

var Hero = Backbone.Model.extend({
    //每个人都有他自身的属性
    defaults : {
        "name" : '盖聂卫庄'
    }
});

步骤2. collection，数据队列。

var Heros = Backbone.Collection.extend({
    //对集合的类型进行设定，这里设定为英雄的集合
    model : Hero
});

步骤3. view，每个伟大的视图背后，都有默默的collection或者model。

var View = Backbone.View.extend({
    //设定这个视图的dom元素，也可以通过设定tagName, className, id 或者 attributes。如果没有特别设定，Backbone会为它套上空的div标签
    el : $("body"),
    initialize : function() {
        //集合的事件绑定
        this.collection.bind("add", this.addOne);
        this.collection.bind("remove", this.delOne);
    },
    //使用了jquery的on方法，提供对视图的事件代理
    events : {
        "click #add" : "add",
        "click .del" : "del",
        "click #clear" : "clear",
    },
    add : function() {
        var name = prompt("请输入人名");
        //创建一个新model
        var hero = new Hero({
            'name' : name
        });
        //并添加到人员队列中,会触发collection的add事件
        heros.add(hero);
    },
    del : function(obj) {
        //获取要删除的是哪个model
        var delWho = obj.currentTarget.id;

        //会触发collection的remove事件
        heros.remove(delWho);
    },
    //当collection发生了add事件
    addOne : function(model) {
        //每个model会随机生成一个唯一的cid，用来识别，区分
        $("#list").append("<li>" + model.get('name') + "说：hello world！<button class='del' id='" + model.cid + "'>删除</button></li>");
    },
    //当collection触发了remove事件
    delOne : function(model) {
        //使用jquery的remove方法，删除dom和解除绑定的事件
        $('#' + model.cid).parent().remove();
    },
    //清空数据
    clear : function() {
        this.collection.reset();
        this.clearAll();
    },
    //清空dom
    clearAll : function() {
        $('#list').empty();
    }
});

步骤四：4.程序入口

//新建模型队列
var heros = new Heros;
//新建视图
var app = new View({
   //新建collection
    collection : heros

});