Group Blog
 
All Blogs
 
Javascript Pattern for Gathering Data from Pages & Check consistency

วันนี้ต้องเขียน Javascript เพื่อรวบรวมข้อมูลที่ผู้ใช้ป้อนในแบบฟอร์มของ Web Page เลยพยายามแยกออกมาเป็นฟังก์ชั่นทำงานโดยเฉพาะ

function gatherData() {

.....

return data;

}

แต่ทีนี้นึกขึ้นมาได้ว่า อ้าว แล้วถ้าผู้ใช้ป้อนข้อมูลไม่ครบล่ะ อย่างเช่นปล่อย textbox ที่ควรจะต้องป้อนข้อมูลให้เป็นช่องว่าง เราจะออกแบบยังไงให้ฟังก์ชั่นนี้สามารถบอกได้ด้วยว่าผู้ใช้ป้อนข้อมูลไม่ครบนะ เกิด Error ขึ้นมา แล้ว Error ดังกล่าวคืออะไร

สมัยก่อนตอนยังห่วยๆ อยู่ ผมจะตรวจสอบที่ฝั่งผู้เรียกใช้ เช่น

r=gatherData();

if (r.Name=='') ErrorMessageBox('Error');

ซึ่งวันนี้คิดได้แล้วว่าออกแบบมาห่วย น่าจะมีวิธีการที่ดีกว่าที่จะทำให้ Flow การทำงานทั้งหมดไปรวมอยู่ในฟังก์ชั่นเก็บข้อมูลทีเดียว ไม่ใช่แยกออกมาเป็นเก็บข้อมูลส่วนนึง เช็คข้อมูลอีกส่วนนึง ทั้งๆ ที่การเก็บข้อมูลกับการเช็คความถูกต้องมันก็มี Process เหมือนๆ กัน

เป็นครั้งแรกที่รู้สึกขอบคุณความเป็น Weaked-Type ของ Javascript (ปกติจะเกลียดมากๆ) เลยลองออกแบบให้ฟังก์ชั่นนี้ return object คนละแบบไปเลยเมื่อเกิด Error

 

if ($('#importantCheckbox').attr('checked')) res.someData= 2;    

 else {        

 r = { IsError: true, ErrorMessage: 'Please select criteria type' };         

return r;     

}

(ตั้ง r ไว้แยกกับ return เผื่อมีปัญหาจะได้ breakpoint ได้ง่ายๆ) 

ทีนี้ฟังก์ชั่นที่มาเรียกใช้ก็แทบจะไม่จำเป็นต้องรู้อะไรเลยว่าต้องเช็คข้อมูลยังไง แล้วถ้า Error มันจะเกิดเพราะอะไร ในเมื่อเรามีทั้ง IsError และ ErrorMessage มาให้แล้ว (คล้ายๆ ทำ Exception เองเลยเนอะ) สามารถเช็คข้อมูลได้ง่ายๆ เลย 

r=gatherData();

if (r.IsError) {

ErrorMessageBox(r.ErrorMessage);

return;

}

ถ้าละเอียดขึ้นอาจจะเพิ่ม ErrorID เข้าไปด้วยก็ได้

จริงๆ เป็น Pattern การออกแบบง่ายๆ ที่ระดับเซียนคงคิดกันได้หมดแล้วแหละ (แต่เราพึ่งมาคิด) ส่วนตัวคิดว่าทำให้โค้ดดูอ่านง่ายขึ้นเยอะ




Create Date : 30 สิงหาคม 2555
Last Update : 30 สิงหาคม 2555 21:23:42 น. 0 comments
Counter : 263 Pageviews.

ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
  *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

Mariel
Location :


[Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed
Smember
ผู้ติดตามบล็อก : 1 คน [?]




Friends' blogs
[Add Mariel's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.