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に対する操作は

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

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

これが

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

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

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

function $() {
  var results = [], element;
  for (var i = 0; i < arguments.length; i++) {
    element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);
    results.push(Element.extend(element)); //<= ココ!
  }
  return results.length < 2 ? results[0] : results;
}

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

Element.extend = function(element) {
  if (!element) return;

  if (!element._extended && element.tagName && element != window) {
    var methods = Element.Methods;
    for (property in methods) {
      var value = methods[property];
      if (typeof value == 'function')
        element[property] = value.bind(null, element);
    }
  }
  element._extended = true;
  return element;
}

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

ちなみにscriptaculousでも

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

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

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

comments powered by Disqus