台灣最大程式設計社群網站
線上人數
1353
 
會員總數:245151
討論主題:189055
歡迎您免費加入會員
討論區列表 >> AJAX / JSON / jQuery >> GK ~ 將 HTML 標籤升級為 Web 元件
[]  
[我要回覆]
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
GK ~ 將 HTML 標籤升級為 Web 元件
價值 : 0 QP  點閱數:1184 回應數:0

樓主

EZo = 易組: 在瀏覽器上容易組裝的開發平台
門外漢
0 10
99 4
發送站內信

GK是一個 jQueryPlugin (~4Kbytes),可以將HTML、CSS、JavaScript封裝成為一個Web元件,降低Web開發複雜度,讓Web開發更便利。透過下面範例,了解GK如何將HTML標籤升級為Web元件吧

HTML語法所產生的畫面


HTML寫法如下


GK 提供三個功能將自訂的 HTML 標籤包成 Web 元件,分別是「自訂標籤、事件綁訂、資料處理」。

接下來介紹如何透過 GK 完成將上面 HTML 語法包成 Web 元件。

一、自訂標籤解譯

GK 的自訂標籤功能,用來封裝 HTML 語法,用自訂標籤來顯示,達到簡化使用的目的。
下圖是改成GK自訂標籤的HTML寫法,是不是簡潔多了?


Q:這是怎麼做的?

首先GK會經由使用者自訂的標籤庫,找到board標籤模板,然後取出<gk:view>...</gk:view>區塊中的HTML,並置換 ${title} , ${content} 字串,然後交由瀏覽器進行顯示。在這例子中,${title} 會置換為 News,${content}則是自訂標籤 board的innerHTML字串。



Q:原來GK就是模板引擎?

不,GK的使用訴求是,當開發Web應用越來越複雜,將有必要進行封裝成為 Web元件。封裝實做細節,讓開發應用人員能更專注在應用上。並且元件化後,擴充性及重複使用性都可以提高。所以GK並不是模板引擎,GK的功能是「 自訂標籤、事件綁訂、資料處理」 等三種功能,可將HTML標籤升級為Web元件。目前上面這個例子,先展示「自訂標籤解譯」的功能。



二、事件綁定

經由GK的自訂標籤解譯,可以簡化撰寫HTML語法。接下來,經由事件綁定機制,自訂標籤就可以處理事件。例如我們需要一個功能,點選Item項目時,觸發onclick事件進行alert顯示。要完成此功能,改法是修改board標籤模板,在第14行加入了${id} 和 ${onclick},${id} 是html傳入的id,用來控制元件,data-gk-click就是告訴GK要將此元素進行click事件綁定。

接下來,在gk:component區段,撰寫元件被觸發時要做的處理,這裡只是簡單的alert出目前點選的文字


修改完模板存檔後,重新更新[F5] 頁面,點選Item就會進行alert


神奇嗎? 由於GK會幫忙完成自訂事件綁定,並交由board標籤模板中的 <gk:component></gk:component>區段實現onclick邏輯,而在原本HTML語法上,完全不需要做任何的修改,還是原本的寫法。



下圖是說明自訂標籤如何透過標籤模板,再轉由Browser顯示的流程


Q:這是怎麼做的?

自訂標籤模板可以看成很像是Java語言中的Class,用來定義產生一個物件的屬性及功能。當撰寫HTML語法中包含自訂標籤時,就像是Java new了一個物件。GK將會經由自訂標籤模板產生一個Web元件實例,並binding到目前元素中。因此使用的自訂HTML標籤就升級成Web元件了。

所以每個自訂標籤,都可以擁有各自的狀態,並且可以撰寫Model來處理應用邏輯,所以開發應用的人員,可以使用自訂標籤(也就是Web元件)來簡化開發,當隨著自訂標籤模板越來越多,開發就會越來越方便。

而在設計自訂標籤模板部分,考慮的是Web元件應該提供什麼功能,如何兼顧效能與擴充性,甚至例如實作現在很夯的RWD (Responsive Design)。而使用自訂標籤的開發人員,考慮的則是如何滿足使用者的需求。

由於開發Web應用越來越複雜,GK可以幫助元件化,清楚切割 View-Component-Model,如此一來就能簡化開發的複雜度。



三、資料處理

以上已經介紹了「自訂標籤、事件綁訂」的功能,最後介紹資料處理的功能,當透過GK將HTML標籤包裝成為Web元件後,希望Web元件能在多種案例下,重覆被使用,達到提高生產力的目的。目前從這個範例看來,點選Item後要進行的處理,就不應該寫在<gk:component>...</gk:component>區段中,應使用gk Model來處理應用邏輯。在這例子,我們撰寫處理邏輯,希望讓使用者click Item時,在Item上有顏色效果,如下圖



gk Model的程式寫法很簡單,如下所示,在HTML Body裡面,第16~20行是進行顯示,而第22~27行就是gk Model的撰寫。Web元件收到使用者事件後,會呼叫gkModel進行處理。第16行,自訂標籤的id為 bbs,所以透過 gk.model[‘bbs’] 宣告要處理board自訂標籤的動作。
在這例子要處理Item被點選的事件,所以當Item被點選時,第23行會被呼叫,gkModel就可以直接針對被點選的Item元素進行處理。



Q:為什麼要這樣做?

View和Model之所以很簡單,是由於Web Component封裝了相關的技術細節,要這樣做的原因,是希望藉由切割開發者角色成為兩種角色 開發應用、研發元件。這樣開發應用的開發者,就可以更專注在處理業務邏輯 (View-Model),不需要碰觸一些底層技術細節。而研發元件的人,可以專研技術,打造出更棒、更好用的元件 (WebComponent),這樣的分工,或許才能應付Web應用越來越複雜的局面。



<完>

相關資訊
上面的HelloWorld範例 http://mobile.EZoUI.com/mobile/GKMobile/HelloWorld.html - 請檢視HTML源始碼,比較有感覺
GKMobile 官網 http://mobile.EZoUI.com/mobile/bootstrap/index.html - 用GK技術包裝JQueryMobile元件,簡化使用

搜尋相關Tags的文章: [ jQuery ] , [ EZo ] , [ Mobile ] , [ GK ] , [ Opensource ] ,
本篇文章發表於2013-03-19 13:41
== 簽名檔 ==
EZo = 易組: 在瀏覽器上容易組裝 RIA 的開發平台

EZo UIBuilder V1.5 全功能開放試用中!

EZo 官網: http://www.EZoUI.com/
EZo 粉絲團: http://www.facebook.com/EZoUI
EZo 部落格: http://EZoUI.wordpress.com
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
目前尚無任何回覆
   

回覆
如要回應,請先登入.