prototype.js 1.5のElement.Methods

prototype.js1.5ではみんながこうしたいなーと思っていた機能が実装されました。(via Encytemedia ) （SVN co http://dev.rubyonrails.org/svn/rails/spinoffs/prototype して rake distしたもの ）

■Element.Methods

1.4まではelementに対する操作は

1Element.show($("test"));
2Element.update($("test"), "hoge");

のように書く必要がありました。

これが

1$("test").show();
2$("test").update("hoge");

と書けるようになりました。

これはprototype.jsで最も偉大な$メソッドの変更によるモノです。

 1function $() {
 2  var results = [], element;
 3  for (var i = 0; i < arguments.length; i++) {
 4    element = arguments[i];
 5    if (typeof element == 'string')
 6      element = document.getElementById(element);
 7    results.push(Element.extend(element)); //<= ココ！
 8  }
 9  return results.length < 2 ? results[0] : results;
10}

つまり取得したelementに対してElement.extendが適応されるようになった、と。 んでそのElement.extendは

 1Element.extend = function(element) {
 2  if (!element) return;
 3
 4  if (!element._extended && element.tagName && element != window) {
 5    var methods = Element.Methods;
 6    for (property in methods) {
 7      var value = methods[property];
 8      if (typeof value == 'function')
 9        element[property] = value.bind(null, element);
10    }
11  }
12  element._extended = true;
13  return element;
14}

Element.Methodsのメソッドがelementに対して第1引数をそのelementに束縛した状態でセットされます。 つまりElement.Methodsにメソッドを追加すれば自動的に$で取得したelementに対してそのメソッドが追加されます。

ちなみにscriptaculousでも

1if(Element.Methods) {
2  Element.Methods.visualEffect = function(element, effect, options) {
3    s = effect.gsub(/_/, '-').camelize();
4    effect_class = s.charAt(0).toUpperCase() + s.substring(1);
5    new Effect[effect_class](element, options);
6    return $(element);
7  }
8}

というコードが追加されています。 クラス名変換のオーバーヘッドはあるものの、$(“test”).visualEffect(‘scale’)と書けるようになりました。

IEで$$が動くようになっていたりと1.5のリリースが待ち遠しいですね。

comments powered by Disqus