สวัสดี คน รักบิต ที่ชื่นชอบ

บทความนี้เป็นส่วนหนึ่งของPattern Sagaที่ฉันสร้างขึ้น หากคุณไม่ได้อ่านบทความอื่นๆ คุณสามารถนำทางผ่านลิงก์:

• รูปแบบซิงเกิล

สำหรับคุณที่ทราบอยู่แล้วว่าFactory Pattern คืออะไร เลื่อนไปเรื่อยๆ ฉันแน่ใจว่าบทความนี้จะทำให้คุณประหลาดใจ

สำหรับคนอื่นๆ…

รูปแบบโรงงาน —รูปแบบการสร้างประเภทหนึ่งที่มักจะอธิบายลักษณะทั่วไปของเอนทิตีโดยการสร้างคลาสพื้นฐาน และอนุญาตให้คลาสย่อยสืบทอดพฤติกรรมและเปลี่ยนแปลงได้

เราใช้เมื่อไหร่?

เรามักจะใช้วิธีนี้เมื่อเอนทิตีของเรามีสิ่งที่เหมือนกันหลายอย่าง และเราต้องการสร้างคลาสพื้นฐานที่เราจะเก็บทุกอย่างที่เหมือนกัน

สิ่งนี้มีประโยชน์มากในการสร้าง ฐานรหัส แบบแห้งและชัดเจน

บทความนี้จะมีทั้งตัวอย่างJavascriptและTypescript

โรงงานคลาสสิก

โรงงานที่โดดเด่นที่สุด อธิบายไว้ในหนังสือทุกเล่ม

มีเทคนิคทั่วไปบางประการที่เราสามารถนำFactory Pattern ไปใช้ได้ :

1. เราสร้างเมธอดในคลาสพื้นฐานของเรา และคาดว่าเมธอดนี้จะไม่ใช้สิ่งที่เด็กๆ จะเปลี่ยนแปลง เช่นเดียวกับเมธอดเองก็จะไม่เปลี่ยนแปลงเช่นกัน
2. เราสร้างพร็อพเพอร์ตี้ในคลาสพื้นฐานของเรา และคาดว่าคลาสย่อยที่เรากำหนดคุณสมบัตินี้ใหม่ คุณสมบัตินี้อาจถูกใช้อย่างเท่าเทียมกันในคลาสพื้นฐานและคลาสย่อย
3. เราสร้างวิธีการที่เราคาดว่าจะนำไปใช้หรือทำให้เสร็จในพี่น้อง ตัวอย่างเช่น หากเราต้องการให้นักพัฒนานำไปปฏิบัติ — เรากำหนดวิธีการและทำให้เกิดข้อผิดพลาด นี่คือวิธีที่นักพัฒนาจะถูกบังคับให้นำไปใช้

ดังนั้น เราต้องมีความสามารถในการดูยอดคงเหลือ ส่งและรับเงิน และแจ้ง API ของเราอย่างชัดเจนเกี่ยวกับการเปลี่ยนแปลงของเรา เมื่อพิจารณาจากสิ่งนี้ สิ่งเหล่านั้นมีเหมือนกัน ความแตกต่างเพียงอย่างเดียวคือชื่อสกุลเงินและเกตเวย์การชำระเงิน

ไปที่รหัสกันเถอะ

ตัวอย่างจาวาสคริปต์

ก่อน อื่นเราจะใช้คลาสพื้นฐาน ของเรา

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

• บรรทัดที่ 4และบรรทัดที่ 6 — จะถูกใช้ในคลาสย่อยของเรา เราต้องการค่าเหล่านี้เพื่อจัดการ URL ของเราในบรรทัดที่ 42ใน_updateAPIเมธอด
• บรรทัดที่ 32 — วิธีการ_authenticateถูกสร้างขึ้นเพื่อแสดงให้นักพัฒนาเห็นว่าเราคาดว่าวิธีนี้จะถูกนำไปใช้ในคลาสย่อยของเรา ดังนั้นบรรทัดที่ 41จะเกิดImplement meข้อผิดพลาด ขึ้นเสมอ
• บรรทัดที่ 36 — ใน_updateAPIขั้นแรก เราจะตรวจสอบว่ามีการตั้งค่าตัวแปรที่ต้องกำหนดในลูกของเราหรือไม่ หากไม่ได้กำหนด — เราจะส่งข้อผิดพลาดเพื่อเน้นให้ผู้พัฒนาเห็นว่าคุณสมบัติเหล่านั้นจำเป็น จากนั้นเราจะใช้_authenticateค่าที่จำเป็นต้องกำหนดไว้ในพี่น้องและใช้ตัวแปรที่เราคาดว่าจะกำหนดไว้ในคลาสย่อยของเรา

