backbone 整体架构学习

用户1148399

发布于 2018-07-31 14:28:33

6980

发布于 2018-07-31 14:28:33

文章被收录于专栏：web前端

一、是什么

构建前端MVC（Model，View，Collection）模型的框架，其中Model是数据模型，Collection是数据模型的集合，View是视图

二、依赖

backbone依赖underscorejs（主要集成了一些数据model的处理方法），项目需要时，也可以加上jQuery，因为backbone的数据处理默认是ajax，而jQuery封装了强大的DOM操作和ajax

三、模型的创建、实例化和继承

var model1 = new Backbone.Model();
model1.set('name', 'Hello');
alert model1.get('name');
 
var model2 = new Backbone.Model({'name':'hi'});
var models = new Backbone.Collection();
models.add( model1 );
models.add( model2 );
 
 =========================================================================
var M = Backbone.Model.extend({
    aaa: function() {                                                        // 第一个参数：实例方法
        alert( 123 );
    }
},{
    bbb: function() {                                                    // 第二个参数：静态方法
        alert( 456 );        
    }
});
var model = new M;
model.aaa();                        // 123
M.bbb();                            // 456
 
 =========================================================================================================
var M = Backbone.Model.extend({
   defaults: {
      name: 'hello'
   }
});
var model = new M;
alert( model.get('name') );        // hello
 
========================================================================================================== 
var M = Backbone.Model({
   aaa: function() {              // 实例方法
      alert( 123 );
   }
});
var ChildM = M.extend();
var model = new ChildM;
model.aaa();                    //123

四、自定义事件

var M = Backbone.Model.extend({
   default: {
      name: 'hello'
   },
   initialize: function() {                          // 初始化构造函数
      
      this.on('change', function() {                // 模型中数据发生改变时，触发
          alert( 123 );
      });
       
      this.on('change: name', function(model) {    // 模型中指定数据发生改变时，触发
          console.log( model );                    // 具体该模型的内容
      });
   }
});
var model = new M;
model.set('name', 'hi');                            // 触发change事件
 
 =======================================================================================

var V = Backbone.View.extend({
   initialize: function() {
      
      this.listenTo( this.model, 'change', this.show );            // 监听事件，当模型中的数据发生改变（change）时，触发 this.show 事件
   },
   show: function(model) {
      $('body').append( '<div>' + model.get('name') + '</div>' );
   }
});
var m = new M;
var v = new V({model:m});                // 将视图和模型绑定在一起
m.set('name':'hi');

五、数据与服务器

//    前端将数据保存在服务器中    
var M = Backbone.Model.extend({
   defaults: {
      name: 'hello';
   },
   url: '/users'    //同步到服务器的地址
});
var m = new M;
m.save();        // save 方法 将模型中的数据同步保存在数据库中（backbone源代码中默认指定ajax方式，将数据提交同步到服务器，ajax的URL即model中的URL字段）
Backbone.sync = function(method, model) {
   alert( method + ':' + JSON.stringify(model) );
   model.id = 1;
}
m.save({name: 'hi'});
 
======================================================================== 
// 服务器中更新数据
var C = new Backbone.Collection({
   initialize: function() {
      this.on('reset', function() {    // 一旦触发 fetch 数据，即从服务器中获取到值，就会触发 reset 事件
          alert( 123 );
      });
   },
   url: '/users'
});
var models = new C;
models.fetch();            // fetch 获取到服务器中的数据

六、路由与历史管理

问：什么时候需要路由？

答：页面不是一个个链接连成，而是单页面开发，此时需要路由进行页面管理（在同一个HTML页面通过(#xxx) 如： http://xx.xx.xxx.html#xxx/xxx，跳转执行不同代码）。而路由又涉及到历史管理（因为跳转到不同代码块《或者说是页面》之后，用户会往往会通过页面的 ‘返回’ 按钮进行操作，此时需要启动路由的历史管理，从而让历史管理知道返回页面的具体执行代码块《或者说是页面》）。其中，路由中有许多hash值，指定了各个触发参数

var Workspace = Backbone.Router.extend({
   
   routes: {
      "help": "help",                       // #help
      "search/:query": "search",            // #search/wikis
      "search/:query/p:page": "search"      // #search/wikis/p7
   },
   help: function() {
      alert( 123 ); 
   },
   search: function(query, page) {
      alert( 456 );
   }
});
var w = new Workspace;
Backbone.history.start();    // 启动路由的历史管理
 
// 此时，页面中输入 xx.xx.demo.html#help ， 会执行 123

七、事件委托注意：backbone中的视图加载都是通过事件委托完成

var V = Backbone.View.entend({
   el: $('body'),               // 指定委托元素
   events: {
      'click input': 'aaa',    // click 事件，由input触发
      'mouseover li': 'bbb'    //mouseover 事件，由li触发
   },
   aaa: function() {
      alert( 123 );
   },
   bbb: function() {
      alert( 456 );
   }
});
var v = new V;
<body>
   <input type="button" value="button"/>
   <ul>
      <li>11111</li>
      <li>22222222</li>
      <li>33333333</li>
   </ul>
</body>

八、前端模板注意：前端模板不是为了改善性能，是为了js和视图分离，做到分离开发

1、模板语法：

<%= name %>

<% js代码 %>

<%- 包含js特殊转义字符 %>

2、案例

//将 四、自定义事件 作为例子
var V = Backbone.View.extend({
   initialize: function() {
      
      this.listenTo( this.model, 'change', this.show );            // 监听事件，当模型中的数据发生改变（change）时，触发 this.show 事件
   },
   show: function(model) {
      $('body').append( this.template(this.model.toJSON()) );
   },
   template: _.template($('#template').html());
});
var m = new M;
var v = new V({model:m});                // 将视图和模型绑定在一起
m.set('name':'hi');
 
========================================================================= 
<script type="text/template">
   <% for(var i = 0; i < 5; i++){ %>
        <div><%= name %></div>
   <%  } %>
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-10-30 ，如有侵权请联系 cloudcommunity@tencent.com 删除

mvc