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>

 

 
 
 
 
 
 
posted @ 2017-10-30 15:00  HelenJ  阅读(430)  评论(0编辑  收藏  举报