Rev. 2.73

Mislav Marohnić씨는 Ruby기반의 블로그 도구인 Radiant CMS를 Prototype 1.6.0으로 교체하는 작업을 진행하면서 기존에 사용하던 Prototype APIs가 어떻게 변경하는지에 대한 이해하기 쉬운 예제를 공개했습니다. DOM, Event, Class, Hash 크게 4부분으로 나누어 설명하고 있으며, 그 내용은 다음과 같습니다.

DOM 노드 찾기와 교정하기

// before:
this.tab_container = document.getElementsByClassName('tabs', this.element).first();
// after:
this.tab_container = this.element.down('.tabs');
// returns all elements under the current element matcing the selector
this.element.select('.tabs');

// before:
new Insertion.Bottom(
  this.tab_container,
  '<a class="tab" href="javascript:TabControl.controls[\'' + this.control_id + '\'].select(\'' + tab_id + '\');">' + caption + '</a>');
// after:
this.tab_container.insert(
  '<a class="tab" href="javascript:TabControl.controls[\'#{id}\'].select(\'#{tab_id}\');">#{caption}</a>'.interpolate({
    id: this.control_id, tab_id: tab_id, caption: caption
  })
);

// before:
divs = $$("div.tag-description");
$A(divs).each(function(div){ Element.show(div) });
// after:
$$("div.tag-description").invoke('show');

// before:
var sibling = row.nextSibling;
// after:
var sibling = row.next();

// before:
Element.removeClassName(row, 'children-visible');
Element.addClassName(row, 'children-hidden');
// after:
row.removeClassName('children-visible');
row.addClassName('children-hidden');

// before:
onMouseOverRow: function(event) {
  this.className = this.className.replace(/\s*\bhighlight\b|$/, ' highlight');
},
onMouseOutRow: function(event) {
  this.className = this.className.replace(/\s*\bhighlight\b\s*/, ' ');
},
// after:
onMouseOverRow: function(event) {
  this.addClassName('highlight');
},
onMouseOutRow: function(event) {
  this.removeClassName('highlight');
},

// before:
isExpander: function(element) {
  return (element.tagName.strip().downcase() == 'img') && /\bexpander\b/i.test(element.className);
},
// after:
isExpander: function(element) {
  return element.match('img.expander');
},

// before:
initialize: function(element_id) {
  var table = $(element_id);
  var rows = table.getElementsByTagName('tr');
  for (var i = 0; i < rows.length; i++) {
    this.setupRow(rows[i]);
  }
}
// after:
initialize: function(element_id) {
  $(element_id).select('tr').each(this.setupRow, this)
}

이벤트 핸들링

// before:
Event.observe(row, 'mouseover', this.onMouseOverRow.bindAsEventListener(row));
Event.observe(row, 'mouseout', this.onMouseOutRow.bindAsEventListener(row));
// after:
row.observe('mouseover', this.onMouseOverRow);
row.observe('mouseout', this.onMouseOutRow);

클래스와 상속

// before:
var SiteMap = Class.create();
// Inherit from RuledTable:
SiteMap.prototype = Object.extend({}, RuledTable.prototype);
Object.extend(SiteMap.prototype, {
  ruledTableInitialize: RuledTable.prototype.initialize,
  initialize: function(id, expanded) {
    this.ruledTableInitialize(id);
    this.expandedRows = expanded;
  },
  ...
});
// after:
var SiteMap = Class.create(RuledTable, {
  initialize: function($super, id, expanded) {
    $super(id);
    this.expandedRows = expanded;
  },
  ...
});

해시 API

// new Hash instance:
this.tabs = $H();
// old style:
this.tabs[tab_id] = tab;
var object = this.tabs[something];
// new style:
this.tabs.set(tab_id, tab);
var object = this.tabs.get(something);

Comments

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

Your Reaction Time!

captcha

avatar