วิธีการใช้ CommonJS ใน Titanium Studio

หลังจากที่เราได้รู้จักกับ CommonJS ไปแล้วในบทความ รู้จักกับ Common JS นั้นในบทความนี้จะกล่าวถึงวิธีการเขียน Module ให้อยู่ใน รูปแบบ ของ Common JS เพื่อที่จะนำมาใช้ ใน Titanium Studio นี้ครับ


เรามาเริ่มกันเลยดีกว่าครับ จากบทความ รู้จักกับ Common JS นั้นผมได้กล่าวถึง คำจำกัดความของ Common JS เอาไว้นั่นก็คือ exports และ module.exports ซึ่งการที่เราจะใช้ตัวใดในการทำงานนั้นไปดูตัวอย่างกันครับ 

เช่นเดิมครับสร้าง Project ใหม่ครับ จากนั้นเลือก Template เป็น Single Window Applicatoin (หรือจะแบบอื่น ๆ ก็ได้ครับ) จากนั้นทำการสร้างไฟล์ขึ้นมา 1 ไฟล์ครับ ชื่อว่า window.js โดย File นี้จะเป็นการสร้าง Window ให้กับ Application นี้ จากนั้นเราก็เปิดไฟล์ขึ้นมาครับ (สร้างใน Folder Resource นะครับ หาอยู่นอก Resource แล้วจะไม่สามารถเรียกใช้งานได้ครับ) 

สร้าง Window ที่ไฟล์นี้ครับ โดยใช้คำสั่ง
exports.load = function(){
var win = Ti.UI.createWindow({
width : Ti.Platform.displayCaps.platformWidth,
backgroundColor : '#fff'
});
win.open();
};

จากนั้นกลับไปยังไฟล์  app.js ครับ แล้วก็ เหมือนเดิมครับ "ลบ" ทั้งหมดออก จากนั้นทำการเรียกใช้ module window ที่เราสร้างขึ้นมาครับ ด้วยคำสั่ง
var win = require('window');
โดยคำสั่งนี้จะมีผลทำให้ไฟล์ window.js นั้นถูก โหลดขึ้นมา ครับ จากนั้นเราก็ทำการสร้าง Window จาก Module window ครับ โดยใช้คำสั่ง
win.load();
ทดลองรันดูครับจะเห็นว่าเมื่อ Application ทำงานนั้น Module ก็จะสร้าง window ให้เรา แบบนี้ครับ


โดยที่ ในไฟล์ app.js นั้นทำหน้าที่เพียงเรียกใช้ Function ที่อยู่ใน module window นั่นเองครับ ซึ่งนั่นหมายความว่าหากเราต้องการเพิ่มหรือเปลี่ยนแปลง Object ลงไปใน window เราก็จะทำการแก้ไขเพียงแค่ ไฟล์ window.js โดยที่ไม่ต้องไปยุ่งกับ app.js เลย ยกตัวอย่างเช่น หาผมต้องการเพิ่ม label ลงไปใน window ผมก็ไปทำการเพิ่ม lable ใน windows.js แบบนี้
exports.load = function(){
var win = Ti.UI.createWindow({
width : Ti.Platform.displayCaps.platformWidth,
backgroundColor : '#fff'
});
var label = Ti.UI.createLabel({
text : 'Hello Titanium',
color : ' #f00'
});
win.add(label);
win.open();
};

ทดลองรันดูครับ จะเห็นมี Label แสดงขึ้นมาบนหน้าจอของโปรแกรม โดยที่เราไม่ต้องทำการแก้ไขไฟล์ app.js แต่อย่างใด


โดยการ exports นั้นนอกจากที่จะเอาไว้ใช้เรียก Function แล้วยังสามารถนำไปใช้เพื่อ exports ตัวแปรต่าง ๆ ที่ต้องการได้อีกด้วย เช่น หากต้องการที่จะ exports ค่าความกว้างของหน้าจอจาก ไฟล์ window.js นั้นก็สามารถทำจะทำได้แบบนี้ ครับ
exports.windowwidth = Ti.Platform.displayCaps.platformWidth;
ส่วนการเรียกใช้นั้นเหมือนเดิมครับ 
var width = window.windowwidth;
แล้ว module.export หล่ะครับใช้งานอย่างไร ในกรณีของ module.export นั้นส่วนมากที่ใช้จะถูกใช้ในลักษณะของ Class ต่าง ๆ ยกตัวอย่างเช่น ต้องการสร้าง Class ที่เอาไว้เก็บข้อมูลของบุคคล โดยที่สามารถเรียกใช้เพื่อแสดงชื่อและนามสกุลพร้อม ๆ กันก็จะสามารถทำได้ดังนี้ครับ
function Person(firstName,lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
Person.prototype.fullName = function() {
return this.firstName+' '+this.lastName;
};
module.exports = Person;

โดยสร้างเอาไว้เป็นไฟล์ชื่อ Person.js ส่วนวิธีการเรียกใช้นั้นก็จะเหมือนกับ การที่เราเรียกใช้ Window ครับนั่้นก็คือ 
var Person = require('Person');
var people = new Person('Johnny','Deep');
var jonnnydep = people.fullName();
// ตรงนี้จะได้ค่ากลับมาเป็น 'Johny Deep'

จากตัวอย่างที่ได้ให้ไว้จะแสดงให้เห็นถึงวิธีการใช้งาน CommonJS กับ Titanium Mobile ส่วนวิธีการที่จะนำไปประยุกษ์ หรือ นำไปปรับใช้เพื่อให้การพัฒนาโปรแกรม บน Mobile ให้ได้มีประสิทธิภาพมากยิ่งขึ้น 
ส่วนในบทความหน้านั้น จะเป็นเรื่องอะไรนั้นติดตามอ่านกันต่อไปได้เลยนะครับ หากมีคำถามหรือข้อสงสัยก็ถามกันมาได้นะครับ แล้วก็อย่าลืมกด Like Fanpage ของ Mobidevthai ด้วยนะครับ 

0 ความคิดเห็น:

โพสต์ความคิดเห็น