แล้วกระเป๋าเงินดอลลาร์ ของเรา:

จากทั้งสองตัวอย่างข้างต้น คุณจะเห็นว่าเรากำลังกำหนดคุณสมบัติใหม่_currencyรวม_gatewayถึงกำหนด_authenticateเมธอด ด้วย

และตอนนี้เราสามารถใช้ในแอปพลิเคชันของเรา:

const usdWallet = new USDWallet();

usdWallet.sendMoney(100);
usdWallet.receiveMoney(10);

การใช้ งานtypescript นั้นใกล้เคียงกับสิ่งที่คุณเห็นในJavascript เริ่มต้นด้วยการสร้างประเภท ของเรา :

ตอนนี้ใช้คลาสพื้นฐาน :

สิ่งที่เราสนใจในที่นี้คือวิธีที่เราแสดงให้นักพัฒนาเห็นสิ่งที่เราคาดหวังที่จะทำด้วยวิธีการต่างๆ ตัวอย่างเช่น:

• publicและprotectedวิธีการอาจถูกกำหนดใหม่ในพี่น้อง
• privateไม่สามารถกำหนดเมธอดใหม่ในคลาสย่อยได้
• ลองดูวิธีที่เราจัดการกับnevertype ใน typescript authenticateวิธีการของเรา คืนค่า void | neverแต่เราจะแก้ไขสิ่งนี้ในเด็กเพื่อส่งคืนเท่านั้นvoid

และUSDWalletคลาส:

อย่างที่คุณเห็น เรากำหนดคุณสมบัติ เมธอดใหม่ และเรายังสามารถแก้ไขประเภทการส่งคืน ในกรณีนี้authenticateเมธอด return voidonly

ข้อดี

• การดำเนินการที่เป็นสัญลักษณ์
• อ่านได้อย่างเท่าเทียมกันและมีประสิทธิภาพ
• ใช้ได้กับทั้งJavaScriptและTypescript

• ต้องใช้รหัสเพิ่มเติมเพื่อตรวจสอบว่าทุกอย่างถูกต้อง

Typescriptช่วยให้เราใช้วิธีการที่ยอดเยี่ยมกับabstractชั้นเรียน เนื่องจากคุณลักษณะนี้มีเฉพาะในTypescript เท่านั้น คุณจะไม่พบ ตัวอย่าง JavaScriptที่นี่

ดังนั้นabstractคลาสในTypescript คือ อะไร คลาสพิเศษที่สามารถใช้สำหรับการสืบทอดเท่านั้น และไม่สามารถใช้เพื่อสร้างอินสแตนซ์ใหม่ได้ อนุญาตให้ใช้เมธอดและคุณสมบัติ แต่ยังอนุญาตให้สร้างเมธอดหรือโครงคุณสมบัติด้วยabstractคีย์เวิร์ดภายในคลาส

เนื่องจากสิ่งนี้ได้รับการตัดสินแล้ว เรามาดำเนินการกันต่อ:

เช่นเคย เรามาอธิบายโค้ดกัน:

• สิ่งแรกที่คุณจะสังเกตเห็นคือบรรทัดที่ 3ตัวอย่างabstractการใช้งานคลาส
• ถัดไปในบรรทัดที่ 4, 6และ8คุณจะเห็นว่าเรากำหนดโครงกระดูกของพี่น้องอย่างไร โดยพื้นฐานแล้ว เราจะบอกTypescriptว่าเราคาดหวังให้คุณสมบัติเหล่านั้นมีลักษณะอย่างไร และTypescriptจะบังคับให้นักพัฒนาใช้งานหรือกำหนดคุณสมบัติเหล่านั้นในพี่น้องกัน

ข้อดี

• ได้รับประโยชน์ทั้งหมดของClassic Factory
• ต้องใช้รหัสน้อยลงในการดำเนินการ

• ต้องการความรู้เพิ่มเติมเกี่ยวกับtypescript

อีกครั้งที่เราจะใช้คุณสมบัติที่มีอยู่ในtypescript เท่านั้น เรียกว่าimplements.

แล้วคืออะไรimplements?

เป็นเครื่องมือในTypescriptที่ช่วยให้เราตรวจสอบว่าวัตถุนั้นมีโครงสร้างเหมือนกับที่เราอธิบายไว้

ประการแรก เราต้องดำเนินการinterfaceที่จะอธิบายโครงสร้างของคลาสในอนาคตของเรา

เนื่องจากเรากำลังเปลี่ยนวิธีการ เราจึงต้องปรับปรุงตรรกะของเราด้วย

