กรอบงานหลักสามประการสำหรับส่วนหน้าของเว็บคืออะไร

เฟรมเวิร์กส่วนหน้าของเว็บหลักสามแบบ: 1. Angular ซึ่งเป็นเฟรมเวิร์กส่วนหน้าที่ใช้ในการสร้างอินเทอร์เฟซแอปพลิเคชันเดียวพร้อมฟังก์ชันโมดูลที่ทรงพลังและคำสั่งที่กำหนดเอง 2. React ซึ่งเป็น JavaScript ที่ใช้ในการสร้างเฟรมเวิร์กการพัฒนาส่วนต่อประสานผู้ใช้ซึ่งส่วนใหญ่ใช้ build UI; 3. vue เป็นเฟรมเวิร์ก JavaScript แบบก้าวหน้าสำหรับการสร้างส่วนต่อประสานผู้ใช้ของ Vue มุ่งเน้นไปที่เลเยอร์มุมมองเท่านั้น และง่ายต่อการเรียนรู้และรวมเข้ากับไลบรารีอื่น ๆ หรือโปรเจ็กต์ที่มีอยู่

สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 7, คอมพิวเตอร์ Dell G3

ในช่วงสิบปีที่ผ่านมา อุตสาหกรรมไอทีมีการพัฒนาอย่างรวดเร็วและมีอาชีพใหม่ๆ เกิดขึ้นมากมาย เช่น นักออกแบบ UI วิศวกรพัฒนา วิศวกรทดสอบซอฟต์แวร์ เป็นต้น ในบรรดาอาชีพใหม่ที่มีชื่อเสียงมากมาย วิศวกรส่วนหน้าของเว็บเป็นหนึ่งในอาชีพใหม่ พวกเขา. แล้วเฟรมเวิร์กหลักสามเฟรมสำหรับส่วนหน้าของเว็บคืออะไร?

เฟรมเวิร์กส่วนหน้าของเว็บหลักสามแบบ ได้แก่ Angular, React และ Vue

1. เชิงมุม

AngularJS ถูกสร้างขึ้นในปี 2009 โดย Misko Hevery และบริษัทอื่นๆ และต่อมาถูกซื้อกิจการโดย Google เป็นเฟรมเวิร์ก JS ส่วนหน้าที่ยอดเยี่ยมที่ใช้ในผลิตภัณฑ์จำนวนมาก มันไม่ได้เป็นเพียงกรอบการพัฒนาส่วนหน้าที่มีแนวคิดขั้นสูงเท่านั้น แต่ยังเป็นโซลูชันแบบครบวงจรอีกด้วย โดยเป็นไปตามรูปแบบ MVC ในการออกแบบสถาปัตยกรรม และสนับสนุนการเชื่อมโยงข้อมูลและส่วนประกอบการประมวลผลเชิงตรรกะอย่างหลวมๆ AngularJS ตระหนักถึงส่วนขยายตามธรรมชาติของ HTML ผ่านเทคโนโลยีการสอน และตระหนักถึงการซิงโครไนซ์แบบจำลองข้อมูลและมุมมองการแสดงผลอัตโนมัติแบบสองทางผ่านเทคโนโลยีการคอมไพล์ ช่วยลดการดำเนินการ DOM ที่ซับซ้อน นอกจากนี้ยังให้การสนับสนุนที่ดีสำหรับเทคโนโลยีการทดสอบอัตโนมัติส่วนหน้าอีกด้วย

Angular เป็นเฟรมเวิร์กส่วนหน้าสำหรับการสร้างอินเทอร์เฟซแอปพลิเคชันเดียว โดยมีคุณสมบัติหลักมากมาย เช่น การผูกข้อมูล บริการ คำสั่ง การพึ่งพา ฯลฯ มีฟังก์ชันโมดูลที่ทรงพลังและมีข้อดีของคำสั่งแบบกำหนดเอง

ลักษณะ:

1. โครงสร้างการใช้งานที่ดี

