คำถามสัมภาษณ์เชิงมุมทั่วไป 18 ข้อ (พร้อมการวิเคราะห์คำตอบ)

1. กลไกใดที่ใช้สำหรับการผูกข้อมูลใน Angular

หลักการโดยละเอียด

: กลไกการตรวจสอบสกปรก

การวิเคราะห์:

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

หลักการคือ Angular ตั้งค่าคิวการฟังบนแบบจำลองขอบเขตเพื่อตรวจสอบการเปลี่ยนแปลงข้อมูลและอัปเดตมุมมอง ทุกครั้งที่คุณผูกบางสิ่งเข้ากับมุมมอง AngularJS จะแทรก $watch ลงในคิว $watch เพื่อตรวจสอบว่ามีการเปลี่ยนแปลงในโมเดลที่ตรวจสอบหรือไม่ เมื่อเบราว์เซอร์ได้รับเหตุการณ์ที่สามารถประมวลผลได้โดยบริบทเชิงมุม $digest loop จะถูกทริกเกอร์ สำรวจ $watches ทั้งหมด และอัปเดต dom ในที่สุด

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

คำตอบ:

1. แต่ละองค์ประกอบที่ถูกผูกไว้แบบสองทางจะมีตัวเฝ้าดู

2. เมื่อมีเหตุการณ์บางอย่างเกิดขึ้น จะเรียกการตรวจจับข้อมูลย่อยที่สกปรก

เหตุการณ์เหล่านี้ได้แก่: การเปลี่ยนแปลงเนื้อหาขององค์ประกอบแบบฟอร์ม, การตอบกลับคำขอ Ajax, ฟังก์ชันที่ดำเนินการโดยการคลิกปุ่ม ฯลฯ

3. การตรวจจับข้อมูลที่สกปรกจะตรวจจับองค์ประกอบตัวเฝ้าดูทั้งหมดภายใต้รูทสโคป

ฟังก์ชัน $digest คือการตรวจสอบข้อมูลที่สกปรก

3. คุณใช้ปลั๊กอินของบุคคลที่สามใดในการพัฒนาโครงการ Angularjs

คำตอบ: AngularUi ui-router oclazyload ฯลฯ สิ่งที่แนบมาด้วยคือบทความเพื่อดู https://segmentfault com/a /1190000003858219

4. ng-show/ng-hide และ ng-if แตกต่างกันอย่างไร?

คำตอบ: เราทุกคนรู้ดีว่า ng-show/ng-hide จริง ๆ แล้วซ่อนและแสดงผ่านจอแสดงผล และ ng-if ควบคุมการเพิ่มและการลบโหนด dom จริงๆ ดังนั้น หากเราโหลดโหนด dom ตามเงื่อนไขที่แตกต่างกัน ประสิทธิภาพของ ng-if จะดีกว่า ng-show

5. อธิบายว่า root S crope คืออะไร และความแตกต่างระหว่าง rootScrope, rootScrope และขอบเขตคืออะไร

คำตอบ: ในแง่ของคนทั่วไป หน้า root S crope เป็นบิดาของหน้า rootScrope ทั้งหมด และหน้า rootScrope ทั้งหมด และขอบเขตทั้งหมด

การวิเคราะห์:

มาดูวิธีสร้างรูต S รับมือและ rootScope และ rootScope และขอบเขต

ขั้นตอนที่ 1: Angular แยกวิเคราะห์ ng-app และสร้าง $rootScope ในหน่วยความจำ

ขั้นตอนที่ 2: เชิงมุมแยกวิเคราะห์ต่อไป ค้นหานิพจน์ {{}} และแยกวิเคราะห์เป็นตัวแปร

ขั้นตอนที่ 3: จากนั้น div ที่มี ng-controller จะถูกแยกวิเคราะห์และชี้ไปที่ฟังก์ชันคอนโทรลเลอร์ ในเวลานี้ ฟังก์ชันคอนโทรลเลอร์จะกลายเป็นอินสแตนซ์อ็อบเจ็กต์ $scope

