Javascript Object , แล้วทำไมต้องเขียนเป็น Object ??

หลายๆ ครั้ง อาจจะประสบปัญหาเรื่องชื่อของ Function ในการเรียกจาวา Script

ในที่นี้ผมขอยกตัวอย่างง่ายๆ เช่น สมมุติว่าเรามี Form อยู่สองอัน

อันแรก แสดง Form เกี่ยวกับกรอกข้อมูลของ น้องหมา
อันที่สอง แสดง Form เกี่ยวกับกรอกข้อมูลของ น้องแมว

ถ้าให้ง่ายๆ เลยเราก็เขียนกันแบบ

function showDogFrom() {
   $(' #dogArea ').show()
}

function showCatFrom() {
   $(' #catArea ').show()
} 

แต่วิธีที่จะนำเสนอต่อไปนี้ เป็นอีกวิธีหนึ่งที่จะช่วยให้การเรียกใช้ Function หรือ Attribute ต่างๆ จาก Object ได้ ด้วยวิธีง่ายๆ


ตัวอย่าง

var Dog = {
   
   welcome_txt : 'Dog Information' ,
   showForm : function() { $(' #dogArea ').show() } ,
   save : function( frm ) { 
             $.ajax({ url:'saveDog.php' , 
                      data:$(frm).serialize() ,
                      success : function() { alert('Dog info , Saved') }
             })
          }

}

var Cat = {
   
   welcome_txt : 'Cat Information' ,
   showForm : function() { $(' #catArea ').show() } ,
   save : function( frm ) { 
             $.ajax({ url:'saveCat.php' , 
                      data:$(frm).serialize() ,
                      success : function() { alert('Cat info , Saved') }
             })          
          }

}

เมื่อเราสร้าง Object ที่ต้องการเรียบร้อยแล้ว ต่อมาเรามีดูวิธีการเรียกใช้กันบ้าง

// การเรียก Attribute
alert( Dog.welcome_txt ); // จะปรากฎคำว่า Dog Information
alert( Cat.welcome_txt ); // จะปรากฎคำว่า Cat Information

// การเรียก Methods
Dog.showFrom();
Cat.showFrom();

จากตัวอย่าง จะเห็นได้ว่าเราสามารถเรียกใช้ ชื่อ Attribute หรือ Methods ที่เป็นชื่อเดียวกันได้ แต่ต่าง กัน แค่ตรงชื่อ Object
ทำให้ง่ายและสะดวกต่อการเรียกใช้งาน ไม่ต้องจดจำ ชื่อ Function หรือว่า ชื่อ Attribute  ที่แตกต่างกัน

สำหรับตัวอย่างข้างบนนี้ ลองนำไปประยุกต์ใช้ในงานกันดูนะครับ
เพราะมันจะช่วยให้เราสามารถเขียนโค้ดได้แบบมีระเบียบ และ Dynamic ด้วย

** ตัวอย่างที่กล่าวไปนั้นมีการ เรียกใช้ Framework ของ jQuery ด้วยนะครับ **