JavaScript Meke It Better - Extending Module

จากครั้งที่แล้วที่เคยเขียนแนะนำเกี่ยวกับ Module Pattern ไว้ใน http://manit-tree.blogspot.com/2012/07/javascript-make-it-better-revealing.html ครั้งนี้ผมจะมาเขียนแนะนำเกี่ยวกับการ Extend Module สำหรับในกรณีที่เราต้องการเพิ่มความสามารถของ Module ของเราในภายหลัง เราจะเริ่มจากการสร้าง Module พื้นฐานขึ้นมาก่อน ดังนี้

ตอนนี้ Module ของเรา (MyUtils) จะมี method ที่ชื่อว่า sayHello ต่อมาภายหลัง เราต้องการเพิ่มความสามารถของ MyUtils ซึ่งในที่นี้ เราจะทดลองเพิ่ม method ที่ชื่อว่า saySorry เข้าไป เราจะสามารถทำได้ดังนี้ครับ

จากตัวอย่างข้างบน ยังมีจุดด้อยอยู่นิดหน่อย ตรงที่ว่า Script ข้างบนจะต้องรอให้ Script ก่อนหน้า Load เสร็จก่อน ทำให้เราไม่สามารถใช้ความสามารถในการทำ Asynchronous Loading (โดยอาศัย Library อย่างเช่น Require.js, LABjs) ของ JavaScript ได้ ซึ่งเราสามารถปรับปรุงให้ Script ดังกล่าวไม่จำเป็นต้อง Depend ซึ่งกันและกัน ได้ดังนี้

จากตัวอย่างข้างบน เรามีการปรับปรุงให้สร้าง MyUtils ขึ้นมาอัตโนมัติในกรณีที่ยังไม่ได้ถูกสร้าง โดยใช้คำสั่ง MyUtils || {} เพียงเท่านี้ MyUtils ก็จะสามารถเรียกใช้งาน saySorry ได้แล้ว และยังสามารถรองรับความสามารถในการทำ Asynchronous Loading ได้ด้วย สำหรับตัวอย่างต่อไป เราจะลองเพิ่ม Sub Module เข้าไปใน Module ของเรา ในที่นี้จะลองเพิ่ม Sub Module ชื่อว่า Authen เข้าไป โดยใน Sub Module ดังกล่าวจะมี method ชื่อว่า login อยู่ข้างใน ลองดูตามตัวอย่างข้างล่างครับ

จากเทคนิคในบทความนี้ สามารถนำไปใช้ในการพัฒนา Module โดยแบ่ง เพื่อแบ่งกลุ่มของ Module ตาม Function การใช้งาน โดยสามารถเลือก Load Module ตามการใช้งานได้ นอกจากนั้นยังรองรับความสามารถเพิ่มเติมในอนาคตได้อีกด้วยครับ

แหล่งที่มา: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth