>

js框架的MVC结构设计理念

- 编辑:正版管家婆马报彩图 -

js框架的MVC结构设计理念

什么是Backbone.js? Backbone.js是十大JS框架之首,Backbone.js 是一个分量级js  MVC 应用框架,也是js MVC框架的高祖。它经过Models数据模型举办键值绑定及custom事件管理,通过模型集结器Collections提供一套丰裕的API用于枚举功用,通过视图Views来扩充事件管理及与存活的Application通过JSON接口进行互动。

讲明JavaScript的Backbone.js框架的MVC结构划设想计观念,backbone.jsmvc

什么是Backbone.js? Backbone.js是十大JS框架之首,Backbone.js 是一个重量级js  MVC 应用框架,也是js MVC框架的圣上。它经过Models数据模型进行键值绑定及custom事件管理,通过模型群集器Collections提供一套丰盛的API用于枚举功效,通过视图Views来展开事件管理及与存活的Application通过JSON接口进行交互。

简单来说,Backbone是落到实处了web前端MVC形式的js库

什么是MVC? MVC:后端服务器首先(进程1)通过浏览器获取页面地址,对网址进行深入分析,获得视图View给它的八个网站,然后经过调节器controller举行解析,然后去找对应的多少(进程2),找到数据后,再将数据Model再次来到给调整器(进度3),调控器controller再对数码开展加工,最终回到给视图(进程4),即更新视图View。这种组织在后端是非常明晰且易达成的

图片 1

Backbone中MVC的机制 Backbone将数据表现为模型, 你能够成立模型、对模型举办求证和销毁,乃至将它保存到服务器。 当UI的浮动引起模型属性退换时,模型会接触"change"事件; 全部彰显模型数据的视图会接收到该事件的打点,继而视图重新渲染。 你无需寻觅DOM来搜寻钦命id的要素去手动更新HTML。 — 当模型改动了,视图便会自动生成。———百度百科

形式:一种缓和难题的通用方法

 —设计模式:工厂方式、适配器格局和观看者格局
 —框架形式:MVC、MVP、MVVM
调控器:通过调控器来连接视图与模型。

MVC方式的思辨:

不怕把模型与视图分离,通过调控器来接二连三他们
服务器端MVC形式非常轻便达成
Model:模型即数据,模型 是全体 js 应用程序的主题,包罗相互数据及有关的恢宏逻辑: 调换、验证、总结属性和访问调节。你能够用特定的措施扩大 Backbone.Model

View:即你在页面上所能看到的视图。每八个单纯的数据模型对应贰个视图View

web页面自个儿便是贰个比很大的view,不太轻松做到作别操作,backbone.js适合复杂的重型开荒,并为我们化解了这么些难点

backbone的模块 backbone有如下多少个模块:

  • 伊夫nts:事件驱动模块
  • Model:数据模型
  • Collection:模型集合器
  • Router:路由器(对应hash值)
  • History:开启历史管理
  • Sync:同步服务器方式
  • View:视图(含事件表现和渲染页面 相关措施)

集合器Collection是对独立的数据模型进行统一支配

直接成立对象 Backbone注重于Underscore.js, DOM 管理依赖于 Backbone.View 和 jQuery ,由此,在引进Backbone.js在此之前,Underscore.js必须在它前面引进,而jQuery也最佳一并引进,最后再引进Backbone.js

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src = "jquery-2.0.3.min.js"></script>
  <script src = "underscore-min.js"></script>
  <script src = "backbone.js"></script>

</head>
<body>
  var model = new Backbone.Model();
  var col = new Backbone.Collection();
  var view = new Backbone.View();
</body>

new前面是三个构造函数,而Backbone是作为构造函数的命名空间来利用的

Model模块

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

Backbone通过extend来扩张实例方法和静态方法:

<script type="text/javascript">
  //extend接收的第一个参数是json格式的字符串,用来扩展实例方法
  //第二个参数也是json格式的字符串,用来扩展静态方法
  var M = Backbone.Model.extend({
    abc : function(){  //实例方法
      alert("hello backbone");
    }
  },{
    def : function(){ //静态方法
      alert("hi");
    }
  });

  var model = new M;
  model.abc();//实例方法要用实例对象来访问
  M.def();//静态方法直接挂载到了构造函数上,可以通过构造函数来直接访问
</script>

静态方法其实正是多了三个命名空间。以上是给构造函数加多实例方法和静态方法

 var M = Backbone.Model.extend({})

通过extend来为模型的构造函数扩展方法,M便是扩大之后的构造函数

继承

<script type="text/javascript">
  //继承
  var Mod = backbone.Model.extend({
    abc : function(){
      alert(123);
    }
  });

  var ChildMod = Mod.extend();

  var model = new ChildMod;
  model.abc();//子类继承了父类的方法
</script>

Backbone源码结构

图片 2

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等

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等措施,具体参照:

图片 3

集合 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,传入的属性会被机关转变为顺应的模型类型。

图片 4

视图 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。 --官方网址

图片 5

推而广之方法 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])

开始创制一个自定义的路由类。当相称了 U牧马人L 片段便试行定义的动作,并能够通过 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是达成了web前端MVC格局的js库

您也许感兴趣的稿子:

  • 轻巧驾驭Backbone.js的Model模型以及View视图的源码
  • Backbone.js框架中轻松的View视图编写学习笔记
  • 深切分析JavaScript框架Backbone.js中的事件机制
  • 轻量级javascript 框架Backbone使用指南
  • Backbone.js的一部分运用本事
  • Backbone.js 0.9.2 源码注释汉译版
  • Backbone.js的Hello World程序实例
  • Backbone.js中的集结详解
  • Javascript MVC框架Backbone.js详解
  • JavaScript的Backbone.js框架的一部分施用提出整理

什么是Backbone.js? Backbone.js是十大JS框架之首,Backbone.js 是多少个分量级js MVC 应用...

什么是MVC? MVC:后端服务器首先(进程1)通过浏览器获取页面地址,对网站实行分析,得到视图View给它的三个网站,然后通过调节器controller举办分析,然后去找对应的多寡(进度2),找到数据后,再将数据Model再次回到给调整器(进度3),调控器controller再对数据开展加工,最终回来给视图(进程4),即更新视图View。这种结构在后端是充裕鲜明且易达成的

图片 6

Backbone中MVC的机制 Backbone将数据表现为模型, 你能够创立模型、对模型举行验证和销毁,以致将它保存到服务器。 当UI的转换引起模型属性改动时,模型会接触"change"事件; 全数呈现模型数据的视图会接收到该事件的通报,继而视图重新渲染。 你不要求寻觅DOM来研究钦点id的成分去手动更新HTML。 — 当模型更换了,视图便会自动生成。———百度健全

形式:一种减轻难题的通用方法

 —设计格局:工厂形式、适配器情势和观看者格局
 —框架格局:MVC、MVP、MVVM
调节器:通过调整器来三番五次视图与模型。

MVC形式的钻探:

纵使把模型与视图分离,通过调节器来连接他们
服务器端MVC形式特别轻松实现
Model:模型即数据,模型 是全数 js 应用程序的基本,包含相互数据及有关的汪洋逻辑: 调换、验证、计算属性和访谈调节。你能够用特定的不二等秘书籍扩展 Backbone.Model

View:即你在页面上所能看到的视图。每三个单一的数据模型对应八个视图View

web页面自己正是四个比极大的view,不太轻易产生作别操作,backbone.js适合复杂的特大型开采,并为我们缓慢解决了这一个难点

backbone的模块 backbone有如下几个模块:

  • Events:事件驱动模块
  • Model:数据模型
  • Collection:模型集结器
  • Router:路由器(对应hash值)
  • History:开启历史处理
  • Sync:同步服务器方式
  • View:视图(含事件表现和渲染页面 相关办法)

集合器Collection是对单独的数据模型举办合併支配

直白成立对象 Backbone正视于Underscore.js, DOM 管理注重于 Backbone.View 和 jQuery ,由此,在引进Backbone.js此前,Underscore.js必需在它前边引进,而jQuery也最棒一并引进,最终再引进Backbone.js

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src = "jquery-2.0.3.min.js"></script>
  <script src = "underscore-min.js"></script>
  <script src = "backbone.js"></script>

</head>
<body>
  var model = new Backbone.Model();
  var col = new Backbone.Collection();
  var view = new Backbone.View();
</body>

new后边是三个构造函数,而Backbone是当做构造函数的命名空间来使用的

Model模块

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

Backbone通过extend来增添实例方法和静态方法:

<script type="text/javascript">
  //extend接收的第一个参数是json格式的字符串,用来扩展实例方法
  //第二个参数也是json格式的字符串,用来扩展静态方法
  var M = Backbone.Model.extend({
    abc : function(){  //实例方法
      alert("hello backbone");
    }
  },{
    def : function(){ //静态方法
      alert("hi");
    }
  });

  var model = new M;
  model.abc();//实例方法要用实例对象来访问
  M.def();//静态方法直接挂载到了构造函数上,可以通过构造函数来直接访问
</script>

静态方法其实就是多了一个命名空间。以上是给构造函数增多实例方法和静态方法

 var M = Backbone.Model.extend({})

通过extend来为模型的构造函数扩张方法,M便是扩展之后的构造函数

继承

<script type="text/javascript">
  //继承
  var Mod = backbone.Model.extend({
    abc : function(){
      alert(123);
    }
  });

  var ChildMod = Mod.extend();

  var model = new ChildMod;
  model.abc();//子类继承了父类的方法
</script>

Backbone源码结构

图片 7

1:  (function() {

   2:      Backbone.伊夫nts        // 自定义事件

   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等

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等方法,具体参照:

图片 8

集合 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,传入的习性会被活动转变为顺应的模型类型。

图片 9

视图 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。 --官方网站

图片 10

扩展方法 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])

始发创办三个自定义的路由类。当相配了 ULX570L 片段便试行定义的动作,并可以透过 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的功能。

您也许感兴趣的文章:

  • Extjs4.1.x 框架搭建 接纳Application动态按需加载MVC各模块完美兑现
  • Javascript MVC框架Backbone.js详解
  • 前面贰个轻量级MVC框架CanJS详解
  • 极品轻松达成JavaScript MVC 样式框架
  • 12种JavaScript常用的MVC框架比较剖判
  • 利用jQuery.form.js/springmvc框架落成公文上传作用
  • Angularjs中的事件广播 —全面剖判$broadcast,$emit,$on
  • AngularJs化解跨域难题案例详解(轻松方法)
  • jquery.form.js框架实现公文上传效用案例深入分析(springmvc)
  • indexedDB bootstrap angularjs之 MVC DOMO (应用示范)
  • AngularJs Javascript MVC 框架

本文由计算机操作发布,转载请注明来源:js框架的MVC结构设计理念