ExtJS中的onRender和render

ExtJS老大在官方论坛的一个回复，转到这里收藏下

The split onRender/render and their siblings are the result of a deep inheritance chain and a desire to not duplicate code. They are based on a common OO design pattern called Template Method.

引用

Quote:
The template method is used to:

* let subclasses implement behaviour that can vary
* avoid duplication in the code: you look for the general code in the algorithm, and implement the variants in the subclasses
* to control at what point(s) subclassing is allowed.

The control structure (inversion of control) that is the result of the application of a template pattern is often referred to as the Hollywood Principle: "Don't call us, we'll call you." Using this principle, the template method in a parent class controls the overall process by calling subclass methods as required. 
Let's me paint a simple picture.

var Employee = function(){
    ....
    this.addEvents({
        beforequit: true,
        quit: true
    });
}

Ext.extend(Employee, Ext.util.Observable, {
    quit : function(){
         if(this.fireEvent('beforequit', this) !== false){
             // "important logic" that must run when
             // when an employee quits
             this.fireEvent('quit', this);
         }
         return this;
    }
}

Now looking at this code, it seems very straight forward and it can't fail right? However, what happens when you add a subclass?

var Manager = Ext.extend(Employee, {
     quit : function(){
           // Option 1 is to call the base class first
           Manager.superclass.quit.call(this);
           // then do custom Manager quit logic  
           ... Manager logic ...
           
           // Option 2 is to do the Manager specific logic first 
           ... Manager logic ...
           // and then call the base class
           Manager.superclass.quit.call(this);

           return this;
     }
});

Look at the result of the 2 options:

Option 1 has a few problems.
a) There's no way to know if the event was cancelled, so you can't stop the manager logic. You could return false if it is cancelled but then you have different return types and the API suffers.
b) The most serious issue is the "quit" event gets fired prematurely. While in this example that might be a problem, but in a Component that involves rendering and you need to know that the component is fully rendered, it would be a major issue.

Option 2 has a few problems as well:
a) The beforequit event no longer fires in advance and can no longer allow for cancellation of the action. This is a major problem.
b) The manager logic has to come first - this is a major problem especially when rendering a component and your based class is probably rendering something the subclass needs (e.g. this.el!)

Using a Template Method, we can solve this problem easily:

var Employee = function(){
    ....
    this.addEvents({
        beforequit: true,
        quit: true
    });
}

Ext.extend(Employee, Ext.util.Observable, {
    quit : function(){
         if(this.fireEvent('beforequit', this) !== false){
             this.onQuit();
             this.fireEvent('quit', this);
         }
         return this;
    },

    onQuit : function(){
         // "important logic" that must run when
         // when an employee quits
    }
    
}

var Manager = Ext.extend(Employee, {
     onQuit : function(){
           Manager.superclass.onQuit.call(this);
           .. Manager logic ...
     }
});

So not only does this solve the problem described above easily, it also means all subclasses no longer have to worry about wrapping things in events since the base class will handle that automatically.

Another even more important benefit of "Template Method" that is not present in this simple example but that is used in Component rendering is that then you can have a defined execution flow in a base class and you know all subclasses will be complete with what they need to do at each step before continuing to the next step.

Regards,
Jack