More Related Content Similar to YUI is Sexy (for JSDC.tw) (20) More from Joseph Chiang (19) YUI is Sexy (for JSDC.tw)1. YUI IS SEXY
使用 YUI Library 作為開發基礎
講者 - josephj
http://www.slideshare.net/josephj/yui-is-sexy-yui
2. Who am I?
·•將近 7 年的前端工程師經驗
·•曾開發知識+、無名小站,擔
任 YDN 傳教士與校園徵才。
·•目前任職於 miiiCasa.com
·•專注 YUI 開發、喜好架構建
設
·•Github: josephj
·•Blog: josephj.com
8. YUI
一黨不能獨大、媒體不能壟斷
JavaScript 函式庫當然也要多一些選擇啦
http://www.flickr.com/photos/freestylee/5399124878/
13. NASA Space Station
由 7 個不同國家所提供的 50 多個模組
http://astronomy.wikia.com/wiki/International_Space_Station
14. NASA Space Station
由 7 個不同國家所提供的 50 多個模組
http://astronomy.wikia.com/wiki/International_Space_Station
15. NASA Space Station
舉凡建築、航太、機械、硬體到軟體
在任何分工精細的工程領域
模組化開發是必然趨勢
「採用既有模組、避免重新打造輪子」
由 7 個不同國家所提供的 50 多個模組
http://astronomy.wikia.com/wiki/International_Space_Station
17. 最基本的 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>
18. 最基本的 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
19. 最基本的 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 與其他主流函式庫的瓶頸
21. YUI 3 架構徹底解決模組問題
2009/6 月,YUI 推出與先前架構完全不同的 3.0 版
解決前述全域變數、維護性、前後順序、模組效率的問題
所有 YUI 模組檔案皆必須以這樣的方式包覆:
22. YUI 3 架構徹底解決模組問題
2009/6 月,YUI 推出與先前架構完全不同的 3.0 版
解決前述全域變數、維護性、前後順序、模組效率的問題
所有 YUI 模組檔案皆必須以這樣的方式包覆:
YUI.add("模組名稱", function (Y) {
}, requires:["所需模組 1", "所需模組 2"]);
23. YUI 3 架構徹底解決模組問題
2009/6 月,YUI 推出與先前架構完全不同的 3.0 版
解決前述全域變數、維護性、前後順序、模組效率的問題
所有 YUI 模組檔案皆必須以這樣的方式包覆:
YUI.add("模組名稱", function (Y) {
Why callback?
放到頁面上時不會立即執行、
等到要用時再執行即可。好處
是做程式碼的隔離、不再需要
處理每個模組間的先後順序。
}, requires:["所需模組 1", "所需模組 2"]);
24. YUI 3 架構徹底解決模組問題
2009/6 月,YUI 推出與先前架構完全不同的 3.0 版
解決前述全域變數、維護性、前後順序、模組效率的問題
所有 YUI 模組檔案皆必須以這樣的方式包覆:
editor.js YUI.add("模組名稱", function (Y) {
editor
}, requires:["所需模組 1", "所需模組 2"]);
25. YUI 3 架構徹底解決模組問題
2009/6 月,YUI 推出與先前架構完全不同的 3.0 版
解決前述全域變數、維護性、前後順序、模組效率的問題
所有 YUI 模組檔案皆必須以這樣的方式包覆:
editor.js YUI.add("模組名稱", function (Y) {
editor
// 上方的參數 Y 代表了 YUI 的 Instance
function Editor() {
// 這是物件的建構式
}
}, requires:["所需模組 1", "所需模組 2"]);
26. 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"]);
34. JavaScript 模組化的實作已是當代趨勢
• CommonJS 1.0
被 nodeJS 所採用,不適合使用在瀏覽器端。
• CommonJS 2.0
• ECMAScript Module
最期盼的!不需要 Library 即可擁有模組架構。
35. JavaScript 模組化的實作已是當代趨勢
• CommonJS 1.0
被 nodeJS 所採用,不適合使用在瀏覽器端。
• CommonJS 2.0
• ECMAScript Module
最期盼的!不需要 Library 即可擁有模組架構。
• AMD
被 dojo、jQuery、Mootools、RequireJS
所採用、專為瀏覽器所設計。
為目前最夯且成熟的模組架構
不同的 Library 間可以共享模組。
36. 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 間可以共享模組。
37. 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 間可以共享模組。
38. 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 間可以共享模組。
39. JavaScript 模組化的實作已是當代趨勢
YUI Module 能做到的事與 AMD 都相同
• CommonJS 1.0
AMD 畢竟是目前業界主流,YUI 也在整合中
被 nodeJS 所採用,不適合使用在瀏覽器端。
// AMD Module
• 值得注意的是這樣的概念 YUI 2 年前就實作了
CommonJS 2.0 define(function () {
function Editor { /* Constructor */ }
return Editor;
});
• ECMAScript Module
架構面的設計就是 YUI 的強項啊! 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 間可以共享模組。
40. JavaScript 模組化的實作已是當代趨勢
YUI Module 能做到的事與 AMD 都相同
• CommonJS 1.0
AMD 畢竟是目前業界主流,YUI 也在整合中
被 nodeJS 所採用,不適合使用在瀏覽器端。
// AMD Module
• 值得注意的是這樣的概念 YUI 2 年前就實作了
CommonJS 2.0 define(function () {
function Editor { /* Constructor */ }
return Editor;
});
• ECMAScript Module
架構面的設計就是 YUI 的強項啊! 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 間可以共享模組。
44. 網站在初期、所需的 JavaScript 與 CSS 都很小
jQuery - 32K
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 就可做很多事!
http://www.flickr.com/photos/halfbisqued/2353845688/
46. 發展到一定規模,該如何選擇每頁所需的檔案呢?
天哪!我該如何處理
這麼多的 CSS / JS 檔案?
模組化會切分出很多檔案,如何黏在⼀一起是⼀一門學問
http://www.nipic.com/show/2/55/d96dde66860c5190.html
47. 發展到一定規模,該如何選擇每頁所需的檔案呢?
天哪!我該如何處理
這麼多的 CSS / JS 檔案?
模組化會切分出很多檔案,如何黏在⼀一起是⼀一門學問
http://www.nipic.com/show/2/55/d96dde66860c5190.html
48. 發展到一定規模,該如何選擇每頁所需的檔案呢?
天哪!我該如何處理
這麼多的 CSS / JS 檔案?
較不專業的網站在面對這樣的問題
都是純手工一頁一頁寫、或者是打成一大包
得考慮先後順序、維護性低、也無法最佳化
模組化會切分出很多檔案,如何黏在⼀一起是⼀一門學問
http://www.nipic.com/show/2/55/d96dde66860c5190.html
52. 以 YUI DataTable 為範例 (datatable)
不 reload 的行為很多:換
頁、排序、直接編輯。也可
以有各種資料來源,是個很
複雜的模組。
60. 計算 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')
61. 計算 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')
62. 計算 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')
65. 強大的壓縮機 Combo Handler
YUI().use('datatable')
前一頁只列出了 28 個模組,但實際上會有 64 個
64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
66. 強大的壓縮機 Combo Handler
YUI().use('datatable')
前一頁只列出了 28 個模組,但實際上會有 64 個
64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
但模組化就是要把不相干的程式抽離、盡可能精簡
67. 強大的壓縮機 Combo Handler
YUI().use('datatable')
前一頁只列出了 28 個模組,但實際上會有 64 個
64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
但模組化就是要把不相干的程式抽離、盡可能精簡
即使採用 LABjs 這樣平行載入的方式,數量仍嫌太多
68. 強大的壓縮機 Combo Handler
YUI().use('datatable')
前一頁只列出了 28 個模組,但實際上會有 64 個
64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
但模組化就是要把不相干的程式抽離、盡可能精簡
即使採用 LABjs 這樣平行載入的方式,數量仍嫌太多
YUI 的 Combo Handler 可把數量的問題徹底解決
69. 強大的壓縮機 Combo Handler
YUI().use('datatable')
前一頁只列出了 28 個模組,但實際上會有 64 個
64 個模組就代表了 64 個檔案、 你可能會覺得很誇張
但模組化就是要把不相干的程式抽離、盡可能精簡
即使採用 LABjs 這樣平行載入的方式,數量仍嫌太多
YUI 的 Combo Handler 可把數量的問題徹底解決
http://yui.yahooapis.com/combo?
<模組1的檔案路徑>&
<模組2的檔案路徑>&
<模組3的檔案路徑>&
<模組4的檔案路徑>&
...
73. 載入的方式是最流行的非同步平行下載
YUI().use('datatable')
你所引用的 YUI Seed
先載入相關 CSS
將所需 JavaScript Modules 分散成 3 個請求、平行下載
74. 載入的方式是最流行的非同步平行下載
YUI().use('datatable')
你所引用的 YUI Seed
先載入相關 CSS
將所需 JavaScript Modules 分散成 3 個請求、平行下載
分散的邏輯:「檔案總數量」、「瀏覽器同時請求數量」、「瀏覽器 GET 長度的限制」
自己用 Loader (LABjs、Headjs) 刻這樣的機制會很辛苦
78. YUI 自動載入函式庫的方式實在太 Sexy 了
The creator of jQuery
John Resig
http://www.quora.com/How-could-YUI3-improve-its-image-compared-to-jQuery-MooTools-etc
79. 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
83. Loader 改版
頁面 index.php 1.在頁面上呼叫:
模組
YUI().use(“_header”,“_nav”,“_content”
_header ,“_footer”);
模組 模組
_nav _content
模組
_footer
84. Loader 改版
頁面 index.php 1.在頁面上呼叫:
模組
YUI().use(“_header”,“_nav”,“_content”
_header ,“_footer”);
requires:[a,c,e]
模組 模組 2.每個模組都已經各自設定所需
require 的模組。
_nav _content
requires:[b] requires:[a,b,c]
模組
_footer
requires:[d, e, f]
85. Loader 改版
頁面 index.php 1.在頁面上呼叫:
模組
YUI().use(“_header”,“_nav”,“_content”
_header ,“_footer”);
requires:[a,c,e]
模組 模組 2.每個模組都已經各自設定所需
require 的模組。
_nav _content
requires:[b] requires:[a,b,c] 3.YUI 的 Loader 會自動計算實際
要載入的模組有哪些。
模組
_footer
requires:[d, e, f]
Loader
共有這些模組要載入:
g, h, j, l, m, u, y, a, b, c, d, e, f,
_header, _nav, _content, _footer
86. Loader 改版
頁面 index.php 1.在頁面上呼叫:
模組
YUI().use(“_header”,“_nav”,“_content”
_header ,“_footer”);
requires:[a,c,e]
模組 模組 2.每個模組都已經各自設定所需
require 的模組。
_nav _content
requires:[b] requires:[a,b,c] 3.YUI 的 Loader 會自動計算實際
要載入的模組有哪些。
模組
_footer 4.最後利用 Combo 以非同步的方
requires:[d, e, f]
式把檔案下載回來。
Loader
共有這些模組要載入: combo request 1
g, h, j, l, m, u, y, a, b, c, d, e, f,
_header, _nav, _content, _footer
combo request 2 Server
combo request 3
87. 啟發: Loader 改版
頁面 index.php 1.在頁面上呼叫:
模組
YUI().use(“_header”,“_nav”,“_content”
_header ,“_footer”);
requires:[a,c,e]
Page-Level 的設定是中央集權、最後會搞不清楚
模組 模組 2.每個模組都已經各自設定所需
require 的模組。
_nav由 Module-Level 設定是地方自治、很好管理
_content
requires:[b] requires:[a,b,c]
透過相依性計算、自動合併、非同步下載等機制達成 3.YUI 的 Loader 會自動計算實際
要載入的模組有哪些。
模組 讓模組真正做到可以隨插即用
_footer 4.最後利用 Combo 以非同步的方
requires:[d, e, f]
式把檔案下載回來。
實作範例: http://josephj.com/lab/2012/loader-strategy/demo.php
Loader
原始碼: https://github.com/josephj/loader-strategy
共有這些模組要載入: combo request 1
g, h, j, l, m, u, y, a, b, c, d, e, f,
_header, _nav, _content, _footer
combo request 2 Server
combo request 3
88. YUI Architecture Rocks!
Module 領先業界的思維
⼀一定會越拆越細
Loader 領先業界的思維
Combo 的機制比 Build 好
Combo 軟體自動化的極致
可用 Minify 或 combohandler 代替
CDN 善用大公司的資源吧
有錢才會有
不需辛苦實作、幾行就可以寫出業界的 Best Practice
YUI 還有什麼值得我們參考的 ?
http://www.flickr.com/photos/kelvin255/5576672521/
89. OOP
Object-oriented
Programming
概念人人都有,但如何實作?有好的架構與工具嗎?
http://www.zeegee.com/courses/oop-1
91. 將表單驗證包裝成 Y.FormValidator 後...
檔案名稱 實際作用 未用 OOP 使用 OOP
_account_identity.js 變更帳號 共 356 行 共 200 行 (-44%)
_account_password.js 更改密碼 共 355 行 共 221 行 (-38%)
_profile_edit_info.js 修改資料 共 454 行 共 292 行 (-36%)
92. 將表單驗證包裝成 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 可一起處理、提昇品質
效果可謂是立竿見影 !
93. 將表單驗證包裝成 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 可一起處理、提昇品質
效果可謂是立竿見影 !
94. 將表單驗證包裝成 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 可一起處理、提昇品質
效果可謂是立竿見影 !
95. 使用原生的 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;
});
};
96. 使用原生的 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;
});
};
97. 使用原生的 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公里';
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;
});
};
98. 使用原生的 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;
});
};
如何保護屬性不被濫用 ? 如何利用事件 ?
101. YUI OOP - 內建屬性封裝
Constructor (Part)
Car.ATTRS = {
“brand”: {
value: null,
writeOnce: true // 設定只能寫入⼀一次
},
“color”: {
value: null,
writeOnce: true // 設定只能寫入⼀一次
},
“miles”: {
value: 0,
readOnly: true // 設定只能讀取、不能寫入
}
} ;
102. YUI OOP - 內建屬性封裝
Constructor (Part)
Car.ATTRS = {
“brand”: {
value: null,
writeOnce: true // 設定只能寫入⼀一次
},
“color”: {
value: null,
writeOnce: true // 設定只能寫入⼀一次
},
“miles”: {
value: 0,
readOnly: true // 設定只能讀取、不能寫入
}
} ;
Instance
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;
103. YUI OOP - 內建屬性封裝
Constructor (Part)
Car.ATTRS = {
“brand”: {
value: null,
writeOnce: true // 設定只能寫入⼀一次
},
“color”: {
value: null,
writeOnce: true // 設定只能寫入⼀一次
},
“miles”: {
value: 0,
readOnly: true // 設定只能讀取、不能寫入
}
} ;
Instance
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;
104. YUI OOP - 內建屬性封裝
Constructor (Part)
Car.ATTRS = {
“brand”: {
value: null, ·• validator - 驗證使用者輸入值
writeOnce: true // 設定只能寫入⼀一次
}, ·• writeOnce - 只能寫入一次
“color”: {
·• readOnly - 唯讀
value: null,
writeOnce: true // 設定只能寫入⼀一次 ·• value - 預設值
},
“miles”: { ·• valueFn - 預設值 (以 Function 取得)
value: 0,
readOnly: true // 設定只能讀取、不能寫入
·• setter - 使用者 set 時所使用的 Function
}
·• getter - 使用者 get 時所使用的 Function
} ;
Instance
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;
105. YUI OOP - 內建屬性封裝
Constructor (Part)
Car.ATTRS = {
“brand”: {
value: null, ·• validator - 驗證使用者輸入值
writeOnce: true // 設定只能寫入⼀一次
}, ·• writeOnce - 只能寫入一次
“color”: {
·• readOnly - 唯讀
value: null,
writeOnce: true // 設定只能寫入⼀一次 ·• value - 預設值
},
“miles”: { ·• valueFn - 預設值 (以 Function 取得)
value: 0,
readOnly: true // 設定只能讀取、不能寫入
·• setter - 使用者 set 時所使用的 Function
}
·• getter - 使用者 get 時所使用的 Function
} ;
Instance
var oCar = new Car({
brand: “Ford”,
屬性管理是
color: “black”
});
可有效防止使用者不當操作
JavaScript OOP
oCar.set(“miles”, 100); // return false;
oCar.set(“brand”, “Honda”); // return false;
最基本的項目
oCar.set(“color”, “white”); // return false;
107. 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;
});
}
};
108. 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;
});
}
};
109. 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;
});
}
};
任何地方都可以用 fire 觸發事件、用 on 監聽事件
JavaScript 最讚的地方就是事件驅動!別再用 callback 啦!
112. YUI 元件架構
Base - 沒有介面、純粹是 API 的存取。
Widget - 有介面、新的使用者控制項。
113. YUI 元件架構
Base - 沒有介面、純粹是 API 的存取。
Widget - 有介面、新的使用者控制項。
Plugin - 針對 Instance 擴充。
114. YUI 元件架構
Base - 沒有介面、純粹是 API 的存取。
Widget - 有介面、新的使用者控制項。
Plugin - 針對 Instance 擴充。
Extension - 針對 Class 擴充。
115. YUI 元件架構
Base - 沒有介面、純粹是 API 的存取。
Widget - 有介面、新的使用者控制項。
Plugin - 針對 Instance 擴充。
Extension - 針對 Class 擴充。
YUI 的元件架構是個開發物件導向的框架
考慮了事件、屬性、擴充性、漸進式支援
一旦上手可以很快產出好用的元件
116. YUI 元件架構
Base - 沒有介面、純粹是 API 的存取。
Widget - 有介面、新的使用者控制項。
Plugin - 針對 Instance 擴充。
Extension - 針對 Class 擴充。
YUI 提供了很多擴充性的選項、
避免開發者因為功能不足去改既
有的程式,extend、plugin、
extension 都是好方法!
YUI 的元件架構是個開發物件導向的框架
考慮了事件、屬性、擴充性、漸進式支援
一旦上手可以很快產出好用的元件
118. 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
121. 前端工程師要整合的東西實在太多
MVC
Core
CSS Grid
(DOM / Event / AJAX)
Document
Automation Unit Test
Build Server
Loader Minify
OOP pJAX I18N
Module
Debug Template
122. 前端工程師要整合的東西實在太多
MVC
Core
CSS Grid
(DOM / Event / AJAX)
Backbone.js
jQuery
Document 960gs
Automation Unit TestNature Docs
Build Server
TestSwarm
Loader Optimizer
Minify nodeJS
OOP pJAX I18N
LABjs
Google Closure
jquery-pjax
Module Key / Value :p
Debug Template
RequireJS
console
handlebars
123. 前端工程師要整合的東西實在太多
MVC
Core
CSS Grid
(DOM / Event / AJAX)
Backbone.js
jQuery
Document 960gs
Automation Unit TestNature Docs
Build Server
TestSwarm
Loader Optimizer
Minify nodeJS
OOP pJAX I18N
LABjs
Google Closure
jquery-pjax
Module Key / Value :p
Debug Template
RequireJS
console
handlebars
得花很多時間比較、研究不同選擇的差異性
124. YUI 提供了全方位的服務
Core MVC
(DOM / Event / AJAX)
Y.Node / Y.Event / Y.IO
Y.Model / Y.View / Y.Router
CSS Grid
Document CSS Grids
Automation Unit Test
yuidocjs
yeti
Build Server Y.Test
OOP Loader
YUI Build YUI in nodejs
Minify
Y.Attribute / Y.Base /
Y.Widget / Y.Plugin
Y.Loader
pJAX I18N YUI Compressor
Y.Pjax
Module Y.Intl / Y.DataType
YUI.add() Debug Template
Y.Log() Y.Handlebars
使用 YUI 的話,就不用想太多啦、該有的都⼀一定有!
126. yuidocjs - 從註解產生 API 文件
http://miiicasa.github.com/yui3-editable/classes/Editable.html
128. 對軟體開發很有價值的工具
Unit Test
撰寫 JavaScript 的 Test Case
Automation
Yeti - 以 nodeJS 所建立的自動化測試流程
YUI in Node
可以在 nodeJS 中使用 YUI、即使把瀏覽器的 JS 關掉也能用
MVC
JavaScript 的 MVC 架構、沿襲自 Backbone.js
Y.log()
很基本的功能、但訊息⼀一多要關閉某些來源很方便
AsyncQueue
非同步處理的管理機制
131. 對大型網站應用程式,YUI 完全勝出
For scalable web applications,YUI really excels.
Former Principal Front End Engineer, Yahoo!
Nicholas Zakas
http://www.nczonline.net/blog/2010/11/03/response-to-john-resigs-comments-about-yui/
132. miiiCasa Needs Your Join!!
歡迎對軟硬體結合、私有雲、Web 3.0、家庭的 SNS 等概念有興趣的同學加入!
更多內容: http://tinyurl.com/miiicasa-f2e
134. Thank you for listening!
Contact Me: josephj6802[at]gmail.com
135. 參考連結
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/
http://dsheiko.com/weblog/yui3-vs-jquery
jQuery vs. YUI 引发的思考
對 2 個 Library 中肯的評論
http://hikejun.com/blog/2010/11/07/jquery-vs-yui引发的思考/
From jQuery to YUI
比較兩者的語法
http://clayliao.blogspot.com/2012/04/yui-3-tutorial-from-yui-to-jquery.html