2. การเชื่อมโยงข้อมูลแบบสองทาง

3.คำแนะนำ

4.เทมเพลต HTML

5. สามารถฝัง ฉีด และทดสอบได้

ข้อได้เปรียบ:

1. เทมเพลตนี้ทรงพลังและมีฟังก์ชันมากมาย และมาพร้อมกับชุดคำสั่งเชิงมุมที่หลากหลายมาก

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

3. ปรับแต่งคำแนะนำ หลังจากปรับแต่งคำแนะนำแล้ว คุณจะสามารถใช้ได้หลายครั้งในโปรเจ็กต์

4. ng แบบโมดูลาร์แนะนำบางสิ่งจาก Java (การพึ่งพาการฉีด) อย่างกล้าหาญ ซึ่งทำให้ง่ายต่อการเขียนโค้ดที่นำมาใช้ซ้ำได้ ซึ่งมีประโยชน์มากสำหรับทีมพัฒนาแบบ Agile

5. Angularjs ได้รับการพัฒนาโดย Google อินเทอร์เน็ตยักษ์ใหญ่ ซึ่งหมายความว่ามีรากฐานที่มั่นคงและการสนับสนุนจากชุมชน

ข้อบกพร่อง:

1. การเริ่มต้นใช้งานเชิงมุมเป็นเรื่องง่าย แต่เมื่อคุณเจาะลึกลงไปมากขึ้น ก็จะมีแนวคิดมากมายที่เข้าใจได้ยากในระหว่างการเรียนรู้

2. มีตัวอย่างน้อยมากในเอกสารประกอบ โดยพื้นฐานแล้วเอกสารอย่างเป็นทางการพูดถึงเฉพาะเกี่ยวกับ API โดยไม่มีตัวอย่างใดๆ ในหลายกรณี คุณสามารถรับคำแนะนำเฉพาะจาก Google หรือสอบถาม Misko ผู้เขียน Angular โดยตรง

3. ความเข้ากันได้กับ IE6/7 นั้นไม่ค่อยดีนัก แต่คุณสามารถใช้ jQuery เพื่อเขียนโค้ดของคุณเองเพื่อแก้ไขปัญหาบางอย่างได้

4. มีแบบฝึกหัดปฏิบัติที่ดีที่สุดสองสามข้อเกี่ยวกับการใช้คำสั่ง จริงๆ แล้วถ้าคุณไม่ปฏิบัติตามหลักการใช้งานของผู้เขียน การเขียนโค้ดที่แตกต่างกันก็เป็นเรื่องง่าย ตัวอย่างเช่น มีการดำเนินการ DOM มากมายใน js ที่คล้ายกับ jQuery

5. การฉีดการพึ่งพา DI ต้องมีการประกาศอย่างชัดเจนหากจำเป็นต้องมีการบีบอัดโค้ด

2.ปฏิกิริยา

React ซึ่งผลิตโดย Facebook เปิดตัวอย่างเป็นทางการในปี 2013 ซึ่งช้ากว่า Angular 4 ปี อย่างไรก็ตาม ต้องขอบคุณ VirtualDOM ที่เป็นนวัตกรรม ทำให้มีประสิทธิภาพเหนือกว่า AngularJS เมื่อเปิดตัว มันจึงได้รับความนิยมอย่างมาก มีฟีเจอร์มากมาย รวมถึง VirtualDOM, JSX, อัลกอริธึม Diff ฯลฯ รองรับไวยากรณ์ ES6 และใช้การเขียนโปรแกรมเชิงฟังก์ชัน เกณฑ์จะสูงกว่าเล็กน้อย แต่ยังมีความยืดหยุ่นมากกว่า ทำให้มีความเป็นไปได้ในการพัฒนามากขึ้น

ลักษณะเฉพาะ

1. การออกแบบที่เปิดเผย: React ใช้กระบวนทัศน์ที่เปิดเผย ซึ่งทำให้ง่ายต่อการอธิบายแอปพลิเคชัน

