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

taoszu 发布于2019-08-21 10:29 / 1844人阅读

摘要：因为是一条数据记录，也就是说，相当于是一个数据集。通常我们需要重载函数，声明，以及通过或为视图指定根元素。通过绑定视图的函数到模型的事件模型数据会即时的显示在中。实例属性参数以及类属性参数会被直接注册到集合的构造函数。

对于初学backbone.js的同学可以先参考我这篇文章：Backbone.js学习笔记（一）

Backbone源码结构

   1:  (function() {

   2:      Backbone.Events        // 自定义事件

   3:      Backbone.Model        // 模型构造函数和原型扩展

   4:      Backbone.Collection    // 集合构造函数和原型扩展

   5:      Backbone.Router        // 路由配置器构造函数和原型扩展

   6:      Backbone.History        // 路由器构造函数和原型扩展

   7:      Backbone.View            // 视图构造函数和原型扩展

   8:      Backbone.sync            // 异步请求工具方法

   9:      var extend = function (protoProps, classProps) { ... } // 自扩展函数

  10:      Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend; // 自扩展方法

  11:  }).call(this);

JS MVC职责划分

M 模型

业务模型：业务逻辑、流程、状态、规则
（核心）数据模型：业务数据、数据校验、增删改查（AJAX）

V 视图

（核心）视图：定义、管理、配置
模板：定义、配置、管理
组件：定义、配置、管理
（核心）用户事件配置、管理
用户输入校验、配置、管理

C 控制器/分发器

（核心）事件分发、模型分发、视图分发
不做数据处理、业务处理，即业务无关
扩展：权限控制、异常处理等
C是JSMVC框架的核心，实现集中式配置和管理，可以有多个控制器

工具库

主要是异步请求、DOM操作，可以依赖于jQuery等

来源：http://www.cnblogs.com/nuysoft/archive/2012/03/14/2395272.html

Model指的是一条一条的数据，而集合Collection指的是对Model中的多条数据进行管理。

模型 Model

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

对象赋值的方法

1、直接定义，设置默认值

 Trigkit = Backbone.Model.extend({
             initialize : function () {
                 alert("hi!");
             },
             defaults:{
                 age : "22",
                 profession : "coder"
             }
         });
        var coder = new Trigkit;
        alert(coder.get("age"));//22

2、赋值时定义

对象中的方法

当模型实例化时，他的initialize方法可以接受任意实例参数，其工作原理是backbone模型本身就是构造函数，所以可以使用new生成实例：

var User = Backbone.Model.extend({
    initialize: function (name) {
        this.set({name: name});
    }
});
var user = new User("trigkit4");
alert(user.get("name"), "trigkit4");//trigkit4

看下backbone的源码：

var Model = Backbone.Model = function(attributes, options) {
    var attrs = attributes || {};
    options || (options = {});
    this.cid = _.uniqueId("c");
    this.attributes = {};
    if (options.collection) this.collection = options.collection;
    if (options.parse) attrs = this.parse(attrs, options) || {};
    attrs = _.defaults({}, attrs, _.result(this, "defaults"));
    this.set(attrs, options);
    this.changed = {};
    this.initialize.apply(this, arguments);
  };

 initialize: function(){},//initialize是默认的空函数

Model 的事件绑定

为了能及时更新view，我们需要通过事件绑定机制来处理和响应用户事件：

关于事件绑定，有on，off,trigger，once，listenTo，stopListening，listenToOnce等方法，具体参照：http://documentcloud.github.io/backbone/#Events

集合 Collection

Backbone.Collection就是一个Model对象的有序集合。因为Model是一条数据记录，也就是说，Collection相当于是一个数据集。具有增加元素，删除元素，获取长度，排序，比较等一系列工具方法，说白了就是一个保存models的集合类。

collection.model覆盖此属性来指定集合中包含的模型类。可以传入原始属性对象（和数组）来 add, create,和 reset，传入的属性会被自动转换为适合的模型类型。

视图 View

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

view.$el:一个视图元素的缓存jQuery对象。 一个简单的引用，而不是重新包装的DOM元素。

一个简单的View：


    
    Document

elview.el所有的视图都拥有一个 DOM 元素（el 属性），即使该元素仍未插入页面中去。视图可以在任何时候渲染，然后一次性插入 DOM 中去，这样能尽量减少 reflows 和 repaints 从而获得高性能的 UI 渲染。 this.el 可以从视图的 tagName, className, id 和 attributes 创建，如果都未指定，el 会是一个空 div。 --官网

