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>
原创博客,欢迎讨论,转载请注明出处、链接