JavaScript Design Pattern ที่คุณต้องไว้ทำงาน

ช่วงนี้ JavaScript กำลังมาแรงจริงๆ ผมเลยต้องขยันเขียนเกี่ยวกับการเขียนเว็บที่ผมมีมาสอนกันให้ทันตามเทรนของ JavaScript เลย แน่นอนว่าต้องมี Full Stack Developer ที่มือใหม่ยังไม่เข้าใจถึงหลักการเขียน JavaScript แน่นอน เพราะว่ามันก็ไม่ใช้ภาษาอะไรจะง่ายแบบที่ทุกคนพูดกัน ถ้าจะเขียนให้ดีเพราะความเป็นภาษาแบบ Script ทำให้มันเขียนได้หลายรูปแบบและไม่ค่อยจะมีหลักการ โค้ดบางอย่างไม่คิดว่าจะทำงานได้ก็กับทำงานได้สะงั่น เอาละเรามาดูวิธีการเขียน Design Pattern ที่จำเป็นต่อการทำงานจริงๆ กันเลยครับ

ในบทความนี้จะมาอธิบาย Design Pattern ต่อไปนี้

  • Module
  • Prototype
  • Observer
  • Singleton

Module Design Pattern

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

ก่อนจะไปต่อผมอยากจะยกตัวอย่างภาษาอื่นอย่าง Java เราซึ่งใน  Java เรามีกระบวนการที่เรียกว่า encapsulation คือห่อหุ่มตัว Properties ไว้ใน class เพื่อไม่ให้ส่วนอื่นๆ เข้ามาเรียกใช้งานได้ คราวๆ ก็ประมาณนี้ ซึ่งตัว  Module Pattern เรามันก็จะมีกระบวนการทำ private, public ซึ่งเลียนแบบมาจากพวกภาษา OOP

ในการเขียน Module Pattern เราจะมีการใช้เทคนิคที่ชื่อว่า Immediately-Invoked-Function-Expressions (IIFE) ก่อนจะไปต่อมาทำความเข้าใจ IIFE กันก่อน

James Padolsey บอกเอาไว้ว่า

An IIFE protects a module’s scope from the environment in which it is placed.

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

ในโค้ดประกอบด้วยสองส่วนคือ

Anonymous Function คือการตั่งฟังก์ชันไม่มีชื่อ และมีวงเล็บต่อท้ายเพื่อทำฟังก์ชันทำงานทันที่ระบบเราทำงานมาถึงบรรทัดนี้

และ Syntax Parser  คือเอาวงเล็บมาครอบจะทำให้ Syntax ไม่ Error เขาเรียก Syntax Parser

ขอจบเรื่อง IIEF ไว้ก่อนไว้ครั่งหน้าผมจะมาเจาะลึกให้ครับ เรามาดูวิธีการเขียน Module Pattern เลยครับ Syntax จะเป็นแบบนี้

อธิบายโค้ด ตัวส่วนที่ผมคอมเม้นว่า private variables or functions อะไรที่เราก็ตามตั่งขึ้นมามันจะเป็น private ไปโดยปริยายครับ และจะถูกเรียกใช้ได้ในเฉพาะส่วนของ IIEF เท่านั่น และส่วนที่เขียนว่า public variables or functions คือส่วนที่เราต้องการจะให้โค้ดเราเป็น public คือให้เรียกมาจากข้างนอกได้นั่นเองครับ เราก็แค่จะ return มันออกมาเท่านั่นเองครับ นี่แหละหลักการของ Design Pattern ตัวนี้ครับ เดียวลองมาดตัวอย่างโปรแกรมข้างล่าง

