专栏首页web前端backbone 整体架构学习

backbone 整体架构学习

一、是什么

    构建前端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、模板语法:

        <script type="text/template" id="template">    ......    </script>

        <%= 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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • backbone 整体架构学习

    一、是什么     构建前端MVC(Model,View,Collection)模型的框架,其中Model是数据模型,Collection是数据模型的集合,Vi...

    用户1148399
  • Vuejs --02 Vue实例

    一、构造器      1、vm(view model 表示Vue实例),每个Vuejs都是通过构造函数Vue创建Vue的根实例启动 var vm = new V...

    用户1148399
  • JavaScript基础学习--08 JS作用域

    Demos:   https://github.com/jiangheyan/JavaScriptBase 一、浏览器      1、“JS解析器”(至少分为两...

    用户1148399
  • backbone 整体架构学习

    一、是什么     构建前端MVC(Model,View,Collection)模型的框架,其中Model是数据模型,Collection是数据模型的集合,Vi...

    用户1148399
  • 《哈佛商业评论》:人工智能商业之路的机遇和挑战

    250多年来,经济增长的根本动力一直是技术创新。其中最重要的是经济学家所谓的通用技术——包括蒸汽机、电力和内燃机。每一个都催化了互补创新和机遇的浪潮。例如,内燃...

    钱塘数据
  • 原创译文 | 社会对于机器学习最大的误解是什么?

    导读:上一期了解一下人工智能时代,五大最具潜力的职业,今天我们来学习一下机器学习和数据科学的应用,对于企业的重要性,以及作者对于机器学习和数据科学的未来思考(文...

    灯塔大数据
  • 重磅:2019上半年云安全趋势报告发布(附下载链接)

    腾讯安全与互联网安全新媒体FreeBuf联合出品《2019年上半年云安全趋势报告》。同时,报告基于腾讯安全对于国内云安全状况的分析,给出了可行的安全建议。 2...

    云鼎实验室
  • js 函数作用域与this 的指向实例 原

    函数的定义分为2种,(1)直接定义-window 下,内部定义;(2)对象的方法(或对象原型的方法),下面的函数fn1与fn2 是直接定义的函数, doFun...

    tianyawhl
  • 来自Google的经验:以用户为中心的机器学习七大技巧

    用户1737318
  • 常见的机器学习9个误区

    机器学习已经被证明是很有用的,但也容易被假设可以解决所有问题、适用于所有情况。和其他工具一样,机器学习在特定领域很有用处,特别是那些你一直都知道有、但永远无法雇...

    机器人网

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动