บทสรุปของข้อผิดพลาดที่พบบ่อยที่สุดสิบคนที่นักพัฒนา AngularJS ทำ

คำนำ

AngularJS นั้นง่ายต่อการพัฒนามีคุณสมบัติมากมายและเอฟเฟกต์ที่ดีส่งผลให้มีการใช้งานมากขึ้นและกับดักบางอย่างมาพร้อมกับ บทความนี้แสดงปัญหาบางอย่างที่พบบ่อยว่า AngularJS มีแนวโน้มที่จะเกิดปัญหา มาดูกันกันเถอะ

1. โครงสร้างไดเรกทอรี MVC

Angularjs เป็นทื่อเป็นกรอบ MVC โมเดลของมันไม่ได้กำหนดไว้อย่างชัดเจนว่าเป็น backbone.js framework แต่สถาปัตยกรรมของมันเหมาะสม เมื่อคุณทำงานในกรอบ MVC เป็นเรื่องปกติที่จะจำแนกตามประเภทไฟล์:

 เทมเพลต/ _login.html _feed.htmlapp/ app.js คอนโทรลเลอร์/ loginController.js feedcontroller.js คำสั่ง/ feedentrydirective.js บริการ/ เข้าสู่ระบบ

ดูเหมือนว่านี่จะเป็นโครงสร้างที่ชัดเจนไม่ต้องพูดถึงว่า Rails ทำเช่นเดียวกัน อย่างไรก็ตามเมื่อแอปเริ่มขยายโครงสร้างนี้จะทำให้คุณเปิดไดเรกทอรีจำนวนมากในครั้งเดียว ไม่ว่าคุณจะใช้ Sublime, Visual Studio หรือ VIM รวมกับ Tree Nerd คุณจะลงทุนเวลาจำนวนมากเลื่อนขึ้นและลงในต้นไม้ไดเรกทอรี

แตกต่างจากการหารไฟล์ตามประเภท แต่เราสามารถแบ่งไฟล์ตามคุณสมบัติ:

 App/ App.js Feed/ _feed.html feedcontroller.js feedentrydirective.js feedservice.js เข้าสู่ระบบ/ _login.html logincontroller.js loginservice.js แชร์/ capatalizefilter.js

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

