Prototype 1.6 Release Candidate

許多 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.createClass.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 物件增加 constructorsuperclasssubclasses 等 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 提供 getHeadergetAllHeaders 兩個 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
  • 將會捨棄 InsertionPosition,而直接這樣作:
    [code lang="javascript"]
    $("items").insert({ after: new Element("p") });
    $("items").insert({ top: "

  • an item
  • " });
    $("items").insert("

  • another item
  • "); // defaults to bottom
    [/code]
    也可以在 Class 宣告時加入 toHTMLtoElement 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]

  • 增加 Element#updateElement#replace methods。
  • 提供 Element#setStyle
    [code lang="javascript"]
    $("header").setStyle("font-size: 12px; float: left; opacity: 0.5");
    [/code]
  • Element#identity 回傳 element 的 id
  • Element#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]

其它還有很多改良,有興趣研究的人可以參考CHANGELOG

看起來 Prototype.js 1.6 提供了很多很實用的 methods,在使用 JavaScript 開發上應該更能得心應手了!期待正式 release!