简说一下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对象就不会初始化,从而导致点击无效果。
简说一下coffeescript的constructor是如何导致Backbone.View的事件无法正常工作的.的更多相关文章
- vue添加滚动事件,解决简书Carol_笑一笑方案中vue移除滚动事件失效的问题
在写项目的时候,遇到了需要添加滚动事件的问题,在简书Carol_笑一笑这里找到了解决方案.代码如下 <script> export default { name:"vue-scr ...
- Java Annotation 及几个常用开源项目注解原理简析
PDF 版: Java Annotation.pdf, PPT 版:Java Annotation.pptx, Keynote 版:Java Annotation.key 一.Annotation 示 ...
- CoffeeScript简介 <二>
集合与迭代 .. 与 ... 先看例子: arr = ["a1", "a2", "a3", "a4", "a5 ...
- 《大道至简》第一章读后感(java语言伪代码)
中秋放假之际读了建民老师介绍的<大道至简>的第一章,其中以愚公移山的故事形象的介绍向介绍编程的精义.愚公的出现要远远早于计算机发展的历史,甚至早于一些西方国家的文明史.但是,这个故事许是我 ...
- CentOS安装使用.netcore极简教程(免费提供学习服务器)
本文目标是指引从未使用过Linux的.Neter,如何在CentOS7上安装.Net Core环境,以及部署.Net Core应用. 仅针对CentOS,其它Linux系统类似,命令环节稍加调整: 需 ...
- React中类定义组件constructor 和super
刚开始学习React没多久,在老师的教程里看到了类组件的使用示例,但是和资料上有些冲突,而引发了一些疑问: 类组件中到底要不要定义构造函数constructor()? super()里边到底要不要传入 ...
- Scala编程--函数式对象
本章的重点在于定义函数式对象,也就是说,没有任何可变状态的对象的类.作为运行的例子,我们将创造若干把分数作为不可变对象建模的类的变体.在这过程中,我们会展示给你Scala面向对象编程的更多方面:类参数 ...
- Backbone框架浅析
Backbone是前端mvc开发模式的框架.它能够让view和model相分离,让代码结构更清晰简答,开发进度加快,维护代码方便.但是,现在出了一种mvvm框架,它是下一代前端mvc开发模式的框架,代 ...
- AngularJS服务中serivce,factory,provider的区别
Angular服务是一个由服务工厂创建的单例对象.这些服务工厂是由 service provider 依次创建的.而service providers是构造函数.它们必须包含一个$get属性用于在实例 ...
随机推荐
- 判断Webbrowser是否加载完成
var Form1: TForm1; glpDisp: IDispatch = nil; implementation {$R *.dfm} procedure TForm1.EmbeddedWB1D ...
- MySQL 执行计划里的rows
<pre name="code" class="html">SQL> alter session set statistics_level=a ...
- perl的一些基本用法
ReadLine support available (try 'install Bundle::CPAN')cpan>进入cpan的shell,好了,我为了安装spamassassin,需要安 ...
- CocoaPods的install和update卡在“Anylyzing dependencies”的问题解决方式[效率]
问题 最新CocoaPod更新慢得问题,不管是运行pod install还是podupdate都卡在Anylyzing dependencies. 解决方式 事实上原因是运行两个命令时都会升级Coco ...
- 3TB硬盘的容量已经超出了传统分区标准的支持
为什么3TB会有接近750G空间不能用? MBR分区格式是瓶颈 其实3TB硬盘之所以会出现各种问题,关键就在于它的容量已经超出了传统分区标准的支持.传统的硬盘采用MBR分区格式,使用LBA寻址,这种寻 ...
- 忽然想到:把Mu的源代码一网打尽
那么那些流媒体开发的公司,就不会拒绝我了,真是一举两得.
- DataSnap起源于MIDAS(十几篇博客)
作为MIDAS起始于Delphi3,Delphi4是MIDAS II,Delphi5中是MIDASIII,而后基于COM远程数据模块方式使用TCP/IP,HTTP,(D)COM构建出强大的通讯能力.从 ...
- CentOS下安装MySQL,Windows下使用Navicat for MySql连接
安装 查看有没有安装过: yum list installed mysql* rpm -qa | grep mysql* 查看有没有安装包: yu ...
- Android 吸入动画效果详解
1,背景 吸入(Inhale)效果,最初我是在iOS上面看到的,它是在Note程序中,用户可能添加了一页记录,在做删除时,它的删除效果是:这一页内容吸入到一个垃圾框的图标里面.请看下图所示: ==== ...
- STL学习总结
STL就是Standard Template Library,标准模板库.这可能是一个历史上最令人兴奋的工具的最无聊的术语.从根本上说,STL是一些"容器"的集合.这些" ...