2. มีประสิทธิภาพ: React ลดการโต้ตอบกับ DOM ให้เหลือน้อยที่สุดโดยการจำลอง DOM

3. ยืดหยุ่น: React ทำงานได้ดีกับไลบรารีหรือเฟรมเวิร์กที่รู้จัก

ข้อได้เปรียบ:

1. ความเร็วที่รวดเร็ว: ในระหว่างกระบวนการเรนเดอร์ UI React จะนำการอัปเดตบางส่วนไปยัง DOM จริงผ่านการดำเนินการระดับย่อยใน DOM เสมือน

2. ความเข้ากันได้ข้ามเบราว์เซอร์: Virtual DOM ช่วยเราแก้ปัญหาข้ามเบราว์เซอร์ โดยให้ API ที่เป็นมาตรฐานแก่เรา ซึ่งไม่มีปัญหาแม้แต่ใน IE8

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

4. การไหลของข้อมูลทางเดียว: Flux เป็นสถาปัตยกรรมสำหรับการสร้างชั้นข้อมูลทางเดียวในแอปพลิเคชัน JavaScript 5. Isomorphic, JavaScript ล้วนๆ: เนื่องจากโปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาพึ่งพาการตอบสนองฝั่งเซิร์ฟเวอร์มากกว่าการดำเนินการ JavaScript, แสดงผลแอปของคุณล่วงหน้า ช่วยในเรื่อง SEO 6. ความเข้ากันได้ดี: ตัวอย่างเช่น RequireJS ใช้สำหรับการโหลดและบรรจุภัณฑ์ ในขณะที่ Browserify และ Webpack เหมาะสำหรับการสร้างแอปพลิเคชันขนาดใหญ่ พวกเขาทำให้งานยากๆ เหล่านั้นน่ากลัวน้อยลง ข้อเสีย: ตัว React เป็นเพียง V เท่านั้น ไม่ใช่เฟรมเวิร์กที่สมบูรณ์ ดังนั้น หากคุณต้องการเฟรมเวิร์กที่สมบูรณ์สำหรับโปรเจ็กต์ขนาดใหญ่ คุณจะต้องเพิ่ม ReactRouter และ Flux เพื่อเขียนแอปพลิเคชันขนาดใหญ่

3.วิว

เมื่อเฟรมเวิร์กล่าสุดเปิดตัว (2014) Vue ดึงเอาคุณสมบัติของเชิงมุมและการตอบสนองรุ่นก่อนหน้า (เช่น VirtualDOM, การเชื่อมโยงข้อมูลแบบสองทาง, อัลกอริธึม diff, คุณสมบัติการตอบสนอง, การพัฒนาส่วนประกอบ ฯลฯ ) และทำการปรับให้เหมาะสมที่เกี่ยวข้องเพื่อให้ ใช้งานได้สะดวกกว่า เริ่มต้นง่ายกว่า และไม่เหมาะสำหรับผู้เริ่มต้น

ลักษณะ:

1. กรอบน้ำหนักเบา

2. การเชื่อมโยงข้อมูลแบบสองทาง

3.คำแนะนำ

4. ปลั๊กอิน

ข้อได้เปรียบ:

1. เรียบง่าย: เอกสารอย่างเป็นทางการมีความชัดเจนและเรียนรู้ได้ง่ายกว่า Angular

2. รวดเร็ว: อัปเดต DOM ในการประมวลผลแบตช์แบบอะซิงโครนัส

3. องค์ประกอบ: เขียนแอปพลิเคชันของคุณด้วยส่วนประกอบที่แยกส่วนและนำกลับมาใช้ใหม่ได้

4. กะทัดรัด: ~18kbmin+gzip และไม่มีการอ้างอิง

5. ทรงพลัง: นิพจน์ไม่จำเป็นต้องประกาศคุณสมบัติที่หักลดหย่อนได้ (คุณสมบัติที่คำนวณได้)