扩展方法 extend

模型、集合、视图、路由器都有一个extend方法，用于扩展原型属性和静态属性，创建自定义的模型、集合、视图、路由器类。

Backbone.Model.extend

Backbone.Model.extend(properties, [classProperties])

要创建自己的 Model 类，你可以扩展 Backbone.Model 并提供实例 properties(属性) ，以及可选的可以直接注册到构造函数的classProperties(类属性)。

Backbone.View.extend

Backbone.View.extend(properties, [classProperties])

开始创建自定义的视图类。通常我们需要重载 render 函数，声明 events，以及通过 tagName, className, 或 id 为视图指定根元素。 Backbone.View通过绑定视图的 render 函数到模型的 "change" 事件 — 模型数据会即时的显示在 UI 中。

Backbone.Collection.extend

Backbone.Collection.extend(properties, [classProperties])

通过扩展 Backbone.Collection 创建一个 Collection 类。实例属性参数 properties 以及类属性参数 classProperties 会被直接注册到集合的构造函数。

Backbone.Router.extend

Backbone.Router.extend(properties, [classProperties])

开始创建一个自定义的路由类。当匹配了 URL 片段便执行定义的动作，并可以通过 routes 定义路由动作键值对。

Router与controller

controller是Backbone 0.5以前的叫法，现在改名叫Router了。

Backbone.Router 为客户端路由提供了许多方法，并能连接到指定的动作（actions）和事件（events）。
页面加载期间，当应用已经创建了所有的路由，需要调用 Backbone.history.start()

查看下面示例：

在浏览器里打开页面后，在url的html后面依次加上：

#/index
#/task/1
#/test/xxxx

将分别弹出出：index, 1, test/xxxx

这就是Router的功能。

backbone github官网：http://documentcloud.github.io/backbone/

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

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

Backbone.js学习笔记（一）

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

FrancisSoung 2019-08-21 10:21 评论0 收藏0
Backbone.js学习笔记 Hello World!

摘要：使用和架构创建一个典型的项目。属性被赋值给传入的函数运行的结果。渲染，我们使用，这是一个对象，它指向的属性，使用函数使用的结果替换。最后，启动整体应用，为了保证完全加载，用包装器调用完整日常练习一些在对象初始化的时候执行的代码使用Backbone.js 和 MVC 架构创建一个典型的Hello world项目。虽然是杀鸡用牛刀了，毕竟是我第一次使用Backbone.js 依赖 ...

Hanks10100 2019-08-22 10:55 评论0 收藏0
Backbone.js学习笔记：图书案例-事件绑定

摘要：数据更新的时候，支持多事件和自定义事件。然后使用两个事件和的自定义事件。我们将使用别名函数。是为了模拟从服务器获取响应的时间。在它内部里面，使用和返回模型属性把选中的模型赋值给当前视图的模型。前言：我们继续使用上一次写的图书案例，在基础上面进行改进！事件绑定在我们浏览网页的时候，获取数据并不是一下只就全部获取到的，为了创建一个更好的用户体验，就来模拟一个加载（Spi...

caige 2019-08-21 10:26 评论0 收藏0
springboot学习（二）——springmvc配置使用

摘要：中添加拦截器配置如下拦截所有请求，也就是，只拦截开头的请求。在中并没有提供配置文件的方式来配置拦截器，因此需要使用的代码式配置，配置如下这个属性通常并不需要手动配置，高版本的会自动检测第四点讲下静态资源映射。以下内容，如有问题，烦请指出，谢谢上一篇讲解了springboot的helloworld部分，这一篇开始讲解如何使用springboot进行实际的应用开发，基本上寻着sprin...

hiyayiji 2019-08-16 10:54 评论0 收藏0
用Jasmine和Sinon测试Backbone应用 (译)

摘要：框架本身可以很好地支持自下而上的单元测试。在中，这些原因可以分为性能真实的操作，依靠定时行为及网络活动减慢了测试隔离单元测试应把重点放在小的一块功能成为可能，并解耦不可靠的或低依赖使用对象是拥抱和的基本组成部分。最近在慢慢深入Backbone，也试着写一些测试，找一些合适的文档来学习。于是就找到了一个系列的文章 : Testing Backbone applications with...

ralap 2019-05-29 16:19 评论0 收藏0