Rev. 2.73

무시무시한 새 기능들을 안고 Prototype 1.6.0 RC(출시 후보)가 릴리즈 되었다. 이전 버전에 비해 약 900여라인이 추가 되었으며, 용량 또한 93kb에서 120kb로 늘었다. Event, Function, Class, Ajax, Template 등 전역에 크고 작은 변화가 있다. 이벤트 핸들러는 더이상 감시중인 엘리먼트들을 케시에 담아두지 않게 되었으며, 아래와 같은 커스텀 이벤트를 지원하기 시작한다.

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

그리고 Function부에는 #wrap 메소드가 추가되어 아래처럼 jQuery 스타일 메서드 연결이 가능하다.

$$("div.widget").show().highlight()

이 밖에도 #curry, #methodize, #argumentNames, #delay 메서드가 추가되었다.

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

Ajax부의 주된 변화는 JSON을 지원하는 내용이다. Ajax.Response에 사용되는 responseJSON 메서드는 자동으로 헤더를 분석하여 상황에 따른 evaluation을 감지한다.

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

DOM부에서는 더욱 직관적이며 자유로운 형식의 코딩을 구사할 수 있게 되었다. CSS를 스트링으로 입력하고, #wrap 메서드로 부모 노드를 생성하거나, #identify 메서드로 ID값을 반환 또는 자동으로 생성케 한다.

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

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

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

$("my_div").identify(); // -> "my_div" 
$("my_div").down().identify(); // -> "anonymous_element_1" 

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

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar