แอพพลิเคชั่น JavaScript ขนาดใหญ่ควรมีโครงสร้างอย่างไร?

เมื่อเร็ว ๆ นี้ฉันได้แสดงปลั๊กอิน JavaScript บางรายการที่เขียนขึ้นสำหรับ OBIEE Mobile App Developer รวมถึงห้องสมุดที่กำหนดเองสำหรับโครงการต่างๆ

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

ความยาวของสคริปต์ไม่เพียงส่งผลต่อความสามารถในการอ่านและการบำรุงรักษา แต่ยังรวมถึงความเข้าใจโดยทั่วไปของบุคคลว่าโปรแกรมทำงานอย่างไร

แอปพลิเคชันขนาดใหญ่มีโครงสร้างอย่างไร รูปแบบการออกแบบ OOP ทั่วไปสำหรับสิ่งนี้?

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

รูปแบบโมดูลการเปิดเผยแม้ว่าจะให้วิธีที่ดีในการแบ่งไฟล์ขนาดใหญ่และจัดระเบียบอย่างมีเหตุผล แต่เมื่อคุณกำลังทำงานกับรูปแบบการออกแบบใด ๆ ใน JavaScript ทราบว่านี้จะกลายเป็นความสับสนมาก พยายามที่จะใช้นี้ , ใหม่ , ต้นแบบ , .call()และ.apply()อย่างชาญฉลาด

ในขณะที่ทำงานในโครงการขนาดใหญ่สิ่งเหล่านี้มีประโยชน์เช่นกัน:

• หากเป็นไปได้ให้เปลี่ยนเป็น TypeScript หรือ ES6
• เขียนรหัสModular มีหลายวิธีและไลบรารีของบุคคลที่สาม แต่สิ่งใด ๆ ก็ดีกว่าไม่มีเลย
• ใช้Task Runner / Build Systemเพื่อทำงานอัตโนมัติ
• อ่านข้อมูลเกี่ยวกับรูปแบบการออกแบบ นี่อาจเป็นการเริ่มต้นที่ดี ดังที่ฉันได้กล่าวไปแล้วว่ารูปแบบการเปิดเผยมีประโยชน์มากโดยเฉพาะถ้าคุณคิดว่าคุณต้องใช้เวลาในการฝึกฝนรูปแบบที่นิยมทั้งหมด
• เขียนหน่วยทดสอบ การทำงานกับภาษาแบบไดนามิกอาจมีความท้าทายมากขึ้น การทดสอบส่วนสำคัญของแอปพลิเคชันของคุณสามารถประหยัดเวลาได้มาก
• ใช้IDEหรือText Editorที่สามารถช่วยคุณในการเขียนโค้ดและดักจับข้อบกพร่อง WebStorm เป็นตัวเลือกที่ดี ข้อความประเสริฐเกินไป
• หาก IDE ของคุณไม่มีตัวดีบักให้ลองใช้การดีบักเกอร์ของเว็บเบราว์เซอร์ที่คุณชื่นชอบ
• ใช้ไลบรารี ขึ้นอยู่กับลักษณะของโครงการพยายามใช้รหัสบุคคลที่สามที่ดีที่สุดที่คุณสามารถหาได้ ถ้าคุณเขียนโปรแกรมประยุกต์บนเว็บที่มีลักษณะที่เชิงมุม , ตอบสนองและดีเก่าBackbone.js หากคุณกำลังเขียนแอปพลิเคชัน Node.js ให้ใช้เวลาในการค้นหาในที่เก็บNPM คุณจะประหลาดใจว่ามีหลายแพ็คเก็ตที่ทำสิ่งที่คุณกำลังจะทำอยู่แล้ว
• แม้ว่าคุณจะเป็นคนเดียวที่ทำงานในโครงการยังคงใช้ระบบควบคุมเวอร์ชันเช่นGitและปฏิบัติตามมาตรฐานการเข้ารหัสที่ไม่เข้มงวดเกินไปและให้ความเห็น แต่ยังให้แนวทางที่ดีที่เพื่อนร่วมทีมของคุณจะมีความสุข ปฏิบัติตาม
• แม้ว่าคุณจะเลือกใช้ TypeScript หรือ ES6 แต่ยังคงเข้าใจ OOP ที่ไม่มีคลาสของ JavaScript แต่Prototypal OOPก็มีประโยชน์เป็นพิเศษในขณะที่กำลังดีบัก

ฉันเป็นนักพัฒนา C ++ และได้เริ่มทำการพัฒนาเว็บไซต์เมื่อเร็ว ๆ นี้ ฉันกำลังย้ายแอพเดสก์ท็อปขนาดใหญ่ไปยังเว็บ ฉันจัดโครงสร้างรหัส JavaScript ของฉันเหมือนกับที่ฉันวางโครงสร้างรหัส C ++ โดยใช้รูปแบบเดียวกัน ฉันมีไฟล์ทั้งหมดประมาณ 25-30 ไฟล์ แต่ในที่สุดฉันก็จะลดไฟล์ลงเหลือ 3-5 ไฟล์โดยการบีบอัดให้เหมาะสมและลดขนาดให้เล็กลง

สำหรับฉันมันเป็นเพียงภาษาที่มีการเปลี่ยนแปลงให้ดีขึ้นหรือแย่ลง แต่ไม่ใช่กระบวนทัศน์ จาวาสคริปต์สำหรับความผิดพลาดและความผิดหวังทั้งหมดเป็นการผสมผสานกันอย่างลงตัวระหว่างรูปแบบการใช้งานและ OOP สิ่งที่ทำงานได้ดีจนถึงตอนนี้

