简说一下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属性用于在实例 ...
随机推荐
- K-means clustering (K-means聚类)
问题: K-所有值聚类是无监督学习算法 设数据集.当中,. 如果这个数据能够分为类. 把这个问题模型化: , 当中代表第类的聚点(中心点.均值). 该模型能够用EM算法进行训练: 初始化,. E步:固 ...
- [转]PHP 5.2~5.6 对照以及功能具体解释
[分享]PHP 5.2~5.6 对照以及功能具体解释 作者:流水理鱼wwek 来源:http://www.iamle.com/archives/1530.html 截至眼下(2014.2), PHP ...
- MySql 链接url 参数详解
最近 整理了一下网上关于MySql 链接url 参数的设置,有不正确的地方希望大家多多指教: mysql JDBC URL格式如下: jdbc:mysql://[host:port],[host:po ...
- mvc action 有多种跳转
在ASP.NET mvc下,action 有多种跳转方式: return RedirectToAction("Index");//一个参数时在本Controller下 如果Redi ...
- MySQL多表查询之外键、表连接、子查询、索引
MySQL多表查询之外键.表连接.子查询.索引 一.外键: 1.什么是外键 2.外键语法 3.外键的条件 4.添加外键 5.删除外键 1.什么是外键: 主键:是唯一标识一条记录,不能有重复的,不允许为 ...
- 微信支付.net官方坑太多,我们来精简
原文:微信支付.net官方坑太多,我们来精简 微信支付官方坑太多,我们来精简 我把官方的代码,打包成了 an.wxapi.dll. 里面主要替换了下注释.呵呵.然后修改了几个地方. 修改一.Confi ...
- FZU2181+poj2942(点双连通+判奇圈)
分析:我们对于那些相互不憎恨的人连边,将每次参加会议的所有人(不一定是全部人,只需人数>=3且为奇数)看做一个点双联通分量,那么每个点都至少有两个点与他相邻.即需要保证双联通分量中存在奇圈.至于 ...
- Android OpenGL ES 应用(二) 纹理
上一篇讲了基础入门 OpenGL (一) ,这一次主要学习OpenGL 纹理基本学习总结 要是做复杂的OpenGL应用程序,一定会用到纹理技术.纹理说白了就是把图片或者视频图像绘制到OpenGL空间中 ...
- NET工厂模式架构
NET工厂模式架构 最近项目的架构需要做调整优化,根据业务需要写了一个简单的工厂模式架构 项目介绍:整个系统分为三大平台(这里用A,B,C来标示),每个平台又细分为多个APP客户端(每个APP都有ap ...
- document.write()相关
原文地址:http://www.cnblogs.com/dh616854836/articles/2140349.html document.write()脚本向窗口(不管是本窗口或其他窗口)写完内容 ...