简说一下coffeescript的constructor是如何导致Backbone.View的事件无法正常工作的.

在继承方面,js还是弱项呀。发现在继承的时候constructor和initialize之分。网上文章没有说明二者关系。看了源码才发现二者的区别呀。

首先我用coffeescript来实现js的继承,过程中发现一个问题。

就是通过用Backbone来构造单页面程序的时候,如果父类或子类中定义了constructor而没有super。那么很高兴的告诉你,在子类注册的events是不工作滴。

这里提前告诉你是因为父类中如果没有super,择不会执行默认的构造器来构造Backbone.View类。而这个类在构造的时候工作是初始化类中的initialize和绑定events事件(基于Jquery的delegate)

不信你试试看。例如:

class OA extends Backbone.View
	constructor:->
		#super;
		console.log "OA constructor";
	initialize :->
		console.log "OA init";
class A extends OA
	constructor:->
		#super;
		console.log "A constructor";
	initialize:->
		console.log "A init";
	events : 
		"click #btn1" : "btnClick"
	btnClick : ->
		console.log "btn click 1";

就是这样你在A中定义了constructor,而没有执行super,或者你在A中定义了construto且定义了super而在OA中的construtor构造中没有super。子类A中的events就没有执行。

根据这个一步步分析原因。

1:coffeescript在定义类中,如果类中没有构造constructor,则它会自己构造constructor。如果指定了constructor那么就会按照指定的来执行.

源码:

指定了constructor

OA = (function(){
	function e(){console.log("OA constructor")}
})(Backbone.View)

未定义construto或定义并且super了

__extend = function(t,n){
	function i(){
		this.constructor = t;
	}
	for(var r in n) e.call(n,r) && (t[r]=n[r]);
	i.prototype = n.prototype;
	t.prototype = new i;
	t.__super__ = n.prototype;
	return t;
}
OA = (function(n){
	function e(){
		console.log("OA constructor")
		_ref = e.__super__.constructor.apply(this,arguments);//这个等价于Backbone.View.prototype.constructor.apply(this,arguments);
	}
	__extend(e,n);//这个是用来继承的。
})(Backbone.View)

ok刨到这里还得继续往祖坟刨,看下这个源码再解释。

Backbone.View不用说。上面就几个属性和方法。可以看到为什么类定义了initialize后自动调用的原因了吧。

还有你也知道为什么view中events定义后就可以处理事件了吧(因为delegateEvents初始化了)。

这是部分代码,如果有js高级教程经验的可以看下backbone.js关于view类的源码。


Backbone.View.prototype是通过underscore的extend继承Events和opt拓展属性组合而成的(如果不懂underscore.js的extend请看这里:http://underscorejs.org/#extend)。View.prototype==Backbone.View因为function是引用调用,公用一片内存,

所以View.prototype的变化会影响到Backbone.View的prototype.

再看e.__super == Backbone.View.prototype之后Backbone.View.prototype.constructor就是由Backbone.View的构造的,所以e.__super__.constructor则就是Backbone.View.apply(this,arguments);所以执行Backbone.View就有了一些关于事件,initialize函数的一些初始化。在类中如果super了。就会执行parent的constructor。直到执行继承Backbone.View的constructor即可。

不知道大家明白了与否。

也就是super执行的流程如下:

child(constructor)->parent(constructor).......//如果constructor中有super.就是这个执行顺序。只要继承类中某个类没有super。择constructor就停止了构造。

ok,到了这里,我想大概都应该明白了。所以如果以后涉及到继承。请谨慎定义constructor。如果你需要在子类中定义事件,而有继承了父类。那你一定要检查一下父类的constructor和子类的constructor是否super了(coffee中的super就是调用父类的构造函数,然-child.__super__.constructor.apply(this,arguments)).否则你子类的events对象就不会初始化,从而导致点击无效果。

阅读更多

没有更多推荐了,返回首页