6. ระบุอย่างน้อยสามวิธีในการใช้การสื่อสารระหว่างโมดูลต่างๆ?

คำตอบ:

กิจกรรม
• การบริการ
• ระบุเหตุการณ์ที่ถูกผูกไว้
• โดยใช้ตัวควบคุม $rootScope
• ใช้โดยตรง $parent, $$childHead และ
• แอตทริบิวต์คำสั่งอื่น ๆ สำหรับการผูกข้อมูล

7. นิพจน์ { {yourModel}} ทำงานอย่างไร

คำตอบ:

ขึ้นอยู่กับบริการ $interpolation หลังจากเริ่มต้นเพจ html แล้ว มันจะค้นหานิพจน์เหล่านี้และทำเครื่องหมายไว้ ดังนั้นทุกครั้งที่พบ { {}} $watch จะถูกตั้งค่า และ $interpolation จะส่งคืนฟังก์ชันพร้อมพารามิเตอร์บริบท เมื่อฟังก์ชันถูกดำเนินการในที่สุด นิพจน์ $parse จะถูกนำไปใช้กับขอบเขตนั้น

8. $http ในรูปแบบเชิงมุม

คำตอบ: $http เป็นบริการหลักใน AngularJS ที่ใช้ในการอ่านข้อมูลจากเซิร์ฟเวอร์ระยะไกล

เราสามารถใช้บริการ http ในตัวเพื่อสื่อสารโดยตรงกับโลกภายนอก บริการ http สื่อสารโดยตรงกับโลกภายนอก บริการ http สื่อสารโดยตรงกับโลกภายนอก บริการ http เพียงแค็ปซูลออบเจ็กต์ XMLHttpRequest ดั้งเดิมของเบราว์เซอร์

9. เมื่อ ng-repeat วนซ้ำอาเรย์ ถ้ามีค่าเท่ากันในอาเรย์ จะเกิดอะไรขึ้น และจะแก้ไขอย่างไร?

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

คำตอบ

ของเฟรมเวิร์ก angularjs mvc หรือ mvvm

การวิเคราะห์ mvvm:

ก่อนอื่นให้ทำอย่างละเอียด นี่คือคำตอบของคุณ ความเข้าใจเกี่ยวกับ mvc และ mvvm:

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

ข้อดีของ mvvm

คือการมีเพศสัมพันธ์ต่ำ: มุมมองสามารถเปลี่ยนแปลงและแก้ไขได้อย่างอิสระจาก Model และ ViewModel เดียวกันสามารถนำกลับมาใช้ใหม่ได้หลาย View และการเปลี่ยนแปลงใน View และ Model สามารถทำได้โดยแยกจากกัน:

ตรรกะการดูบางอย่างสามารถทำได้ วางใน ViewModel หลาย Views สามารถนำมาใช้ซ้ำได้

