Prototype Javascript Framework

Posted by PunNeng, Wed Sep 05 00:46:00 UTC 2007

ช่วงนี้ดูเหมือนผมจะได้ใช้ Prototype เป็นตัวตายตัวแทนของ javascript เสียแล้ว เลยเอามาเขียนเสียหน่อย

จริงๆ มันก็คือ javascript นี่แหละ แต่มีการเตรียม library อะไรต่างๆ นานา ไว้ให้ อีกอย่างนึงที่ผมว่าเจ๋งคือ มันมี function ที่ดูง่ายๆ อย่าง $() หรือ $$() เป็นต้น หรือแม้กรทั่งการใช้ block แนวๆ Ruby ก็มีให้เห็น ใครเป็นแฟน Ruby อยู่ คงจะชอบใจ

มุมมองการเขียน ก็เป็นการเขียนเชิง Prototype (ซึ่งเป็นที่มาของการตั้งชื่อว่า Prototype นี่แหละ) ซึ่งไม่ต่างอะไรจากการมองเชิง Object-oriented เท่าไหร่ เรื่องความแตกต่าง ยังจะเอาไว้ก่อน เดี๋ยวกันจะกลายเป็น Prototype vs Object-oriented ไปเสียก่อน ซึ่งจริงๆ แล้ว Javascript เอง ก็เป็นภาษาเชิง Prototype ในตัวเองอยู่แล้ว(OO ด้วย)

จุดที่แข็งที่สุดของ Prototype นี้ เห็นจะหนีไม่พ้น library ที่เตรียมไว้ใช้งานกับ DOM หลากหลายชนิด เช่น $() หรือ $$() ที่ว่าไปข้างบน หรือ

  1
  2
  3
Element.hide('comments'); 
var div_height = Element.getHeight(my_div);
Element.addClassName('contactform', 'pending');

อีกส่วนนึงที่ลืมไปไม่ได้คือ AJAX
โดยใช้งานผ่าน Ajax.request เช่น

  1
  2
  3
  4
  5
  6
  7
  8
  9
new Ajax.Request('/some_url',
  {
    method:'get',
    onSuccess: function(transport){
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
    },
    onFailure: function(){ alert('Something went wrong...') }
  });

ยังไม่หมด ยังต่อ JSON ได้อีก

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
$H({name: 'Violet', occupation: 'character', age: 25 }).toJSON();
//-> '{"name": "Violet", "occupation": "character", "age": 25}'


var Person = Class.create();
Person.prototype = {
  initialize: function(name, age) {
    this.name = name;
    this.age = age;
  },  
  toJSON: function() {
    return ('My name is ' + this.name + 
      ' and I am ' + this.age + ' years old.').toJSON();
  }
};
var john = new Person('John', 49);
Object.toJSON(john);
//-> '"My name is John and I am 49 years old."'

library ยังมีอีกเพียบครับ ต้องลอง!!

ถ้าใครเคยใช้ Scriptaculous หรือ Rico หรือ Ajax ของ Rails เอง ก็จะต้องผ่านตากับ Prototype มาแน่นอน เพราะมันต้องใช้ Prototype เป็นฐานการทำงาน ส่วนในอุตสาหกรรมจริงๆ ดูได้ที่นี่

ข้อมูลจาก Prototype Tips and Tutorials

ปล. มาโฆษณาชวนเชื่อครับ ส่วน howto คงไว้คราวหน้าครับ

Filed Under: General | Tags: framework javascript prototype

Comments

Have your say

A name is required. You may use HTML in your comments.




codegent: we're hiring