取自http://blog.joomla.org.tw/javascript/53-extjs/71-extjs-application-design-1.html
作者是 EddyChang
這篇文章是從ExtJS官網討論區中找到的，非常值得參考，原來的問題是：「application design, component creation and efficiency」。由我個人的觀點來看，Javascript發展至今，仍然是百家爭鳴的時代，有非常多不同的framework或pattern，也很難和各式的應用能完全配合，ExtJS算是非常豐富的Javascript架構，但還是要配合像PHP的Server端程式才能完成整個應用程式。以下是關於Saki（ExtJS官方支援小組）的經驗回答摘譯：
使用以下的規則在開發Ext大型的應用程式上：
- 盡可能地多使用緩慢實例化(xtype) - Use lazy instantiation (xtype) as much as possible.
- 使用預先設定好的類別 - Use pre-configured classes (I'll explain later).
- 在父階層中實作關係 - Implement relations on parent level.
- 在開發時，保持每個類別在自己的一個檔案；在產品化時，再組合和壓縮它們 - Keep each class in its own file while developing, concat and minify for production.
1. 盡可能地多使用緩慢實例化(xtype)
這點是如果你使用xtypes的話，Ext物件只有當他們需要時才會被建立。
備註：xtype和延伸類別的分離方式，的確是對大型開發有幫助。但關於上面的說明，在討論區的另一篇：「Does xtype really support lazy instantiation?」提出了lazy instantiation的質疑，以及和lazy redener的比較。
2. 使用預先設定好的類別
上述第1點的xtype的方法要配合預先設定好的類別"pre-configured classes"，這些類別是擴充自Ext的類別而來的，帶有設定選項和（或）加入的函式。
備註：有許多範例可以了解怎麼寫出預先設定好的擴充類別，例如以下的：
- Tutorial:Extending Ext for Newbies (簡體中文)
- Tutorial:Extending Ext2 Class (簡體中文)
- Tutorial:Creating new UI controls (簡體中文)
想像你有一個border版面中，在西（左）邊有一個表格和中間有一個表單，當選了表格中的某個項目時，表單中要顯示對應的值。那到底要怎麼寫這段程式邏輯，是放在表格裡，還是表單裡？應該都不是這兩個。這兩者互不知道對方存在，知道這兩者同時存在的是它們的父階層（可能是viewpoint或window）
因此，關係會建立在父階層裡，例如window中。這裡的程式會是監聽表格來的事件，然後在選擇改變時載入表單資料，或是當表單進出資料後，改變表格的記錄。
如果我把程式碼寫在表格裡，那這個表格就和表單不可分離了。
備註：的確是很好的原則，不過直接的想法都是寫到事件發動處，在小型的事件處理，這樣比較快而且直觀。Saki在它的範例網站中，有加了兩個範例，這兩個範例都是很好的學習資源： 4.在開發時，保持每個類別在自己的一個檔案；在產品化時，再組合和壓縮它們
心得：ExtJS原本的作法就是如此，Linux下可以用Cat指令，Windows下可用ConCat/Split的軟體來合併Javascript檔案，再利用JSBuilder之類的工具，可以去除註解檔和壓縮檔案。
最後的忠告
不需要太深思熟慮於程式的結構、版面、各種控制器、載入器、介面…太多了。而是要寫出好的可重覆利用的預先設定好的類別，然後把它們不管如何先放到一起。如果這些類別真的是不錯而且可以重覆使用的，你大可以更改你的應用程式版本，使用別的方式來作，但你的類別至少仍然都會正常工作。就像是樂高積木一樣-如果你有木塊，你可以在幾分鐘內建出一個城堡。
心得：的確是如此。預先設定好的類別是必學的一段，雖然我有看過另一種寫法 - Module Pattern，Module Pattern是通用於各Javascript框架的寫法，或許也是一個值得一學的部份。在官方討論區中的「preconfigured class vs. module pattern」一文中有一些比較資訊可以參考。
沒有留言:
張貼留言