6. เป็นมิตรกับโมดูล: สามารถติดตั้งผ่าน NPM, Bower หรือ Duo ไม่ได้บังคับโค้ดทั้งหมดของคุณให้เป็นไปตามกฎระเบียบต่างๆ ของ Angular และสถานการณ์การใช้งานมีความยืดหยุ่นมากขึ้น

ข้อบกพร่อง:

1. ทารกแรกเกิด: Vue.js เป็นโปรเจ็กต์ใหม่ ยังไม่โตเต็มที่เท่าเชิงมุม

2. อิทธิพลไม่ได้ใหญ่มาก: ฉันค้นหาใน Google และพบว่าความหลากหลายหรือความสมบูรณ์ของ Vue.js นั้นน้อยกว่าไลบรารีที่มีชื่อเสียงอื่น ๆ

3. ไม่รองรับ IE8

ความรู้เพิ่มเติม: Vue.js และเฟรมเวิร์กอื่นๆ แตกต่างกันอย่างไร

1. ความแตกต่างจาก AngularJS

จุดที่คล้ายกัน:

คำแนะนำการสนับสนุนทั้งสอง: คำแนะนำในตัวและคำแนะนำที่กำหนดเอง

ตัวกรองที่รองรับทั้งสอง: ตัวกรองในตัวและตัวกรองแบบกำหนดเอง

ทั้งสองรองรับการผูกข้อมูลแบบสองทาง

ไม่รองรับเบราว์เซอร์ระดับล่าง

ความแตกต่าง:

1. ค่าใช้จ่ายในการเรียนรู้ของ AngularJS นั้นสูง เช่น การเพิ่มฟีเจอร์ Dependency Injection ในขณะที่ API ที่ Vue.js มอบให้นั้นค่อนข้างง่ายและใช้งานง่าย

2. ในแง่ของประสิทธิภาพ AngularJS อาศัยการตรวจสอบข้อมูลที่สกปรก ดังนั้นยิ่งมี Watchers มากเท่าไร ข้อมูลก็จะยิ่งช้าลงเท่านั้น

Vue.js ใช้การสังเกตตามการติดตามการพึ่งพาและใช้การอัปเดตคิวแบบอะซิงโครนัส ข้อมูลทั้งหมดจะถูกทริกเกอร์อย่างอิสระ

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

2. ความแตกต่างจากปฏิกิริยา

จุดที่คล้ายกัน:

React ใช้ไวยากรณ์ JSX พิเศษ และ Vue.js ยังแนะนำให้เขียนรูปแบบไฟล์พิเศษ .vue ในการพัฒนาส่วนประกอบ มีข้อกำหนดบางประการเกี่ยวกับเนื้อหาไฟล์ และทั้งสองอย่างจำเป็นต้องคอมไพล์เพื่อใช้งาน

แนวคิดหลักเหมือนกัน นั่นคือ ทุกอย่างเป็นส่วนประกอบ และอินสแตนซ์ของส่วนประกอบสามารถซ้อนกันได้

ทั้งหมดมีฟังก์ชัน hook ที่เหมาะสม ช่วยให้นักพัฒนาสามารถปรับแต่งความต้องการของตนได้

คอลัมน์ AJAX, เส้นทาง และฟังก์ชันอื่นๆ ไม่ได้ถูกสร้างไว้ในแพ็คเกจหลัก แต่ถูกโหลดเป็นปลั๊กอิน

คุณสมบัติของมิกซ์อินได้รับการสนับสนุนในการพัฒนาส่วนประกอบ

ความแตกต่าง:

React อาศัย Virtual DOM ในขณะที่ Vue.js ใช้เทมเพลต DOM Virtual DOM ที่ใช้โดย React จะทำการตรวจสอบสกปรกกับผลลัพธ์ที่เรนเดอร์

Vue.js ให้คำแนะนำ ตัวกรอง ฯลฯ ในเทมเพลต ซึ่งสามารถใช้งาน DOM ได้อย่างสะดวกและรวดเร็ว

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