1 / 34

Site-Builder Workshop

Site-Builder Workshop. http://josephj.com/entry.php?id=64. March 30, 2008. YUI 練功房. Site-Builder Workshop. http://josephj.com/entry.php?id=61. March 30, 2008. 更新公告. 本練功房最新設備. What’s New In 2.5.1. - -. 2.5.0 增加了哪些元件？. Cookie 工具 Resize 工具 ImageCropper 控制項 Layout Manger 控制項

hogan
Download Presentation

Site-Builder Workshop

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Site-Builder Workshop http://josephj.com/entry.php?id=64 • March 30, 2008

  2. YUI練功房 Site-Builder Workshop http://josephj.com/entry.php?id=61 • March 30, 2008

  3. 更新公告 本練功房最新設備 What’s New In 2.5.1 --

  4. 2.5.0 增加了哪些元件？ • Cookie 工具 • Resize 工具 • ImageCropper 控制項 • Layout Manger 控制項 • Uploader 控制項 Yahoo! 所使用的特效、未來 YUI 都會有！！ --

  5. 新使用者？ • 練功安全守則 Getting Start --

  6. 特別聲明 • 很抱歉！本練功房無以下關卡 • 想練習「打怪」者，請另尋高明 在主流的 OS 與 Browser，YUI 皆可正常運作 --

  7. 守則一 • 請穿著正確服裝 DOCTYPE --

  8. 守則一：請穿著正確服裝 <!DOCTYPE HTML PUBLIC "-// W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd"> • 不使用 Quirks Mode、擁抱 Standard Mode • 只要有 DOCTYPE 皆為 Standard Mode • 但 DOCTYPE 前的空白、換行及文字皆應避免 --

  9. 守則二 • 溫差過大易感冒請採用洋蔥式穿法 Layered Semantic Markup Accessibility --

  10. 守則二：為避免天氣變化，請採用洋蔥式穿法 • NoScript、上網頻寬少、安全性政策 • 結構、樣式、行為各自獨立 • HTML 負責結構 • CSS 負責樣式 • JavaScript 負責行為 • YUI 所有元件的設計理念皆為如此 正常情況下 無 JavaScript 無 CSS YUI 幫開發者想、讓各位容易客製化如果開發者也能幫使用者想、那世界就太平了 --

  11. 守則三 • 預先瞭解關卡命名 JavaScript Object Notation --

  12. 守則三：預先瞭解關卡命名 YAHOO.util.Connect YAHOO.util.DataSource YAHOO.util.Resize YAHOO.widget.DataTable YAHOO.widget.Uploader YAHOO.widget.ImageCropper --

  13. 守則三：預先瞭解關卡命名 • 預防與既存 JS 衝突，所以用了「命名空間」 • 以 YAHOO.util為開頭的，表示是沒有介面的「工具或函式類」 • 以 YAHOO.widget為開頭的，表示是有介面的「控制項」 • 自己簡化：var YUE = YAHOO.util.Event; • 自己做命名空間：var Awoo = { widget : {} } Awoo.widget.Car = function () { //…建構式的內容} --

  14. 再看一次 YAHOO.util.Connect YAHOO.util.DataSource YAHOO.util.Resize YAHOO.widget.Uploader YAHOO.widget.DataTable YAHOO.widget.ImageCropper --

  15. 守則四 • 安裝順風耳 Event Triggering --

  16. 守則四：安裝順風耳 YAHOO.util.Event.on( formEl, ‘submit’, onFormSubmit ); --

  17. 守則四：安裝順風耳 • JavaScript 的原理是事件驅動 • 使用者做了某件事、才執行某個函式。 • 監聽頁面上的所有 click 事件 • YAHOO.util.Event.addListener(document, ‘click’, onDocumentClick); • addListener = on • 不要再用標籤中的onclick, onmouseover… --

  18. 守則四：安裝順風耳 事件類型 把 ‘on’ 拿掉 DOM 物件參考 自訂事件處理函式 YAHOO.util.Event.on( formEl, ‘submit’, onFormSubmit ); --

  19. 守則五 • 使用龍爪手 Access DOM Elements --

  20. 守則五：使用龍爪手 var YUD = YAHOO.util.Dom;var linkEl = YUD.get(‘mylink’);var listItems =YUD.getElementsByClassName(‘list-item’, ‘li’); --

  21. 守則五：使用龍爪手 應避免使用 • JavaScript 取得物件的方法： • document.getElementByName() • document.getElementById() • document.getElementsByTagName() • YUI 提供了更多方法： • YAHOO.util.Dom .getElementsByClassName() • YAHOO.util.Dom.get() --

  22. 守則五：使用龍爪手 某標籤的 id 限定 class 限定節點名稱 var YUD = YAHOO.util.Dom;var linkEl = YUD.get(‘mylink’);var listItems = YUD.getElementsByClassName(‘list-item’, ‘li’); --

  23. 守則六 使用隱形斗蓬 Using Anonymous Function --

  24. 守則六：使用隱形斗蓬 var YUE = YAHOO.util.Event;YUE.on(linkEl,‘click’, function(e){//事件函式內容}); --

  25. 守則六：使用隱形斗蓬 function 在 JS 中也是一種物件，也有 Scope 的概念。 • 過去我們習慣這樣寫 function：function abc() {} • 但改為這樣寫會比較清楚：var abc = function () {} • 僅使用一次時，連名字都不給：(function(){//do something here…}()) --

  26. 守則六：使用隱形斗蓬 var YUE = YAHOO.util.Event;YUE.on(linkEl,‘click’, function(e){//事件函式內容}); --

  27. 守則七 隨時查閱闖關配備表 JavaScript Library Dependency --

  28. 守則七：隨時查閱闖關配備表 到底該要引用那些函式庫哩？ --

  29. 守則七：隨時查閱闖關配備表 點選要用的元件 你所需要的 Library 就會顯示在此 • 幾乎每個元件都有互相關連性，新手很難上手。 • 還好 2.5.1 出了對應表：http://developer.yahoo.com/yui/articles/hosting/#configure --

  30. 主題 • 認識關主 --

  31. 第一關：YAHOO.widget.Uploader 酷搜天王：Rex --

  32. 第二關：YAHOO.widget.DataTable 熊的爆發力：Bear --

  33. 第三關：YAHOO.widget.ImageCropper 歹勢，前面兩位同事… 投影片是我做的， 所以只有我換帥氣的照片。 長跑鐵人：Awoo --

  34. 還有問題嗎？要開始闖關囉！ josephj@yahoo-inc.com http://josephj.com/entry.php?id=64

More Related