资讯专栏INFORMATION COLUMN

Backbone入门讲解

bingchen / 544人阅读

摘要:一种解决问题的通用方法,我们叫做模式。事件委托当这个视图后,页面上的就会绑定事件,只要点击,就会执行方法。同时,页面上的元素也会绑定事件。,套入模板后变成,最后添加到页面上。

Backbone是一个实现了web前端mvc模式的js框架。

一种解决问题的通用方法,我们叫做模式。

设计模式:工厂模式,适配器模式,观察者模式等,推荐js设计模式这本书。设计模式是一种思想。

框架模式:MVC,MVP,MVVM等。框架模式是开发项目的一种方案。

MVC指的是什么?M:model(模型),V:view(视图),C:controller(控制器)

MVC模式的思想,把模型和视图分离,通过控制器来连接它们。

这些模块是怎么实现mvc的呢?

Events模块是事件模块,其他模块都继承了Events模块,因此都有事件模块的功能。

Model就是模型,Collection是集合,它可以添加多个模型,叫做模型的集合。Model一般对应一条数据,而Collection一般对应多条数据。

View就是视图,但是这里的视图跟传统的不一样,View不仅包括视图显示还包括事件监听(这里可以称作controller),比如说:视图上会绑定事件回调函数。

model可以直接跟view关联操作,model传数据给view,view就显示这个数据。一个model最好对应一个view。Collection也可以直接跟view关联操作。

Router就是路由的意思。如果我们的项目是在一个页面上进行开发的,而不是通过跳转页面。这时,就不会出现历史管理,那如果要在一个页面上进行开发时,出现历史管理,那么就必须用hash值或者HTML5的history API。

Router的作用就是在一个页面上进行数据的对应。比如:数据从model传给Router,然后Router通过Hash值取到对应的数据,最后,Router把对应的数据生成到view中,达到一一对应的效果。Router操作hash值,必须通过history来管理。history的设计是这样的:如果支持HTML5,就使用history API,或者监听onhashchange事件。不支持的话,就使用一个定时器来轮询hash值的变化。

对model进行操作时,需要跟服务器进行交互,那么model与服务器进行交互的方法就是Sync,Sync使用的是ajax方法跟服务器进行交互。如果你的模型跟服务器交互使用的是ajax的话,那么就直接使用Sync方法就行了,如果不是,那么就需要重写Sync方法。

这里面所有的模块都有Controller的影子,但是Router模块是最明显的,因此有时,我们叫Router为Controller。

Backbone的使用需要依赖于其他的库:

underscore.js,此库里面有很多基本方法,可以帮Backbone的mode模块处理数据和集合,这样Backbone就不用写这些方法了。

jQuery或zepto,此库可以帮助view模块实现很多页面效果,同时它里面有很多DOM操作的方法,以及Ajax方法。

Backbone的基本使用:

直接创建对象

第一个例子

var model = new Backbone.Model();

model.set("name","hello");

model.get("name"); //hello

第二个例子

var model2 = new Backbone.Model({"name":"hello"});

var model3 = new Backbone.Model({"name":"hi"});

var models = new Backbone.Collection();

models.add(model2 );

models.add(model3 );

JSON.stringify(models); //[{"name":"hello"},{"name":"hi"}]

给构造函数添加实例方法和静态方法

第一个例子

var M = Backbone.Model.extend({ aaa:function(){} },{ bbb:function(){} }); //这里的aaa就是实例方法,bbb方法就是静态方法。

var model = new M();

model.aaa();

M.bbb();

第二个例子

var M = Backbone.Model.extend({ defaults:{name:"hello"} })

var model = new M();

model.get("name"); //"hello"

继承操作

var M = Backbone.Model.extend({ aaa:function(){alert(3)} });

var childM = M.extend(); //继承,M是父类,有aaa实例方法,childM是子类,继承M,所以也有了父类M的aaa方法

var model = new childM();