สุดท้ายสิ่งหนึ่งที่ฉันรู้ตั้งแต่ต้นคือ JavaScript อนุญาตให้เขียนโค้ดที่กระชับมากกว่า C ++ ดังนั้นบางครั้งการมี LOC จำนวนมากที่มาจากภาษาที่ไม่ใช่ JS อาจเนื่องมาจากการทำสิ่งเก่า ๆ เมื่อสิ่งนี้ได้รับการแก้ไขฉันไม่เห็นสิ่งใดที่ควรจะแตกต่างอย่างแท้จริง การออกแบบและอัลกอริธึมเป็นสิ่งที่ไม่เชื่อเรื่องภาษา

แน่นอนว่ามันแตกต่างกันอย่างมากจากโปรเจ็กต์หนึ่งไปอีกโปรเจ็กต์ แต่วิธีปฏิบัติที่เป็นที่ยอมรับโดยทั่วไปคือสำหรับสิ่งที่ตั้งใจทำหน้าที่เป็นห้องสมุดหรือโมดูลเพื่อให้มันเป็นไฟล์ขนาดใหญ่ไฟล์เดียวและใช้ encapsulation เพื่อป้องกันภายใน อินเตอร์เฟซ) จากการรั่วไหลออกไปด้านนอก นอกจากนี้ยังเป็นประโยชน์สำหรับนักพัฒนาที่ต้องการใช้ไลบรารี่ / โมดูล - ไฟล์เดียวเพื่อเพิ่มไปยังแอปพลิเคชั่นการกำหนดค่าหรือตัวอย่างส่วนหัวแทนที่จะเป็นลำดับชั้นของโฟลเดอร์และไฟล์ทั้งหมดเพื่อคัดลอกและวาง นอกจากนี้ยังสะท้อนให้เห็นถึงความจริงที่ว่าด้วยการย่อขนาดและการรวมในไซต์การผลิตมีแนวโน้มที่ทั้งหมดจะรวมกันเป็นไฟล์เดียวเพื่อลดจำนวนคำขอ HTTP

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

เมื่อทำงานกับรหัสส่วนประกอบที่แตกต่างกันมักจะแบ่งออกเป็นโมดูลแต่ละคนมักจะใช้ชั้นเดียวและแต่ละคนอาศัยอยู่ในไฟล์ที่แยกต่างหาก ในระหว่างการผลิตไฟล์เหล่านี้จะถูกรวมเข้าด้วยกันเป็นไฟล์เดียว (ดังนั้นโค้ดหลายพันบรรทัดที่คุณเห็น) โดยใช้บางอย่างเช่น Browserify ( http://browserify.org/ ) หรือ RequireJS เพื่อลดจำนวนคำขอ HTTP แต่ยังเพื่อให้แน่ใจว่ามีการโหลดการอ้างอิงในลำดับที่ถูกต้อง

เท่าที่มีการใช้งานคลาสสำหรับโมดูลเหล่านี้มันแตกต่างจาก OOP เล็กน้อยในกลไกพื้นฐาน แต่ไม่แตกต่างกันบนพื้นผิว ES6 แนะนำแม้แต่classคำหลักดังนั้นจึงควรดูค่อนข้างคุ้นเคย บทความเกี่ยวกับ MDN นี้มีประโยชน์ในการเริ่มต้น: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

ฉันใช้องค์ประกอบสุทธิและคำอธิบายประกอบ (Petri) เพื่อจัดระเบียบหรือ“ จัดโครงสร้าง” ซอฟต์แวร์สำหรับแอปพลิเคชันรูปแบบ PDF ของฉัน - โปรแกรม JavaScript ที่ใช้ Acrobat / JavaScript API อาจเป็นประโยชน์ในสถานการณ์ของคุณ

ไดอะแกรมใช้เพื่อสร้างความสัมพันธ์อินพุต - เอาท์พุตขององค์ประกอบสุทธิและมุมมองฟอร์มสองแบบของคำอธิบายประกอบ จากแผนภาพและมุมมองฟอร์มคุณสามารถสร้างโปรแกรม JavaScript สำหรับแอปพลิเคชันฟอร์ม PDF ได้อย่างเป็นระบบ ดังนั้น“ การอ่าน” ซอร์สโค้ดจึงลดลงเพื่อตรวจสอบว่าตรงกับข้อกำหนด: ไดอะแกรมและมุมมองฟอร์มสองมุมมอง

การใช้งานซอฟต์แวร์ของฉันใช้ตัวสร้างและต้นแบบ หากประสิทธิภาพกลายเป็นปัญหาแล้วการแทนที่ต้นแบบด้วยสมาชิกอินสแตนซ์อาจช่วยเพิ่มประสิทธิภาพโดยเสียค่าใช้จ่ายในการใช้หน่วยความจำมากขึ้น นอกจากนี้ยังใช้อาร์เรย์ หากประสิทธิภาพกลายเป็นปัญหาจะมีการใช้การอ้างอิงโดยตรง

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

ยังคงเป็นไปได้และแนะนำให้เขียน JavaScript ในแบบ OOP ที่คุณคุ้นเคย นี่คือหนังสือที่ดีที่ผ่านรูปแบบการออกแบบที่สำคัญที่สุดใน JavaScript

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

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