ในบทความนี้เราจะมาทำความรู้จักกับ Dojo Toolkit กัน ว่ามันคืออะไร และในการใช้งานเบื้องต้นมีโครงสร้างหน้าตาเป็นอย่างไร โดยบทความจะแนะนำให้รู้จักและลองเขียนโค้ดแบบง่ายๆด้วย

1. Dojo คืออะไร

Dojo คือ JavaScript Toolkit แบบโอเพ่นซอร์สหรือพูดให้ง่ายก็คือ JavaScript Library แบบโอเพ่นซอร์สนั่นเอง และเป็นไลบรารีที่ถูกสร้างขึ้นมาเพื่อให้ง่ายต่อการใช้งาน JavaScript กับการพัฒนาเว็บแอพพลิเคชัน เนื่องจาก Dojo ได้รวบรวม Objects และ Functions ต่างๆที่มีความจำเป็นต่อการใช้งานไว้ให้แล้ว ทำให้เราไม่ต้องเขียนขึ้นเองใหม่ อาทิเช่น ฟังก์ชันที่เกี่ยวกับ AJAX และ DOM, Widgets ต่างๆอย่างเช่น Menu, Calendar เป็นต้น นอกจากนี้ Dojo ยังช่วยในเรื่องของความไม่เข้ากันของแต่ละเว็บเบราว์เซอร์ด้วย โดย Dojo จะตรวจสอบชนิดของเว็บเบราว์เซอร์และเลือกรันโค้ดที่เหมาะสมที่สุดให้โดยอัตโนมัติ แล้วใครเป็นคนสร้าง Dojo ขึ้นมา? Dojo เริ่มต้นจาก Alex Russell, Dylan Schiemann, และ David Schontzler ในปี 2004 ปัจจุบันถูกดูแลและพัฒนาโดย Dojo Foundation แล้วทำไมต้องเป็น Dojo? อันที่จริงแล้วมี JavaScript Toolkits อยู่มากมาย แต่สิ่งที่ทำให้ Dojo โดดเด่นนั้นมีดังต่อไปนี้

• อย่างแรกเลยคือ Dojo มี Community ที่แข็งแกร่ง อันนี้ถือว่าเป็นสิ่งสำคัญมากสำหรับโปรเจคประเภทโอเพ่นซอร์ส หาก Community อ่อนแอลงเมื่อใดการพัฒนาก็หยุดลงเมื่อนั้น นอกจากนี้ยังมีบริษัทชั้นนำให้การสนับสนุนอยู่ อาทิเช่น IBM, Sun (ปัจจุบัน Oracle) เป็นต้น
• มีไลเซนการใช้งานที่ยืดหยุ่น (BSD หรือ AFL)
• เป็นไลบรารีที่มีความครบถ้วนและครอบคลุมการใช้งานมากที่สุดตัวหนึ่ง คือไม่ใช่เน้นไปที่ Widgets เพียงอย่างเดียวหรือ AJAX เพียงอย่างเดียวเหมือนไลบรารีตัวอื่นๆ ทำให้การเรียนรู้ทำเพียงแค่ครั้งเดียว

2. Getting Dojo

เอาหล่ะทีนี้เรามาดูกันว่าเราต้องใช้อะไรบ้าง ก็แน่นอนว่าต้องมี i) เว็บเบราว์เซอร์ จะเป็นอะไรก็ได้ไม่ว่าจะเป็น Firefox, Safari, Chrome, Opera, หรือ IE และจะเวอร์ชันไหนก็ได้ ii) Text Editor ดีๆสักตัว เอาแบบที่ไฮไลท์ Syntax ของ JavaScript ได้ เวลาเขียนจะได้ง่ายขึ้น และสุดท้ายเลย iii) ไฟล์ไลบรารี Dojo นั่นเอง (อันที่จริงแล้วเราสามารถเรียกใช้ Dojo ผ่านอินเทอร์เน็ตเลยก็ได้นะครับ แต่แนะนำว่าโหลดมาเก็บไว้ในเครื่องสำหรับทดลองเขียนจะดีกว่า)

