Jon.Hong 将欲取之 必先予之……

許多 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!

原文来自：http://blog.ericsk.org/archives/733


另附上
   1.4版开发手册：http://www.cnblogs.com/thinhunan/archive/2006/04/01/DeveloperNotesForPrototype.html

   1.5版本：http://www.cnblogs.com/me-sa/articles/706505.html