dojo Create Dijit
簡介
dojo toolkit 為網頁應用的開發提供了一整組的使用者介面元件 (widget)。相對於大多數的開發工具稱它們的使用者介面元件為 widget，dojo 稱它自己的使用者介面元件為 dijit；因此，所有以 dijit 開頭的模組都是使用者介面元件。
使用 dojo 建立使用者介面元件的寫法有二種：
- 宣告法 (Declarative)
- 程式法 (Programmatic)
這兩種方法各有其優缺點，略述如下：
宣告法需經過 dojo 的剖析器 (dojo/parser) 對 HTML 做剖析以產生介面元件，執行速度上比較慢；而且在剖析的過程中，介面元件的外觀會先以流覽器預設的樣式顯示，然後再以被 dojo 「整容」後的外觀顯示。在這個過程中，畫面會有所謂「閃動」的情況，很多使用者不喜歡這種經驗。但宣告法在設計網頁時比較直覺，可以很迅速的產生網頁的雛型，以檢查網頁的佈置、介面元件的外觀及網頁的基本功能。
程式法則在程式中直接產生介面元件，隨後將元件掛載到 HTML 中的掛載點。優點是速度快，休沒有畫面「閃動」的情形；但設計網頁時，對元件的佈置不夠直覺，需要花較多的時間調整程式。
在實務上開發應用程式時，都會兩種方式混用；或分階段使用，也就是初期先以宣告法製作雛型，調整完頁面後，再以程式法改寫。有時也會視不同網頁的需求，各自採取不同的寫法。有些介面元件的的設計，在先天上就比較適合其中的某種寫法。像輸入表格就比較偏向使用宣告法製作。
以下的範例為利用 dojo 建立使用者介面的基礎方法，範例中共使用了二種宣告法和一種程式法。實際上，不論是宣告法或是程式法都有很多種的變異，也無法一一例舉。有了基本功後，就可以依需求自行變化了。
Script
<!DOCTYPE html> <html lang="zh-Hant-TW"> <head>dijit basic </head> <body class="claro"> </body> </body> </html>
第 7 行是 dojo 環境設定的一種簡式寫法，如果程式中沒有用到 dojo toolkit 以外的套件(package)，或是用到自訂的模組，在為了瞭解介面元件的用法而寫一些簡單的測試網頁時，這樣寫比較省事；但真正寫應用系統時，這種簡式寫法通常是派不上用場的。
第 12 行到第 13 行是第一種宣告法，寫法和一般的 HTML 寫法差不多，只是在標記 (tag) 中多加了
data-dojo-type='dijit/form/Button' 的自訂屬性。告訴 dojo 的剖析器 (parser) 要取代這段 HTML 碼，在這裡放一個 dojo 的按鈕介面元件。這種寫法在流覽器 (browser) 無法下載 dojo 套件時，網頁的內容會以預設的樣式呈現；不過版面都亂了，也沒多大用處。但如果是要從 dojo 轉成使用其它的前端套件時，網頁的基本架構都在，有機會省點改寫的時間。
第 14 行到 19 行是第二種宣告法，這種方法就把宣告法用到極致。但是 HTML 碼和 dojo 的宣告及 Javascript 程式碼都混在一起，將來維護時就很費工夫了；要打的字又多，字打得多，出錯的機率就高；特別是雙引號、單引號混成一堆，也不容易看得清楚。夾在中間的 Javascript 函式也不能再利用，個人實在不認為是個好方法。
第 21 行算是給使用者介面的元件先定位，找個掛載點。
第 27 行指定定要下載 dijit/form/Button 模組，因為在後繼的 Javascript 程式碼中要用到。
第 32 行是 dijit/form/Button 傳給回呼函式時的參數名稱，如果是個類別 (Class) 模組，習慣上參數名稱的第一個字母會大寫。在 Javascript 程式中用這個名字來參考該模組。
第 37 行到第 43 行就是程式法的寫法了。
第 43 行呼叫 startup() 方法，讓 dijit 在網頁中成像 (rendering)。對於 Button 這種簡單的介面元件，有沒有呼叫 startup() 方法並不會造成任何差異，介面元件都會正常顯示，因為在模組中都會預設去呼叫 startup() 函式。但對於某些複雜的介面元件，特別是那種介面元件中又包含了其它的很多介面元件時，如果沒有呼叫 startup() 方法，在螢幕上可能就什麼都看不到，或是一團亂的情況。有時改了介面元件的一些屬性值時，也有可能需要重新呼叫 startup()方法，把介面元件再成像一次。所以，在介面元件建立後固定呼叫 startup()，算是個好習慣吧！
沒有留言:
張貼留言