การดาวน์โหลดก็เพียงเข้าไปดาวน์โหลดที่ www.dojotoolkit.org ให้ดาวน์โหลดที่เป็น Compressed ไฟล์ (zip หรือ tar.gz แล้วแต่สะดวก) ณเวลาที่เขียนผมดาวน์โหลดไฟล์ dojo-release-1.6.1.tar.gz หากใครใช้เวอร์ชันที่ใหม่กว่าก็ไม่เป็นปัญหาแต่อย่างใด เมื่อได้แล้วให้แตกไฟล์ไว้ที่ใดก็ได้ตามสะดวก คุณก็จะพบว่าภายในโฟลเดอร์ dojo-release-1.6.1 ประกอบไปด้วยโฟลเดอร์ย่อย 3 โฟลเดอร์ดังนี้ 1) dijit 2) dojo 3) dojox ในลำดับถัดไปเราจะมาดูกันว่าโครงสร้างและการจัดแบ่งแพ็คเกจของ Dojo นั้นเป็นอย่างไร

หากคุณไปที่หน้าดาวน์โหลด ก็จะพบส่วนที่เป็น Build และ Source เราต้องการเพียงแค่ Build นะครับ และภายใต้ Build เรายังพบอีกว่าแบ่งออกเป็นแบบ CDN และ เวอร์ชัน 1.x.x ให้เลือกแบบเวอร์ชันนะครับ ส่วน Base นั้นเป็นการดาวน์โหลดเพียงแค่ไฟล์ Base หากไม่ต้องการใช้ทุกฟีเจอร์

แบบ CDN คือการอ้างอิงใช้งาน Dojo ผ่านอินเทอร์เน็ต โดยที่เราไม่ต้องมี Dojo ภายในเครื่องหรือมี Dojo อยู่ในเว็บแอพพลิเคชันของเราเลย วิธีนี้เหมาะแก่การ Deploy ใช้งานจริงเพื่อหลีกเลี่ยงเรื่อง Traffic/Bandwidth ของเว็บไซต์เรานะครับ อย่างไรก็ตามรายละเอียดการใช้งานนั้นไม่ต่างกัน

3. Dojo's Architecture

ในหัวข้อนี้เรามาดูภาพรวมโครงสร้างและการจัดแบ่งแพ็คเกจของ Dojo กัน Dojo นั้นแบ่งออกเป็น 5 ส่วนหลัก (หรือแพ็คเกจ) ด้วยกันคือ

• Base
• Core
• Dijit
• DojoX
• Util

หรือดังแสดงในรูปที่ 1 แต่ละส่วนมีรายละเอียดดังต่อไปนี้

รูปที่ 1: Dojo Architecture

"Base" ชื่อก็บอกอยู่แล้วว่าเป็นองค์ประกอบหรือแพ็คเกจหลัก และเป็นพื้นฐานของแพ็คเกจอื่นทั้งหมด Base ประกอบไปด้วย Objects และ Functions พื้นฐานที่ช่วยให้การเขียน JavaScript และ AJAX ง่ายขึ้น อาทิเช่น ช่วยให้การเข้าถึง DOM Nodes ทำได้ง่ายขึ้น เป็นต้น คุณสมบัติของ Base ทั้งหมดถูกรวบรวมอยู่ในไฟล์ dojo.js เพียงไฟล์เดียวเท่านั้น และไฟล์ก็มีขนาดเล็กมาก เพียงแค่ 80+ KB เท่านั้น (dojo-release-1.6.1/dojo/dojo.js) การใช้งาน Functions หรือ Attributes ต่างๆใน Base จะเขียนโดยมี Namespace ขึ้นต้นด้วย dojo เสมอ (dojo.*) เช่น dojo.byId(), dojo.connect() เป็นต้น