model.aaa(); //打印出3

自定义事件

第一个例子

var M = Backbone.Model.extend({

  defaults:{name:"hello"} ,

  initialize : function(){ //new M时,会执行这个初始化函数。

    this.on("change",function(){ //监听change事件

      alert(1);

    })

  }

})

var model = new M();

model.set("name","hi"); //改变模型的name值时,就会触发change事件,弹出1.其实这里只要改变模型,就会触发。

第二个例子

var M = Backbone.Model.extend({

  defaults:{name:"hello"} ,

  initialize : function(){ //new M时,会执行这个初始化函数。

    this.on("change:name",function(model){ //监听change事件

      //回调方法中的参数就是model对象。

    })

  }

})

var model = new M();

model.set("name","hi"); //改变模型的name值时,就会触发change事件,弹出1.改变模型的其他数据,这里就不会触发。

第三个例子

var M = Backbone.Model.extend({

  defaults:{name:"hello"}  

});

var V = Backbone.View.extend({

  initialize:function(){ //new V时,会跟这个视图的model绑定change事件,回调方法是视图的show方法

    this.listenTo(this.model, "change", this.show); //listenTo方法跟on一样是绑定事件的,但是listenTo可以设置this的指向,它多一个参数。它的意思就是:给this.model绑定change事件。

  },

  show:funtion(model){

    alert(model.get("name"));

  }

});

var m= new M();

var v = new V({model:m});

m.set("name","hi"); //改变模型的name值时,就会触发change事件,在视图中弹出模型设置的name值。

数据与服务器的操作

第一个例子

Backbone.sync = function(method , model){

  alert(method);

  model.id = 1;  //服务器通过model的id属性来识别模型的唯一性

  //method的值有五种:1. create(post请求)。2.update(put请求)。3.delete(delete请求)。4.read(get请求)5.patch(patch请求)。在这个例子中,当第一次调用sava方法时,是post请求,在服务器上创建name:"hello"。当第二次调用sava({name:"hi"})方法时,是put请求,因为服务器上这时已经有name值了,现在是更新服务器上的name值为"hi"。

}

var M = Backbone.Model.extend({

  defaults:{name:"hello"},

  url : "/user"

});

var m = new M();

m.save(); //保存model的数据,把数据同步到服务器上,调用的是Backbone.sync方法(默认使用ajax请求,如果引入了jQuery,就会使用jQuery的ajax)。我们只要在model中设置url属性就行了,这样程序才知道把数据同步到哪个服务器上,其实就是同步到这个url上。当然你可以重写Backbone.sync方法,来改变使用ajax方式同步服务器的操作。

m.save({name:"hi"});

第二个例子

Backbone.sync = function(method , model){

  alert(method); //当调用fetch方法时,也会执行sync方法,这时的method就是read(get请求),从服务器获取数据。

}

var C = Backbone.Collection.extend({

  initialize:function(){

    this.on("reset",function(){ //数据获取成功后,就会触发这个reset事件

      alert(1);

    })

  },

  url : "/users"

});

var models = new C();

models.fetch(); //从服务器/users路径获取数据

路由与历史管理

var route = Backbone.Router.extend({

  routes:{

    "help":"help",

    "search/:query":"search", //:代表这个字符是变量,意思就是query是一个变量,假设query=chaojidan,那么这里的"search/chaojidan"对应search函数。

    "search/:query/p:page": "search"

  },

  help:function(){

    alert(1);

  },

  search:function(query,page){

    alert(2);

  }

});

var w = new route();

Backbone.history.start(); //必须执行这个代码,路由才能正常使用。这时,历史管理也实现了。移动端开发很适合这种单页操作,不用页面的跳转,只要改变hash值就能进行功能的实现。

事件委托

var V = Backbone.View.extend({

  el:$("body"),

  events :{

    "click input": "aaa",

    "mouseover li" : "bbb"

  },

  aaa:function(){

    alert(1);

  },

  bbb:function(){

    alert(2);

  }

});

