จะจัดโครงการเชิงมุมได้อย่างไร? บทความต่อไปนี้รวบรวมและแบ่งปันเคล็ดลับเชิงปฏิบัติ 5 ข้อในการจัดการโครงการ Angular ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน! 
การเข้าสู่ Front-end (vue) สู่หลักสูตรการเรียนรู้: เข้าสู่การเรียนรู้
เมื่อมีการเปิดตัวฟีเจอร์ใหม่ Web apps ก็จะใหญ่ขึ้นเรื่อยๆ ในการเดินทาง DevOps ของบริษัท การเปลี่ยนแปลงการเปิดตัวประเภทนี้เกิดขึ้นทุกวัน [บทช่วยสอนที่เกี่ยวข้องที่แนะนำ: "บทช่วยสอนเชิงมุม"]
ในวงจรการเผยแพร่ที่รวดเร็วเช่นนี้ โค้ดจะกลายเป็นเรื่องยุ่งยากอย่างรวดเร็ว โดยเฉพาะโครงการที่พัฒนาโดยใช้ JavaScript เช่น NextJS หรือ Angular
ต่อไปนี้เป็นแนวทางปฏิบัติที่ดีที่สุด 5 ข้อในการจัดการโปรเจ็กต์ Angular เพื่อให้สามารถอ่าน บำรุงรักษา และปรับขนาดได้สูงสุด
แกนแอปพลิเคชันเดี่ยวจำนวนมากเป็นฐานโค้ดที่มีคลาสป่อง โดยธรรมชาติแล้วโปรแกรมที่ป่องเหล่านี้ดูแลรักษาได้ยาก พวกมันเปราะบางในแง่ที่ว่าการเปลี่ยนโค้ดหนึ่งบรรทัดอาจส่งผลร้ายแรงต่อทั้งโปรแกรม หลักการความรับผิดชอบเดียวสามารถป้องกันปัญหาเหล่านี้ได้
หลักการความรับผิดชอบเดียวหมายความว่าส่วนประกอบมีฟังก์ชันเดียวเท่านั้น
การสร้างแอปพลิเคชันโดยใช้แนวทางนี้ส่งผลให้เกิดกรอบงานแบบโมดูลาร์ซึ่งแอปพลิเคชันจะรวมเข้าด้วยกันผ่านบล็อกโค้ดเหล่านี้
การใช้แนวทางนี้จะทำให้โปรแกรมสามารถอ่านและบำรุงรักษาได้มากขึ้น นอกจากนี้ยังสามารถค้นหาฟังก์ชันที่ระบุในแอปพลิเคชันได้อย่างง่ายดาย
เพื่อให้แน่ใจว่าโค้ดของคุณตรงตามข้อกำหนดนี้ ให้ถามตัวเองด้วยคำถามนี้:这代码是干什么的？ หากคำตอบของคุณมีคีย์เวิร์ด and คุณจะต้องปรับโครงสร้างโค้ดของคุณใหม่ให้เป็นโค้ดแบบรับผิดชอบเดี่ยว
การสร้างและขยายแอปพลิเคชัน Angular ถือเป็นแบบฝึกหัดต่อเนื่อง เมื่อเวลาผ่านไป การจัดระเบียบโครงการของคุณโดยใช้หลักการความรับผิดชอบเดียวจะทำให้แอปพลิเคชันของคุณสะอาด อ่านได้ และบำรุงรักษาได้
โมดูลใน Angular เป็นการนำหลักการเดียวไปใช้ ใน Angular แต่ละโมดูลแสดงถึงฟังก์ชันการทำงานที่แยกจากกันและเป็นอิสระ
Angular มีโมดูลหลายประเภทเพื่อระบุวิธีการจัดกลุ่มหรือจัดระเบียบอย่างมีตรรกะ
แกนกลาง
โมดูล Core คือ NgModule ที่ใช้เพื่อสร้างอินสแตนซ์ของแอปพลิเคชันและโหลดฟังก์ชันหลักสำหรับการใช้งานทั่วโลก
ดังนั้นควรใช้บริการซิงเกิลตันในโมดูลหลัก ส่วนหัว ส่วนท้าย หรือแถบนำทางเป็นโมดูลประเภทนี้
บริการทั้งหมด (บริการแบบซิงเกิลตัน) ที่มีหนึ่งอินสแตนซ์ต่อแอปพลิเคชันควรได้รับการปรับใช้ในโมดูลหลัก ตัวอย่างเช่น บริการตรวจสอบสิทธิ์หรือบริการผู้ใช้
คุณสมบัติ
โมดูลฟังก์ชันแสดงถึงโค้ดที่สร้างฟังก์ชันการทำงานของแอปพลิเคชัน ตัวอย่างเช่น ในแอปพลิเคชันช้อปปิ้งออนไลน์ เราจะมีฟังก์ชันในการเพิ่มสินค้าลงในตะกร้าสินค้าและมีโมดูลแยกต่างหากสำหรับการชำระเงิน
แบ่งปันแล้ว
โมดูลที่ใช้ร่วมกันประกอบด้วยโมดูลที่สามารถรวมกันเพื่อสร้างฟังก์ชันการทำงานใหม่ ตัวอย่างเช่น ฟังก์ชั่นการค้นหาสามารถใช้กับหลายฟังก์ชั่นในแพลตฟอร์มได้
การจัดโครงสร้างโค้ดของคุณด้วยวิธีนี้ช่วยให้ค้นหาสิ่งต่างๆ ได้ง่ายขึ้น และเพิ่มโอกาสที่โค้ดจะนำกลับมาใช้ใหม่ได้
ไฟล์สไตล์อาจไม่เป็นระเบียบได้อย่างรวดเร็วหากไม่เป็นไปตามโครงสร้างทั่วไป รูปแบบแนวทางปฏิบัติที่ดีที่สุดทั่วไป รูปแบบ 7-1 ซึ่งใช้ 7 โฟลเดอร์และ 1 ไฟล์ ดังแสดงด้านล่าง:
แอพ - โฟลเดอร์หลักของโปรเจ็กต์
บทคัดย่อ - ส่วนนามธรรมที่มีตัวแปร มิกซ์อิน และส่วนประกอบที่คล้ายกันทั้งหมด
แกนหลัก - ประกอบด้วยโครงร่าง การรีเซ็ต และโค้ดสำเร็จรูปสำหรับทั้งไซต์
ส่วนประกอบ - มีสไตล์สำหรับส่วนประกอบทั้งหมดที่จะสร้างสำหรับเว็บไซต์ เช่น ปุ่ม แท็บ และโมดอล
เค้าโครง - ประกอบด้วยไฟล์ที่จำเป็นในการกำหนดเค้าโครงของไซต์ เช่น ส่วนหัวและส่วนท้าย
หน้า - มีสไตล์สำหรับแต่ละหน้าเฉพาะ
ผู้จำหน่าย - โฟลเดอร์ทางเลือกนี้เหมาะสำหรับเฟรมเวิร์กบูตสแตรปที่ใช้โดยโปรเจ็กต์ เช่น bootstrap
สร้างไฟล์ all.scss ใหม่ในแต่ละโฟลเดอร์ที่มีการกำหนดทั้งหมดสำหรับโฟลเดอร์นั้น ๆ
บริการหลายอย่างได้รับการออกแบบให้ทำงานทั่วโลก จากนั้น ในบางกรณี ส่วนประกอบจำเป็นต้องได้รับบริการ แนวทางปฏิบัติเกี่ยวกับองค์ประกอบการเขียนโค้ดแบบดั้งเดิมแนะนำหลักการความรับผิดชอบเดียว
ภายใต้แนวทางนี้ บริการและส่วนประกอบจะถูกเขียนเป็นโครงการที่แยกจากกัน
แต่จะเกิดอะไรขึ้นเมื่อคุณพิจารณาลบส่วนประกอบของบริการเหล่านี้ สิ่งที่คุณพบคือโค้ดที่ไม่ทำงาน ซึ่งทำให้คลังสินค้าเกะกะมากขึ้นเท่านั้น ในกรณีนี้ แนวปฏิบัติที่ดีที่สุดคือการวางบริการไว้ภายในส่วนประกอบ
ด้วยวิธีนี้ การบำรุงรักษาส่วนประกอบและบริการจึงง่ายขึ้น
โครงสร้างไฟล์ที่ซ้อนกันนั้นง่ายต่อการนำทางมากกว่าระบบไฟล์แบบแฟลตที่รวมไฟล์โค้ดทั้งหมดไว้ในไดเร็กทอรีเดียว
อย่างไรก็ตาม เมื่อใกล้ถึงโครงการ โครงสร้างไฟล์ของโครงการอาจค่อนข้างซับซ้อน แม้ว่าสิ่งนี้จะทำให้การค้นหาโค้ดง่ายขึ้น แต่ก็มีความท้าทายเมื่อเขียนคำสั่งนำเข้า
เมื่อโครงสร้างไดเร็กทอรีเริ่มขยายเกินสามหรือสี่ระดับ คำสั่ง import อาจยาวมากและอ่านยาก
เพื่อแก้ไขปัญหานี้ เราสามารถกำหนดค่านามแฝงของเส้นทางในไฟล์ tsconfig.json ได้ ในไฟล์นี้มีอาร์เรย์ชื่อ compilerOptions นี่คือชื่อแทนเส้นทางที่คุณกำหนดค่าในแอปพลิเคชันของคุณ
เมื่อคอมไพล์โค้ด นามแฝงของเส้นทางที่กำหนดในอาร์เรย์นี้จะถูกแทนที่ด้วยเส้นทางจริง ค่าของแต่ละเส้นทางเป็นวัตถุคีย์-ค่าที่มีเส้นทางและนามแฝงจริง
การสร้างและขยายแอปพลิเคชัน Angular ถือเป็นแบบฝึกหัดต่อเนื่อง