วิธีการเขียนก็ง่ายๆ แบบที่เห็น ผมคงไม่อธิบายอะไรเพิ่มเติม แต่ลองดูตรงสองบรรทัดสุดท้ายผมเรียก callFn() ตรงนี้ทำงานได้ปกติเพราะเรา return ค่าออกมาทำให้ฟังก์ชันเราเป็น public และอีกบรรทัดผมลองเรียก msg ซึ่งแน่นอนว่ามันบอกว่า undefined เพราะว่ามันหา msg ไม่เจอเพราะไม่อยู่ใน scope หากใครยังไม่รู้เรื่อง scope ผมมีอธิบายไว้ครับไปอ่านได้

สำหรับกระบวนการที่เอา private properties ออกมาให้เรียกใช้ได้นั้นเขาเรียกว่า Revealing Module Pattern ซึ่งเราจะเห็นจากโค้ดด้านบนตรงส่วนของ return { } เดียวเอาลองมาดูอีกสักตัวอย่าง

 

Prototype Design Pattern

เป็นอีก Best Practice นึงที่ชาว Java Script ต้องใช้นะครับ ผมแนะนำว่าคุณควรจะต้องอ่านและควรนำไปใช้ เพราะ Design Pattern  ตัวจะช่วยปัญหาของโค้ดที่เรียกว่า function spaghetti code โดยสรุปคราวๆ คือการที่เราเขียนฟังชันก์ขึ้นมาทุกๆ การทำงานที่เรานั่นต้องการประมวลผลครับ เช่น เราก็จะเขียนฟังก์ชัน A(),B(), C() ซึ่งทั่งสามฟังก์ชันอาจจะทำงานคล้ายๆ กัน แต่ประมวลผลคนละแบบแต่จำเป็นต้องใช้สามตัวเพื่อให้ได้ผลลัพธ์ของระบบ พอนึกภาพออกไหมครับ ลองมาดูตัวอย่างกันก่อน

จากโค้ดข้างบนผมเชื่อว่าทุกคนคงเขียนแบบนี้ ถ้าลูกค้าบอกว่าอยากได้ระบบสตาร์รถ และดับเครื่องรถ ผมเองก็คงทำแบบนี้ นอนว่า JavaScript มันไม่มี Class (แต่มาใน ES6 แล้ว) ที่ทำให้โค้ดของเราอยู่เป็นระบบหรือมองในมุมของ OOP แบบ Java, C#, PHP หรืออื่นๆ พอเราเขียนแบบนี้เยอะ มันทำให้ประสิทธิภาพการทำงานดรอปลงไปด้วยนะครับ เผื่อใครยังไม่รู้มันเกี่ยว Performance ของระบบเลย เพราะเปลื่อง memory มากๆ แถมยังถ้าไล่โค้ดต่อคนอื่น หรือคนอื่นต่อจากเรานี่นรกเลยนะครับ ถ้าหลายๆ บรรทัดเข้า และอีกปัญหาผมเชื่อว่าทุกคนคงเคยเจอคือ scope มันตีกัน ดังนั่นผมเสนอให้ทำ Prototype Pattern ครับ ผมจะลองเปลี่ยนโค้ดข้างบนให้เป็น Prototype ให้ดูนะครับ

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

ดูดีขึ้นมาทันตาเห็นเลยครับ จัดกรุ๊ปให้มัน ถ้าระบบเรามีหลายๆ การทำงานเราก็สามารถมองเป็นแบบ OOP ได้นะครับ เพราะผมจะบอกว่าการทำ prototype มันก็คือการทำ Inheritance นั่นเอง แต่เรามองว่า function คือ class ครับ เวลาเรียกใช้งานเราก็ทำ New Binding  เพื่อให้ตรงไปตามหลักการของ OOP เรายังขาดเรื่องการทำ public/private ไปดังนั่นผมขอเสนอคำว่า Revealing Prototype Pattern ลองดูตัวอย่างครับ