var view = new V; //当new这个视图后,页面上的input就会绑定click事件,只要点击input,就会执行aaa方法。同时,页面上的li元素也会绑定mouseover事件。视图的el指向的是页面的body元素,是el指向的元素就是此视图的根元素,事件的绑定会从这个根元素上开始查找元素。

前端模板

var M = Backbone.Model.extend({

  defaults:{name:"hello"}  

});

var V = Backbone.View.extend({

  initialize:function(){

    this.listenTo(this.model, "change", this.show); //给this.model绑定change事件,事件响应函数是this.show,this.show方法中的this指向是this(view),而不是this.model(model),这就是listerTo方法跟on的不同。

  },

  show:funtion(model){

    $("body").append( this.template( this.model.toJSON() ) ); //this.model.toJSON() = {name:hi},套入模板后变成

hi
,最后添加到页面上。这里做到了html和js的分离。html用模板来实现。

  },

  template:_.template($("#template").html());

});

var m= new M();

var v = new V({model:m});

m.set("name","hi");

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98246.html

相关文章

  • Backbone 源码解读(一)

    1. 开场 1.1 MVC? MVC是一种GUI软件的一种架构模式。它的目的是将软件的数据层(Model)和视图(view)分开。Model连接数据库,实现数据的交互。用户不能直接和数据打交道,而是需要通过操作视图,然后通过controller对事件作出响应,最后才得以改变数据。最后数据改变,通过观察者模式更新view。(所以在这里需要用到设计模式中的观察者模式) 1.2 Smalltalk-80...

    Kosmos 评论0 收藏0
  • Backbone源码解读(三)

    摘要:事件关于路由触发事件是通过两个函数来完成的,它们分别是和前者会检测路由是否发生了改变,如果改变了就会触发函数并调用函数,而后者会通过路由片段来找到相关的事件函数来触发。 注意:强烈建议一边阅读源码一边阅读本文。 终于到了backbone源码解读的最后一篇,这一篇和前面几篇时间上有一定的间隔(因为要回学校有一堆乱七八糟的事...)。在这一篇里面会讲解Bakcbone的sync & rou...

    feng409 评论0 收藏0
  • backbone源码解读

    摘要:个人认为,读懂老牌框架的源代码比会用流行框架的要有用的多。另外,源代码中所有的以开头的方法,可以认为是私有方法,是没有必要直接使用的,也不建议用户覆盖。 写在前面 backbone是我两年多前入门前端的时候接触到的第一个框架,当初被backbone的强大功能所吸引(当然的确比裸写js要好得多),虽然现在backbone并不算最主流的前端框架了,但是,它里面大量设计模式的灵活运用,以及令...

    Kross 评论0 收藏0
  • backbone源码解读

    摘要:个人认为,读懂老牌框架的源代码比会用流行框架的要有用的多。另外,源代码中所有的以开头的方法,可以认为是私有方法,是没有必要直接使用的,也不建议用户覆盖。 写在前面 backbone是我两年多前入门前端的时候接触到的第一个框架,当初被backbone的强大功能所吸引(当然的确比裸写js要好得多),虽然现在backbone并不算最主流的前端框架了,但是,它里面大量设计模式的灵活运用,以及令...

    wangxinarhat 评论0 收藏0
  • 使用 Backbone.Marionette 管理复杂 UI 交互

    摘要:所以大量的问题都留给开发者自己想办法来解决,因此遭到吐槽当然,使用纯开发一个复杂应用时,情况就会变得非常糟糕。管理复杂的交互自己维护。影响了集合的排列。在中调用这样做是不对的,因为会让应用越来越复杂的。 只扯蛋,不给代码,就是耍流氓 -- honger。 完整的 tutorial 代码 戳这里, 因为我使用的是 commonjs 规范,基于 spm 的,你可以先安装,然后运行它。更多 ...

    Loong_T 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<