【原创】backbone1.1.0源码解析之View.docVIP

囧，文章昨儿就发布了，结果移出了首页。 好吧，我再详细说一下吧～～ ? 作为MVC框架，M(odel) ?V(iew) ?C(ontroler)之间的联系是必不可少的，今天要说的就是View（视图） 通常我们在写逻辑代码也好或者是在ui组件也好，都需要跟dom打交道，我们好讨厌在逻辑代码里面参杂dom的代码，特别是需要生产dom的代码， 因为这样的缺点： 1. 耦合，难于维护（虽然模版引擎能解决一些问题，但是事件的添加呢？） 2. 代码无法做到美观，节俭，感觉和dom参杂在一起就是一个字，乱！！ ? 介于这样的缺点，Backbone提供了一个View类，用于构造对象，它可以做到一下几点： 1. 帮你创建dom，你只要负责去渲染这个dom就行了（我们用模板引擎就行dom的渲染就很合理） 2. 帮你为dom添加（代理）事件，所以无需自己去手动绑定事件啦，而只需要提供events的参数。 ? 这样下来，上面的两个缺点基本都解决了～～ ? View(视图) 视图对象用来封装前端的dom元素，也就是说跟dom元素关联在一起，视图的改变即是对应dom元素的改变。 因此我们在创建视图类或者在构造视图对象的时候，我们需要传递dom元素，我们可以这样： 1. 构造视图对象时，传递el参数，可以是jquery对象，也可以是dom对象（前提是该dom元素在页面里面已存在） ? 1 2 3 var bookView = new Backbone.View({ ????el : $(#id)??? // jquery对象，或dom对象 }); ?而接下来我们要做的就只是往这个dom元素里添加内容了，像这样： ? 1 2 3 4 5 6 7 initialize : function () { ?????? ????var tpl =xxx; ????var data = {...}; ?? ????this.$el.html(_.template(tpl, data)); } 这里我们更建议你去使用_.template这样的的模板函数就渲染dom，会显得代码更节俭，美观 ? 2. 创建视图类时，传递tagName（默认是div），让View来帮你创建dom元素 ? 1 2 3 4 5 6 7 8 9 10 11 var BookView = Backbone.View.extend({ ?? ????tagName : span }); var bookView = new BookView({ ????attributes : { ????????title : xxx? // span的标签的属性 ????}, ?? ????id : demo }); 记住最后render时要将这个元素append到页面里面去，因为这里的dom元素是通过tagName，Backbone在内部创建的，并未添加到文档流中去。 ? 说到dom元素，当然就有事件，向click，hover等事件是必不可少的，有了事件才有了交互，有了交互才会有数据（model）的变化才会有dom（view）的更新。 所以接下来要说一下如何给已有dom添加事件 1. 在创建视图类的时候，可以通过events参数添加事件，像这样： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var BookView = Backbone.View.extend({ ?? ????tagName : span， ?? ????events : { ?? ????????mouseenter : function () {...},? // 事件，某一函数（this对象指向view实例） ?? ????????click a.item : say? // 事件代理,为class为item的a标签代理，调用view对象的say方法 ?? ????}, ?? ????say : function () { ????????console.log(this); ????} }); ? 注意： ? ? ?（1）Backbone的事件都是添加在视图关联的那个dom元素（el）上，那么该元素就有可能成为其子元素的事件代理元素（冒泡原理） ? ? ?（2）事件的回调函数中的this是该视图对象 ? ? ?（3）click a.item 这里是一个事件代理， ? ? ?（4）回调函数如果不是函数，是字符串，那么会到view对象中获取对应的方法，想这里的say其实是viewObj.say ? 2. 当然我们也可以通过调用delegateEvents方法添加事件，像这样： ? 1 2 3 4 5 6 7 8 var bookView = new