ในขณะที่ Base ประกอบไปด้วย Functions พื้นฐานที่จำเป็น ชนิดที่ว่าเมื่อได้ใช้แล้วจะขาดมันไปไม่ได้ (ในเอกสารเขาว่าอย่างนั้นนะ) Core ประกอบไปด้วย Functions หลักที่จำเป็นต้องใช้ตามแต่ละกรณีไป หรือจะมองว่าเป็นส่วนเสริมของ Base ก็ได้ Core ประกอบไปด้วย Functions อาทิเช่นที่เกี่ยวข้องกับ Internationalization (i18n), Back-Button, Drag-and-Drop, Animation Effects, Cookies เป็นต้น จะเห็นได้ว่าบางอย่างเราก็ไม่จำเป็นต้องใช้เสมอไปเช่น Drag-and-Drop อ้าวแล้วถ้าจำเป็นต้องใช้ Core เราต้องใช้ไฟล์ไหนหล่ะ? คำตอบก็คือไม่มี!!! เพราะ Dojo มีวิธีและกระบวนการดึงสิ่งที่ต้องการใช้ที่นอกเหนือจาก Base และเป็นวิธีที่ง่ายและได้ประสิทธิภาพด้วย กล่าวคือใช้วิธีการอิมพอร์ตเฉพาะที่ต้องการใช้เพิ่มเท่านั้น ลักษณะจะคล้ายๆกับการ import ใน Javaหรือ #include ใน C ตัวอย่างเช่น ถ้าต้องการใช้ Animation ฟีเจอร์ เราสามารถดึงฟีเจอร์นี้มาใช้ได้โดย

  dojo.require("dojo.fx");

เท่านี้เราก็สามารถเรียกใช้ฟังก์ชันต่างๆที่อยู่ใน Namespace นั้นได้ เช่น

  dojo.fx.slideTo();

คุณสามารถคิดได้ว่า มี dojo.fx.* มาอยู่ในแอพพลิเคชันของเราแล้ว ดังนั้นอะไรก็ตามที่มี Namespace ขึ้นต้นด้วย dojo.xXx.* เป็นฟีเจอร์หรือฟังก์ชันที่อยู่ใน Core นั่นเอง (ถ้า dojo แล้วตามด้วยฟังก์ชันเลยจะเป็นของ Base คือไม่ต้องอิมพอร์ต)

Dojo นอกจากจะประกอบไปด้วยฟังก์ชันพื้นฐานต่างๆแล้ว ยังประกอบไปด้วย Widgets ต่างๆมากมาย คำว่า Widgets นั้นก็คือ User Interface Controls ต่างๆนั่นเอง ความหมายเดียวกัน เช่น Button, Calendar, Menu เป็นต้น และ Widgets ต่างๆก็ได้ถูกรวบรวมให้อยู่ในส่วนของ Dijit นั่นเอง ในการใช้งาน Dijit เราสามารถทำได้ไม่ต่างไปจากการใช้งาน Core เลย กล่าวคือต้องการใช้ Widgets ใดก็ให้อิมพอร์ตผ่าน dojo.require() นั่นเอง ยกตัวอย่างเช่น เราต้องการใช้ Calendar เราสามารถเขียนได้ดังนี้

  dojo.require("dijit.form.DateTextBox");

เห็นไหมครับง่ายนิดเดียว และโปรดสังเกตว่า Namespace ของ Dijit นั้นขึ้นต้นด้วย Dijit

DojoX ย่อมาจาก Dojo eXtensions ทำหน้าที่รวบรวมออบเจกต์และฟังก์ชันที่เป็นโปรเจคเสริมหรือยังเป็นเพียงแค่โปรเจกทดลอง ซึ่งก็ไม่แน่ว่าถ้าเป็นที่นิยมและต้องการออบเจกต์หรือฟังก์ชันบางตัวก็อาจถูกรวมเข้ากับ Core หรือ Dijit ในอนาคตได้ สิ่งที่ได้รับความนิยมในการใช้งาน DojoX ก็คือพวก Widgets แปลกๆหรือที่ไม่มีให้ใช้ใน Dijit อาทิเช่น Grid เป็นต้น ถ้าจะใช้ DojoX ก็เช่นเดิมนะครับ คืออิมพอร์ตผ่าน dojo.require() โดย Namespace จะเริ่มด้วย DojoX เสมอ

Util ประกอบไปด้วย Utilities ต่างๆและ Build Tools อาทิเช่น Unit Testing Framework เป็นต้น Util นั้นในเบื้องต้นเราอาจไม่ได้ใช้มันเลยนะครับ เพราะไว้สำหรับคนที่ทำส่วนเสริมของ Dojo เป็นหลัก และถ้าต้องการใช้ Util เราจะต้องโหลดมาเองเพิ่มด้วย (เพราะมันไม่ได้มากับการดาวน์โหลดทั่วไป) โดยจะต้องเลือกดาวน์โหลดเป็นแบบซอร์สโค้ด