文档章节

Backbone 中的继承

triankg
 triankg
发布于 2015/11/17 14:26
字数 551
阅读 143
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

 使用了Backbone 也有了一段时间, 只是以前调用确定的使用一套方案,调研完毕之后直接交给下面人用去了,于是也没有继续深入

 最近又看了reactjs,很羡慕继承,想整合到项目中,但是用reactjs目前还不现实,多希望Backbone 也能拥有这样的特性,于是就查看Backbone中的继承到底是怎么回事。

 以下是Backbone 中的extend源码部分

 

// Helper function to correctly set up the prototype chain for subclasses.
  // Similar to `goog.inherits`, but uses a hash of prototype properties and
  // class properties to be extended.
  var extend = function(protoProps, staticProps) {
    var parent = this;
    var child;

    // The constructor function for the new subclass is either defined by you
    // (the "constructor" property in your `extend` definition), or defaulted
    // by us to simply call the parent constructor.
    if (protoProps && _.has(protoProps, 'constructor')) {
      child = protoProps.constructor;
    } else {
      child = function(){ return parent.apply(this, arguments); };
    }

    // Add static properties to the constructor function, if supplied.
    _.extend(child, parent, staticProps);

    // Set the prototype chain to inherit from `parent`, without calling
    // `parent`'s constructor function and add the prototype properties.
    child.prototype = _.create(parent.prototype, protoProps);
    child.prototype.constructor = child;

    // Set a convenience property in case the parent's prototype is needed
    // later.
    child.__super__ = parent.prototype;

    return child;
  };

  // Set up inheritance for the model, collection, router, view and history.
  Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend;



 backbone 文档中这样写道

extendBackbone.View.extend(properties, [classProperties]) 
Get started with views by creating a custom view class. You'll want to override therender function, specify your declarative events, and perhaps the tagName,className, or id of the View's root element.

var DocumentRow = Backbone.View.extend({

  tagName: "li",

  className: "document-row",

  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  },

  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  },

  render: function() {
    ...
  }

});

Properties like tagName, id, className, el, and events may also be defined as a function, if you want to wait to define them until runtime.

于是写了很长时间  Backbone.View.extend, 很悲催,看了源码之后才知道 parent = this; 于是打开思维 其实VIEW也可以这样写的
var A = Backbone.View.extend({
			name:'name',
			initialize:function(){console.log(this.addr)
				//this.render();
			},
			test:function(){
				return this.name;
			},
			render:function(){
				var $div = $('<div id="test-bean"></div>');
				console.log("render2");
				$('body').append($div);
			}
		}) 
		
		var b = A.extend({
			addr:"wxi",
			initialize:function(){
				A.prototype.initialize.call(this);console.log('b')
				this.render();
			},
			getAddr:function(){
				return this.addr;
			},
			render:function(){
				A.prototype.render.call(this);
				console.log("render");
			},
		});
		
		console.log(b.prototype)
		var bb = new b();
		console.log(bb.test());



会实现View之间的继承

打开思维,这样我们就可以做很多很多~~ ,具有特性的VIEW封装...

//题外 CSS -- hack

  • “-″减号是IE6专有的hack
  • “\9″ IE6/IE7/IE8/IE9/IE10都生效
  • “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
  • “\9\0″ 只对IE9/IE10生效,是IE9/10的hack

© 著作权归作者所有

triankg
粉丝 11
博文 112
码字总数 29848
作品 0
无锡
项目经理
私信 提问
backbone | chaplin | coffee tutotial实现

backbone | chaplin | coffee tutotial实现 前端MVC框架很多,angular处理DOM的方式比较特别,试用了下感觉不太顺手,backbone之前学习过一次,由于作者文档写的太烂,遇到各种坑放了一段时间...

duoduo3_69
2014/04/18
335
1
backbone详细解析

Backbone 简介 中文API:http://www.csser.com/tools/backbone/backbone.js.html 英文API:http://backbonejs.org/ Backbone是构建javascript应用程序的一个优秀的类库。他简洁、轻量级、功能...

程序媛_Mickey
2016/03/08
2.1K
9
【再探backbone 01】模型-Model

前言 点保存时候不注意发出来了,有需要的朋友将就看吧,还在更新...... 几个月前学习了一下backbone,这段时间也用了下,感觉之前对backbone的学习很是基础,前几天有个园友问我如何将路由的...

范大脚脚
2017/11/02
0
0
【javascript激增的思考04】MVC与Backbone.js(beta)

前言 最近整理了很多前端面试题的东西,今天又去参加了一次面试,不知各位烦不烦,我反正有点累了,于是我们今天继续回到我们前段时间研究的问题,我们再来看看MVC吧。 什么是MVC 又回到这个...

范大脚脚
2017/12/21
0
0
解读sencha touch移动框架的核心架构(一)

sencha的前身就是Extjs了,sencha 框架是世界上第一个基于HTML5的Mobile App框架 那么何谓框架,传统软件工程对于库和框架的区分主要着眼于对应用运行流程的控制权,框架提供架构,控制运行流...

文艺小青年
2017/06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

加载JDBC驱动

我们平时在连接数据库时需要加载驱动,通常做法是将JDBC驱动程序放在类路径中的某个位置,然后用Class.forName()查找并加载驱动程序。 这也就意味着要么将驱动程序打包到jar中,要么将驱动程...

uknow8692
32分钟前
4
0
TCP三次握手详情

TCP(Transmission Control Protocol,传输控制协议)是一种面向连接的、可靠的、基于字节流的通信协议,数据在传输前要建立连接,传输完毕后还要断开连接。 客户端在收发数据前要使用 conn...

vinci321
33分钟前
4
0
适用于PDF文件的MIME媒体类型

使用PDF时,我遇到了MIME类型application/pdf和application/x-pdf等。 这两种类型之间是否存在差异,如果是这样,它是什么? 一个比另一个更受欢迎吗? 我正在开发一个必须提供大量PDF的网络...

技术盛宴
40分钟前
5
0
Docker数据挂载

Docker数据管理 在容器中管理数据主要有两种方式: 数据卷(Volumes) 挂载主机目录(Bind mounts) 数据卷 数据卷是一个可供一个或多个容器使用的特殊目录,它绕过UFS,可以提供很多有用的特...

CodingDiary
52分钟前
6
0
jQuery获取特定的选项标签文本

好吧,说我有这个: <select id='list'> <option value='1'>Option A</option> <option value='2'>Option B</option> <option value='3'>Option C</option></select> 如果我想......

javail
56分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部