ext設計模式

Ext源碼分析之模板模式解說——Ext組件渲染render的全過程詳述

關鍵字: ext

模板模式是設計模式中很重要的一個知識點，我在模式總結——模板方法這篇文章中已有總結，在物件導向設計中有著舉足輕重的地位。

在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方法”，一層層遞迴下去了，呵呵

仔細的朋友去看container的時候會發現沒有onRender方法，不錯，代碼裡確實沒有，但是執行起來之後就有了，不懂？看我的
Ext源碼分析源碼分析之Ext的繼承模式解說