More Related Content Similar to YUI is Sexy - 使用 YUI 作為開發基礎 (20) More from Joseph Chiang (20) YUI is Sexy - 使用 YUI 作為開發基礎2. YUI
一黨不能獨大、媒體不能壟斷
JavaScript 函式庫當然也要多一些選擇啦
http://www.flickr.com/photos/freestylee/5399124878/
7. NASA Space Station
由 7 個不同國家所提供的 50 多個模組
http://astronomy.wikia.com/wiki/International_Space_Station
8. NASA Space Station
由 7 個不同國家所提供的 50 多個模組
http://astronomy.wikia.com/wiki/International_Space_Station
9. NASA Space Station
舉凡建築、航太、機械、硬體到軟體
在任何分工精細的工程領域
模組化開發是必然趨勢
「採用既有模組、避免重新打造輪子」
由 7 個不同國家所提供的 50 多個模組
http://astronomy.wikia.com/wiki/International_Space_Station
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. 最基本的 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. 最基本的 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 與其他主流函式庫的瓶頸
15. YUI 3 架構徹底解決模組問題
2009/6 月,YUI 推出與先前架構完全不同的 3.0 版
解決前述全域變數、維護性、前後順序、模組效率的問題
所有 YUI 模組檔案皆必須以這樣的方式包覆:
16. YUI 3 架構徹底解決模組問題
2009/6 月,YUI 推出與先前架構完全不同的 3.0 版
解決前述全域變數、維護性、前後順序、模組效率的問題
所有 YUI 模組檔案皆必須以這樣的方式包覆:
YUI.add("模組名稱", function (Y) {
}, requires:["所需模組 1", "所需模組 2"]);
17. YUI 3 架構徹底解決模組問題
2009/6 月,YUI 推出與先前架構完全不同的 3.0 版
解決前述全域變數、維護性、前後順序、模組效率的問題
所有 YUI 模組檔案皆必須以這樣的方式包覆:
YUI.add("模組名稱", function (Y) {
Why callback?
放到頁面上時不會立即執行、
等到要用時再執行即可。好處
是做程式碼的隔離、不再需要
處理每個模組間的先後順序。
}, requires:["所需模組 1", "所需模組 2"]);
18. YUI 3 架構徹底解決模組問題
2009/6 月,YUI 推出與先前架構完全不同的 3.0 版
解決前述全域變數、維護性、前後順序、模組效率的問題
所有 YUI 模組檔案皆必須以這樣的方式包覆:
editor.js YUI.add("模組名稱", function (Y) {
editor
}, requires:["所需模組 1", "所需模組 2"]);
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. 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"]);
28. JavaScript 模組化的實作已是當代趨勢
• CommonJS 1.0
被 nodeJS 所採用,不適合使用在瀏覽器端。
• CommonJS 2.0
• ECMAScript Module
最期盼的!不需要 Library 即可擁有模組架構。
29. JavaScript 模組化的實作已是當代趨勢
• CommonJS 1.0
被 nodeJS 所採用,不適合使用在瀏覽器端。
• CommonJS 2.0
• ECMAScript Module
最期盼的!不需要 Library 即可擁有模組架構。
• AMD
被 dojo、jQuery、Mootools、RequireJS
所採用、專為瀏覽器所設計。
為目前最夯且成熟的模組架構
不同的 Library 間可以共享模組。
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. 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. 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. 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. 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();
});
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/
40. 發展到一定規模,該如何選擇每頁所需的檔案呢?
天哪!我該如何處理
這麼多的 CSS / JS 檔案?
同時也是模組化所面臨的問題
http://www.nipic.com/show/2/55/d96dde66860c5190.html
41. 發展到一定規模,該如何選擇每頁所需的檔案呢?
天哪!我該如何處理
這麼多的 CSS / JS 檔案?
同時也是模組化所面臨的問題
http://www.nipic.com/show/2/55/d96dde66860c5190.html
42. 發展到一定規模,該如何選擇每頁所需的檔案呢?
天哪!我該如何處理
這麼多的 CSS / JS 檔案?
較不專業的網站在面對這樣的問題
都是純手工一頁一頁寫、或者是打成一大包
得考慮先後順序、維護性低、也無法最佳化
同時也是模組化所面臨的問題
http://www.nipic.com/show/2/55/d96dde66860c5190.html
46. 以 YUI DataTable 為範例 (datatable)
不 reload 的行為很多:換
頁、排序、直接編輯。也可
以有各種資料來源,是個很
複雜的模組。
54. 計算 requires 模組的過程
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')
55. 計算 requires 模組的過程
arraylist yui-base pluginhost event-synthetic attribute-core attribute-events
model 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. 計算 requires 模組的過程
與載入順序無關、YUI Module 在設計上是不需考慮先後順序的
arraylist yui-base pluginhost event-synthetic attribute-core attribute-events
model 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')
59. 強大的壓縮機 Combo Handler
YUI().use('datatable')
前一頁只列出了 28 個模組,但實際上會有 64 個
64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
60. 強大的壓縮機 Combo Handler
YUI().use('datatable')
前一頁只列出了 28 個模組,但實際上會有 64 個
64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
但模組化就是要把不相干的程式抽離、盡可能精簡
61. 強大的壓縮機 Combo Handler
YUI().use('datatable')
前一頁只列出了 28 個模組,但實際上會有 64 個
64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
但模組化就是要把不相干的程式抽離、盡可能精簡
即使採用 LABjs 這樣平行載入的方式,數量仍嫌太多
62. 強大的壓縮機 Combo Handler
YUI().use('datatable')
前一頁只列出了 28 個模組,但實際上會有 64 個
64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
但模組化就是要把不相干的程式抽離、盡可能精簡
即使採用 LABjs 這樣平行載入的方式,數量仍嫌太多
YUI 的 Combo Handler 可把數量的問題徹底解決
63. 強大的壓縮機 Combo Handler
YUI().use('datatable')
前一頁只列出了 28 個模組,但實際上會有 64 個
64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
但模組化就是要把不相干的程式抽離、盡可能精簡
即使採用 LABjs 這樣平行載入的方式,數量仍嫌太多
YUI 的 Combo Handler 可把數量的問題徹底解決
http://yui.yahooapis.com/combo?
<模組1的檔案路徑>&
<模組2的檔案路徑>&
<模組3的檔案路徑>&
<模組4的檔案路徑>&
...
67. 載入的方式是最流行的非同步平行下載
YUI().use('datatable')
你所引用的 YUI Seed
先載入相關 CSS
將所需 JavaScript Modules 分散成 3 個請求、平行下載
68. 載入的方式是最流行的非同步平行下載
YUI().use('datatable')
你所引用的 YUI Seed
先載入相關 CSS
將所需 JavaScript Modules 分散成 3 個請求、平行下載
分散的邏輯:「檔案總數量」、「瀏覽器同時請求數量」、「瀏覽器 GET 長度的限制」
自己用 Loader (LABjs、Headjs) 刻這樣的機制會很辛苦
73. jQuery + RequireJS + jQueryUI
案例:採用 RequireJS、載入 TabView
1. 下載 RequireJS 所提供的 require-jquery。
74. jQuery + RequireJS + jQueryUI
案例:採用 RequireJS、載入 TabView
1. 下載 RequireJS 所提供的 require-jquery。
2. 下載 jQueryUI TabView、放在同一個目錄下。
75. jQuery + RequireJS + jQueryUI
案例:採用 RequireJS、載入 TabView
1. 下載 RequireJS 所提供的 require-jquery。
2. 下載 jQueryUI TabView、放在同一個目錄下。
3. 在主程式設定要載入的檔案。
76. jQuery + RequireJS + jQueryUI
案例:採用 RequireJS、載入 TabView
1. 下載 RequireJS 所提供的 require-jquery。
2. 下載 jQueryUI TabView、放在同一個目錄下。
3. 在主程式設定要載入的檔案。
4. 若要 optimize、需安裝 nodeJS。
77. jQuery + RequireJS + jQueryUI
案例:採用 RequireJS、載入 TabView
1. 下載 RequireJS 所提供的 require-jquery。
2. 下載 jQueryUI TabView、放在同一個目錄下。
3. 在主程式設定要載入的檔案。
4. 若要 optimize、需安裝 nodeJS。
5. 經過 build 流程將上述要載入的檔案合併。
78. jQuery + RequireJS + jQueryUI
案例:採用 RequireJS、載入 TabView
1. 下載 RequireJS 所提供的 require-jquery。
2. 下載 jQueryUI TabView、放在同一個目錄下。
3. 在主程式設定要載入的檔案。
4. 若要 optimize、需安裝 nodeJS。
5. 經過 build 流程將上述要載入的檔案合併。
jQueryUI 若不是 AMD 格式、需注意載入順序。
build 方式不夠自動化、不若 Combo 來得有效率。
79. jQuery + RequireJS + jQueryUI
案例:採用 RequireJS、載入 TabView
1. 下載 RequireJS 所提供的 require-jquery。
2. 下載 jQueryUI TabView、放在同一個目錄下。
3. 在主程式設定要載入的檔案。
4. 若要 optimize、需安裝 nodeJS。
5. 經過 build 流程將上述要載入的檔案合併。
jQueryUI 若不是 AMD 格式、需注意載入順序。
build 方式不夠自動化、不若 Combo 來得有效率。
YUI().use(“tabview”)
80. YUI 自動載入函式庫的方式實在太 Sexy 了
The creator of jQuery
John Resig
http://www.quora.com/How-could-YUI3-improve-its-image-compared-to-jQuery-MooTools-etc
81. YUI 自動載入函式庫的方式實在太 Sexy 了
YUI().use() + pulling code off of Yahoo's CDN is
damn sexy and should be promoted *VERY*
heavily.
The creator of jQuery
John Resig
http://www.quora.com/How-could-YUI3-improve-its-image-compared-to-jQuery-MooTools-etc
85. 的 Loader 改版
我們大多是在 Page-Level 設定要載入哪些 JS / CSS
但 YUI 的架構會讓我開始思考:
能不能以 View Module (或稱 Partial)
86. 的 Loader 改版
我們大多是在 Page-Level 設定要載入哪些 JS / CSS
但 YUI 的架構會讓我開始思考:
能不能以 View Module (或稱 Partial)
反向推算此頁所需的 JS/CSS、 再用 Combo 機制組合下載
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
90. miiiCasa 從 Day 1 就致力於模組化開發
#masthead
#announcement #space_entry
#notification #contact-suggest
91. miiiCasa 從 Day 1 就致力於模組化開發
#masthead
#announcement #space_entry
#notification #contact-suggest
這 5 個區塊都有各自的
JS、CSS、View 檔案
94. 但載入 JS/CSS 的方式還是以 Page 為導向
YUI().use('*')
頁面上有什麼就載入什麼
並未善用 YUI 本身有的彈性
隨著功能增加、YUI 的
Module 越來越細,這個檔案
也就越來越難維護...
95. 但載入 JS/CSS 的方式還是以 Page 為導向
YUI().use('*')
頁面上有什麼就載入什麼
並未善用 YUI 本身有的彈性
隨著功能增加、YUI 的
Module 越來越細,這個檔案
也就越來越難維護...
96. 但載入 JS/CSS 的方式還是以 Page 為導向
YUI().use('*')
頁面上有什麼就載入什麼
並未善用 YUI 本身有的彈性
一直很想能夠改善這個頭痛的問題
由頁面上每個 View 模組回報
隨著功能增加、YUI 的
計算出單一頁面需要載入的 CSS / JS 模組
Module 越來越細,這個檔案
也就越來越難維護...
101. 概念 1:模組自身定義清楚相關檔案與 require
A. 通知訊息模組 (_notification)
此模組的基本資訊如下:
ID welcome/_notification
CSS welcome/_notification.css
JS welcome/_notification.js
Requires scroll-pagination, node-event-delegate, large-view
102. 概念 1:模組自身定義清楚相關檔案與 require
A. 通知訊息模組 (_notification)
Hi, 我是此模組製作人 josephj
此模組的基本資訊如下:
ID welcome/_notification
CSS welcome/_notification.css
JS welcome/_notification.js
Requires scroll-pagination, node-event-delegate, large-view
103. 概念 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-view
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-view
B. 通用頁首模組 (_masthead)
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-view
B. 通用頁首模組 (_masthead)
Hi, 我是此模組製作人 clonn
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-view
B. 通用頁首模組 (_masthead)
Hi, 我是此模組製作人 clonn
此模組的基本資訊如下: <?php ?>
ID common/_masthead
CSS common/_masthead.css
JS common/_masthead.js
Requires panel, device-navigation
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-view
B. 通用頁首模組 (_masthead)
C. 側邊欄模組 (_sidebar)
Hi, 我是此模組製作人 clonn
此模組的基本資訊如下: <?php ?>
ID common/_masthead
CSS common/_masthead.css
JS common/_masthead.js
Requires panel, device-navigation
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-view
B. 通用頁首模組 (_masthead)
C. 側邊欄模組 (_sidebar)
Hi, 我是此模組製作人 clonn
Hi, 我是此模組製作人 Rosemei
此模組的基本資訊如下: <?php ?>
ID common/_masthead
CSS common/_masthead.css
JS common/_masthead.js
Requires panel, device-navigation
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-view
B. 通用頁首模組 (_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 無
112. 概念 2:頁面設定有哪些 View 模組
Hi, 我是此頁面整合者 lingihuang
登入後首頁 (welcome)
此頁面有以下 View 模組:
·•welcome/_notification
·•charming/_masthead
·•common/_sidebar
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/_notification
build/","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/_sidebar
delegate","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
119. YUI Architecture Rocks!
Module 領先業界的思維
⼀一定會越拆越細
Loader 領先業界的思維
Combo 的機制比 Build 好
Combo 軟體自動化的極致
可用 Minify 或 combohandler 代替
CDN 善用大公司的資源吧
有錢才會有
不需辛苦實作、幾行就可以寫出業界的 Best Practice
YUI 還有什麼值得我們參考的 ?
http://www.flickr.com/photos/kelvin255/5576672521/
120. OOP
Object-oriented
Programming
概念人人都有,但如何實作?有好的架構與工具嗎?
http://www.zeegee.com/courses/oop-1
123. 表單驗證 - Form Validation
可以說是 JavaScript 最基本的功能
文字
每個專業的 F2E 都可以快速地達到要求
若使用物件導向能帶來什麼幫助 ?
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. 將表單驗證包裝成 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 可一起處理、提昇品質
效果可謂是立竿見影 !
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. 將表單驗證包裝成 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 可一起處理、提昇品質
效果可謂是立竿見影 !
131. 使用原生的 JavaScript 撰寫 OOP 令人挫折
Constructor
function 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. 使用原生的 JavaScript 撰寫 OOP 令人挫折
Constructor Instance
function 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. 使用原生的 JavaScript 撰寫 OOP 令人挫折
Constructor Instance
function 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. 有人會這樣做屬性的封裝、防止改寫
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. 有人會這樣做屬性的封裝、防止改寫
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 實在很累
138. YUI OOP - 內建屬性封裝
Constructor
Car.ATTRS = {
“brand”: {
value: null,
writeOnce: true // 設定只能寫入⼀一次
},
“color”: {
value: null,
writeOnce: true // 設定只能寫入⼀一次
},
“miles”: {
value: 0,
readOnly: true // 設定只能讀取、不能寫入
}
} ;
139. YUI OOP - 內建屬性封裝
Constructor Instance
Car.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. YUI OOP - 內建屬性封裝
·•validator - 驗證使用者輸入值
·•writeOnce - 只能寫入一次
·•readOnly - 唯讀
·•value - 預設值
·•valueFn - 預設值 (以 Function 取得)
·•setter - 使用者 set 時所使用的 Function
·•getter - 使用者 get 時所使用的 Function
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. YUI OOP - 內建自定事件
Constructor
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;
});
}
};
143. YUI OOP - 內建自定事件
Constructor Instance
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;
});
}
};
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
148. 前端工程師要整合的東西實在太多
MVC CSS Grid
Core
(DOM / Event / AJAX)
Documentation Unit Test
Automated
Build Template Minify
OOP Loader
pJAX Localization
Module
Debug Server-side
149. 前端工程師要整合的東西實在太多
MVC CSS Grid
Core Backbone.js 960gs
(DOM / Event / AJAX)
Documentation
jQuery
Unit Test
Automated Nature Docs
TestSwarm
Build Template Minify
handlebars
OOP Loader Optimizer Google Closure
LABjs
pJAX Localization
Key / Value :p
Module jquery-pjax
RequireJS
Debug Server-side
nodeJS
console
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 Compressor
Y.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()
152. 要載入使用也太容易了吧!
1. 引用 YUI Seed File (24.1K)
<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
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>
155. yuidocjs - 從註解產生 API 文件
http://miiicasa.github.com/yui3-editable/classes/Editable.html
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. 參考連結
NFL.com
從 Prototype 換到 YUI
http://www.yuiblog.com/blog/2012/01/17/video-yuiconf2011-rcannon/
Derek Gathright - Why YUI?
從 jQuery 改用 YUI
http://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. miiiCasa Needs Your Join!!
歡迎對軟硬體結合、私有雲、Web 3.0、家庭的 SNS 有興趣的同學加入!
更多內容: http://tinyurl.com/miiicasa-f2e