2. โมดูล

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

 var app = angular.module ('app', []); app.service ('myservice', function () {// รหัสบริการ}); app.controller ('myctrl', ฟังก์ชั่น ($ scope, myservice) {// รหัสคอนโทรลเลอร์});

หลังจากนี้กลยุทธ์ทั่วไปคือการจำแนกวัตถุประเภทเดียวกัน

 บริการ var = angular.module ('บริการ', []); services.service ('myservice', function () {// รหัสบริการ}); ตัวควบคุม var = angular.module ('คอนโทรลเลอร์', ['บริการ']); controllers.controller ('myctrl', ฟังก์ชั่น ($ scope, myService) {// รหัสคอนโทรลเลอร์}); var app = angular.module ('แอพ', ['คอนโทรลเลอร์', 'บริการ']);

วิธีนี้คล้ายกับโครงสร้างไดเรกทอรีที่กล่าวถึงในส่วนแรกข้างต้น: ไม่ดีพอ ตามปรัชญาเดียวกันมันสามารถจำแนกตามลักษณะซึ่งนำไปสู่ความสามารถในการปรับขนาด

 var SharedServicesModule = Angular.Module ('SharedServices', []); SharedServices.service ('Networkservice', ฟังก์ชั่น ($ http) {}); var loginModule = angular.module ('เข้าสู่ระบบ', ['SharedServices']); LoginModule.Service ('LoginService', ฟังก์ชั่น (Networkservice) {}); LoginModule.Controller ('loginctrl', ฟังก์ชั่น ($ scope, loginService) {}); var app = angular.module ('app', ['SharedServices', 'เข้าสู่ระบบ']);

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

3. การฉีดพึ่งพา

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

 var app = angular.module ('app', []); app.controller ('mainctrl', ฟังก์ชั่น ($ scope, $ timeout) {$ timeout (function () {console.log ($ scope);}, 1000);});

ที่นี่เป็นที่ชัดเจนว่า MainCtrl ขึ้นอยู่กับ $scope และ $timeout

ทุกอย่างสวยงามจนกว่าคุณจะพร้อมที่จะปรับใช้กับการผลิตและต้องการปรับปรุงรหัสของคุณ หากคุณใช้ uglifyjs ตัวอย่างก่อนหน้านี้จะกลายเป็นเช่นนี้:

 var app = angular.module ("app", []); app.controller ("mainctrl", ฟังก์ชั่น (e, t) {t (ฟังก์ชัน () {console.log (e)}, 1e3)})

AngularJs รู้ได้อย่างไรว่า mainctrl ขึ้นอยู่กับใคร? AngularJS ให้วิธีแก้ปัญหาที่ง่ายมากคือการผ่านการพึ่งพาเข้าไปในอาร์เรย์องค์ประกอบสุดท้ายของอาร์เรย์เป็นฟังก์ชั่นและการพึ่งพาทั้งหมดจะใช้เป็นพารามิเตอร์

 app.controller ('mainctrl', ['$ scope', '$ timeout', ฟังก์ชั่น ($ scope, $ timeout) {$ timeout (function () {console.log ($ scope);}, 1,000);}]);

การทำเช่นนั้นจะทำให้รหัสง่ายขึ้นและ AngularJs รู้วิธีตีความการพึ่งพาที่ชัดเจนเหล่านี้:

 app.controller ("mainctrl", ["$ scope", "$ timeout", ฟังก์ชั่น (e, t) {t (function () {console.log (e)}, 1e3)}])

3.1 การพึ่งพาทั่วโลก

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

การใช้ AngularJS ทำให้ง่ายต่อการห่อหุ้มการพึ่งพาทั่วโลกเหล่านี้ลงในโมดูลดังนั้นพวกเขาจึงสามารถฉีดได้เช่นโมดูลมาตรฐาน AngularJS

ENDERSCORE.JS เป็นห้องสมุดที่ยอดเยี่ยมที่ทำให้รหัส JavaScript ง่ายขึ้นในรูปแบบการทำงานและคุณสามารถแปลงเป็นโมดูลในวิธีต่อไปนี้:

 var underscore = angular.module ('underscore', []); underscore.factory ('_', function () {return window._; // underscore ต้องโหลดบนหน้า}); var app = angular.module ('แอป' app.controller ('mainctrl', ['$ scope', '_', ฟังก์ชั่น ($ scope, _) {init = function () {_.keys ($ scope);} init ();}]);

วิธีการนี้ช่วยให้แอปพลิเคชันสามารถพัฒนาต่อไปในรูปแบบของการฉีดพึ่งพา AngularJS และยังสามารถสลับขีดล่างในระหว่างขั้นตอนการทดสอบ

สิ่งนี้อาจดูไม่สำคัญและไม่จำเป็น แต่ถ้ารหัสของคุณใช้การใช้งานที่เข้มงวด (และต้องใช้) สิ่งนี้จำเป็น

iv. การขยายตัวของคอนโทรลเลอร์

คอนโทรลเลอร์เป็นเนื้อสัตว์และมันฝรั่งและถ้าคุณไม่ระวังคุณจะเพิ่มตรรกะมากเกินไปโดยเฉพาะอย่างยิ่งในตอนแรก คอนโทรลเลอร์ไม่ควรใช้งาน DOM หรือถือ DOM Selector นั่นคือที่ที่เราต้องใช้คำแนะนำและ NG-Model ในทำนองเดียวกันตรรกะทางธุรกิจควรมีอยู่ในบริการไม่ใช่คอนโทรลเลอร์

ควรเก็บข้อมูลไว้ในบริการเว้นแต่ว่าพวกเขาจะถูกผูกไว้กับ $ SCOPE แล้ว บริการตัวเองเป็นซิงเกิลตันและมีอยู่ตลอดชีวิตของแอปพลิเคชัน แต่คอนโทรลเลอร์นั้นชั่วคราวระหว่างสถานะของแอปพลิเคชัน หากข้อมูลถูกบันทึกไว้ในคอนโทรลเลอร์เมื่อมีการสร้างอินสแตนซ์อีกครั้งจะต้องรับข้อมูลอีกครั้งจากที่ใดที่หนึ่ง แม้ว่าข้อมูลจะถูกเก็บไว้ใน LocalStorage ความเร็วในการค้นหาเป็นลำดับของขนาดช้ากว่าตัวแปร JavaScript

AngularJS ทำงานได้ดีเมื่อทำตามหลักการความรับผิดชอบเดี่ยว (SRP) หากคอนโทรลเลอร์เป็นผู้ประสานงานระหว่างมุมมองและโมเดลก็ควรมีตรรกะน้อยที่สุดเท่าที่จะเป็นไปได้ซึ่งจะช่วยในการทดสอบ

5. บริการเทียบกับโรงงาน

นักพัฒนา AngularJS เกือบทุกคนมีปัญหากับคำนามเหล่านี้เมื่อเขาเป็นผู้เริ่มต้นซึ่งไม่สมควรได้รับมันเพราะพวกเขาเป็นเพียงน้ำตาลวากยสัมพันธ์เกือบจะเหมือนกัน!

นี่คือคำจำกัดความของพวกเขาในซอร์สโค้ด AngularJS:

 ฟังก์ชั่นโรงงาน (ชื่อ, FactoryFn) {ผู้ให้บริการส่งคืน (ชื่อ, {$ get: Factoryfn}); } บริการฟังก์ชั่น (ชื่อ, คอนสตรัคเตอร์) {return Factory (ชื่อ, ['$ injector', ฟังก์ชั่น ($ injector) {return $ injector.instantiate (constructor);}]);}

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

เนื่องจากบริการเรียกฟังก์ชัน factory เท่านั้นความแตกต่างคืออะไร? เบาะแสอยู่ใน $injector.instantiate : ในฟังก์ชั่นนี้ $injector สร้างอินสแตนซ์ใหม่ในตัวสร้าง service

นี่คือตัวอย่างที่แสดงว่า service และ factory ทำสิ่งเดียวกัน:

 var app = angular.module ('app', []); app.service ('helloWorldService', function () {this.hello = function () {return "Hello World";};}); app.factory ('helloWorldFactory', function () {return {hello: function () {return "Hello World";}}});

เมื่อ helloWorldService หรือ helloWorldFactory ถูกฉีดเข้าไปในคอนโทรลเลอร์พวกเขาทั้งหมดมีวิธีการสวัสดีที่กลับมา "Hello World" ตัวสร้างของ service จะถูกสร้างอินสแตนซ์หนึ่งครั้งเมื่อประกาศและวัตถุ factory จะถูกส่งผ่านทุกครั้งที่มันถูกฉีด แต่ยังมีเพียงหนึ่งอินสแตนซ์ factory providers ทั้งหมดเป็นซิงเกิล

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

 app.factory ('hellofactory', function () {return function (ชื่อ) {this.name = name; this.hello = function () {return "hello" + this.name;};};};});

นี่คือตัวอย่างของคอนโทรลเลอร์โดยใช้ service และ factory สองแห่ง helloFactory ส่งคืนฟังก์ชั่นที่กำหนดค่าของ name เมื่อสร้างวัตถุใหม่

 app.controller ('helloctrl', ฟังก์ชั่น ($ scope, helloWorldService, helloWorldFactory, hellofactory) {init = function () {helloWorldService.hello (); // 'Hello World' HelloWorldFactory.hello (); init ();});

เมื่อคุณเป็นผู้เริ่มต้นจะเป็นการดีที่สุดที่จะใช้บริการ

Factory ยังมีประโยชน์เมื่อออกแบบชั้นเรียนด้วยวิธีการส่วนตัวมากมาย:

 app.factory ('privateFactory', function () {var privateFunc = ฟังก์ชั่น (ชื่อ) {return name.split (""). reverse (). เข้าร่วม (""); // ย้อนกลับชื่อ}; return {hello: function (ชื่อ) {return "hello" + privatefunc (ชื่อ);}};};

ด้วยตัวอย่างนี้เราสามารถทำให้วิธี privateFunc ไม่สามารถเข้าถึงได้กับ API สาธารณะของ privateFactory รูปแบบนี้สามารถทำได้ใน service แต่ง่ายกว่าใน factory

6. Batarang ไม่ได้ใช้

Batarang เป็นปลั๊กอิน Chrome ที่ยอดเยี่ยมสำหรับการพัฒนาและทดสอบแอพ AngularJS

Batarang ให้ความสามารถในการเรียกดูแบบจำลองซึ่งทำให้เราสามารถสังเกตได้ว่า AngularJs ถูกผูกไว้กับขอบเขตซึ่งมีประโยชน์มากเมื่อจัดการคำแนะนำและแยกช่วงของค่าที่ถูกผูกไว้

Batarang ยังให้กราฟการพึ่งพาซึ่งมีประโยชน์หากเราสัมผัสกับฐานรหัสที่ยังไม่ผ่านการทดสอบซึ่งสามารถกำหนดบริการที่ควรมุ่งเน้น

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

7. ผู้เฝ้าดูมากเกินไป

ในจุดก่อนหน้าเรากล่าวว่า AngularJs สามารถใช้เป็นแพ็คเกจและมีประสิทธิภาพที่ดี เนื่องจากการตรวจสอบข้อมูลสกปรกจะต้องเสร็จสิ้นในรอบการย่อยหนึ่งรอบเมื่อจำนวนผู้เฝ้าดูเพิ่มขึ้นเป็นประมาณปี 2000 วัฏจักรนี้จะทำให้เกิดปัญหาประสิทธิภาพที่สำคัญ (หมายเลข 2000 ไม่สามารถกล่าวได้ว่าทำให้ประสิทธิภาพลดลงอย่างมีนัยสำคัญ แต่นี่เป็นค่าเชิงประจักษ์ที่ดีในเวอร์ชันการเปิดตัว AngularJS 1.3 มีการเปลี่ยนแปลงบางอย่างที่อนุญาตให้ควบคุมวัฏจักรย่อยได้อย่างเข้มงวด)

"ฟังก์ชั่นฟังก์ชั่นการดำเนินการทันที (IIFE)" ต่อไปนี้จะพิมพ์จำนวนผู้เฝ้าดูทั้งหมดในหน้าปัจจุบัน คุณสามารถวางลงในคอนโซลและสังเกตผลลัพธ์ iife นี้มาจากคำตอบของ Jared บน Stackoverflow:

 (function () {var root = $ (document.getElementSbyTagname ('body')); var watchers = []; var f = ฟังก์ชั่น (องค์ประกอบ) {ถ้า (element.data (). hasownproperty ('$ scope')) {angular.foreach (element.data () Angular.foreach (Element.children (), ฟังก์ชั่น (Childelement) {F ($ (childelement));});

ด้วยวิธีนี้จำนวนนักดูจะได้รับรวมกับต้นไม้นาฬิกาในส่วนประสิทธิภาพของ Batarang คุณควรดูว่ามีรหัสซ้ำหรือที่มีข้อมูลคงที่และยังมีนาฬิกาเป็นเจ้าของ

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

8. ช่วงจำนวน จำกัด ของ $

การสืบทอดการสืบทอดตามต้นแบบของ JavaScript มีความแตกต่างเล็กน้อยจากการสืบทอดแบบคลาสในวัตถุเชิงวัตถุที่มุ่งเน้นวัตถุซึ่งมักจะไม่เป็นปัญหา แต่ความละเอียดอ่อนนี้ปรากฏขึ้นเมื่อใช้ $scope ใน AngularJS แต่ละ $scope จะสืบทอด $scope พาเรนต์ซึ่งเรียกว่า $rootScope ในระดับสูงสุด ( $scope ค่อนข้างแตกต่างจากคำสั่งดั้งเดิมพวกเขามีขอบเขตการกระทำที่แน่นอนและมีคุณสมบัติที่ประกาศไว้อย่างชัดเจนเท่านั้น)

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

ตัวอย่างเช่นเราต้องแสดงชื่อผู้ใช้บนแถบนำทางซึ่งป้อนในแบบฟอร์มการเข้าสู่ระบบ ความพยายามต่อไปนี้ควรทำงาน:

 <div ng-controller = "navctrl"> <span> {{user}} </span> <div ng-controller = "loginctrl"> <span> {{user}} </span> <อินพุต ng-model = "ผู้ใช้">

จากนั้นคำถามคือ ... : NG-model ของผู้ใช้ถูกตั้งค่าในอินพุตข้อความ เมื่อผู้ใช้ป้อนเนื้อหาเทมเพลตใดจะได้รับการอัปเดต navctrl หรือ loginctrl หรือทั้งหมด?

หากคุณเลือก loginctrl คุณอาจเข้าใจว่าการสืบทอดการสืบทอดต้นแบบทำงานอย่างไร

ห่วงโซ่ต้นแบบไม่ทำงานเมื่อคุณดึงตัวอักษร หาก NAVCTRL ได้รับการอัปเดตในเวลาเดียวกันก็จำเป็นต้องดึงห่วงโซ่ต้นแบบ แต่ถ้าค่าเป็นวัตถุสิ่งนี้จะเกิดขึ้น (โปรดจำไว้ว่าใน JavaScript, ฟังก์ชั่น, อาร์เรย์และวัตถุเป็นวัตถุทั้งหมด)

ดังนั้นเพื่อให้ได้พฤติกรรมที่คาดหวังคุณต้องสร้างวัตถุใน NAVCTRL ซึ่งสามารถอ้างอิงได้โดย LoginCtrl

 <div ng-controller = "navctrl"> <span> {{user.name}} </span> <div ng-controller = "loginctrl"> <span> {user.name}} </span> <อินพุต ng-model = "user.name"

ตอนนี้เนื่องจากผู้ใช้เป็นวัตถุห่วงโซ่ต้นแบบจะทำงานและเทมเพลต NAVCTRL และ $scope และ loginCtrl จะได้รับการอัปเดต

นี่เป็นตัวอย่างที่สวยงาม แต่ปัญหานี้สามารถเกิดขึ้นได้ง่ายเมื่อคุณใช้คำแนะนำบางอย่างเพื่อสร้าง $scope เด็กเช่น ngRepeat

9. การทดสอบด้วยตนเอง

เนื่องจาก TDD อาจไม่ใช่วิธีที่นักพัฒนาทุกคนชอบพวกเขาทำการทดสอบด้วยตนเองเมื่อพวกเขาตรวจสอบว่ารหัสทำงานหรือมีผลต่อสิ่งอื่นหรือไม่

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

9.1 ไม้โปรแทรกเตอร์

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

เราได้สร้าง PRATRACTOR ซึ่งเป็นผู้ทดสอบแบบ end-to-end เพื่อจำลองการโต้ตอบของผู้ใช้ซึ่งสามารถช่วยคุณตรวจสอบสุขภาพของโปรแกรม AngularJS ของคุณ

ไม้โปรแทรกเตอร์ใช้กรอบการทดสอบดอกมะลิเพื่อกำหนดการทดสอบ โปรแลตเตอร์มี API ที่แข็งแกร่งมากสำหรับพฤติกรรมการโต้ตอบหน้าเว็บที่แตกต่างกัน

เรามีเครื่องมือทดสอบแบบ end-to-end อื่น ๆ แต่ข้อได้เปรียบของไม้โปรแทรกเตอร์คือมันเข้าใจวิธีการทำงานกับรหัส AngularJS โดยเฉพาะอย่างยิ่งในรอบ $ Digest

9.2 กรรม

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

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

10. ใช้ jQuery

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

AngularJS เป็นกรอบสำหรับการสร้างแอพในขณะที่ jQuery เป็นห้องสมุดที่ทำให้ "การดำเนินการเอกสาร HTML ง่ายขึ้นการประมวลผลกิจกรรมภาพเคลื่อนไหวและ AJAX" นี่คือความแตกต่างพื้นฐานที่สุดระหว่างทั้งสอง AngularJS มุ่งมั่นต่อสถาปัตยกรรมของโปรแกรมและไม่มีส่วนเกี่ยวข้องกับหน้า HTML

เพื่อให้เข้าใจวิธีการสร้างโปรแกรม AngularJS ได้ดีขึ้นโปรดหยุดใช้ jQuery jQuery ช่วยให้นักพัฒนาคิดเกี่ยวกับปัญหาเกี่ยวกับมาตรฐาน HTML ที่มีอยู่ แต่ตามที่เอกสารกล่าวว่า "AngularJS ช่วยให้คุณสามารถขยายคำ HTML ในแอปพลิเคชันของคุณ"

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

แต่ jQuery ที่ยอดเยี่ยมจริงๆเป็นสิ่งจำเป็นเมื่อวันที่อาจมาถึง แต่การแนะนำในตอนแรกเป็นความผิดพลาดทั่วไป

สรุป

AngularJS เป็นกรอบการทำงานที่ยอดเยี่ยมซึ่งมักจะปรับปรุงด้วยความช่วยเหลือของชุมชน แม้ว่า AngularJS ยังคงเป็นแนวคิดที่พัฒนาขึ้น แต่ฉันหวังว่าผู้คนสามารถติดตามการประชุมที่กล่าวถึงข้างต้นเพื่อหลีกเลี่ยงปัญหาที่พบในการพัฒนาแอปพลิเคชัน AngularJS ฉันหวังว่าเนื้อหาของบทความนี้จะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อสื่อสาร ขอบคุณสำหรับการสนับสนุน Wulin.com