การพัฒนาอิสระ: นักพัฒนาสามารถมุ่งเน้นไปที่การพัฒนาตรรกะทางธุรกิจและข้อมูล (ViewModemvvmdi; นักออกแบบสามารถมุ่งเน้นไปที่การออกแบบ UI (View)

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

ในรูปแบบเชิงมุม รูปแบบ MVVM แบ่งออกเป็นสี่ส่วนเป็นหลัก

เชิงมุม

จะมีมุมมองคำสั่งที่เปิดเผยจำนวนมาก เทมเพลต

: เป็นกาวระหว่าง View และ Model รับผิดชอบในการโต้ตอบและการทำงานร่วมกันระหว่าง View และ Model มีหน้าที่รับผิดชอบในการให้ข้อมูลที่แสดงแก่ View และจัดเตรียมวิธีสำหรับเหตุการณ์ Command ใน View เพื่อใช้งาน Model วัตถุ $scope ทำหน้าที่เป็นสิ่งนี้ บทบาทของ ViewModel

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

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

ของ mvc มีความสัมพันธ์อย่างใกล้ชิดกับตรรกะ และข้อมูลจะถูกอ่านโดยตรงจาก ฐานข้อมูล อินเทอร์เฟซของ mvvm เชื่อมโยงอย่างหลวม ๆ กับ viewmode และข้อมูลอินเทอร์เฟซนั้นได้มาจาก viewmodel ดังนั้น Angularjs จึงชอบ mvvm

11 บทบาทใดที่ $scope, controller, directive และ service เล่นใน mvvm ใน

angularjs หากคุณไม่ทราบ การวิเคราะห์คำถามแรกนั้นชัดเจนมาก โปรดอ่านอย่างละเอียดอีกครั้ง

12. ในเชิงมุม คุณจะควบคุมการโหลดทรัพยากรคงที่ในโครงการอย่างเหมาะสมได้อย่างไร

คำตอบ: ไม่มี

13. คุณต้องจ่ายอะไร ให้ความสนใจเมื่อเขียนตรรกะคอนโทรลเลอร์?

คำตอบ:

1. ลดความซับซ้อนของโค้ด (นี่คือสิ่งที่นักพัฒนาทุกคนต้องมี)

2. ไม่สามารถใช้งานโหนด dom ได้อย่างเด็ดขาด ในขณะนี้ คุณอาจถามว่าทำไมไม่

คำตอบของคุณคือ: การดำเนินการ DOM สามารถปรากฏในคำสั่งเท่านั้น สถานที่สุดท้ายที่ควรปรากฏคือในการให้บริการ เชิงมุมสนับสนุนการพัฒนาที่ขับเคลื่อนด้วยการทดสอบ หากการดำเนินการ DOM ปรากฏในบริการหรือตัวควบคุม แสดงว่าการทดสอบไม่สามารถผ่านได้ แน่นอนว่านี่เป็นเพียงจุดเดียว สิ่งสำคัญคือข้อดีประการหนึ่งของการใช้ Angular ซึ่งเป็นการเชื่อมโยงข้อมูลแบบสองทาง เพื่อให้คุณสามารถมุ่งเน้นไปที่การประมวลผลตรรกะทางธุรกิจโดยไม่ต้องจัดการกับการดำเนินการ DOM จำนวนมาก หากโค้ด Angular ยังคงเต็มไปด้วยการดำเนินการ DOM ต่างๆ ทำไมไม่ใช้ jquery เพื่อการพัฒนาโดยตรง

การพัฒนาที่ขับเคลื่อนด้วยการทดสอบคืออะไร? เพื่อให้เป็นที่นิยม:

Test-driven development ชื่อภาษาอังกฤษเต็มว่า Test-Driven Development หรือเรียกสั้น ๆ ว่า TDD เป็นวิธีการพัฒนาใหม่ที่แตกต่างจากกระบวนการพัฒนาซอฟต์แวร์แบบเดิมๆ มันต้องมีการเขียนโค้ดทดสอบก่อนที่จะเขียนโค้ดสำหรับฟังก์ชันบางอย่าง จากนั้นจึงเขียนเฉพาะโค้ดฟังก์ชันที่ทำให้การทดสอบผ่าน และขับเคลื่อนการพัฒนาทั้งหมดผ่านการทดสอบ สิ่งนี้จะช่วยเขียนโค้ดที่กระชับ ใช้งานได้และมีคุณภาพสูง และเร่งกระบวนการพัฒนาให้เร็วขึ้น

14.

คำตอบสำหรับการสื่อสารระหว่างคอนโทรลเลอร์:

1.

มีสองวิธีสำหรับเหตุการณ์ที่นี่ วิธีแรกคือ scope.scope.scope.emit จากนั้นรับพารามิเตอร์โดยการฟังเหตุการณ์ของรูต S รับมือ อีกวิธีหนึ่งคือเหตุการณ์ของ rootScope เพื่อรับพารามิเตอร์ อีกอย่างคือเหตุการณ์ของ rootScope เพื่อรับพารามิเตอร์ อีกอันคือ rootScope.broadcast ซึ่งรับพารามิเตอร์โดยการฟังการออกอากาศและโดยการฟังเหตุการณ์ของขอบเขต

ไม่มีความแตกต่างด้านประสิทธิภาพระหว่างสองวิธีนี้ใน Angular เวอร์ชันล่าสุด เหตุผลหลักคือทิศทางของการส่งเหตุการณ์จะแตกต่างกัน คุณสามารถเลือกได้ตามสถานการณ์จริง

2. บริการ

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

3.

วิธีการ $rootScope อาจสกปรกเล็กน้อย แต่สะดวกกว่านั่นคือ ข้อมูลจะถูกเก็บไว้ใน root S Cope ดังนั้นในแต่ละ rootScope ย่อย ดังนั้นในแต่ละ rootScope เพื่อให้สามารถเรียกแต่ละขอบเขตย่อยได้ แต่คุณต้องใส่ใจกับวงจรชีวิต

4. ใช้ขอบเขตโดยตรง scope.scope.$nextSibling และคุณสมบัติที่คล้ายกัน

คล้ายกับ scope.scope.parent วิธีนี้มีข้อเสียมากกว่า อย่างเป็นทางการ ไม่แนะนำให้ใช้แอตทริบิวต์ใดๆ ที่ขึ้นต้นด้วย $$ ซึ่งไม่เพียงแต่เพิ่มการเชื่อมต่อเท่านั้น แต่ยังต้องจัดการกับปัญหาแบบอะซิงโครนัสด้วย และลำดับของขอบเขตไม่ได้รับการแก้ไข ไม่แนะนำ

ให้ส่งพารามิเตอร์ผ่านที่จัดเก็บในเครื่อง ตัวแปรส่วนกลาง หรือ postMessage ในเบราว์เซอร์สมัยใหม่ เว้นแต่จะมีสถานการณ์พิเศษ โปรดหลีกเลี่ยงวิธีนี้

15. พารามิเตอร์หลายตัวของคำสั่งแบบกำหนดเอง

คำตอบ:

เรามาพูดถึงพารามิเตอร์ที่ใช้กันทั่วไปสองสามตัว เช่น:

ข้อจำกัด: รูปแบบการประกาศของคำสั่งใน dom E (องค์ประกอบ) A (แอตทริบิวต์) C (ชื่อคลาส) M (ความคิดเห็น)

เทมเพลต: สองรูปแบบ ประเภทของข้อความ HTML ฟังก์ชันที่ยอมรับพารามิเตอร์สองตัวคือ tElemetn และ tAttrs และส่งกลับสตริงที่แสดงถึงเทมเพลต สตริงเทมเพลตต้องมีองค์ประกอบ root DOM

templateUrl: สองรูปแบบ รูปแบบหนึ่งคือสตริงที่แสดงเส้นทางของไฟล์ HTML ภายนอก ฟังก์ชันที่สามารถรับพารามิเตอร์สองตัวได้ พารามิเตอร์คือ tElement และ tAttrs และส่งกลับอักขระของ HTML ภายนอก เส้นทางไฟล์

การคอมไพล์สตริง (วัตถุหรือฟังก์ชัน): ตัวเลือกการคอมไพล์สามารถส่งคืนวัตถุหรือฟังก์ชันได้ หากตั้งค่าฟังก์ชันการคอมไพล์แล้ว แสดงว่าเราต้องการดำเนินการ DOM ก่อนที่จะวางคำสั่งและข้อมูลแบบเรียลไทม์ไว้ใน DOM มีความปลอดภัยในการดำเนินการ DOM เช่น การเพิ่มและการลบโหนดในฟังก์ชันนี้ โดยพื้นฐานแล้ว เมื่อเราตั้งค่าตัวเลือกลิงก์ เราจะสร้างฟังก์ชันลิงก์ postLink() เพื่อให้ฟังก์ชันคอมไพล์() สามารถกำหนดฟังก์ชันลิงก์ได้

จากนั้นก็มีพอร์ทัล: http://www.cnblogs.com/mliudong/p/4180680.html

ความแตกต่างระหว่างการคอมไพล์และลิงก์:

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

16. คำตอบของความแตกต่างระหว่างเชิงมุมและ jquery

:

เชิงมุมนั้นขึ้นอยู่กับการขับเคลื่อนด้วยข้อมูล ดังนั้นเชิงมุมจึงเหมาะสำหรับโครงการที่มีการดำเนินการกับข้อมูลที่ซับซ้อน (ที่นี่คุณสามารถพูดถึงแอปพลิเคชันหน้าเดียวอีกครั้งหากคุณไม่ทราบวิธีดำเนินการ ข้อดีอยู่ที่นี่อีกแล้ว http://www.zhihu .com/question/20792064)

jquery อิงจาก dom driver jquery เหมาะสำหรับโปรเจ็กต์ที่มีการดำเนินการ dom มากมาย

17. คุณรู้เกี่ยวกับแบบฟอร์มมากแค่ไหน

เชิงมุม

:

Angular ได้ขยายประเภทขององค์ประกอบอินพุตและมีทั้งหมด 10 ประเภทดังต่อไปนี้ :

• หมายเลข

• ข้อความ

• ช่อง

• ทำ

• เครื่องหมายวิทยุอีเมล

• ปุ่ม

• ที่

• ซ่อน

• ส่ง

• รีเซ็ต

Angular มี 4 สไตล์ CSS ในตัวสำหรับแบบฟอร์ม

• ng-valid ตรวจสอบสถานะทางกฎหมาย

• ng-invalid ตรวจสอบสถานะที่ผิดกฎหมาย

• ng-pristine หากคุณต้องการใช้รูปแบบดั้งเดิมคุณต้องตั้งค่านี้

• ng-dirty แบบฟอร์มอยู่ในสถานะข้อมูลสกปรก

Angular จะตรวจสอบโมเดลเมื่อใด ตรวจสอบแบบฟอร์มโดยอัตโนมัติ หากไม่ได้ตั้งค่า ng-model ไว้ Angular จะไม่สามารถทราบได้ว่าค่าของ myForm.$invalid เป็นจริงหรือไม่

เนื้อหาที่จำเป็นสำหรับการตรวจสอบ

• ระบุว่าจะป้อนเนื้อหา

• ng-maxlength, ความยาวสูงสุด

• ng-minlength, ความยาวขั้นต่ำหรือ

ไม่

ตัวอย่าง: พอร์ทัล https://github.com/18500047564/clutter

18. คุณรู้มากแค่ไหน? ใช้คำตอบตัวกรองแบบกำหนดเอง

:

• วันที่ (วันที่)

• สกุลเงิน (สกุลเงิน)

• จำกัดถึง (จำกัดความยาวของอาร์เรย์หรือสตริง)

• ลำดับตาม (เรียง

• ลำดับ) ตัวพิมพ์เล็ก

• (ตัวพิมพ์เล็ก) ตัวพิมพ์ใหญ่ (ตัวพิมพ์ใหญ่)

• หมายเลข (จัดรูปแบบตัวเลข เพิ่มตัวคั่นหลักพัน และรับ พารามิเตอร์จำกัดจำนวนจุดทศนิยม)

• ตัวกรอง (ประมวลผลอาร์เรย์ กรององค์ประกอบที่มีสตริงย่อยบางตัวออก)

• json (จัดรูปแบบวัตถุ json)

มีสองวิธีในการใช้ตัวกรอง

วิธีหนึ่งอยู่บนหน้าโดยตรง:

<p>{{now | date : 'yyyy-MM-dd'}}</p>

อีกประการหนึ่งคือใช้ใน js:

$filter('filter name')(object to be filtered, parameter 1, parameter 2,...)
$filter('date')(now, 'yyyy-MM-dd hh:mm:ss');

ปรับแต่งอาร์เรย์การขจัดข้อมูลซ้ำซ้อน

app.filter("unique", function() {
  ฟังก์ชั่นส่งคืน (arr) {
    วาร์ n = [];
    วาร์ obj = {};

    สำหรับ (var i = 0; i < arr.length; i++) {
      ถ้า (!obj[arr[i]]) {
        n.push(arr[i]);
        obj[arr[i]] = 1;
      -
    -

    กลับ n;
  -
-