YUI is Sexy - 使用 YUI 作為開發基礎

4,432 views

Published on

YUI 提供了相當好的架構讓 Developer 開發,從架構面與完整性介紹此 Library

Published in: Technology, Education
  • Be the first to comment

YUI is Sexy - 使用 YUI 作為開發基礎

  1. 1. YUI IS SEXY使用 YUI Library 作為開發基礎 講者 - josephj
  2. 2. YUI 一黨不能獨大、媒體不能壟斷JavaScript 函式庫當然也要多一些選擇啦 http://www.flickr.com/photos/freestylee/5399124878/
  3. 3. 若考量的是架構、完整性、團隊開發、軟體堆疊 YUI 3 遠優於大部分的函式庫
  4. 4. Part IArchitecture Module / Loader / OOP
  5. 5. Modularization 將功能分門別類、要用的時候挑選組合 http://www.flickr.com/photos/bdesham/2432400623
  6. 6. NASA Space Station除了樂高積木、國際太空站也是 Modularization 的好範例 http://www.flickr.com/photos/nasamarshall/4546245011/
  7. 7. NASA Space Station由 7 個不同國家所提供的 50 多個模組 http://astronomy.wikia.com/wiki/International_Space_Station
  8. 8. NASA Space Station由 7 個不同國家所提供的 50 多個模組 http://astronomy.wikia.com/wiki/International_Space_Station
  9. 9. NASA Space Station 舉凡建築、航太、機械、硬體到軟體 在任何分工精細的工程領域 模組化開發是必然趨勢「採用既有模組、避免重新打造輪子」 由 7 個不同國家所提供的 50 多個模組 http://astronomy.wikia.com/wiki/International_Space_Station
  10. 10. 最基本的 JavaScript 模組化
  11. 11. 最基本的 JavaScript 模組化<script src="jquery-1.7.2.js"></script><script src="jquery.ui.core.js"></script><script src="jquery.ui.widget.js"></script><script src="jquery.ui.accordion.js"></script>
  12. 12. 最基本的 JavaScript 模組化<script src="jquery-1.7.2.js"></script> // 核心函式庫<script src="jquery.ui.core.js"></script> // 模組 1<script src="jquery.ui.widget.js"></script> // 模組 2<script src="jquery.ui.accordion.js"></script> // 模組 3
  13. 13. 最基本的 JavaScript 模組化<script src="jquery-1.7.2.js"></script> // 核心函式庫<script src="jquery.ui.core.js"></script> // 模組 1<script src="jquery.ui.widget.js"></script> // 模組 2<script src="jquery.ui.accordion.js"></script> // 模組 3網站發展到一定規模時、這樣做包準讓你焦頭爛額 全域變數、維護性、前後順序、模組效率問題 這些都是在 YUI 2 與其他主流函式庫的瓶頸
  14. 14. YUI 3 架構徹底解決模組問題
  15. 15. YUI 3 架構徹底解決模組問題 2009/6 月,YUI 推出與先前架構完全不同的 3.0 版解決前述全域變數、維護性、前後順序、模組效率的問題 所有 YUI 模組檔案皆必須以這樣的方式包覆:
  16. 16. YUI 3 架構徹底解決模組問題 2009/6 月,YUI 推出與先前架構完全不同的 3.0 版解決前述全域變數、維護性、前後順序、模組效率的問題 所有 YUI 模組檔案皆必須以這樣的方式包覆: YUI.add("模組名稱", function (Y) {      }, requires:["所需模組 1", "所需模組 2"]);  
  17. 17. YUI 3 架構徹底解決模組問題 2009/6 月,YUI 推出與先前架構完全不同的 3.0 版解決前述全域變數、維護性、前後順序、模組效率的問題 所有 YUI 模組檔案皆必須以這樣的方式包覆: YUI.add("模組名稱", function (Y) { Why callback? 放到頁面上時不會立即執行、 等到要用時再執行即可。好處 是做程式碼的隔離、不再需要 處理每個模組間的先後順序。      }, requires:["所需模組 1", "所需模組 2"]);  
  18. 18. YUI 3 架構徹底解決模組問題 2009/6 月,YUI 推出與先前架構完全不同的 3.0 版解決前述全域變數、維護性、前後順序、模組效率的問題 所有 YUI 模組檔案皆必須以這樣的方式包覆: editor.js YUI.add("模組名稱", function (Y) { editor      }, requires:["所需模組 1", "所需模組 2"]);  
  19. 19. YUI 3 架構徹底解決模組問題 2009/6 月,YUI 推出與先前架構完全不同的 3.0 版解決前述全域變數、維護性、前後順序、模組效率的問題 所有 YUI 模組檔案皆必須以這樣的方式包覆: editor.js YUI.add("模組名稱", function (Y) { editor // 上方的參數 Y 代表了 YUI 的 Instance          function Editor() {         // 這是物件的建構式     }                   }, requires:["所需模組 1", "所需模組 2"]);  
  20. 20. YUI 3 架構徹底解決模組問題 2009/6 月,YUI 推出與先前架構完全不同的 3.0 版解決前述全域變數、維護性、前後順序、模組效率的問題 所有 YUI 模組檔案皆必須以這樣的方式包覆: editor.js YUI.add("模組名稱", function (Y) { editor // 上方的參數 Y 代表了 YUI 的 Instance          function Editor() {         // 這是物件的建構式     }                  // 將建構式提昇到 Global     Y.Editor = Editor;      }, requires:["所需模組 1", "所需模組 2"]);  
  21. 21. YUI 3 架構徹底解決模組問題對使用者來說,只需指定模組名稱即可使用:
  22. 22. YUI 3 架構徹底解決模組問題對使用者來說,只需指定模組名稱即可使用: YUI().use("editor", function (Y) {        });
  23. 23. YUI 3 架構徹底解決模組問題對使用者來說,只需指定模組名稱即可使用: YUI().use("editor", function (Y) {       // 此 Callback 代表所需模組皆已載入完成         // 你就可以直接建立 Y.Editor 的例項      });
  24. 24. YUI 3 架構徹底解決模組問題對使用者來說,只需指定模組名稱即可使用: YUI().use("editor", function (Y) {          // 此 Callback 代表所需模組皆已載入完成         // 你就可以直接建立 Y.Editor 的例項          var editor = new Y.Editor();      });
  25. 25. JavaScript 模組化的實作已是當代趨勢
  26. 26. JavaScript 模組化的實作已是當代趨勢• CommonJS 1.0 被 nodeJS 所採用,不適合使用在瀏覽器端。
  27. 27. JavaScript 模組化的實作已是當代趨勢• CommonJS 1.0 被 nodeJS 所採用,不適合使用在瀏覽器端。• CommonJS 2.0
  28. 28. JavaScript 模組化的實作已是當代趨勢• CommonJS 1.0 被 nodeJS 所採用,不適合使用在瀏覽器端。• CommonJS 2.0• ECMAScript Module 最期盼的!不需要 Library 即可擁有模組架構。
  29. 29. JavaScript 模組化的實作已是當代趨勢• CommonJS 1.0 被 nodeJS 所採用,不適合使用在瀏覽器端。• CommonJS 2.0• ECMAScript Module 最期盼的!不需要 Library 即可擁有模組架構。• AMD 被 dojo、jQuery、Mootools、RequireJS 所採用、專為瀏覽器所設計。 為目前最夯且成熟的模組架構 不同的 Library 間可以共享模組。
  30. 30. JavaScript 模組化的實作已是當代趨勢• CommonJS 1.0 被 nodeJS 所採用,不適合使用在瀏覽器端。 // AMD Module• CommonJS 2.0 define(function () {     function Editor { /* Constructor */ }     return Editor; });• ECMAScript Module require(["editor"], function (Editor) {     new Editor(); 最期盼的!不需要 Library 即可擁有模組架構。 });• AMD 被 dojo、jQuery、Mootools、RequireJS 所採用、專為瀏覽器所設計。 為目前最夯且成熟的模組架構 不同的 Library 間可以共享模組。
  31. 31. JavaScript 模組化的實作已是當代趨勢• CommonJS 1.0 被 nodeJS 所採用,不適合使用在瀏覽器端。 // AMD Module• CommonJS 2.0 define(function () {     function Editor { /* Constructor */ }     return Editor; });• ECMAScript Module require(["editor"], function (Editor) {     new Editor(); 最期盼的!不需要 Library 即可擁有模組架構。 });• AMD // YUI Module YUI.add("editor", function () {     function Editor { /* Constructor */ } 被 dojo、jQuery、Mootools、RequireJS     Y.Editor = Editor;     所採用、專為瀏覽器所設計。 }); YUI.use("editor", function (Y) { 為目前最夯且成熟的模組架構     new Y.Editor(); }); 不同的 Library 間可以共享模組。
  32. 32. JavaScript 模組化的實作已是趨勢• CommonJS 1.0 被 nodeJS 所採用,不適合使用在瀏覽器端。• CommonJS 2.0 // AMD Module define(function () {     function Editor { /* Constructor */ }• AMD     return Editor; }); require(["editor"], function (Editor) { 被 dojo、jQuery、Mootools、RequireJS     new Editor(); 所採用、專為瀏覽器所設計。 }); 為目前最夯且成熟的模組架構 // YUI Module 不同的 Library 間可以共享模組。 YUI.add("editor", function () {     function Editor { /* Constructor */ }     Y.Editor = Editor;    • ECMAScript Module }); YUI.use("editor", function (Y) { 最期盼的!不需要 Library 即可擁有模組架構。     new Y.Editor(); });
  33. 33. JavaScript 模組化的實作已是趨勢• YUI Module CommonJS 1.0 能做到的事與 AMD 都相同 被 nodeJS 所採用,不適合使用在瀏覽器端。 AMD 畢竟是目前業界主流,YUI 也在整合中• CommonJS 2.0 // AMD Module 值得注意的是這樣的概念 YUI 2 年前就實作了 define(function () {     function Editor { /* Constructor */ }• AMD     return Editor; }); 架構面的設計就是 YUI 的強項啊! 被 dojo、jQuery、Mootools、RequireJS require(["editor"], function (Editor) {     new Editor(); 所採用、專為瀏覽器所設計。 }); 為目前最夯且成熟的模組架構 // YUI Module 不同的 Library 間可以共享模組。 YUI.add("editor", function () {     function Editor { /* Constructor */ }     Y.Editor = Editor;    • ECMAScript Module }); YUI.use("editor", function (Y) { 最期盼的!不需要 Library 即可擁有模組架構。     new Y.Editor(); });
  34. 34. JavaScript 模組化的實作已是趨勢• YUI Module CommonJS 1.0 能做到的事與 AMD 都相同 被 nodeJS 所採用,不適合使用在瀏覽器端。 AMD 畢竟是目前業界主流,YUI 也在整合中• CommonJS 2.0 // AMD Module 值得注意的是這樣的概念 YUI 2 年前就實作了 define(function () {     function Editor { /* Constructor */ }• AMD     return Editor; }); 架構面的設計就是 YUI 的強項啊! 被 dojo、jQuery、Mootools、RequireJS require(["editor"], function (Editor) {     new Editor(); 所採用、專為瀏覽器所設計。 }); 為目前最夯且成熟的模組架構 但模組化的有可能造成檔案被拆得更多更細 不同的 Library 間可以共享模組。 // YUI Module YUI.add("editor", function () {     function Editor { /* Constructor */ }     Y.Editor = Editor;    • ECMAScript Module 那我們如何有效率地載入模組呢 ? }); YUI.use("editor", function (Y) { 最期盼的!不需要 Library 即可擁有模組架構。     new Y.Editor(); });
  35. 35. Loader有效率地載入所 require 的 CSS 與 JavaScript 模組檔案 http://www.flickr.com/photos/bdesham/2432400623
  36. 36. 網站在初期、所需的 JavaScript 與 CSS 都很小 http://www.flickr.com/photos/halfbisqued/2353845688/
  37. 37. 網站在初期、所需的 JavaScript 與 CSS 都很小 jQuery - 32K http://www.flickr.com/photos/halfbisqued/2353845688/
  38. 38. 網站在初期、所需的 JavaScript 與 CSS 都很小 jQuery - 32K<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 就可做很多事! http://www.flickr.com/photos/halfbisqued/2353845688/
  39. 39. 發展到一定規模,該如何選擇每頁所需的檔案呢? 同時也是模組化所面臨的問題 http://www.nipic.com/show/2/55/d96dde66860c5190.html
  40. 40. 發展到一定規模,該如何選擇每頁所需的檔案呢? 天哪!我該如何處理 這麼多的 CSS / JS 檔案? 同時也是模組化所面臨的問題 http://www.nipic.com/show/2/55/d96dde66860c5190.html
  41. 41. 發展到一定規模,該如何選擇每頁所需的檔案呢? 天哪!我該如何處理 這麼多的 CSS / JS 檔案? 同時也是模組化所面臨的問題 http://www.nipic.com/show/2/55/d96dde66860c5190.html
  42. 42. 發展到一定規模,該如何選擇每頁所需的檔案呢? 天哪!我該如何處理 這麼多的 CSS / JS 檔案? 較不專業的網站在面對這樣的問題 都是純手工一頁一頁寫、或者是打成一大包 得考慮先後順序、維護性低、也無法最佳化 同時也是模組化所面臨的問題 http://www.nipic.com/show/2/55/d96dde66860c5190.html
  43. 43. 這時需要一個 Loader 機制協助載入零散且多的模組檔案 http://www.flickr.com/photos/billjacobus1/123644872/
  44. 44. 以 YUI DataTable 為範例 (datatable)
  45. 45. 以 YUI DataTable 為範例 (datatable)
  46. 46. 以 YUI DataTable 為範例 (datatable) 不 reload 的行為很多:換 頁、排序、直接編輯。也可 以有各種資料來源,是個很 複雜的模組。
  47. 47. 只要幾行程式碼就可以載入所需模組
  48. 48. 只要幾行程式碼就可以載入所需模組<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
  49. 49. 只要幾行程式碼就可以載入所需模組<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script><script>YUI().use(datatable, function (Y) {        });</script>
  50. 50. 只要幾行程式碼就可以載入所需模組<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script><script>YUI().use(datatable, function (Y) {        alert(Y.DataTable);});</script> 能想像 6 行程式碼背後、做了多少事嗎 ?
  51. 51. 計算 requires 模組的過程 yui (Seed)
  52. 52. 計算 requires 模組的過程 yui (Seed) YUI().use(datatable)
  53. 53. 計算 requires 模組的過程datatable-core datatable-head datatable-body base-build widget yui (Seed) YUI().use(datatable)
  54. 54. 計算 requires 模組的過程escape node-base base-plugin-host node-style model-list base-base event-focus viewnode-event-delegate classnamemanager attributedatatable-core datatable-head datatable-body base-build widget yui (Seed) YUI().use(datatable)
  55. 55. 計算 requires 模組的過程arraylist yui-base pluginhost event-synthetic attribute-core attribute-eventsmodel event-delegate attribute-extras array-extras array-invoke json-parse escape node-base base-plugin-host node-style model-list base-base event-focus view node-event-delegate classnamemanager attribute datatable-core datatable-head datatable-body base-build widget yui (Seed) YUI().use(datatable)
  56. 56. 計算 requires 模組的過程 與載入順序無關、YUI Module 在設計上是不需考慮先後順序的arraylist yui-base pluginhost event-synthetic attribute-core attribute-eventsmodel event-delegate attribute-extras array-extras array-invoke json-parse escape node-base base-plugin-host node-style model-list base-base event-focus view node-event-delegate classnamemanager attribute datatable-core datatable-head datatable-body base-build widget yui (Seed) YUI().use(datatable)
  57. 57. 強大的壓縮機 Combo Handler YUI().use(datatable)
  58. 58. 強大的壓縮機 Combo Handler YUI().use(datatable)前一頁只列出了 28 個模組,但實際上會有 64 個
  59. 59. 強大的壓縮機 Combo Handler YUI().use(datatable) 前一頁只列出了 28 個模組,但實際上會有 64 個64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
  60. 60. 強大的壓縮機 Combo Handler YUI().use(datatable) 前一頁只列出了 28 個模組,但實際上會有 64 個64 個模組就代表了 64 個檔案、 你可能會覺得很誇張 但模組化就是要把不相干的程式抽離、盡可能精簡
  61. 61. 強大的壓縮機 Combo Handler YUI().use(datatable) 前一頁只列出了 28 個模組,但實際上會有 64 個64 個模組就代表了 64 個檔案、 你可能會覺得很誇張 但模組化就是要把不相干的程式抽離、盡可能精簡即使採用 LABjs 這樣平行載入的方式,數量仍嫌太多
  62. 62. 強大的壓縮機 Combo Handler YUI().use(datatable) 前一頁只列出了 28 個模組,但實際上會有 64 個64 個模組就代表了 64 個檔案、 你可能會覺得很誇張 但模組化就是要把不相干的程式抽離、盡可能精簡即使採用 LABjs 這樣平行載入的方式,數量仍嫌太多YUI 的 Combo Handler 可把數量的問題徹底解決
  63. 63. 強大的壓縮機 Combo Handler YUI().use(datatable) 前一頁只列出了 28 個模組,但實際上會有 64 個64 個模組就代表了 64 個檔案、 你可能會覺得很誇張 但模組化就是要把不相干的程式抽離、盡可能精簡即使採用 LABjs 這樣平行載入的方式,數量仍嫌太多YUI 的 Combo Handler 可把數量的問題徹底解決 http://yui.yahooapis.com/combo? <模組1的檔案路徑>& <模組2的檔案路徑>& <模組3的檔案路徑>& <模組4的檔案路徑>& ...
  64. 64. 載入的方式是最流行的非同步平行下載 YUI().use(datatable)
  65. 65. 載入的方式是最流行的非同步平行下載 YUI().use(datatable)你所引用的 YUI Seed
  66. 66. 載入的方式是最流行的非同步平行下載 YUI().use(datatable)你所引用的 YUI Seed 先載入相關 CSS
  67. 67. 載入的方式是最流行的非同步平行下載 YUI().use(datatable)你所引用的 YUI Seed 先載入相關 CSS 將所需 JavaScript Modules 分散成 3 個請求、平行下載
  68. 68. 載入的方式是最流行的非同步平行下載 YUI().use(datatable)你所引用的 YUI Seed 先載入相關 CSS 將所需 JavaScript Modules 分散成 3 個請求、平行下載分散的邏輯:「檔案總數量」、「瀏覽器同時請求數量」、「瀏覽器 GET 長度的限制」 自己用 Loader (LABjs、Headjs) 刻這樣的機制會很辛苦
  69. 69. YUI().use(datatable)
  70. 70. 從種子變成大樹只花了 323 msYUI().use(datatable) 323ms
  71. 71. 從種子變成大樹只花了 323 msYUI().use(datatable) 323ms 是一棵完全沒有贅肉的大樹、因 Module 的切分非常的細、用不到的絕不載入同時符合了大型網站對於效能最佳化的考慮、在使用層面也非常容易(你只需知道模組名稱)
  72. 72. jQuery + RequireJS + jQueryUI 案例:採用 RequireJS、載入 TabView
  73. 73. jQuery + RequireJS + jQueryUI 案例:採用 RequireJS、載入 TabView1. 下載 RequireJS 所提供的 require-jquery。
  74. 74. jQuery + RequireJS + jQueryUI 案例:採用 RequireJS、載入 TabView1. 下載 RequireJS 所提供的 require-jquery。2. 下載 jQueryUI TabView、放在同一個目錄下。
  75. 75. jQuery + RequireJS + jQueryUI 案例:採用 RequireJS、載入 TabView1. 下載 RequireJS 所提供的 require-jquery。2. 下載 jQueryUI TabView、放在同一個目錄下。3. 在主程式設定要載入的檔案。
  76. 76. jQuery + RequireJS + jQueryUI 案例:採用 RequireJS、載入 TabView1. 下載 RequireJS 所提供的 require-jquery。2. 下載 jQueryUI TabView、放在同一個目錄下。3. 在主程式設定要載入的檔案。4. 若要 optimize、需安裝 nodeJS。
  77. 77. jQuery + RequireJS + jQueryUI 案例:採用 RequireJS、載入 TabView1. 下載 RequireJS 所提供的 require-jquery。2. 下載 jQueryUI TabView、放在同一個目錄下。3. 在主程式設定要載入的檔案。4. 若要 optimize、需安裝 nodeJS。 5. 經過 build 流程將上述要載入的檔案合併。
  78. 78. jQuery + RequireJS + jQueryUI 案例:採用 RequireJS、載入 TabView1. 下載 RequireJS 所提供的 require-jquery。2. 下載 jQueryUI TabView、放在同一個目錄下。3. 在主程式設定要載入的檔案。4. 若要 optimize、需安裝 nodeJS。 5. 經過 build 流程將上述要載入的檔案合併。 jQueryUI 若不是 AMD 格式、需注意載入順序。build 方式不夠自動化、不若 Combo 來得有效率。
  79. 79. jQuery + RequireJS + jQueryUI 案例:採用 RequireJS、載入 TabView1. 下載 RequireJS 所提供的 require-jquery。2. 下載 jQueryUI TabView、放在同一個目錄下。3. 在主程式設定要載入的檔案。4. 若要 optimize、需安裝 nodeJS。 5. 經過 build 流程將上述要載入的檔案合併。 jQueryUI 若不是 AMD 格式、需注意載入順序。build 方式不夠自動化、不若 Combo 來得有效率。 YUI().use(“tabview”)
  80. 80. YUI 自動載入函式庫的方式實在太 Sexy 了 The creator of jQueryJohn Resig http://www.quora.com/How-could-YUI3-improve-its-image-compared-to-jQuery-MooTools-etc
  81. 81. YUI 自動載入函式庫的方式實在太 Sexy 了 YUI().use() + pulling code off of Yahoos CDN is damn sexy and should be promoted *VERY* heavily. The creator of jQueryJohn Resig http://www.quora.com/How-could-YUI3-improve-its-image-compared-to-jQuery-MooTools-etc
  82. 82. 的 Loader 改版
  83. 83. 的 Loader 改版我們大多是在 Page-Level 設定要載入哪些 JS / CSS
  84. 84. 的 Loader 改版我們大多是在 Page-Level 設定要載入哪些 JS / CSS 但 YUI 的架構會讓我開始思考:
  85. 85. 的 Loader 改版我們大多是在 Page-Level 設定要載入哪些 JS / CSS 但 YUI 的架構會讓我開始思考: 能不能以 View Module (或稱 Partial)
  86. 86. 的 Loader 改版 我們大多是在 Page-Level 設定要載入哪些 JS / CSS 但 YUI 的架構會讓我開始思考: 能不能以 View Module (或稱 Partial)反向推算此頁所需的 JS/CSS、 再用 Combo 機制組合下載
  87. 87. 的 Loader 改版 我們大多是在 Page-Level 設定要載入哪些 JS / CSS 但 YUI 的架構會讓我開始思考: 能不能以 View Module (或稱 Partial)反向推算此頁所需的 JS/CSS、 再用 Combo 機制組合下載 以下是這個概念的 Demo,也會實作在新版的 miiiCasa http://josephj.com/lab/2012/loader-strategy/demo.php https://github.com/josephj/loader-strategy
  88. 88. miiiCasa 從 Day 1 就致力於模組化開發
  89. 89. miiiCasa 從 Day 1 就致力於模組化開發
  90. 90. miiiCasa 從 Day 1 就致力於模組化開發#masthead #announcement #space_entry #notification #contact-suggest
  91. 91. miiiCasa 從 Day 1 就致力於模組化開發#masthead #announcement #space_entry #notification #contact-suggest 這 5 個區塊都有各自的 JS、CSS、View 檔案
  92. 92. 但載入 JS/CSS 的方式還是以 Page 為導向
  93. 93. 但載入 JS/CSS 的方式還是以 Page 為導向 YUI().use(*) 頁面上有什麼就載入什麼 並未善用 YUI 本身有的彈性
  94. 94. 但載入 JS/CSS 的方式還是以 Page 為導向 YUI().use(*) 頁面上有什麼就載入什麼 並未善用 YUI 本身有的彈性 隨著功能增加、YUI 的 Module 越來越細,這個檔案 也就越來越難維護...
  95. 95. 但載入 JS/CSS 的方式還是以 Page 為導向 YUI().use(*) 頁面上有什麼就載入什麼 並未善用 YUI 本身有的彈性 隨著功能增加、YUI 的 Module 越來越細,這個檔案 也就越來越難維護...
  96. 96. 但載入 JS/CSS 的方式還是以 Page 為導向 YUI().use(*) 頁面上有什麼就載入什麼 並未善用 YUI 本身有的彈性 一直很想能夠改善這個頭痛的問題 由頁面上每個 View 模組回報 隨著功能增加、YUI 的 計算出單一頁面需要載入的 CSS / JS 模組 Module 越來越細,這個檔案 也就越來越難維護...
  97. 97. 改版、當然得將載入方式改為 Module 導向 !
  98. 98. 改版、當然得將載入方式改為 Module 導向 !
  99. 99. 改版、當然得將載入方式改為 Module 導向 ! charming/_mastheadcommon/_sidebar welcome/_notification
  100. 100. 概念 1:模組自身定義清楚相關檔案與 require
  101. 101. 概念 1:模組自身定義清楚相關檔案與 requireA. 通知訊息模組 (_notification) 此模組的基本資訊如下: ID welcome/_notification CSS welcome/_notification.css JS welcome/_notification.js Requires scroll-pagination, node-event-delegate, large-view
  102. 102. 概念 1:模組自身定義清楚相關檔案與 requireA. 通知訊息模組 (_notification) Hi, 我是此模組製作人 josephj 此模組的基本資訊如下: ID welcome/_notification CSS welcome/_notification.css JS welcome/_notification.js Requires scroll-pagination, node-event-delegate, large-view
  103. 103. 概念 1:模組自身定義清楚相關檔案與 requireA. 通知訊息模組 (_notification) Hi, 我是此模組製作人 josephj 此模組的基本資訊如下: <?php ?> ID welcome/_notification CSS welcome/_notification.css JS welcome/_notification.js Requires scroll-pagination, node-event-delegate, large-view
  104. 104. 概念 1:模組自身定義清楚相關檔案與 require A. 通知訊息模組 (_notification) Hi, 我是此模組製作人 josephj 此模組的基本資訊如下: <?php ?> ID welcome/_notification CSS welcome/_notification.css JS welcome/_notification.js Requires scroll-pagination, node-event-delegate, large-viewB. 通用頁首模組 (_masthead)
  105. 105. 概念 1:模組自身定義清楚相關檔案與 require A. 通知訊息模組 (_notification) Hi, 我是此模組製作人 josephj 此模組的基本資訊如下: <?php ?> ID welcome/_notification CSS welcome/_notification.css JS welcome/_notification.js Requires scroll-pagination, node-event-delegate, large-viewB. 通用頁首模組 (_masthead) Hi, 我是此模組製作人 clonn
  106. 106. 概念 1:模組自身定義清楚相關檔案與 require A. 通知訊息模組 (_notification) Hi, 我是此模組製作人 josephj 此模組的基本資訊如下: <?php ?> ID welcome/_notification CSS welcome/_notification.css JS welcome/_notification.js Requires scroll-pagination, node-event-delegate, large-viewB. 通用頁首模組 (_masthead) Hi, 我是此模組製作人 clonn 此模組的基本資訊如下: <?php ?> ID common/_masthead CSS common/_masthead.css JS common/_masthead.js Requires panel, device-navigation
  107. 107. 概念 1:模組自身定義清楚相關檔案與 require A. 通知訊息模組 (_notification) Hi, 我是此模組製作人 josephj 此模組的基本資訊如下: <?php ?> ID welcome/_notification CSS welcome/_notification.css JS welcome/_notification.js Requires scroll-pagination, node-event-delegate, large-viewB. 通用頁首模組 (_masthead) C. 側邊欄模組 (_sidebar) Hi, 我是此模組製作人 clonn 此模組的基本資訊如下: <?php ?> ID common/_masthead CSS common/_masthead.css JS common/_masthead.js Requires panel, device-navigation
  108. 108. 概念 1:模組自身定義清楚相關檔案與 require A. 通知訊息模組 (_notification) Hi, 我是此模組製作人 josephj 此模組的基本資訊如下: <?php ?> ID welcome/_notification CSS welcome/_notification.css JS welcome/_notification.js Requires scroll-pagination, node-event-delegate, large-viewB. 通用頁首模組 (_masthead) C. 側邊欄模組 (_sidebar) Hi, 我是此模組製作人 clonn Hi, 我是此模組製作人 Rosemei 此模組的基本資訊如下: <?php ?> ID common/_masthead CSS common/_masthead.css JS common/_masthead.js Requires panel, device-navigation
  109. 109. 概念 1:模組自身定義清楚相關檔案與 require A. 通知訊息模組 (_notification) Hi, 我是此模組製作人 josephj 此模組的基本資訊如下: <?php ?> ID welcome/_notification CSS welcome/_notification.css JS welcome/_notification.js Requires scroll-pagination, node-event-delegate, large-viewB. 通用頁首模組 (_masthead) C. 側邊欄模組 (_sidebar) Hi, 我是此模組製作人 clonn Hi, 我是此模組製作人 Rosemei 此模組的基本資訊如下: <?php ?> ID common/_masthead 此模組的基本資訊如下: <?php ?> CSS common/_masthead.css ID common/_masthead JS common/_masthead.js CSS common/_masthead.css Requires panel, device-navigation JS 無 Requires 無
  110. 110. 概念 2:頁面設定有哪些 View 模組 登入後首頁 (welcome)
  111. 111. 概念 2:頁面設定有哪些 View 模組Hi, 我是此頁面整合者 lingihuang 登入後首頁 (welcome)
  112. 112. 概念 2:頁面設定有哪些 View 模組 Hi, 我是此頁面整合者 lingihuang 登入後首頁 (welcome)此頁面有以下 View 模組:·•welcome/_notification·•charming/_masthead·•common/_sidebar
  113. 113. 概念 2:頁面設定有哪些 View 模組 Hi, 我是此頁面整合者 lingihuang 登入後首頁 (welcome) 接著 PHP 去計算每個模組、 把 YUI Loader 所需的設定在頁面上 Output 此頁面 Require 以下模組:<link rel="stylesheet" href="combo/?g=css&f=index/welcome/_notification.css,index/charming/_masthead.css,index/common/_sidebar.css"><script src="combo/?g=js"></script><script>YUI_config = {"filter":"raw","async":true,"combine":true,"comboBase":"combo/?f=","comboSep":",","root":"lib/yui/ ·• welcome/_notificationbuild/","langs":"zh-TW,en-US","groups":{"mui":{"combine":true,"fetchCSS":true,"root":"lib/mui/","lang":["en-US","zh-TW"],"modules":{"platform-core":{"path":"platform/core.js","requires":["node-base","event-base","platform-sandbox"]},"platform-sandbox": ·• charming/_masthead{"path":"platform/sandbox.js"},"lang-service":{"path":"platform/lang_service.js","requires":["platform-core","platform-sandbox","intl"]},"scroll-pagination":{"path":"scroll-pagination/scroll-pagination.js","requires":["event","event-resize","node-event- ·• common/_sidebardelegate","datasource","scroll-pagination-css"]},"scroll-pagination-css":{"path":"scroll-pagination/assets/scroll-pagination.css","type":"css"},"shjs":{"path":"shjs/sh_php.min.js","requires":["shjs-core","shjs-css"]},"shjs-css":{"path":"shjs/sh_nedit.css","type":"css"},"mui-cssbutton":{"path":"cssbutton/assets/skins/miiicasa/cssbutton-skin.css","type":"css"},"shjs-core":{"path":"shjs/sh_main.min.js"}}},"index":{"combine":true,"fetchCSS":false,"root":"index/","lang":["en-US","zh-TW"],"modules":{"welcome":{"path":"welcome/welcome.js","lang":["en-US","zh-TW"],"requires":["platform-core","platform-sandbox","lang-service","console"]},"welcome/_notification":{"path":"welcome/_notification.js","requires":["substitute","scroll-pagination","yql","panel","node-event-delegate","handlebars"]},"charming/_masthead":{"path":"charming/_masthead.js","requires":["panel","shjs"]},"common/_sidebar":{"requires":["mui-cssbutton"]}}}}};YUI().use("welcome","welcome/_notification","charming/_masthead","common/_sidebar");</script><script>YUI().use("welcome","welcome/_notification","charming/_masthead","common/_sidebar");</script> 註 - Combo 可採用 Minify https://github.com/mrclay/minify
  114. 114. 架構實作 Prototypehttp://josephj.com/lab/2012/loader-strategy/demo.php https://github.com/josephj/loader-strategy
  115. 115. 架構實作 Prototypehttp://josephj.com/lab/2012/loader-strategy/demo.php https://github.com/josephj/loader-strategy
  116. 116. 架構實作 Prototypehttp://josephj.com/lab/2012/loader-strategy/demo.php https://github.com/josephj/loader-strategy 直接引用的 JavaScript 與 CSS,是整個網站不變且共用的基礎
  117. 117. 架構實作 Prototypehttp://josephj.com/lab/2012/loader-strategy/demo.php https://github.com/josephj/loader-strategy 直接引用的 JavaScript 與 CSS,是整個網站不變且共用的基礎 動態載入的 JavaScript 與 CSS,是依 不同模組相依性所計算組合出來的
  118. 118. 架構實作 Prototypehttp://josephj.com/lab/2012/loader-strategy/demo.php https://github.com/josephj/loader-strategy 直接引用的 JavaScript 與 CSS,是整個網站不變且共用的基礎 動態載入的 JavaScript 與 CSS,是依 不同模組相依性所計算組合出來的 同時並發的 Requests
  119. 119. YUI Architecture Rocks! Module 領先業界的思維 ⼀一定會越拆越細 Loader 領先業界的思維 Combo 的機制比 Build 好 Combo 軟體自動化的極致 可用 Minify 或 combohandler 代替 CDN 善用大公司的資源吧 有錢才會有不需辛苦實作、幾行就可以寫出業界的 Best Practice YUI 還有什麼值得我們參考的 ? http://www.flickr.com/photos/kelvin255/5576672521/
  120. 120. OOP Object-oriented Programming概念人人都有,但如何實作?有好的架構與工具嗎? http://www.zeegee.com/courses/oop-1
  121. 121. 講到寫程式的 Reusability (重複利用)大家最容易聯想到的就是「物件導向」了
  122. 122. 表單驗證 - Form Validation 文字
  123. 123. 表單驗證 - Form Validation 可以說是 JavaScript 最基本的功能 文字每個專業的 F2E 都可以快速地達到要求 若使用物件導向能帶來什麼幫助 ?
  124. 124. 將表單驗證包裝成 Y.FormValidator 後...
  125. 125. 將表單驗證包裝成 Y.FormValidator 後... 檔案名稱 實際作用 未用 OOP 使用 OOP _account_identity.js 變更帳號 共 356 行 共 200 行 (-44%)_account_password.js 更改密碼 共 355 行 共 221 行 (-38%) _profile_edit_info.js 修改資料 共 454 行 共 292 行 (-36%)
  126. 126. 將表單驗證包裝成 Y.FormValidator 後... 檔案名稱 實際作用 未用 OOP 使用 OOP _account_identity.js 變更帳號 共 356 行 共 200 行 (-44%)_account_password.js 更改密碼 共 355 行 共 221 行 (-38%) _profile_edit_info.js 修改資料 共 454 行 共 292 行 (-36%) 程式碼總行數至少都減少 35% 以上 寫法功能變得一致、有 Bug 可一起處理、提昇品質 效果可謂是立竿見影 !
  127. 127. 將表單驗證包裝成 Y.FormValidator 後... 物件導向的好處: ·•避免撰寫相同的代碼 ·•縮短開發時間 ·•減少團隊開發的不一致 應被大量地運用在開發中
  128. 128. 將表單驗證包裝成 Y.FormValidator 後... 物件導向的好處: 檔案名稱 實際作用 未用 OOP 使用 OOP _account_identity.js 變更帳號 共 356 行 共 200 行 (-44%) ·•避免撰寫相同的代碼_account_password.js 更改密碼 共 355 行 共 221 行 (-38%) ·•縮短開發時間 _profile_edit_info.js 修改資料 共 454 行 共 292 行 (-36%) ·•減少團隊開發的不一致 應被大量地運用在開發中
  129. 129. 將表單驗證包裝成 Y.FormValidator 後... 物件導向的好處: 檔案名稱 實際作用 未用 OOP 使用 OOP _account_identity.js 變更帳號 共 356 行 共 200 行 (-44%) ·•避免撰寫相同的代碼_account_password.js 更改密碼 共 355 行 共 221 行 (-38%) ·•縮短開發時間 _profile_edit_info.js 修改資料 共 454 行 共 292 行 (-36%) ·•減少團隊開發的不一致 程式碼總行數至少都減少 35% 以上 應被大量地運用在開發中 寫法功能變得一致、有 Bug 可一起處理、提昇品質 效果可謂是立竿見影 !
  130. 130. 使用原生的 JavaScript 撰寫 OOP 令人挫折
  131. 131. 使用原生的 JavaScript 撰寫 OOP 令人挫折Constructorfunction Car(brand, color) {    this.brand = brand; // 廠牌,只能寫⼀一次。    this.color = color; // 顏色,只能寫⼀一次。    this.miles = 0;     // 里程數,必須是唯讀。}Car.prototype.run = function () {    var i = 0;    var timer = setInterval(1000, function() {        if (i >= 10) clearInterval(timer);        this.miles += 1;        i += 1;    });};
  132. 132. 使用原生的 JavaScript 撰寫 OOP 令人挫折Constructor Instancefunction Car(brand, color) { var oCar   = new Car(‘ford’, ‘black’);    this.brand = brand; // 廠牌,只能寫⼀一次。 oCar.brand = Honda; // 不應被改寫    this.color = color; // 顏色,只能寫⼀一次。 oCar.miles = 1公里; // 天兵使用者亂改 :p    this.miles = 0;     // 里程數,必須是唯讀。 oCar.run();          // 車子何時停?}Car.prototype.run = function () {    var i = 0;    var timer = setInterval(1000, function() {        if (i >= 10) clearInterval(timer);        this.miles += 1;        i += 1;    });};
  133. 133. 使用原生的 JavaScript 撰寫 OOP 令人挫折Constructor Instancefunction Car(brand, color) { var oCar   = new Car(‘ford’, ‘black’);    this.brand = brand; // 廠牌,只能寫⼀一次。 oCar.brand = Honda; // 不應被改寫    this.color = color; // 顏色,只能寫⼀一次。 oCar.miles = 1公里; // 天兵使用者亂改 :p    this.miles = 0;     // 里程數,必須是唯讀。 oCar.run();          // 車子何時停?}Car.prototype.run = function () {    var i = 0;    var timer = setInterval(1000, function() {        if (i >= 10) clearInterval(timer);        this.miles += 1;        i += 1;    });}; 如何保護屬性不被濫用 ? 如何利用事件 ?
  134. 134. 有人會這樣做屬性的封裝、防止改寫 function Car(brand, color) {     var _brand = brand,         _color = color,         _miles = 0;     this.getBrand = function () {         return _brand;     };     this.getColor = function () {         return _color;     };     this.getMiles = function () {         return _miles;     };     this.run = function (callback) {         var i = 0,             timer; timer = setInterval(1000, function() {             if (i >= 10) {                 clearInterval(timer);             }             _miles += 1;             i += 1;         });         callback.call(this); // callback 很鳥     }; }
  135. 135. 有人會這樣做屬性的封裝、防止改寫 function Car(brand, color) {     var _brand = brand,         _color = color,         _miles = 0;     this.getBrand = function () {         return _brand;     };     this.getColor = function () {         return _color;     };     this.getMiles = function () {         return _miles;     };     this.run = function (callback) {         var i = 0,             timer; timer = setInterval(1000, function() {             if (i >= 10) {                 clearInterval(timer);             }             _miles += 1;             i += 1;         });         callback.call(this); // callback 很鳥     }; }能用、但得自己刻 getter / setter 實在很累
  136. 136. Framework 就是應帶你脫離原始!
  137. 137. YUI OOP - 內建屬性封裝
  138. 138. YUI OOP - 內建屬性封裝ConstructorCar.ATTRS = {    “brand”: {        value: null,        writeOnce: true // 設定只能寫入⼀一次    },    “color”: {        value: null,        writeOnce: true  // 設定只能寫入⼀一次    },    “miles”: {        value: 0,        readOnly: true  // 設定只能讀取、不能寫入    }} ;
  139. 139. YUI OOP - 內建屬性封裝Constructor InstanceCar.ATTRS = { var oCar = new Car({    “brand”: {     brand: “Ford”,        value: null,     color: “black”        writeOnce: true // 設定只能寫入⼀一次 });    },    “color”: { oCar.set(“miles”, 100);     // return false;        value: null, oCar.set(“brand”, “Honda”); // return false;        writeOnce: true  // 設定只能寫入⼀一次 oCar.set(“color”, “white”); // return false;    },    “miles”: { 可有效防止使用者不當操作        value: 0,        readOnly: true  // 設定只能讀取、不能寫入    }} ;
  140. 140. YUI OOP - 內建屬性封裝·•validator - 驗證使用者輸入值·•writeOnce - 只能寫入一次·•readOnly - 唯讀·•value - 預設值·•valueFn - 預設值 (以 Function 取得)·•setter - 使用者 set 時所使用的 Function·•getter - 使用者 get 時所使用的 Function
  141. 141. YUI OOP - 內建自定事件Y.extend(Car, Y.Base, { oCar = new Car();    run: function () { oCar.on(“stop”, function (e) {        var i = 0,     alert(e.detail.miles);            timer; });        timer = setInterval(1000, function() { oCar.run();            if (i >= 10){               clearInterval(timer);               this.fire(“stop”, this.miles);            }            this.miles += 1;            i += 1;       });    }};
  142. 142. YUI OOP - 內建自定事件ConstructorY.extend(Car, Y.Base, { oCar = new Car();    run: function () { oCar.on(“stop”, function (e) {        var i = 0,     alert(e.detail.miles);            timer; });        timer = setInterval(1000, function() { oCar.run();            if (i >= 10){               clearInterval(timer);               this.fire(“stop”, this.miles);            }            this.miles += 1;            i += 1;       });    }};
  143. 143. YUI OOP - 內建自定事件Constructor InstanceY.extend(Car, Y.Base, { oCar = new Car();    run: function () { oCar.on(“stop”, function (e) {        var i = 0,     alert(e.detail.miles);            timer; });        timer = setInterval(1000, function() { oCar.run();            if (i >= 10){               clearInterval(timer);               this.fire(“stop”, this.miles);            }            this.miles += 1;            i += 1;       });    }};
  144. 144. YUI 的所有元件開發皆是基於此 OOP 架構
  145. 145. miiiCasa 利用 YUI OOP 所包裝的物件• Scroll Pagination 像 Twitter 或 Facebook 捲動讀取更多資料 https://github.com/miiicasa/scroll-pagination• Editable 直接修改資料 https://github.com/miiicasa/yui3-editable• Placeholder 相容於所有瀏覽器的 Form Placeholder https://github.com/miiicasa/yui3-placeholder• CrossFrame 相容於所有瀏覽器的 HTML5 postMessage https://github.com/miiicasa/yui3-crossframe• Module Platform 跨模組溝通的架構 https://github.com/josephj/javascript-platform-yui
  146. 146. Part 2Completeness Tools
  147. 147. 前端工程師要整合的東西實在太多
  148. 148. 前端工程師要整合的東西實在太多 MVC CSS Grid Core (DOM / Event / AJAX) Documentation Unit Test Automated Build Template MinifyOOP Loader pJAX Localization Module Debug Server-side
  149. 149. 前端工程師要整合的東西實在太多 MVC CSS Grid Core Backbone.js 960gs (DOM / Event / AJAX) Documentation jQuery Unit Test Automated Nature Docs TestSwarm Build Template Minify handlebarsOOP Loader Optimizer Google Closure LABjs pJAX Localization Key / Value :p Module jquery-pjax RequireJS Debug Server-side nodeJS console
  150. 150. YUI 提供了全方位的服務 MVC CSS Grids Core Y.Model / Y.View / Y.Router CSS Grids (DOM / Event / AJAX) Documentation Y.Node / Y.Event / Y.IO Unit Test Automated yuidocjs Y.Test yeti Build Template Minify OOP Loader YUI Build Y.Handlebars YUI CompressorY.Attribute / Y.Base / Y.Widget / Y.Plugin Y.Loader pJAX Localization Y.Intl / Y.DataType Module Y.Pjax YUI.add() Debug Server-side YUI in nodejs Y.Log()
  151. 151. 要載入使用也太容易了吧!
  152. 152. 要載入使用也太容易了吧!1. 引用 YUI Seed File (24.1K) <script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
  153. 153. 要載入使用也太容易了吧!1. 引用 YUI Seed File (24.1K) <script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>2. 指定所需的模組即可 <script> YUI().use(handlebars, function (Y) { }); </script>
  154. 154. yuidocjs從註解產生 API 文件 nodeJSmarkdown syntaxhandlebars helper 介面親和 支援多種程式語言
  155. 155. yuidocjs - 從註解產生 API 文件http://miiicasa.github.com/yui3-editable/classes/Editable.html
  156. 156. 支援多國語系依語系格式化日期YUI({lang:"zh-Hant-TW"}).use("datatype-date", function(Y) {    var dateString = Y.DataType.Date.format(new Date(), {format:"%x %X"});    alert(dateString); // 12/05/17 上午12時32分33秒});Calendar 控制項YUI({lang:"zh-Hant-TW"}).use("calendar", function(Y) { new Y.Calendar();});翻譯也是 Module
  157. 157. 對軟體開發很有價值的工具 Unit Test Automation YUI in Node MVC
  158. 158. YUI 著重於開發架構的處理解決中大型應用程式及開發團隊實際所遭遇的問題 並不只是單單一個 JavaScript Framework
  159. 159. 對大型網站應用程式,YUI 完全勝出For scalable web applications,YUI really excels. Principal Front End Engineer, Yahoo! Nicholas Zakas http://www.nczonline.net/blog/2010/11/03/response-to-john-resigs-comments-about-yui/
  160. 160. 參考連結 NFL.com 從 Prototype 換到 YUIhttp://www.yuiblog.com/blog/2012/01/17/video-yuiconf2011-rcannon/ Derek Gathright - Why YUI? 從 jQuery 改用 YUIhttp://www.yuiblog.com/blog/2012/01/30/video-yuiconf2011-dgathright/ jQuery vs. YUI 引发的思考 對 2 個 Library 中肯的評論 http://hikejun.com/blog/2010/11/07/jquery-vs-yui引发的思考/
  161. 161. miiiCasa Needs Your Join!!歡迎對軟硬體結合、私有雲、Web 3.0、家庭的 SNS 有興趣的同學加入! 更多內容: http://tinyurl.com/miiicasa-f2e
  162. 162. Thank you for sharing!

×