許多 API 都有大幅改進!
今天 Prototype.js 發佈了 1.6.0 Release Candidate 的消息(可至這裡下載),同時也說明 1.6 版會有怎樣的新功能。
Event handler
- 使用
Event.observe
註冊的 event handler 會自動被 bind 到 event target 上,所以在 handler 裡使用this
就不是指到 handler 而是 event target。 - 使用
Event.observer
註冊的 event hanlder,傳入的 event 參數換成Event
的 instance,所以可以使用這個參數來呼叫Event
提供的 functions。不過還是原本 event 的 properties 依然可用。 - 如果沒傳參數給
Event.stopObserving
,則表示直接 unregister 所有的 event handler。 - 可以自製 event,然後利用
Element#fire
來呼叫,官方提供的例子:
[code lang=”xml”]Release notes
…
[/code]
[code lang=”javascript”]
$(“container”).observe(“titleChanged”, function(event) {
this.highlight({ duration: 0.5 });
});
$(“title”).fire(“titleChanged”);
[/code] - 增加跨 browser 支援的
DOMContentLoaded
event。
Function API
Function#wrap
提供一種快速改寫物件原本 function 的方式,可以用來改良原本的 function 或是避開呼叫原本的 function,官方提供的範例如下:
[code lang=”javascript”]
String.prototype.capitalize = String.prototype.capitalize.wrap(
function(proceed, eachWord) {
if (eachWord && this.include(” “)) {
// capitalize each word in the string
return this.split(” “).invoke(“capitalize”).join(” “);
} else {
// proceed using the original function
return proceed();
}
});
“hello world”.capitalize() // “Hello world”
“hello world”.capitalize(true) // “Hello World”
[/code]Function#curry
提供 partial-function 的設計方式,以下是官方的範例:
[code lang=”javascript”]
function sum(a, b) {
return a + b;
}
sum(10, 5) // 15
var addTen = sum.curry(10);
addTen(5) // 15
[/code]Function#methodize
可以將定義好的 function 變成某個物件的 member function,並且把第一個參數改為該物件的this
:
[code lang=”javascript”]
function addBorder(element, color) {
return $(element).setStyle({
border: “3px solid ” + (color || “red”)
});
}
addBorder(“sidebar”, “#ddd”);
$(“sidebar”).addBorder = addBorder.methodize();
$(“sidebar”).addBorder(“#888”);
[/code]Function#argumentNames
傳回一個 array,內容是該 function 參數的名稱。Function#delay
讓 function delay 一段時間後才被呼叫,是window.setTimeout
的一個 wrapper。
Class API
- 新的
Class.create
及Class.extend
,如果 override 某一個 function,可以用第一個參數$super
指到 super class,直接參考用法:
[code lang=”javascript”]
var Animal = Class.create({
initialize: function(name) {
this.name = name;
},
eat: function() {
return this.say(“Yum!”);
},
say: function(message) {
return this.name + “: ” + message;
}
});
// subclass that augments a method
var Cat = Class.create(Animal, {
eat: function($super, food) {
if (food instanceof Mouse) return $super();
else return this.say(“Yuk! I only eat mice.”);
}
});
[/code] Class
物件增加constructor
、superclass
及subclasses
等 properties。
Ajax API
- 支援 JSON response bodies,也就是接收 server 回傳的 JSON object 時可以直接拿來用:
[code lang=”javascript”]
new Ajax.Request(“/people/5.json”, { // >> GET /people/5.json HTTP/1.1
onSuccess: function(transport) { // << Content-type: application/json var person = transport.responseJSON; // << { id: 5, name: "Tobie Langel", person.city // "Geneva" // << city: "Geneva", ... } ... }, method: "get" }); [/code] transport
這個 object 提供getHeader
及getAllHeaders
兩個 function。-
Ajax.Request
增加一些 options:sanitizeJSON
(true by default) 確認回傳的 JSON 是否有惡意字串evalJSON
(true by default) 如果回傳的是 application/json,則自動 eval。evalJS
(true by default) 如果回傳的是 text/javascript,則自動 eval。
DOM API
- 採用全新的 DOM Builder:
[code lang=”javascript”]
new Element(“input”, { name: “user”, disabled: true });
//->
[/code]
設定 attribute 的方式是使用Element#writeAttribute
。 - 將會捨棄
Insertion
及Position
,而直接這樣作:
[code lang=”javascript”]
$(“items”).insert({ after: new Element(“p”) });
$(“items”).insert({ top: “ - an item
- another item
- 增加
Element#update
及Element#replace
methods。 - 提供
Element#setStyle
:
[code lang=”javascript”]
$(“header”).setStyle(“font-size: 12px; float: left; opacity: 0.5”);
[/code] Element#identity
回傳 element 的 idElement#wrap
可以讓你改寫原本 element 的 wrap(同 jQuery 的作法):
[code lang=”xml”]
a picture
[/code]
[code lang=”javascript”]
$(“my_img”).wrap();
$(“my_span”).wrap(‘p’, { className: “caption” });
[/code]
[code lang=”xml”]a picture
[/code]
- 在
document.viewport
中增加好用取得頁面大小的methods:
[code lang=”javascript”]
document.viewport.getDimensions() // { width: 1149, height: 923 }
document.viewport.getWidth() // 1149
document.viewport.getHeight() // 923
document.viewport.getScrollOffsets() // { left: 0, top: 1592 }
[/code]
” });
$(“items”).insert(“
“); // defaults to bottom
[/code]
也可以在 Class 宣告時加入 toHTML
或 toElement
method 來讓其它 element 作 insert:
[code lang=”javascript”]
var Calendar = Class.create({
// …,
toElement: function() {
var container = new Element(“div”);
// …
return container;
}
});
$(“sidebar”).insert(new Calendar());
// same as $(“sidebar”).insert({ bottom: new Calendar() }) or
// $(“sidebar”).insert({ bottom: new Calendar().toElement() })
[/code]
其它還有很多改良,有興趣研究的人可以參考CHANGELOG
看起來 Prototype.js 1.6 提供了很多很實用的 methods,在使用 JavaScript 開發上應該更能得心應手了!期待正式 release!
1 comment
Comments are closed.