Backbone.View.extend之后的构造函数实例化经历了一些什么处理

首先看Backbone.View的构造函数源码:

var View = Backbone.View = function(options) {
    this.cid = _.uniqueId(‘view‘); // 为需要的客户端模型或DOM元素生成一个全局唯一的id。如果prefix参数存在, id 将附加给它。就是生成_id属性 值是唯一的。
    options || (options = {});
    _.extend(this, _.pick(options, viewOptions));//这里挑选options下面的参数赋给构造函数的prototype对象
    this._ensureElement();// 看下面的_ensureElement
    this.initialize.apply(this, arguments);  执行我们写的initialize函数了
    this.delegateEvents();//绑定我们events json中的事件
  };
_ensureElement: function() { //这里主要做的就是创建了一个View层的容器,即$el  并赋予attributes属性和class name  if (!this.el) {    var attrs = _.extend({}, _.result(this, ‘attributes‘));    if (this.id) attrs.id = _.result(this, ‘id‘);    if (this.className) attrs[‘class‘] = _.result(this, ‘className‘);    var $el = Backbone.$(‘<‘ + _.result(this, ‘tagName‘) + ‘>‘).attr(attrs);    this.setElement($el, false);  } else {    this.setElement(_.result(this, ‘el‘), false);  }}
// Cached regex to split keys for `delegate`.

var delegateEventSplitter = /^(\S+)\s*(.*)$/; // List of view options to be merged as properties. 

var viewOptions = [‘model‘, ‘collection‘, ‘el‘, ‘id‘, ‘attributes‘, ‘className‘, ‘tagName‘, ‘events‘];
时间: 2024-10-13 13:03:54

Backbone.View.extend之后的构造函数实例化经历了一些什么处理的相关文章

转:backbone.js源码解析:extend、Backbone.View

源:http://www.cnblogs.com/mxw09/archive/2012/07/06/2579329.html backbone版本:0.9.2 1.解析Backbone.Model(Collection | Router | View).extend (1).找到extend的定义 //定义extend函数  var extend = function (protoProps, classProps) {    /*    通常我们以Backbone.XXX.extend的方式建

Backbone?View中的events...click事件失效

<div id="container"> <input type="button" id="test_click" value="测试" /> </div> var View = Backbone.View.extend({ //el: '#container',//注释了就不可以了... template: _.template($("#item-template").

backbone之extend方法(刚明白了点)

话说这个extend困扰我好几天了,今天终于想明白了点. 在之前先要知道什么是实例方法和静态方法. 首先定义一个类(js不支持类,但是别人都这么说,我也不知道为啥),如:var Person=function(){} //函数表达式或 function person(){}//函数声明, 然后在类上加.方法名,如 Person.say=function(){ console.log('I am a Person,I can say.') };这就是一个静态方法,调用时直接.方法名()就可以了.

自定义View的三个构造函数

自定义View有三个构造方法,它们的作用是不同的. public MyView(Context context) { super(context); } public MyView(Context context, AttributeSet attrs) { super(context, attrs); } public MyView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, de

通过构造函数实例化对象

1 /** 2 * Created by hunt on 2017/6/27. 3 * 测试的实体类 4 * @Data 编译后会自动生成set.get.无惨构造.equals.canEqual.hashCode.toString方法 5 */ 6 @Data 7 public class Person { 8 private String name; 9 private int age; 10 public Person(String name){ 11 this.name = name; 1

Backbone学习笔记 - View篇

Backbone是一种Web端的MVC框架,这里纪录学习Model,View和Collection的笔记. 1 View initialize构造函数 Backbone.View 与jQuery库紧密结合. var SearchView = Backbone.View.extend({ initialize:function(){ alert("Alerts suck."); } }); var search_view = new SearchView(); initialize 就类

201507221403_《backbone之一——新建模型和集合、实例化模型、模型上监听事件的方法、模型设置和获取后台数据、配置理由方法、视图绑定事件的方法、绑定模型等》

一 . 新建 var model_1 = new Backbone.Model({'name':'hello'}); var model_2 = new Backbone.Model({'name':'hi'}); var models = new Backbone.Collection(); models.add( model_1 ); models.add( model_2 ); alert( JSON.stringify(models) ); 二. 实例化模型 var M = Backbo

Backbone之旅——Collection and View篇

上篇文章说了Model,这次说说Collection,collection就是model的集合,用来装载model对象的 定义方法 var Persons = new Backbone.Collection.extend({ model: person, initialize:function(){} }); 上面就定义了一个简单的collection,关联的Model就是上篇文章定义的Person collection一般是用来去集合数据的,所以会配置View一块使用,下面来定义一个View

backbone的view模板(updateView)

//加载并初始化模板对象 var templateHTML = loadTemplate("assets/templates/cis_culture.html"); var CultureView = Backbone.View.extend({//options... initialize : function(option) { //初始化VIEW并让model与VIEW进行关联 this.model.view = this; //初始化VIEW的HTMLDOM对象 this.re