In short, how does the constructor of coffeescript cause the Backbone. View event to fail to work normally.

In terms of inheritance, js is still weak. It is found that constructor and initialize are divided during inheritance. The relationship between the two is not described in online articles. After reading the source code, we can see the difference between the two. First, I used coffeescript to implement js inheritance. A problem was found during the process. By using Backb... SyntaxHighlighter.

In terms of inheritance, js is still weak. It is found that constructor and initialize are divided during inheritance. The relationship between the two is not described in online articles. After reading the source code, we can see the difference between the two.

First, I used coffeescript to implement js inheritance. A problem was found during the process.

When a single page program is constructed by using Backbone, if the parent class or subclass defines constructor without super. We are glad to tell you that the events registered in the subclass do not work.

If the parent class does not have super, the default constructor will not be executed to construct the Backbone. View class. This class is constructed by initializing the class initialize and binding the events event (based on Jquery's delegate)

Try it. For example:

 

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

In this way, you define A constructor in a without executing super, or you have defined construto in A and defined super, but not super in the construtor construction in OA. Events in subclass A is not executed.

Analyze the cause step by step.

1: In the definition class of coffeescript, if the constructor is not constructed in the class, it constructs the constructor by itself. If the constructor is specified, it will be executed according to the specified one.

Source code:

Specified constructor

 

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

No construto or definition defined and 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); // this is equivalent to Backbone. view. prototype. constructor. apply (this, arguments) ;:__ extend (e, n); // this is used for inheritance .}) (Backbone. View)

OK, you have to continue to dig to the grave here. Check the source code and explain it again.

Not to mention Backbone. View. There are several attributes and methods above. You can see why the class is automatically called after initialize is defined.

You also know why the events defined in the view can be used to process events (because delegateEvents is initialized ).

This is part of the code. If you have js advanced tutorial experience, you can see the source code of the backbone. js view class.

 

Backbone. View. prototype is a combination of extended attributes of Events and opt inherited by the extended attributes of underscore (if you do not understand the extend of underscore. js, see here: http://underscorejs.org/#extend ). View. prototype = Backbone. View because function is referenced and called, a piece of memory is shared,

Therefore, changes in View. prototype will affect the prototype of Backbone. View.

Let's look at e. _ super = Backbone. view. backbone After prototype. view. prototype. constructor is composed of Backbone. view, so e. _ super __. constructor is the Backbone. view. apply (this, arguments); so execute Backbone. view has some initialization about events and initialize functions. If the class is super. The constructor of the parent is executed. Run the constructor that inherits Backbone. View.

I don't know whether you understand it or not.

That is, the super execution process is as follows:

Child (constructor)-> parent (constructor) ...... // If the constructor contains super., This is the execution order. As long as a class in the inherited class does not have super. Choose constructor to stop the structure.

OK. Now, I think it should be clear. Therefore, if inheritance is involved in the future. Be careful when defining constructor. If you need to define an event in the subclass and inherit the parent class. Then you must check whether the constructor of the parent class and the constructor of the subclass are super (the super in coffee is to call the constructor of the parent class, but-child. _ super __. constructor. apply (this, arguments )). otherwise, the events object of your subclass will not be initialized, resulting in ineffective clicking.