KSDG-HTML2WebComponent.pdf

Transcript

1. HTML標籤 升級Web元件 Marty marty.shu@gmail.com
2. 本機工具 git http://git-scm.com/ nodejs http://nodejs.org/ sublime 2 http://www.sublimetext.com/ sublime typescript plugin https://github.com/raph-amiard/sublime- typescript 2
3. 3 簡報資源 http://goo.gl/MWtTz
4. Sublime Text 2.0.1 + TypeScript 4
5. 5 http://www.omerfarukcelebi.com/wp-content/uploads/2012/08/css_html_javascript.jpg Web開發一點都不簡單
6. 6 HTML是甚麼?
7. HTML發展已經超過20個年頭… 7 1991 HTML 1994 HTML2 1996 CSS1 + JavaScript 1997 HTML4 1998 CSS2 2000 XHTML1 2005 AJAX 2009 HTML5
8. 回到HTML的本質與初衷 8
9. 範例 - HTML佈告欄清單 9
10. HTML- 佈告欄清單 10 View
11. 11 自訂標籤解譯
12. Step 1: 將View改用自訂標籤顯示 12 View 標籤名稱 (不分大小寫) 自訂標籤 自訂標籤 自訂標籤 自訂標籤 – 封裝 封裝 封裝 封裝Vew
13. Step 1: 將View改用自訂標籤顯示 13
14. Step 1: 傳入 ${title} 參數 14
15. Step 1: 取代innerHTML內容 15
16. Step 1完成，View變簡單了~ 16
17. 17 Component
18. Step2: 開發元件邏輯 18 Component
19. Step2: 綁定gk-xxxx事件 19 Component
20. Step3: 撰寫應用邏輯 20 應用邏輯 (指定id) AP Logic
21. GK 21 經由Web元件，簡化開發複雜度，提高重複使用性
22. 案例一 22 http://1101.ezoui.com/home/Demo/3rd/jqpl ot2.html
23. 案例二 23 http://1101.ezoui.com/home/Demo/3rd/Carousel3.html
24. 24 自訂標籤解譯 動態語法綁定
25. Role defined 有學術氣息一點…
26. 使用GK Mobile 26