อย่างที่คุณเห็น อินเทอร์เฟซของเราบางกว่าคลาสพื้นฐานของเราก่อนหน้านี้เล็กน้อย เราไม่ต้องการคุณสมบัติบางอย่างที่เราอธิบายไว้ก่อนหน้านี้อีกต่อไป เช่น:

• เราไม่ต้องการcurrencyและgatewayอื่น ๆ เนื่องจากเราจะอธิบายด้วยตนเอง
• เราไม่ต้องการauthenticateฟังก์ชันอีกต่อไปแล้ว เนื่องจากเราจะดำเนินการด้วยตนเองสำหรับแต่ละคลาส

และ กระเป๋าเงิน ยูโร ของเรา :

ตอนนี้ขอสรุปทุกอย่าง

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

ข้อดี

• วิธีการที่ยืดหยุ่น
• มีประโยชน์เมื่อคุณต้องการเก็บอินเทอร์เฟซการเข้าถึงเดียวสำหรับการเรียกใช้เมธอดอินสแตนซ์

• ต้องเขียนโค้ดเพิ่มเติมหรือรวมวิธีการอื่นๆ เพื่อทำให้โค้ดเบสของคุณแห้ง
• คุณไม่สามารถสืบทอดเมธอดสแตติกได้ เนื่องจากinterfaceไม่อนุญาตให้คุณมี

เมื่อถึงจุดหนึ่ง คุณจะถามตัวเองว่าเป็นไปได้ไหมที่จะใช้ แนวทาง OOPและใช้ในการเขียนโปรแกรมเชิงฟังก์ชัน

ดังนั้น สิ่งที่ยอดเยี่ยมเกี่ยวกับ JavaScript คือเป็นภาษาการเขียนโปรแกรมแบบหลายกระบวนทัศน์ และอนุญาตให้ใช้ทั้ง OOP และแนวทางการทำงาน

และมีหลายกรณีที่OOPไม่เหมาะกับสิ่งที่เรากำลังทำอยู่ ดังนั้นคำถามคือ มีวิธีนำFactory Pattern ไปใช้ในการเขียนโปรแกรมเชิงฟังก์ชันหรือไม่?

ใช่มี

ลองทำอีกตัวอย่างหนึ่ง:

เรามีแอปพลิเคชันที่สื่อสารกับ crypto-exchange และเราจำเป็นต้องได้รับการอัปเดตผ่านWebSockets เราจำเป็นต้องสมัครรับข้อมูลจากช่องต่างๆ เช่น ช่องหนึ่งจะเป็นorderbook และช่องที่สอง จะเป็นtickers แต่เราจำเป็นต้องมีอินเทอร์เฟซเดียวกันเพื่อสมัครและยกเลิกการสมัคร

ตัวอย่างจาวาสคริปต์

ดังที่คุณเห็นที่นี่ เราสร้างโรงงานฟังก์ชันที่สร้างสองฟังก์ชันที่เราสามารถใช้ได้ โปรดทราบว่าเราจะส่งคืนtupleในกรณีที่เราต้องการเปลี่ยนชื่อผลลัพธ์

• event— จะเป็นชื่อของ ช่อง WebSocketsในกรณีของเรา อาจเป็นorderbookหรือticker
• onEvent— จะเป็นตัวจัดการเมื่อเราได้รับการอัพเดตซ็อกเก็ต

และนี่คือวิธีใช้:

const [orderbookSubscribe, orderbookUnsubscribe] = wsCommunicationFactory(
    'orderbook',
    (payload: object) => updateOrderbookUI(payload),
);

const [tickerSubscribe, tickerUnsubscribe] = wsCommunicationFactory(
    'ticker',
    (payload: object) => updateTickerUI(payload),
);

ข้อดี

• วิธีเดียวที่จะใช้ รูปแบบ โรงงานในการเขียนโปรแกรมการทำงาน
• มีประโยชน์เมื่อโครงการของคุณได้รับมาตรฐานอย่างสมบูรณ์และมีโครงสร้างเดียว

• ต้องการประสบการณ์เล็กน้อยจากนักพัฒนา
• อาร์กิวเมนต์และการกำหนดค่าหลายรายการจะทำให้แนวทางนี้ไม่สนับสนุน
• ฟังก์ชันภายในที่ซับซ้อนจะทำให้ยากต่อการอ่านและการสนับสนุน

• เชื่อมโยงไปยังที่เก็บ

อย่าลืมติดตามฉันสำหรับสิ่งเพิ่มเติม!

บิตของคุณ จุ๊บ ๆ