ที่นี่เราก็สามารถทำ encapsulation ได้แล้วพอเราเรียกฟังก์ชัน stopCar โปรแกรมเราก็จะ error ทันทีแบบที่เห็น ดังนั่นผมแนะนำให้เขียนแบบนี้นะครับ แนะนำว่าควรเอาไปใช้ที่ทำงานะครับ เพื่อให้ดูเป็นตัวอย่างอีกสักอันถ้าเกิดเราอยากจะเอาไปทำงานกับ HTML ละ ทำยังไง ลองดูบล๊อกนี้เขาเขียนไว้ครับโปรแกรมเครื่องคิดเลขทำด้วย Prototype Pattern ที่นี่

 

Observer Design Pattern

Design pattern ตัวนี้จะเป็นลักษณะของการทำงานแบบที่นึงเปลี่ยนแปลง หรือส่งค่า ปลายทางรับค่าหรือแสดงผล ยกตัวอย่าง ถ้าเกิดผมมี a.js และ b.js ผมอยากจะส่งค่าจาก a.js ไป b.js แล้วแสดงผล หรือถ้าผมมี  A Controller และ B Controller  ผมอยากให้ส่งจาก A ไปอัพเดทค่าที่ B แบบนี้เป็นต้น โดยปกติเราจะรู้จัก Pattern ตัวนี้กันอยู่แล้วก็คือ MVC (ผมเขียนอธิบายไว้ตรงนี้)  ปกติผมเขียน AngularJs ผมมักจะใช้บ่อยๆ คือการยิง event ข้าม Controller เพื่อส่งค่าหรือสั่งให้ฟังก์ชันทำงานแบบนี้

นี่เป็นตัวอย่างของการใช้คำสั่งทำ Observer เพื่อยิงค่าจากที่หนึงไปอีกที่นึง เราจะลองมาเขียนโปรแกรมยอดฮิตของการสอน Observer ก็คือการทำ subscribe list นั่นเอง ตามนี้ครับ

จะเห็นได้จากตัวอย่างเป็นโค้ดง่ายๆ ของการทำระบบ register ผู้ใช้งานในระบบ และทำการส่ง push notification ให้แต่ละครับ เราสามารถเอานำไปปรับใช้ได้หลายแบบมากครับ ลองมาดูอีกสักตัวอย่างจากของฝรั่งกันบ้าง ที่นี่

 

Singleton Design Pattern

ตัวนี้มีไว้สำหรับจำกัดการสร้าง Object หลายๆ ครั่ง เพื่อไม่ให้ระบบของกิน memory เพิ่มขึ้นโดยไม่จำเป็น เพราะเราจะเช็คว่าถ้าระบบสร้าง Object นี้แล้ว ก็ให้ส่งค่าไปเลยไม่ต้องสร้างใหม่ครับ ลองมาดูตัวอย่างกัน

จากโค้ดด้านบนผมก็แค่เช็คว่า instance ว่ามีค่าอยู่หรือยัง ถ้ายังก็ให้ใส่ค่าลงไปแล้วก็ return กลับออกมา

 

จริงๆ แล้ว Design pattern ถูกใช้ใน Lib หรือโปรแกรมต่างๆ มากมายครับ เวลาจะใช้ให้คิดดีๆ ก่อนนะครับว่าจะเอามาแก้ปัญหาเรื่องอะไรของระบบ เพราะ Pattern ที่ถูกคิดมาเขาจะเอานำมาแก้ไขปัญหาการเขียนโปรแกรมแบบต่างๆ ครับ ยิ่งถ้าโปรแกรมที่มีขนาดใหญ่ระดับ Enterprise แล้วจะต้องใช้พวกนี้เข้ามาแก้ปัญหาครับ เพราะมันง่ายต่อการไล่โค้ดและคนอื่นทำงานต่อ ซึ่งในบทความนี้ผมก็แนะนำคราวๆ ที่ควรนำไปใช้มำงานกับทีมซึ่งเป็นประโยชน์มากจริงๆ แต่ยังไงก็อย่าลืมวิเคราะห์ก่อนเสมอว่าโครงสร้างระบบของเราเหมาะที่จะใช้ Design pattern  หรือไม่ และแก้ปัญหาเรื่องอะไร

Facebook Comments