yui is sexy - 使用 yui 作為開發基礎
DESCRIPTION
YUI 提供了相當好的架構讓 Developer 開發,從架構面與完整性介紹此 LibraryTRANSCRIPT
YUI IS SEXY 使用 YUI Library 作為開發基礎
講者 - josephj
一黨不能獨大、媒體不能壟斷
JavaScript 函式庫當然也要多一些選擇啦
YUI
http://www.flickr.com/photos/freestylee/5399124878/
若考量的是架構、完整性、團隊開發、軟體堆疊
YUI 3 遠優於大部分的函式庫
ArchitectureModule / Loader / OOP
Part I
Modularization將功能分門別類、要用的時候挑選組合
http://www.flickr.com/photos/bdesham/2432400623
NASA Space Station
除了樂高積木、國際太空站也是 Modularization 的好範例
http://www.flickr.com/photos/nasamarshall/4546245011/
由 7 個不同國家所提供的 50 多個模組
http://astronomy.wikia.com/wiki/International_Space_Station
NASA Space Station
由 7 個不同國家所提供的 50 多個模組
http://astronomy.wikia.com/wiki/International_Space_Station
NASA Space Station
由 7 個不同國家所提供的 50 多個模組
http://astronomy.wikia.com/wiki/International_Space_Station
NASA Space Station
舉凡建築、航太、機械、硬體到軟體
在任何分工精細的工程領域
模組化開發是必然趨勢
「採用既有模組、避免重新打造輪子」
最基本的 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>
最基本的 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>
最基本的 JavaScript 模組化
// 核心函式庫
// 模組 1
// 模組 2
// 模組 3
<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>
最基本的 JavaScript 模組化
// 核心函式庫
// 模組 1
// 模組 2
// 模組 3
網站發展到一定規模時、這樣做包準讓你焦頭爛額
全域變數、維護性、前後順序、模組效率問題
這些都是在 YUI 2 與其他主流函式庫的瓶頸
YUI 3 架構徹底解決模組問題
YUI 3 架構徹底解決模組問題
2009/6 月,YUI 推出與先前架構完全不同的 3.0 版
解決前述全域變數、維護性、前後順序、模組效率的問題
所有 YUI 模組檔案皆必須以這樣的方式包覆:
YUI 3 架構徹底解決模組問題
2009/6 月,YUI 推出與先前架構完全不同的 3.0 版
解決前述全域變數、維護性、前後順序、模組效率的問題
所有 YUI 模組檔案皆必須以這樣的方式包覆:
YUI.add("模組名稱", function (Y) {
}, requires:["所需模組 1", "所需模組 2"]);
YUI 3 架構徹底解決模組問題
2009/6 月,YUI 推出與先前架構完全不同的 3.0 版
解決前述全域變數、維護性、前後順序、模組效率的問題
所有 YUI 模組檔案皆必須以這樣的方式包覆:
YUI.add("模組名稱", function (Y) {
}, requires:["所需模組 1", "所需模組 2"]);
Why callback?
放到頁面上時不會立即執行、
等到要用時再執行即可。好處
是做程式碼的隔離、不再需要
處理每個模組間的先後順序。
YUI 3 架構徹底解決模組問題
2009/6 月,YUI 推出與先前架構完全不同的 3.0 版
解決前述全域變數、維護性、前後順序、模組效率的問題
所有 YUI 模組檔案皆必須以這樣的方式包覆:
YUI.add("模組名稱", function (Y) {
}, requires:["所需模組 1", "所需模組 2"]);
editoreditor.js
YUI 3 架構徹底解決模組問題
2009/6 月,YUI 推出與先前架構完全不同的 3.0 版
解決前述全域變數、維護性、前後順序、模組效率的問題
所有 YUI 模組檔案皆必須以這樣的方式包覆:
YUI.add("模組名稱", function (Y) {
}, requires:["所需模組 1", "所需模組 2"]);
// 上方的參數 Y 代表了 YUI 的 Instance function Editor() { // 這是物件的建構式 }
editoreditor.js
YUI 3 架構徹底解決模組問題
2009/6 月,YUI 推出與先前架構完全不同的 3.0 版
解決前述全域變數、維護性、前後順序、模組效率的問題
所有 YUI 模組檔案皆必須以這樣的方式包覆:
YUI.add("模組名稱", function (Y) {
}, requires:["所需模組 1", "所需模組 2"]);
// 上方的參數 Y 代表了 YUI 的 Instance function Editor() { // 這是物件的建構式 } // 將建構式提昇到 Global Y.Editor = Editor;
editoreditor.js
YUI 3 架構徹底解決模組問題
對使用者來說,只需指定模組名稱即可使用:
YUI 3 架構徹底解決模組問題
對使用者來說,只需指定模組名稱即可使用:
YUI().use("editor", function (Y) {
});
YUI 3 架構徹底解決模組問題
對使用者來說,只需指定模組名稱即可使用:
YUI().use("editor", function (Y) {
});
// 此 Callback 代表所需模組皆已載入完成 // 你就可以直接建立 Y.Editor 的例項
YUI 3 架構徹底解決模組問題
對使用者來說,只需指定模組名稱即可使用:
YUI().use("editor", function (Y) {
});
var editor = new Y.Editor();
// 此 Callback 代表所需模組皆已載入完成 // 你就可以直接建立 Y.Editor 的例項
JavaScript 模組化的實作已是當代趨勢
JavaScript 模組化的實作已是當代趨勢
• CommonJS 1.0被 nodeJS 所採用,不適合使用在瀏覽器端。
JavaScript 模組化的實作已是當代趨勢
• CommonJS 1.0被 nodeJS 所採用,不適合使用在瀏覽器端。
• CommonJS 2.0
JavaScript 模組化的實作已是當代趨勢
• CommonJS 1.0被 nodeJS 所採用,不適合使用在瀏覽器端。
• CommonJS 2.0
• ECMAScript Module最期盼的!不需要 Library 即可擁有模組架構。
JavaScript 模組化的實作已是當代趨勢
• CommonJS 1.0被 nodeJS 所採用,不適合使用在瀏覽器端。
• CommonJS 2.0
• ECMAScript Module最期盼的!不需要 Library 即可擁有模組架構。
• AMD被 dojo、jQuery、Mootools、RequireJS 所採用、專為瀏覽器所設計。為目前最夯且成熟的模組架構不同的 Library 間可以共享模組。
JavaScript 模組化的實作已是當代趨勢
• CommonJS 1.0被 nodeJS 所採用,不適合使用在瀏覽器端。
• CommonJS 2.0
• ECMAScript Module最期盼的!不需要 Library 即可擁有模組架構。
• AMD被 dojo、jQuery、Mootools、RequireJS 所採用、專為瀏覽器所設計。為目前最夯且成熟的模組架構不同的 Library 間可以共享模組。
// AMD Moduledefine(function () { function Editor { /* Constructor */ } return Editor;});require(["editor"], function (Editor) { new Editor();});
JavaScript 模組化的實作已是當代趨勢
• CommonJS 1.0被 nodeJS 所採用,不適合使用在瀏覽器端。
• CommonJS 2.0
• ECMAScript Module最期盼的!不需要 Library 即可擁有模組架構。
• AMD被 dojo、jQuery、Mootools、RequireJS 所採用、專為瀏覽器所設計。為目前最夯且成熟的模組架構不同的 Library 間可以共享模組。
// AMD Moduledefine(function () { function Editor { /* Constructor */ } return Editor;});require(["editor"], function (Editor) { new Editor();});
// YUI ModuleYUI.add("editor", function () { function Editor { /* Constructor */ } Y.Editor = Editor; });YUI.use("editor", function (Y) { new Y.Editor();});
JavaScript 模組化的實作已是趨勢
• CommonJS 1.0被 nodeJS 所採用,不適合使用在瀏覽器端。
• CommonJS 2.0
• AMD被 dojo、jQuery、Mootools、RequireJS 所採用、專為瀏覽器所設計。為目前最夯且成熟的模組架構不同的 Library 間可以共享模組。
• ECMAScript Module最期盼的!不需要 Library 即可擁有模組架構。
// AMD Moduledefine(function () { function Editor { /* Constructor */ } return Editor;});require(["editor"], function (Editor) { new Editor();});
// YUI ModuleYUI.add("editor", function () { function Editor { /* Constructor */ } Y.Editor = Editor; });YUI.use("editor", function (Y) { new Y.Editor();});
JavaScript 模組化的實作已是趨勢
• CommonJS 1.0被 nodeJS 所採用,不適合使用在瀏覽器端。
• CommonJS 2.0
• AMD被 dojo、jQuery、Mootools、RequireJS 所採用、專為瀏覽器所設計。為目前最夯且成熟的模組架構不同的 Library 間可以共享模組。
• ECMAScript Module最期盼的!不需要 Library 即可擁有模組架構。
// AMD Moduledefine(function () { function Editor { /* Constructor */ } return Editor;});require(["editor"], function (Editor) { new Editor();});
// YUI ModuleYUI.add("editor", function () { function Editor { /* Constructor */ } Y.Editor = Editor; });YUI.use("editor", function (Y) { new Y.Editor();});
YUI Module 能做到的事與 AMD 都相同
AMD 畢竟是目前業界主流,YUI 也在整合中
值得注意的是這樣的概念 YUI 2 年前就實作了
架構面的設計就是 YUI 的強項啊!
JavaScript 模組化的實作已是趨勢
• CommonJS 1.0被 nodeJS 所採用,不適合使用在瀏覽器端。
• CommonJS 2.0
• AMD被 dojo、jQuery、Mootools、RequireJS 所採用、專為瀏覽器所設計。為目前最夯且成熟的模組架構不同的 Library 間可以共享模組。
• ECMAScript Module最期盼的!不需要 Library 即可擁有模組架構。
// AMD Moduledefine(function () { function Editor { /* Constructor */ } return Editor;});require(["editor"], function (Editor) { new Editor();});
// YUI ModuleYUI.add("editor", function () { function Editor { /* Constructor */ } Y.Editor = Editor; });YUI.use("editor", function (Y) { new Y.Editor();});
YUI Module 能做到的事與 AMD 都相同
AMD 畢竟是目前業界主流,YUI 也在整合中
值得注意的是這樣的概念 YUI 2 年前就實作了
架構面的設計就是 YUI 的強項啊!
但模組化的有可能造成檔案被拆得更多更細
那我們如何有效率地載入模組呢 ?
Loader有效率地載入所 require 的 CSS 與 JavaScript 模組檔案
http://www.flickr.com/photos/bdesham/2432400623
http://www.flickr.com/photos/halfbisqued/2353845688/
網站在初期、所需的 JavaScript 與 CSS 都很小
http://www.flickr.com/photos/halfbisqued/2353845688/
網站在初期、所需的 JavaScript 與 CSS 都很小
jQuery - 32K
http://www.flickr.com/photos/halfbisqued/2353845688/
網站在初期、所需的 JavaScript 與 CSS 都很小
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 就可做很多事!
jQuery - 32K
http://www.nipic.com/show/2/55/d96dde66860c5190.html
發展到一定規模,該如何選擇每頁所需的檔案呢?
同時也是模組化所面臨的問題
http://www.nipic.com/show/2/55/d96dde66860c5190.html
天哪!我該如何處理這麼多的 CSS / JS 檔案?
發展到一定規模,該如何選擇每頁所需的檔案呢?
同時也是模組化所面臨的問題
http://www.nipic.com/show/2/55/d96dde66860c5190.html
天哪!我該如何處理這麼多的 CSS / JS 檔案?
發展到一定規模,該如何選擇每頁所需的檔案呢?
同時也是模組化所面臨的問題
http://www.nipic.com/show/2/55/d96dde66860c5190.html
天哪!我該如何處理這麼多的 CSS / JS 檔案?
發展到一定規模,該如何選擇每頁所需的檔案呢?
同時也是模組化所面臨的問題
較不專業的網站在面對這樣的問題
都是純手工一頁一頁寫、或者是打成一大包
得考慮先後順序、維護性低、也無法最佳化
http://www.flickr.com/photos/billjacobus1/123644872/
這時需要一個 Loader 機制
協助載入零散且多的模組檔案
以 YUI DataTable 為範例 (datatable)
以 YUI DataTable 為範例 (datatable)
以 YUI DataTable 為範例 (datatable)
不 reload 的行為很多:換頁、排序、直接編輯。也可以有各種資料來源,是個很
複雜的模組。
只要幾行程式碼就可以載入所需模組
只要幾行程式碼就可以載入所需模組
<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
只要幾行程式碼就可以載入所需模組
<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script><script>
</script>
YUI().use('datatable', function (Y) {
});
只要幾行程式碼就可以載入所需模組
<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script><script>
</script>
YUI().use('datatable', function (Y) {
});
能想像 6 行程式碼背後、做了多少事嗎 ?
alert(Y.DataTable);
yui (Seed)
計算 requires 模組的過程
yui (Seed)
計算 requires 模組的過程
YUI().use('datatable')
yui (Seed)
widget
datatable-core
base-build
datatable-head datatable-body
計算 requires 模組的過程
YUI().use('datatable')
escape
yui (Seed)
widget
datatable-core
base-build
datatable-head datatable-body
model-list
node-event-delegate
base-base
attribute
event-focus
base-plugin-hostnode-base node-style
classnamemanager
view
計算 requires 模組的過程
YUI().use('datatable')
escape
yui (Seed)
widget
datatable-core
base-build
datatable-head datatable-body
model-list
node-event-delegate
base-base
attribute
event-focus
base-plugin-hostnode-base node-style
classnamemanager
view
yui-base
event-delegate
pluginhost event-synthetic attribute-core attribute-events
attribute-extras array-extras array-invoke
arraylist
json-parsemodel
計算 requires 模組的過程
YUI().use('datatable')
escape
yui (Seed)
widget
datatable-core
base-build
datatable-head datatable-body
model-list
node-event-delegate
base-base
attribute
event-focus
base-plugin-hostnode-base node-style
classnamemanager
view
yui-base
event-delegate
pluginhost event-synthetic attribute-core attribute-events
attribute-extras array-extras array-invoke
arraylist
json-parsemodel
計算 requires 模組的過程與載入順序無關、YUI Module 在設計上是不需考慮先後順序的
YUI().use('datatable')
強大的壓縮機 Combo HandlerYUI().use('datatable')
強大的壓縮機 Combo Handler
前一頁只列出了 28 個模組,但實際上會有 64 個
YUI().use('datatable')
強大的壓縮機 Combo Handler
前一頁只列出了 28 個模組,但實際上會有 64 個
64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
YUI().use('datatable')
強大的壓縮機 Combo Handler
前一頁只列出了 28 個模組,但實際上會有 64 個
64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
但模組化就是要把不相干的程式抽離、盡可能精簡
YUI().use('datatable')
強大的壓縮機 Combo Handler
前一頁只列出了 28 個模組,但實際上會有 64 個
64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
但模組化就是要把不相干的程式抽離、盡可能精簡
YUI().use('datatable')
即使採用 LABjs 這樣平行載入的方式,數量仍嫌太多
強大的壓縮機 Combo Handler
前一頁只列出了 28 個模組,但實際上會有 64 個
64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
但模組化就是要把不相干的程式抽離、盡可能精簡
YUI 的 Combo Handler 可把數量的問題徹底解決
YUI().use('datatable')
即使採用 LABjs 這樣平行載入的方式,數量仍嫌太多
強大的壓縮機 Combo Handler
前一頁只列出了 28 個模組,但實際上會有 64 個
64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
但模組化就是要把不相干的程式抽離、盡可能精簡
YUI 的 Combo Handler 可把數量的問題徹底解決
http://yui.yahooapis.com/combo? <模組1的檔案路徑>& <模組2的檔案路徑>& <模組3的檔案路徑>& <模組4的檔案路徑>& ...
YUI().use('datatable')
即使採用 LABjs 這樣平行載入的方式,數量仍嫌太多
載入的方式是最流行的非同步平行下載YUI().use('datatable')
你所引用的 YUI Seed
載入的方式是最流行的非同步平行下載YUI().use('datatable')
你所引用的 YUI Seed
先載入相關 CSS
載入的方式是最流行的非同步平行下載YUI().use('datatable')
將所需 JavaScript Modules 分散成 3 個請求、平行下載
你所引用的 YUI Seed
先載入相關 CSS
載入的方式是最流行的非同步平行下載YUI().use('datatable')
將所需 JavaScript Modules 分散成 3 個請求、平行下載
你所引用的 YUI Seed
先載入相關 CSS
載入的方式是最流行的非同步平行下載
分散的邏輯:「檔案總數量」、「瀏覽器同時請求數量」、「瀏覽器 GET 長度的限制」
自己用 Loader (LABjs、Headjs) 刻這樣的機制會很辛苦
YUI().use('datatable')
YUI().use('datatable')
從種子變成大樹只花了 323 ms
323ms
YUI().use('datatable')
從種子變成大樹只花了 323 ms
323ms
是一棵完全沒有贅肉的大樹、因 Module 的切分非常的細、用不到的絕不載入
同時符合了大型網站對於效能最佳化的考慮、在使用層面也非常容易(你只需知道模組名稱)
YUI().use('datatable')
jQuery + RequireJS + jQueryUI案例:採用 RequireJS、載入 TabView
jQuery + RequireJS + jQueryUI
1. 下載 RequireJS 所提供的 require-jquery。
案例:採用 RequireJS、載入 TabView
jQuery + RequireJS + jQueryUI
1. 下載 RequireJS 所提供的 require-jquery。
2. 下載 jQueryUI TabView、放在同一個目錄下。
案例:採用 RequireJS、載入 TabView
jQuery + RequireJS + jQueryUI
1. 下載 RequireJS 所提供的 require-jquery。
2. 下載 jQueryUI TabView、放在同一個目錄下。
3. 在主程式設定要載入的檔案。
案例:採用 RequireJS、載入 TabView
jQuery + RequireJS + jQueryUI
1. 下載 RequireJS 所提供的 require-jquery。
2. 下載 jQueryUI TabView、放在同一個目錄下。
3. 在主程式設定要載入的檔案。
4. 若要 optimize、需安裝 nodeJS。
案例:採用 RequireJS、載入 TabView
jQuery + RequireJS + jQueryUI
1. 下載 RequireJS 所提供的 require-jquery。
2. 下載 jQueryUI TabView、放在同一個目錄下。
3. 在主程式設定要載入的檔案。
4. 若要 optimize、需安裝 nodeJS。
5. 經過 build 流程將上述要載入的檔案合併。
案例:採用 RequireJS、載入 TabView
jQuery + RequireJS + jQueryUI
1. 下載 RequireJS 所提供的 require-jquery。
2. 下載 jQueryUI TabView、放在同一個目錄下。
3. 在主程式設定要載入的檔案。
4. 若要 optimize、需安裝 nodeJS。
5. 經過 build 流程將上述要載入的檔案合併。
案例:採用 RequireJS、載入 TabView
jQueryUI 若不是 AMD 格式、需注意載入順序。build 方式不夠自動化、不若 Combo 來得有效率。
jQuery + RequireJS + jQueryUI
1. 下載 RequireJS 所提供的 require-jquery。
2. 下載 jQueryUI TabView、放在同一個目錄下。
3. 在主程式設定要載入的檔案。
4. 若要 optimize、需安裝 nodeJS。
5. 經過 build 流程將上述要載入的檔案合併。
案例:採用 RequireJS、載入 TabView
jQueryUI 若不是 AMD 格式、需注意載入順序。build 方式不夠自動化、不若 Combo 來得有效率。
YUI().use(“tabview”)
John ResigThe creator of jQuery
http://www.quora.com/How-could-YUI3-improve-its-image-compared-to-jQuery-MooTools-etc
YUI 自動載入函式庫的方式實在太 Sexy 了
John ResigThe creator of jQuery
YUI().use() + pulling code off of Yahoo's CDN is damn sexy and should be promoted *VERY* heavily.
http://www.quora.com/How-could-YUI3-improve-its-image-compared-to-jQuery-MooTools-etc
YUI 自動載入函式庫的方式實在太 Sexy 了
的 Loader 改版
的 Loader 改版
我們大多是在 Page-Level 設定要載入哪些 JS / CSS
的 Loader 改版
我們大多是在 Page-Level 設定要載入哪些 JS / CSS
但 YUI 的架構會讓我開始思考:
的 Loader 改版
我們大多是在 Page-Level 設定要載入哪些 JS / CSS
但 YUI 的架構會讓我開始思考:
能不能以 View Module (或稱 Partial)
的 Loader 改版
我們大多是在 Page-Level 設定要載入哪些 JS / CSS
但 YUI 的架構會讓我開始思考:
能不能以 View Module (或稱 Partial)
反向推算此頁所需的 JS/CSS、 再用 Combo 機制組合下載
的 Loader 改版
我們大多是在 Page-Level 設定要載入哪些 JS / CSS
但 YUI 的架構會讓我開始思考:
能不能以 View Module (或稱 Partial)
反向推算此頁所需的 JS/CSS、 再用 Combo 機制組合下載
http://josephj.com/lab/2012/loader-strategy/demo.php
https://github.com/josephj/loader-strategy
以下是這個概念的 Demo,也會實作在新版的 miiiCasa
miiiCasa 從 Day 1 就致力於模組化開發
miiiCasa 從 Day 1 就致力於模組化開發
miiiCasa 從 Day 1 就致力於模組化開發
#notification
#announcement
#contact-suggest
#space_entry
#masthead
miiiCasa 從 Day 1 就致力於模組化開發
#notification
#announcement
#contact-suggest
#space_entry
#masthead
這 5 個區塊都有各自的 JS、CSS、View 檔案
但載入 JS/CSS 的方式還是以 Page 為導向
但載入 JS/CSS 的方式還是以 Page 為導向
YUI().use('*')頁面上有什麼就載入什麼
並未善用 YUI 本身有的彈性
但載入 JS/CSS 的方式還是以 Page 為導向
隨著功能增加、YUI 的 Module 越來越細,這個檔案也就越來越難維護...
YUI().use('*')頁面上有什麼就載入什麼
並未善用 YUI 本身有的彈性
但載入 JS/CSS 的方式還是以 Page 為導向
隨著功能增加、YUI 的 Module 越來越細,這個檔案也就越來越難維護...
YUI().use('*')頁面上有什麼就載入什麼
並未善用 YUI 本身有的彈性
但載入 JS/CSS 的方式還是以 Page 為導向
隨著功能增加、YUI 的 Module 越來越細,這個檔案也就越來越難維護...
YUI().use('*')頁面上有什麼就載入什麼
並未善用 YUI 本身有的彈性 一直很想能夠改善這個頭痛的問題
由頁面上每個 View 模組回報
計算出單一頁面需要載入的 CSS / JS 模組
改版、當然得將載入方式改為 Module 導向 !
改版、當然得將載入方式改為 Module 導向 !
改版、當然得將載入方式改為 Module 導向 !
charming/_masthead
common/_sidebar
welcome/_notification
概念 1:模組自身定義清楚相關檔案與 require
概念 1:模組自身定義清楚相關檔案與 require
A. 通知訊息模組 (_notification)
ID welcome/_notification
CSS welcome/_notification.css
JS welcome/_notification.js
Requires scroll-pagination, node-event-delegate, large-view
此模組的基本資訊如下:
概念 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
此模組的基本資訊如下:
概念 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
此模組的基本資訊如下: <?php ?>
概念 1:模組自身定義清楚相關檔案與 require
A. 通知訊息模組 (_notification)
Hi, 我是此模組製作人 josephj
B. 通用頁首模組 (_masthead)
ID welcome/_notification
CSS welcome/_notification.css
JS welcome/_notification.js
Requires scroll-pagination, node-event-delegate, large-view
此模組的基本資訊如下: <?php ?>
概念 1:模組自身定義清楚相關檔案與 require
A. 通知訊息模組 (_notification)
Hi, 我是此模組製作人 josephj
B. 通用頁首模組 (_masthead)
Hi, 我是此模組製作人 clonn
ID welcome/_notification
CSS welcome/_notification.css
JS welcome/_notification.js
Requires scroll-pagination, node-event-delegate, large-view
此模組的基本資訊如下: <?php ?>
概念 1:模組自身定義清楚相關檔案與 require
A. 通知訊息模組 (_notification)
Hi, 我是此模組製作人 josephj
B. 通用頁首模組 (_masthead)
Hi, 我是此模組製作人 clonn
ID welcome/_notification
CSS welcome/_notification.css
JS welcome/_notification.js
Requires scroll-pagination, node-event-delegate, large-view
此模組的基本資訊如下:
ID common/_masthead
CSS common/_masthead.css
JS common/_masthead.js
Requires panel, device-navigation
此模組的基本資訊如下:
<?php ?>
<?php ?>
概念 1:模組自身定義清楚相關檔案與 require
A. 通知訊息模組 (_notification)
Hi, 我是此模組製作人 josephj
B. 通用頁首模組 (_masthead)
Hi, 我是此模組製作人 clonn
C. 側邊欄模組 (_sidebar)
ID welcome/_notification
CSS welcome/_notification.css
JS welcome/_notification.js
Requires scroll-pagination, node-event-delegate, large-view
此模組的基本資訊如下:
ID common/_masthead
CSS common/_masthead.css
JS common/_masthead.js
Requires panel, device-navigation
此模組的基本資訊如下:
<?php ?>
<?php ?>
概念 1:模組自身定義清楚相關檔案與 require
A. 通知訊息模組 (_notification)
Hi, 我是此模組製作人 josephj
B. 通用頁首模組 (_masthead)
Hi, 我是此模組製作人 clonn
C. 側邊欄模組 (_sidebar)
Hi, 我是此模組製作人 Rosemei
ID welcome/_notification
CSS welcome/_notification.css
JS welcome/_notification.js
Requires scroll-pagination, node-event-delegate, large-view
此模組的基本資訊如下:
ID common/_masthead
CSS common/_masthead.css
JS common/_masthead.js
Requires panel, device-navigation
此模組的基本資訊如下:
<?php ?>
<?php ?>
概念 1:模組自身定義清楚相關檔案與 require
A. 通知訊息模組 (_notification)
Hi, 我是此模組製作人 josephj
B. 通用頁首模組 (_masthead)
Hi, 我是此模組製作人 clonn
C. 側邊欄模組 (_sidebar)
Hi, 我是此模組製作人 Rosemei
ID welcome/_notification
CSS welcome/_notification.css
JS welcome/_notification.js
Requires scroll-pagination, node-event-delegate, large-view
此模組的基本資訊如下:
ID common/_masthead
CSS common/_masthead.css
JS common/_masthead.js
Requires panel, device-navigation
此模組的基本資訊如下:
ID common/_masthead
CSS common/_masthead.css
JS 無
Requires 無
此模組的基本資訊如下:
<?php ?>
<?php ?>
<?php ?>
概念 2:頁面設定有哪些 View 模組
登入後首頁 (welcome)
概念 2:頁面設定有哪些 View 模組
登入後首頁 (welcome)Hi, 我是此頁面整合者 lingihuang
概念 2:頁面設定有哪些 View 模組
登入後首頁 (welcome)Hi, 我是此頁面整合者 lingihuang
此頁面有以下 View 模組:
·•welcome/_notification
·•charming/_masthead
·•common/_sidebar
概念 2:頁面設定有哪些 View 模組
登入後首頁 (welcome)Hi, 我是此頁面整合者 lingihuang
此頁面 Require 以下模組:
·•welcome/_notification
·•charming/_masthead
·•common/_sidebar
接著 PHP 去計算每個模組、把 YUI Loader 所需的設定在頁面上 Output
<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/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":{"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-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>
https://github.com/mrclay/minify
註 - Combo 可採用 Minify
http://josephj.com/lab/2012/loader-strategy/demo.php
架構實作 Prototype
https://github.com/josephj/loader-strategy
http://josephj.com/lab/2012/loader-strategy/demo.php
架構實作 Prototype
https://github.com/josephj/loader-strategy
http://josephj.com/lab/2012/loader-strategy/demo.php
架構實作 Prototype
https://github.com/josephj/loader-strategy
直接引用的 JavaScript 與 CSS,是整個網站不變且共用的基礎
http://josephj.com/lab/2012/loader-strategy/demo.php
架構實作 Prototype
https://github.com/josephj/loader-strategy
直接引用的 JavaScript 與 CSS,是整個網站不變且共用的基礎
動態載入的 JavaScript 與 CSS,是依不同模組相依性所計算組合出來的
http://josephj.com/lab/2012/loader-strategy/demo.php
架構實作 Prototype
https://github.com/josephj/loader-strategy
直接引用的 JavaScript 與 CSS,是整個網站不變且共用的基礎
動態載入的 JavaScript 與 CSS,是依不同模組相依性所計算組合出來的
同時並發的 Requests
YUI Architecture Rocks!
http://www.flickr.com/photos/kelvin255/5576672521/
Module
Loader
Combo
CDN
不需辛苦實作、幾行就可以寫出業界的 Best Practice
領先業界的思維
領先業界的思維
軟體自動化的極致
善用大公司的資源吧
YUI 還有什麼值得我們參考的 ?
⼀一定會越拆越細
Combo 的機制比 Build 好
可用 Minify 或 combohandler 代替
有錢才會有
Object-oriented Programming
概念人人都有,但如何實作?有好的架構與工具嗎?
http://www.zeegee.com/courses/oop-1
OOP
講到寫程式的 Reusability (重複利用)
大家最容易聯想到的就是「物件導向」了
文字
表單驗證 - Form Validation
文字
表單驗證 - Form Validation
可以說是 JavaScript 最基本的功能
每個專業的 F2E 都可以快速地達到要求
若使用物件導向能帶來什麼幫助 ?
將表單驗證包裝成 Y.FormValidator 後...
檔案名稱 實際作用 未用 OOP 使用 OOP
_account_identity.js 變更帳號 共 356 行 共 200 行 (-44%)
_account_password.js 更改密碼 共 355 行 共 221 行 (-38%)
_profile_edit_info.js 修改資料 共 454 行 共 292 行 (-36%)
將表單驗證包裝成 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 可一起處理、提昇品質
效果可謂是立竿見影 !
將表單驗證包裝成 Y.FormValidator 後...
將表單驗證包裝成 Y.FormValidator 後...
物件導向的好處:
·•避免撰寫相同的代碼
·•縮短開發時間
·•減少團隊開發的不一致
應被大量地運用在開發中
檔案名稱 實際作用 未用 OOP 使用 OOP
_account_identity.js 變更帳號 共 356 行 共 200 行 (-44%)
_account_password.js 更改密碼 共 355 行 共 221 行 (-38%)
_profile_edit_info.js 修改資料 共 454 行 共 292 行 (-36%)
將表單驗證包裝成 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 可一起處理、提昇品質
效果可謂是立竿見影 !
將表單驗證包裝成 Y.FormValidator 後...
物件導向的好處:
·•避免撰寫相同的代碼
·•縮短開發時間
·•減少團隊開發的不一致
應被大量地運用在開發中
使用原生的 JavaScript 撰寫 OOP 令人挫折
使用原生的 JavaScript 撰寫 OOP 令人挫折
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; });};
Constructor
使用原生的 JavaScript 撰寫 OOP 令人挫折
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; });};
var oCar = new Car(‘ford’, ‘black’);oCar.brand = 'Honda'; // 不應被改寫oCar.miles = '1公里'; // 天兵使用者亂改 :poCar.run(); // 車子何時停?
Constructor Instance
使用原生的 JavaScript 撰寫 OOP 令人挫折
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; });};
var oCar = new Car(‘ford’, ‘black’);oCar.brand = 'Honda'; // 不應被改寫oCar.miles = '1公里'; // 天兵使用者亂改 :poCar.run(); // 車子何時停?
Constructor Instance
如何保護屬性不被濫用 ? 如何利用事件 ?
有人會這樣做屬性的封裝、防止改寫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 實在很累
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 很鳥 };}
Framework 就是應帶你脫離原始!
YUI OOP - 內建屬性封裝
YUI OOP - 內建屬性封裝
Car.ATTRS = { “brand”: { value: null, writeOnce: true // 設定只能寫入⼀一次 }, “color”: { value: null, writeOnce: true // 設定只能寫入⼀一次 }, “miles”: { value: 0, readOnly: true // 設定只能讀取、不能寫入 }} ;
Constructor
YUI OOP - 內建屬性封裝
Car.ATTRS = { “brand”: { value: null, writeOnce: true // 設定只能寫入⼀一次 }, “color”: { value: null, writeOnce: true // 設定只能寫入⼀一次 }, “miles”: { value: 0, readOnly: true // 設定只能讀取、不能寫入 }} ;
var oCar = new Car({ brand: “Ford”, color: “black”});
oCar.set(“miles”, 100); // return false;oCar.set(“brand”, “Honda”); // return false;oCar.set(“color”, “white”); // return false;
InstanceConstructor
可有效防止使用者不當操作
YUI OOP - 內建屬性封裝
·•validator - 驗證使用者輸入值
·•writeOnce - 只能寫入一次
·•readOnly - 唯讀
·•value - 預設值
·•valueFn - 預設值 (以 Function 取得)
·•setter - 使用者 set 時所使用的 Function
·•getter - 使用者 get 時所使用的 Function
Y.extend(Car, Y.Base, { run: function () { var i = 0, timer; timer = setInterval(1000, function() { if (i >= 10){ clearInterval(timer); this.fire(“stop”, this.miles); } this.miles += 1; i += 1; }); }};
oCar = new Car();oCar.on(“stop”, function (e) { alert(e.detail.miles); });oCar.run();
YUI OOP - 內建自定事件
Y.extend(Car, Y.Base, { run: function () { var i = 0, timer; timer = setInterval(1000, function() { if (i >= 10){ clearInterval(timer); this.fire(“stop”, this.miles); } this.miles += 1; i += 1; }); }};
oCar = new Car();oCar.on(“stop”, function (e) { alert(e.detail.miles); });oCar.run();
YUI OOP - 內建自定事件
Constructor
Y.extend(Car, Y.Base, { run: function () { var i = 0, timer; timer = setInterval(1000, function() { if (i >= 10){ clearInterval(timer); this.fire(“stop”, this.miles); } this.miles += 1; i += 1; }); }};
oCar = new Car();oCar.on(“stop”, function (e) { alert(e.detail.miles); });oCar.run();
YUI OOP - 內建自定事件
Constructor Instance
YUI 的所有元件開發皆是基於此 OOP 架構
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
CompletenessTools
Part 2
前端工程師要整合的東西實在太多
Unit TestDocumentation
MVC
Minify
Core
Server-side
Localization
Module
OOP LoaderBuild Template
Automated
Debug
CSS Grid
pJAX
(DOM / Event / AJAX)
前端工程師要整合的東西實在太多
Unit TestDocumentation
MVC
Minify
Core
Server-side
Localization
Module
OOP LoaderBuild Template
Automated
Debug
CSS Grid
jQuery
Backbone.js
Nature Docs
LABjs
RequireJS
handlebars
960gs
pJAXjquery-pjax
Optimizer
TestSwarm
(DOM / Event / AJAX)
console
Key / Value :p
Google Closure
nodeJS
前端工程師要整合的東西實在太多
Unit TestDocumentation
MVC
Minify
Core
Server-side
Localization
Module
OOP LoaderBuild Template
Automated
Debug
CSS Grids
Y.Node / Y.Event / Y.IO
Y.Model / Y.View / Y.Router
yuidocjs
Y.Loader
YUI.add()
Y.Handlebars
CSS Grids
pJAXY.Pjax
YUI Build
yeti
(DOM / Event / AJAX)
Y.Log()
Y.Intl / Y.DataType
YUI Compressor
YUI in nodejs
YUI 提供了全方位的服務
Y.Attribute / Y.Base / Y.Widget / Y.Plugin
Y.Test
要載入使用也太容易了吧!
要載入使用也太容易了吧!
<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
1. 引用 YUI Seed File (24.1K)
要載入使用也太容易了吧!
<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
<script>YUI().use('handlebars', function (Y) {
});</script>
1. 引用 YUI Seed File (24.1K)
2. 指定所需的模組即可
yuidocjs從註解產生 API 文件
nodeJS
markdown syntax
handlebars helper
介面親和
支援多種程式語言
http://miiicasa.github.com/yui3-editable/classes/Editable.html
yuidocjs - 從註解產生 API 文件
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
Unit Test
Automation
YUI in Node
MVC
對軟體開發很有價值的工具
YUI 著重於開發架構的處理
解決中大型應用程式及開發團隊實際所遭遇的問題
並不只是單單一個 JavaScript Framework
Nicholas ZakasPrincipal Front End Engineer, Yahoo!
For scalable web applications, YUI really excels.
http://www.nczonline.net/blog/2010/11/03/response-to-john-resigs-comments-about-yui/
對大型網站應用程式,YUI 完全勝出
http://www.yuiblog.com/blog/2012/01/17/video-yuiconf2011-rcannon/
NFL.com從 Prototype 換到 YUI
Derek Gathright - Why YUI?從 jQuery 改用 YUI
http://www.yuiblog.com/blog/2012/01/30/video-yuiconf2011-dgathright/
jQuery vs. YUI 引发的思考
http://hikejun.com/blog/2010/11/07/jquery-vs-yui引发的思考/
參考連結
對 2 個 Library 中肯的評論
miiiCasa Needs Your Join!!
更多內容: http://tinyurl.com/miiicasa-f2e
歡迎對軟硬體結合、私有雲、Web 3.0、家庭的 SNS 有興趣的同學加入!
Thank you for sharing!