ExtJS의 onRender 및 render
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
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ExtJS 3.2 학습 노트(3) 사용자 정의 이벤트Extjs에서 모든 상속은 Ext.util에서 합니다.Observable 클래스의 컨트롤은 이벤트를 지원할 수 있습니다. 클래스에 대해 이벤트를 사용자 정의하려면 다음 절차를 따르십시오. 1, 먼저 클래스를 정의합니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.