會使用 jQuery Mobile 這個 javascript 框架，是在花了不少時間去尋找能夠在手機、平板，甚至是在電腦瀏覽器裡執行的程式，最終所定下來的，目標是寫出一個類似 Web App 程式。記得在一開始發現它，就好像發現新大陸，本來不知如何下手的程式介面，在通過看過幾個範例後，利用兩週片斷的時間就完成介面樣式的設計，得到其它人的好評。不過直到開始撰寫程式的時候，才知道它並不如自己想像的那麼容易駕駕馭
簡單介紹這個框架，它可以利用 CSS 套版，將網頁既有的 HTML 變成像是手機程式裡的按鈕、清單，利用 data-xxx 屬性來描述 HTML 元素，可以組合成一個具有手機程式裡「標頭」、「內容」、「頁尾」三個區域，像是 iOS 裡在標頭的返回按鈕的樣式也作得出來，乍看之下還滿有模有樣。許多顯示效果，依照 HTML 元素的位置而有所改變。按照它的想法來撰寫 HTML，真很很省力。
當然，詳細的介紹和說明，還是直接去看官方網站吧！這篇文章不是廣告，是要分享在使用它一般時間後的感想。雖然它有許多便利之處，在天條件限制及一些設計想法上，在某些情境裡還是不如原生程式來得好。到目前為止，自己還沒有看到一個能通吃大多數情境的語言或框架，反倒是看到越來越多混搭的應用。
講遠了，回到主題上。
jQuery Mobile 的運作原理，是在頁面載入完成後，會檢查所有的 HTML 標籤，如果有帶有「data-role」屬性，並是符合它所定下來的規則，就會對它進行增加 CSS Class 或是增加子元素標籤的功能，也會為了一些事件(像是滑鼠移動到按鈕上)作偵聽的動作。因為光靠增加 CSS 達不到「偽裝」成手機/平板上的樣式，所以實際看過處理後的 HTML 的原始碼，會發現比原來自己寫的複雜許多。
如果是對於靜態網頁呈現，這是十分方便的。但是由於對於一個會動態增加內容的程式來說，就是一種挑戰。因為這個框架所處理的，只有頁面一開始就存在的元素，事後增加的按鈕、連結，都不會「自動」帶有它的介面效果。記得作完介面後，開始撰寫程式時，看到美美的畫面的中突然出現傳統網頁裡醜醜元素讓我吃了一驚。幾經研究之後，才開始慢慢抓到一些規則。
由於不會主動處理，所以在這個框架新加入的元素，需要呼叫框架的所帶有的對應函數來「作事先處理」或「事後要求更新」。區分方法的在於套用樣式的元素，是加入物件的本身，還是已套用樣式的子元素。比如說︰新增按鈕要事前處理，而在一個已經套用樣式的清單中，加入項目，則是採用事後通知清單更新內容的方法。這個部分不容易用三言兩語說明，最好是在實作的過程觀察瀏覽器 HTML (或說是 DOM)的變化能夠較清楚的掌握。
這個框架的另一個特點，在於不同於一般的頁面讀取方式。它可以將以往傳統多頁網頁的內容集合在一個檔案裡，只顯示其中一個部分的內容。好處是一次載入多頁的內容，在切換頁面的時候，只需要切換顯示/隱藏的狀態，而不需要重新由網路上再次抓取。相對而言，使用者所感覺到頁面切換的時間會變少，設計得當的話的，使用的網路流量也會減少。對於網路速度可能不快，流量有限制的手機/平板來說，是一個必然的選擇。
在「事先載入頁面」的原則下，連結元素<a>也有特別的寫法，利用原本錨點「#」的寫法來代表多個頁面的其中一個，代表一個頁面的 <div> 元素，使用其 id 屬性定位，對應到 # 定位。所以既使是某個子頁面，既使實際上多個頁面包含在一個檔案中，也可以在重新整理網頁的時候不會跳回原本的第一頁內容。在修改 data-role 的屬性下，能夠一些彈出視窗的效果，它在框架裡的本質就是頁面切換，所以可以簡單的使用 <a> 元素，作到彈出視窗、關閉回到原頁面的效果而不需要多寫一行程式。
但是事先載入也有其限制，因為不單單是一開始載入的多個頁面內容，包含在其它檔案裡的內容，也會使用 ajax 引用。這就造成了如果多個頁面採用的 CSS 設定不同，後載入頁面所包含的內容不會的生效，因為後載入的頁面只讀取其內容，CSS 的部分會被忽略。同樣的狀況也會發生在 javascript 上，所以如果想要避免這個的問題，只能先把對其它頁面連結的 ajax 功能關閉，或是好好的規劃整個網站的程式，完全按鈕這個框架的思想來開發。
多頁面內容載入的功能對我造成的困擾還不止如此，由於畫面中只顯示整個檔案的一部分內容，而沒被顯示的部分雖然可以由 DOM 的方式進行存取，刪改裡面的資料。但是前面提到「通知更新」的功能卻會出現 javascript 的錯誤。所以每一次呼叫之前，要先確認要更新元素正存在的於畫面中。如果今天作的是多個畫面內容的連動，就一定會遇到和這裡所提到的狀況。
如果因為不在當下的頁面裡而沒有通知更新，回到該元素所在的頁面時，不是又看到傳統的、醜醜的樣子嗎？所以這時候就需要偵聽它所創出來的新事件「pageChange」，在頁面切換完成後對於會更動的部分再作一次更新，來確保所有的原素的樣式都如同心裡想的一樣。相對而言會造成一些不必要運算，不過現在的我還沒有想到什麼好的方法來避免它。
總體而言，我認為 jQuery Mobile 是一個滿不錯的框架，幫我解決了許多介面上的問題，能夠更專注在流程與互動方式的設計上，也因為它是一個複雜的框架，而迫使我最大的使用既有的功能解決問題，不會東想西想的。另一方面，它是需要一些時間來熟悉才能應用，之前那許多作完又刪掉重寫的程式讓我受到不少挫折，因為雖然是 jQuery 的一個項目，但是許多傳統 jQuery 的觀念並不能直接使用，要多從手機網路的環境去思考才能體會。
就效能上，光是在個人電腦使用，就會覺得沒有一般網頁來得順暢。可能是因為背後許多的複雜的 CSS 和 DOM 運算導致。如果很要求反應速度的專案，可能要再三考慮。另外，由於它本質還是網頁，在手機上的瀏覽器是沒有拖曳元素這回事，拖曳已經被「捲動網頁內容」給使用掉了，這是花了一天還引用其它框架後，發現功能在手機上不能用的慘劇後學到的教訓，拖曳的功能可能只有平台原生的程式才能作得到。
這篇文章不算是教學文，所以不對於程式實作的方細講。如果對於它的功能有興趣，可以直接到官網抓程式，照著範例作個一兩小時，就能夠感受到它的魅力。
沒有留言:
張貼留言