专栏首页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 条评论
登录 后参与评论

相关文章

  • 前端MVC Vue2学习总结(一)——MVC与vue2概要、模板、数据绑定与综合示例

     一、前端MVC概要 1.1、库与框架的区别 ? 框架是一个软件的半成品,在全局范围内给了大的约束。库是工具,在单点上给我们提供功能。框架是依赖库的。Vue是框...

    张果
  • Spring MVC 学习总结(九)——Spring MVC实现RESTful与JSON(Spring MVC为前端提供服务)

     很多时候前端都需要调用后台服务实现交互功能,常见的数据交换格式多是JSON或XML,这里主要讲解Spring MVC为前端提供JSON格式的数据并实现与前台交...

    张果
  • 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

    一、前端MVC概要 1.1、库与框架的区别 ? 框架是一个软件的半成品,在全局范围内给了大的约束。库是工具,在单点上给我们提供功能。框架是依赖库的。Angula...

    张果
  • 前端MVC学习总结(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap。 示例名称:天狗...

    张果
  • IDEA上面搭建一个SpringBoot的web-mvc项目

    这几天一直在研究IDEA上面怎么搭建一个web-mvc的SpringBoot项目,看网上的教程一步步的搭建,可是还是出现一堆的问题。 为了让大家以后少走一些弯路...

    用户1149268
  • Spring MVC中常用注解之RequestMapping详解

    SpringMVC和Struts2最大区别可能就是注解的使用。因为SpringMVC中可以实现在类这个层面上面配置信息,也可以在方法层面上面配置信息,既灵活又方...

    用户1149268
  • 基于web的IT技术论坛

    一.基于web的IT技术论坛设计目的及任务 利用当下流行的SSM(Spring,SpringMVC,Mybatis)框架,并运用maven进行项目管理,实现基...

    用户1149268
  • cmake: 使用jom实现msvc工程并发编译提高速度(-j)

    msvc提供的nmake并没有并发编译功能(类似gcc make的-j参数指定并发编译的任务数), 而第三方工具jom(http://wiki.qt.io/...

    用户1148648
  • 前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite

    一、服务 AngularJS功能最基本的组件之一是服务(Service)。服务为你的应用提供基于任务的功能。服务可以被视为重复使用的执行一个或多个相关任务的代码...

    张果
  • 前端MVC学习总结(二)——AngularJS验证、过滤器、指令

    一、验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="tex...

    张果

扫码关注云+社区

领取腾讯云代金券