許多 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 來呼叫，官方提供的例子：

  <div id="container">
    <h1><span id="title">Release notes</span></h1>
    ...
  </div>

  $("container").observe("titleChanged", function(event) {
    this.highlight({ duration: 0.5 });
  });
  
  $("title").fire("titleChanged");

• 增加跨 browser 支援的 DOMContentLoaded event。

Function API

• Function#wrap 提供一種快速改寫物件原本 function 的方式，可以用來改良原本的 function 或是避開呼叫原本的 function，官方提供的範例如下：

  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"

• Function#curry 提供 partial-function 的設計方式，以下是官方的範例：

  function sum(a, b) {
    return a + b;
  }
  
  sum(10, 5) // 15
  var addTen = sum.curry(10);
  addTen(5)  // 15

• Function#methodize 可以將定義好的 function 變成某個物件的 member function，並且把第一個參數改為該物件的 this：

  function addBorder(element, color) {
    return $(element).setStyle({ 
      border: "3px solid " + (color || "red")
    });
  }
  
  addBorder("sidebar", "#ddd");
  $("sidebar").addBorder = addBorder.methodize();
  $("sidebar").addBorder("#888");

• Function#argumentNames 傳回一個 array，內容是該 function 參數的名稱。
• Function#delay 讓 function delay 一段時間後才被呼叫，是 window.setTimeout 的一個 wrapper。

Class API

• 新的 Class.create 及 Class.extend，如果 override 某一個 function，可以用第一個參數 $super 指到 super class，直接參考用法：

  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.");
    }
  });

• Class 物件增加 constructor、superclass 及 subclasses 等 properties。

Ajax API

• 支援 JSON response bodies，也就是接收 server 回傳的 JSON object 時可以直接拿來用：

  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" 
  });

• 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：

  new Element("input", { name: "user", disabled: true });
  //-> <input name="user" disabled="disabled" />

  設定 attribute 的方式是使用 Element#writeAttribute。

• 將會捨棄 Insertion 及 Position，而直接這樣作：

  $("items").insert({ after: new Element("p") });
  $("items").insert({ top: "<li>an item</li>" });
  $("items").insert("<li>another item</li>"); // defaults to bottom

  也可以在 Class 宣告時加入 toHTML 或 toElement method 來讓其它 element 作 insert：

  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() })

• 增加 Element#update 及 Element#replace methods。
• 提供 Element#setStyle：

  $("header").setStyle("font-size: 12px; float: left; opacity: 0.5");

• Element#identity 回傳 element 的 id
• Element#wrap 可以讓你改寫原本 element 的 wrap（同 jQuery 的作法）：

  <img id="my_img" />
  <span id="my_span">a picture</span>

  $("my_img").wrap();
  $("my_span").wrap('p', { className: "caption" });

  <div><img id="my_img" /></div>
  <p class="caption"><span id="my_span">a picture</span></p>

• 在 document.viewport 中增加好用取得頁面大小的methods：

  document.viewport.getDimensions()     // { width: 1149, height: 923 }
  document.viewport.getWidth()          // 1149
  document.viewport.getHeight()         // 923
  document.viewport.getScrollOffsets()  // { left: 0, top: 1592 }

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

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

歷史上的今天

• 電腦與我 (5) - 2005