เปรียบเทียบ Dojo กับ Prototype

เดิมที่ผมใช้ ruby on rails อยู่นั้น
Prototype ถือเป็นพระเอกในฝั่ง javascript
ช่วงนี้หันมาทำงานด้วย Tapestry4
Tacos ซึ่งเป็น Ajax component ของ Tapestry
ดันใช้ Dojo เป็นหลัก
ก็เลยหันมาทดลองใช้ Dojo ดูบ้าง

วันนี้ทำหน้าจอหนึ่งซึ่งมีการใช้ event กับ dom
ลองเปรียบเทียบกันดูว่า คำสั่งหน้าตาแตกต่างกันแค่ไหน

เริ่มจาก getElementById ก่อน
ใน Prototype เราใช้

$('foo')

ส่วนใน Dojo

dojo.byId('foo')

ใน Prototype เราสามารถ get แบบนี้ได้

var element_array = $('foo','bar','xxx')

ใน Dojo

var element_array = dojo.byIdArray('foo','bar','xxx')

การ attach event เข้ากับ element
ใน prototype

function myFunction() { ... }
Event.observe('foo', 'click', myFunction);
หรือ
Event.observe($('foo'), 'click', myFunction);

ใน Dojo

function myFunction() { ... }
dojo.event.connect(dojo.byId('foo'), 'onclick', myFunction);

จะเห็นว่า prototype จะแปะ "on" ให้กับ event เอง

กรณี detact event
prototype ใช้

Event.stopObserving('foo', 'click', myFunction);

Dojo

dojo.event.disconnect(dojo.byId('foo'))

กรณี Effect
Prototype

new Effect.Fade('foo', {duration: .5});

Dojo

dojo.fx.html.fadeHide(dojo.byId('foo'), 500);

กรณีที่ combine effect โดยมีลำดับก่อนหลัง
Prototype

new Effect.Fade('foo', {queue:'front', duration: .5});
new Effect.Fade('bar', {duration: .5});

ใน Dojo ไม่แน่ใจว่ามีเรื่อง combine effect หรือเปล่า
เพราะเอกสารมันน้อย
แต่สามารถเรียงลำดับโดยใช้ hook function เข้ามาช่วย

dojo.fx.html.fadeHide(dojo.byId('foo'), 500,
  function() {
    dojo.fx.html.fadeHide(dojo.byId('bar'), 500);
  });

feature ที่เกี่ยวกับ Enumeration
Prototype

var ary = ['foo', 'bar'];
var total = 0.0;
ary.each(function(elm) {
  total += getValue(elm);
});

Dojo

var ary = ['foo', 'bar'];
var total = 0.0;
dojo.lang.forEach(ary,
  function(elm) {
    total += getValue(elm);
  });

add, remove css class
prototype

Element.addClassName('foo', 'bar');
Element.removeClassName('foo', 'bar');

dojo

dojo.html.addClass(dojo.byId('foo'), 'bar');
dojo.html.removeClass(dojo.byId('foo'), 'bar');

เปรียบเทียบแค่นี้แหล่ะ เพราะหน้าจอแรก ใช้อยู่เท่านี้

Update ไปนั่งไล่ดู code ใหม่แล้ว พบว่า function ส่วนใหญ่รับค่า node เป้น string name ได้
แต่ตัว event.connect นี่ไล่ดู code แล้วมันแปลกๆอยู่ ดูเหมือนว่าต้อง pass เป็น object