EXT render 渲染過程
阿新 • • 發佈：2019-02-02
模板模式是設計模式中很重要的一個知識點，我在模式總結——模板方法這篇文章中已有總結，在面向物件設計中有著舉足輕重的地位。
在Ext中更是發揮的淋漓盡致，為什麼這麼說呢？Ext中的元件有著很深的繼承關係，很多方法都有著重複，而且不僅
是程式碼上的重複，更多的是流程上的重複
比方說，Ext.Panel吧，將一個Panel顯示在瀏覽器中，其過程叫做render（渲染）。有這麼幾道工序：
第一、觸發”beforeRender”事件
第二、得到這個Panel的父節點（針對DOM來說），即容器，也就是供Panel入住的那個容器
第三、設定rendered=true
第四、呼叫onRender方法，這步是最重要的，也就是如何將元件顯示在瀏覽器上，涉及到很多流程，一會詳解
第五、設定這個panel的css
第六、觸發”render”事件，指的是當render完成後，觸發的事件
第七、呼叫aferRender，這步和第四步一樣，是很重要的流程之一
第八、看看要不要將這個panel隱藏或者失效，如果使用者設定了hidden或者disable
第九、設定這個panel的位置，也就是doLayout，佈局
再來，Ext.Panel的子類，Ext.TabPanel，也有這麼幾道工序：
第一、觸發”beforeRender”事件
第二、得到這個Panel的父節點（針對DOM來說），即容器，也就是供Panel入住的那個容器
第三、設定rendered=true
第四、呼叫onRender方法，這步是最重要的，也就是如何將元件顯示在瀏覽器上，涉及到很多流程，一會詳解
第五、設定這個panel的css
第六、觸發”render”事件，指的是當render完成後，觸發的事件
第七、呼叫aferRender，這步和第四步一樣，是很重要的流程之一
第八、看看要不要將這個panel隱藏或者失效，如果使用者設定了hidden或者disable
第九、設定這個panel的位置，也就是doLayout，佈局
第十、設定activeTab，也就是啟用哪個Tab面板
僅僅多了第十個步驟。
其他例子不舉了，都是僅僅在最後幾個步驟上不同而已，大家要說了，這個那是什麼模板模式，不就是最簡單的繼承嗎？
錯了，繼承指的是屬性和方法的繼承，但現在是一個流程，一個系列的工序”繼承”，這就是模板模式了。
我們來看，應用了模板模式後的工序
Ext.TabPanel只有2道工序了
第一、完成Panel渲染的工序
第二、設定activeTab，也就是啟用哪個Tab面板
Ext.Panel一道工序
第一、完成Ext.Container的渲染工序
Ext.Container有2道工序
第一、完成BoxComponent的渲染工序
第二、設定這個panel的位置，也就是doLayout，佈局
Ext.BoxComponent一道工序
第一、完成Ext.Component的渲染工序
Ext.Component八道工序
第一、觸發”beforeRender”事件
第二、得到這個Panel的父節點（針對DOM來說），即容器，也就是供Panel入住的那個容器
第三、設定rendered=true
第四、呼叫onRender方法，這步是最重要的，也就是如何將元件顯示在瀏覽器上，涉及到很多流程，一會詳解
第五、設定這個panel的css
第六、觸發”render”事件，指的是當render完成後，觸發的事件
第七、呼叫aferRender，這步和第四步一樣，是很重要的流程之一
第八、看看要不要將這個panel隱藏或者失效，如果使用者設定了hidden或者disable
下面把流程圖展示出來（配合上onRender和afterRender）
我們來看下圖
那麼在Ext是如何讓這些流程在不同類之間自由跳轉的呢？這就是大名鼎鼎的call和apply在起著重要作用了
比如我們來看如下程式碼
Ext.Panel.superclass.onRender.call(this, ct, position);
什麼意思？this就是panel的意思，Ext.Panel.superclass就是Ext.Container，這句程式碼的意思就是“panel，你給我去執行container裡面的onRender方法”
那麼在Ext.Container的onRender方法有存在著
Ext.Container.superclass.onRender.call(this, ct, position);
這樣的程式碼，這裡的this還是指panel，不懂看上圖，這裡所有的this統統指panel物件，記住！意思是“panel，你再給我執行container父類裡面的onRender方法”
接著又會出現“panel，你再給我執行container父類的父類裡面的onRender方法”，一層層遞迴下去了，呵呵
在Ext中更是發揮的淋漓盡致，為什麼這麼說呢？Ext中的元件有著很深的繼承關係，很多方法都有著重複，而且不僅
是程式碼上的重複，更多的是流程上的重複
比方說，Ext.Panel吧，將一個Panel顯示在瀏覽器中，其過程叫做render（渲染）。有這麼幾道工序：
第一、觸發”beforeRender”事件
第二、得到這個Panel的父節點（針對DOM來說），即容器，也就是供Panel入住的那個容器
第三、設定rendered=true
第四、呼叫onRender方法，這步是最重要的，也就是如何將元件顯示在瀏覽器上，涉及到很多流程，一會詳解
第五、設定這個panel的css
第六、觸發”render”事件，指的是當render完成後，觸發的事件
第七、呼叫aferRender，這步和第四步一樣，是很重要的流程之一
第八、看看要不要將這個panel隱藏或者失效，如果使用者設定了hidden或者disable
第九、設定這個panel的位置，也就是doLayout，佈局
再來，Ext.Panel的子類，Ext.TabPanel，也有這麼幾道工序：
第一、觸發”beforeRender”事件
第二、得到這個Panel的父節點（針對DOM來說），即容器，也就是供Panel入住的那個容器
第三、設定rendered=true
第四、呼叫onRender方法，這步是最重要的，也就是如何將元件顯示在瀏覽器上，涉及到很多流程，一會詳解
第五、設定這個panel的css
第六、觸發”render”事件，指的是當render完成後，觸發的事件
第七、呼叫aferRender，這步和第四步一樣，是很重要的流程之一
第八、看看要不要將這個panel隱藏或者失效，如果使用者設定了hidden或者disable
第九、設定這個panel的位置，也就是doLayout，佈局
第十、設定activeTab，也就是啟用哪個Tab面板
僅僅多了第十個步驟。
其他例子不舉了，都是僅僅在最後幾個步驟上不同而已，大家要說了，這個那是什麼模板模式，不就是最簡單的繼承嗎？
錯了，繼承指的是屬性和方法的繼承，但現在是一個流程，一個系列的工序”繼承”，這就是模板模式了。
我們來看，應用了模板模式後的工序
Ext.TabPanel只有2道工序了
第一、完成Panel渲染的工序
第二、設定activeTab，也就是啟用哪個Tab面板
Ext.Panel一道工序
第一、完成Ext.Container的渲染工序
Ext.Container有2道工序
第一、完成BoxComponent的渲染工序
第二、設定這個panel的位置，也就是doLayout，佈局
Ext.BoxComponent一道工序
第一、完成Ext.Component的渲染工序
Ext.Component八道工序
第一、觸發”beforeRender”事件
第二、得到這個Panel的父節點（針對DOM來說），即容器，也就是供Panel入住的那個容器
第三、設定rendered=true
第四、呼叫onRender方法，這步是最重要的，也就是如何將元件顯示在瀏覽器上，涉及到很多流程，一會詳解
第五、設定這個panel的css
第六、觸發”render”事件，指的是當render完成後，觸發的事件
第七、呼叫aferRender，這步和第四步一樣，是很重要的流程之一
第八、看看要不要將這個panel隱藏或者失效，如果使用者設定了hidden或者disable
下面把流程圖展示出來（配合上onRender和afterRender）
我們來看下圖
那麼在Ext是如何讓這些流程在不同類之間自由跳轉的呢？這就是大名鼎鼎的call和apply在起著重要作用了
比如我們來看如下程式碼
Ext.Panel.superclass.onRender.call(this, ct, position);
什麼意思？this就是panel的意思，Ext.Panel.superclass就是Ext.Container，這句程式碼的意思就是“panel，你給我去執行container裡面的onRender方法”
那麼在Ext.Container的onRender方法有存在著
Ext.Container.superclass.onRender.call(this, ct, position);
這樣的程式碼，這裡的this還是指panel，不懂看上圖，這裡所有的this統統指panel物件，記住！意思是“panel，你再給我執行container父類裡面的onRender方法”
接著又會出現“panel，你再給我執行container父類的父類裡面的onRender方法”，一層層遞迴下去了，呵呵