Backbone.js进修笔记（二）细说MVC

2019年8月26日 249次阅读来源: trigkit4

关于初学backbone.js的同砚能够先参考我这篇文章：Backbone.js进修笔记（一）

Backbone源码组织

《Backbone.js进修笔记（二）细说MVC》

   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、赋值时定义

<script type="text/javascript">
     Trigkit = Backbone.Model.extend({
         initialize : function () {
             alert('hi!');
         }
     });
     var t = new Trigkit;
     t.set({name :'huang',age : '10'});
     alert(t.get('name'));
</script>

对象中的要领

<script type="text/javascript" src="Underscore.js"></script>
<script type="text/javascript" src="backbone-1.1.2.js"></script>
<script type="text/javascript">
        var Trigkit4 = Backbone.Model.extend({
            initialize : function () {
                alert("hello world!");
            },
            defaults : {
                name : 'zhangsan',
                age : 21
            },
            aboutMe: function () {
                return '我叫' + this.get('name') + ',本年' + this.get('age') + '岁';
            }
        });
        var t = new Trigkit4;
        alert(t.aboutMe());
    </script>

当模子实例化时，他的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，我们须要经由过程事宜绑定机制来处置惩罚和响运用户事宜：

    <script type="text/javascript">
        var Task = Backbone.Model.extend({
            initialize: function () {
                this.on("change:name", function (model) {
                    alert("my name is : " + model.get("name"));
                });
            }
        });

        var task = new Task({ name:"oldname", state:"working"});
        task.set({name:"trigkit"});
//        object.on(event, callback, [context])
    </script>
</head>

关于事宜绑定，有on，off,trigger，once，listenTo，stopListening，listenToOnce等要领，详细参照：http://documentcloud.github.io/backbone/#Events

《Backbone.js进修笔记（二）细说MVC》

鸠合 Collection

Backbone.Collection就是一个Model对象的有序鸠合。由于Model是一条数据纪录，也就是说，Collection相称因而一个数据集。具有增添元素，删除元素，猎取长度，排序，比较等一系列东西要领，说白了就是一个保留models的鸠合类。

<script type="text/javascript">
    var Book = Backbone.Model.extend({
        defaults : {
            title:'default'
        },

        initialize: function(){

             alert('hello backbone!');//弹出3次
        }
    });

    BookShelf = Backbone.Collection.extend({

        model : Book

    });

    var book1 = new Book({title : 'book1'});

    var book2 = new Book({title : 'book2'});

    var book3 = new Book({title : 'book3'});

    //var bookShelf = new BookShelf([book1, book2, book3]); //注重这内里是数组,或许运用add

    var bookShelf = new BookShelf;

    bookShelf.add(book1);
    bookShelf.add(book2);
    bookShelf.add(book3);
    bookShelf.remove(book3);

    //基于underscore这个js库，还能够运用each的要领猎取collection中的数据
    bookShelf.each(function(book){

        alert(book.get('title'));

    });
</script>

collection.model掩盖此属性来指定鸠合中包括的模子类。能够传入原始属性对象（和数组）来 add, create,和 reset，传入的属性会被自动转换为合适的模子范例。
《Backbone.js进修笔记（二）细说MVC》

视图 View

Backbone.View中能够绑定dom元素和客户端事宜。页面中的html就是经由过程views的render要领衬着出来的，当新建一个view的时刻经由过程要传进一个model作为数据

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

一个简朴的View：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="Underscore.js"></script>
    <script type="text/javascript" src="backbone-1.1.2.js"></script>
    <script type="text/javascript">

            var TestView = Backbone.View.extend({ //建立一个view，实在就是一个HTML的DOM节点
                initialize: function() {
                    this.render();
                },
                render: function() {  // 衬着要领
                    this.$el.html('Hello World');  //this.el就是HTML节点，经由过程jQuery的html要领添补内容
                    return this;
                }
            });

            $(function () {
                var test = new TestView({el: $('#body')});// 以目的节点为el参数，建立一个view的实例，render函数将会被自动挪用并将衬着效果添补到el中
                //test.render(); // 假如没在 initialize 里挪用 render 的话，就须要在这里挪用一次
            });
    </script>
</head>
<body>
<div id="body"></div>
</body>

elview.el一切的视图都具有一个 DOM 元素（el 属性），纵然该元素仍未插进去页面中去。视图能够在任何时刻衬着，然后一次性插进去 DOM 中去，如许能只管削减 reflows 和 repaints 从而取得高性能的 UI 衬着。 this.el 能够从视图的 tagName, className, id 和 attributes 建立，假如都未指定，el 会是一个空 div。 –官网

《Backbone.js进修笔记（二）细说MVC》

扩大要领 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()

检察下面示例：

<script type="text/javascript">
        var AppRouter = Backbone.Router.extend({
            routes: {
                "index" : "index",
                "task/:id": "task",
                "*acts": "tasklist"
            },
            index: function() {
                alert("index");
            },
            tasklist: function(action) {
                alert(action);
            },
            task: function(id) {
                alert(id);
            }
        });

        var app = new AppRouter;
        Backbone.history.start();
    </script>

在浏览器里翻开页面后，在url的html背面顺次加上：

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

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

这就是Router的功用。

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

    原文作者：trigkit4
    原文地址: https://segmentfault.com/a/1190000002666658
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。