บทความนี้สำรวจความแตกต่างในการใช้ AngularJs และ DOM การควบคุม JavaScript แบบดั้งเดิมโดยการใช้ข้อกำหนดทางธุรกิจสองอย่างง่าย ๆ และพยายามทำความเข้าใจแนวคิดการเขียนโปรแกรมของกรอบงานเช่น MVW ในการพัฒนาเว็บยอดนิยม
ข้อกำหนดนี้เป็นเรื่องธรรมดามาก ตัวอย่างเช่นเมนูสองระดับเมื่อมีการคลิกรายการเมนูระดับแรกรายการเมนูย่อยที่เกี่ยวข้องควรแสดงหรือซ่อนอยู่
การใช้งาน jQuery:
การคัดลอกรหัสมีดังนี้:
<!-html->
<ul>
<li>
รายการ 1
<ul>
<li> รายการเด็ก 1 </li>
</ul>
</li>
</ul>
// JavaScript
$ ('li.parent_item') คลิก (ฟังก์ชัน () {
$ (นี่) ..children ('ul.child'). Toggle ();
-
การใช้งาน AngularJS:
การคัดลอกรหัสมีดังนี้:
<!-html->
<ul>
<li ng-click = "hide_child =! hide_child">
รายการ 1
<ul nghide = "hide_child">
<li> รายการเด็ก 1 </li>
</ul>
</li>
</ul>
วิธีการดั้งเดิมของการดำเนินงาน DOM จะไม่ได้รับการอธิบายในรายละเอียด การใช้งานของ AngularJS นั้นต้องการการปรับแต่งรหัสมากมีเพียงรุ่น HTML เท่านั้นที่เพียงพอ รหัสข้างต้นใช้จุดความรู้เหล่านี้ของ AngularJs:
1. ไดเรกทอรี
2. การแสดงออก
NG-CLICK และ NG-HIDE เป็นทั้งคำสั่ง (คำแนะนำ) ที่มาพร้อมกับเฟรมเวิร์ก อดีตเทียบเท่ากับการจัดหาตัวจัดการเหตุการณ์ไปยังแท็ก LI เมื่อคลิกองค์ประกอบ HTML (LI) นิพจน์ hide_child =! hide_child จะถูกดำเนินการ ก่อนอื่นให้ดูที่คำสั่ง NG-hide ซึ่งจะควบคุมว่าองค์ประกอบ HTML จะแสดง (ดำเนินการผ่าน CSS) ตามผลการแสดงออกของการกำหนด (ค่า bolean) กล่าวคือถ้าตัวแปร hide_child เป็นจริงแล้ว UL จะถูกซ่อนไว้มิฉะนั้นผลลัพธ์จะตรงกันข้าม
ที่นี่ Hide_Child เป็นตัวแปรในขอบเขต $ การเปลี่ยนแปลงค่าของมันยังสามารถนำไปใช้โดยใช้คอนโทรลเลอร์คอนโทรลเลอร์เพื่อห่อวิธีการ แต่คำสั่งปัจจุบันค่อนข้างง่ายและเขียนโดยตรงในการกำหนดคำสั่ง
ผ่านการวิเคราะห์รหัสอย่างง่ายข้างต้นเราสามารถเห็นคุณสมบัติที่ชัดเจนอีกสองประการของ AngularJs:
1. การดำเนินการ DOM ถูกบล็อกผ่านคำแนะนำและนิพจน์และรหัส JavaScript พิเศษจะถูกบันทึกโดยเพียงแค่ใช้รหัสง่าย ๆ
2. การประยุกต์ใช้คำสั่งและการแสดงออกนั้นซ้อนกันโดยตรงใน HTML ซึ่งค่อนข้างตรงกันข้ามกับรูปแบบรหัสของ JavaScript ที่ไม่สร้างความรำคาญที่ JQuery ผลักดัน
ก่อนอื่นให้ดูที่ข้อกำหนดอื่นจากนั้นอธิบายข้อสรุปข้างต้นโดยละเอียด
ข้อกำหนดที่ 2: โดยคลิกที่ DIV เรียกการเลือกปุ่มตัวเลือกในแบบฟอร์ม
องค์ประกอบแบบฟอร์ม HTML แบบดั้งเดิมนั้นไม่ค่อยเป็นมิตรในการใช้งานอุปกรณ์มือถือในปัจจุบัน ตัวอย่างเช่นกล่องวิทยุปุ่มตัวเลือกต้องใช้ตำแหน่งที่แม่นยำบนหน้าจอสัมผัสเพื่อควบคุมส่วนประกอบนี้ แต่ตำแหน่งที่กำหนดด้วยตนเองนั้นหยาบมาก การปฏิบัติทั่วไปคือการเพิ่มการควบคุมฉลากที่สอดคล้องกัน แต่อัตราส่วนการครอบครองหน้าจอของข้อความนั้นไม่เหมาะและไม่มีเอฟเฟกต์การสื่อสารข้อมูลที่ชัดเจน ดังนั้นแท็ก div หรือ li ที่มีพื้นที่ขนาดใหญ่มักจะทำงานทางอ้อม
การใช้งาน jQuery:
การคัดลอกรหัสมีดังนี้:
<!-html->
<ul>
<li>
<อินพุต type = "วิทยุ"
id = "ตัวเลือก 1" />
<label for = "option1"> ตัวเลือก 1 </lable>
</li>
</ul>
// JavaScript
$ ('li.selection') คลิก (ฟังก์ชัน () {
$ (นี่) .children ('อินพุต [type = "วิทยุ"]'). คลิก ();
-
การใช้งาน AngularJS:
การคัดลอกรหัสมีดังนี้:
<!-html->
<ul>
<li ng-repeat = "ตัวเลือกในตัวเลือก"
ng-click = "model.option = ตัวเลือก. value"
ng-class = "{active: model.option == ตัวเลือก. value}">
<อินพุต type = "วิทยุ"
ng-model = "model.option"
value = "{{opture.value}}"
id = "ตัวเลือก 1" />
<label for = "option1"> ตัวเลือก 1 </lable>
</li>
</ul>
ในโซลูชันนี้เราไม่ได้เกี่ยวข้องกับรหัส JavaScript เพิ่มเติมและใช้คำแนะนำเพิ่มเติมหลายประการ สำหรับการเปรียบเทียบและการอ้างอิงเราสนใจเฉพาะการแสดงออกของคำแนะนำสองคำแนะนำ NG-click และ NG-Model
ก่อนอื่นให้ดูที่คำสั่ง NG-Model ขององค์ประกอบอินพุต การกำหนดที่นี่หมายความว่าเราเชื่อมโยงอินพุตบนเทมเพลตกับแอตทริบิวต์ตัวเลือกของวัตถุ $ scope.model สำหรับความเข้าใจที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับการเชื่อมโยงข้อมูลคุณสามารถอ้างอิงถึงการเชื่อมโยงข้อมูล การเชื่อมโยงที่ระบุนี้ทำให้การควบคุมเทมเพลตเชื่อมโยงกับโมเดลข้อมูลโดยตรงและการเชื่อมโยงนี้เป็นแบบสองทิศทาง ซึ่งหมายความว่าเมื่อผู้ใช้แก้ไขค่าในตัวควบคุม (ตรวจสอบอินพุตวิทยุ) วัตถุโมเดลที่เกี่ยวข้องจะถูกกำหนดใหม่ (model.option); ในเวลาเดียวกันหากค่าของวัตถุโมเดลเปลี่ยนแปลงการควบคุมอินพุตในเทมเพลตจะสะท้อนการเปลี่ยนแปลงตาม และนี่ก็ไม่ได้เกิดขึ้นจริงในการดำเนินการตามที่กล่าวไว้ข้างต้นของ jQuery
ดังนั้นผ่านการเชื่อมโยงข้อมูล AngularJS ให้คลิกองค์ประกอบ LI เพื่อให้กระบวนการทริกเกอร์อินพุตดำเนินการทางอ้อมเป็นดังนี้:
1. คลิกที่แท็ก LI เพื่อกำหนดค่าให้กับโมเดลตัวเลือก;
2. แก้ไขวัตถุโมเดลและค้นหาการควบคุมอินพุตที่สอดคล้องกัน (ค่าของค่าคือโมเดลตัวเลือก);
3. เปิดใช้งานคุณสมบัติที่ตรวจสอบของการควบคุมอินพุต
ผ่านสองกรณีข้างต้นเรามีความเข้าใจใหม่เกี่ยวกับการดำเนินงานของหน้าเว็บ
ประการแรกในแง่ของการใช้งานทางเทคนิคโดยการแนะนำแนวคิดใหม่เช่นคำแนะนำการแสดงออกการเชื่อมโยงข้อมูล ฯลฯ เราสามารถใช้งาน DOM ได้ในรูปแบบใหม่แทนที่จะใช้รหัส JavaScript ที่สามารถทำงานร่วมกับผู้ใช้และส่วนประกอบ HTML ได้ การเปลี่ยนแปลงแบบนี้มีขนาดใหญ่มาก
ตั้งแต่ต้นศตวรรษนี้การเขียนโปรแกรมเว็บแบบไดนามิกที่เพิ่มขึ้นเทคโนโลยีการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์ได้รับการปรับปรุง จากจุดเริ่มต้น CGI/PHP/ASP ผลิต. NET กับ Java จากภาษาและแพลตฟอร์ม ประสิทธิภาพการพัฒนาและกระบวนการซอฟต์แวร์โปรโมต MVC Framework/ORM/AOP ฯลฯ และประสิทธิภาพและข้อมูลขนาดใหญ่ทำให้ NodeJS/NOSQL/Hadoop ฯลฯ ในขณะที่ข้อกำหนดทางเทคนิคของส่วนหน้าเบราว์เซอร์นั้นไม่รุนแรงนัก ในอีกด้านหนึ่งผ่านฝั่งเซิร์ฟเวอร์และฐานข้อมูลความต้องการทางธุรกิจส่วนใหญ่ของโมเดล B/S สามารถตอบสนองได้ ในทางกลับกันเบราว์เซอร์นั้นมีความแตกต่างระหว่างแพลตฟอร์มที่แตกต่างกันความไม่ลงรอยกันกับมาตรฐานของภาษาสคริปต์และเทคโนโลยีการแสดงผลรวมถึงการขาดอำนาจคอมพิวเตอร์และการพิจารณาความปลอดภัย
ในกรณีนี้ส่วนใหญ่แล้วเบราว์เซอร์จำเป็นต้องพิจารณาเพียงแค่พิจารณาการแสดงผลและการโต้ตอบกับผู้ใช้อย่างง่าย HTML/DOM Plus Javasript/CSS จึงบรรลุผลงานหลักของส่วนหน้า ดังนั้นจึงไม่มีคนงานส่วนหน้าในอดีตจำเป็นต้องมีนักออกแบบเว็บไซต์เท่านั้น ข้อกำหนดสำหรับส่วนหน้าเพิ่มขึ้นอย่างค่อยเป็นค่อยไปและ jQuery ได้กลายเป็นไลบรารีแพ็คเกจที่ใช้มากที่สุดสำหรับการทำงานของ JavaScript DOM ในขั้นตอนนี้งานหลักของ JQuery/JavaScript ยังคงเป็นเพียงเครื่องมือสำหรับการนำเสนอและโต้ตอบกับเทอร์มินัลเบราว์เซอร์ของผู้ใช้
หลังจากทำความเข้าใจเกี่ยวกับต้นกำเนิดของ jQuery มันไม่ยากที่จะพบว่ากฎบางอย่างที่ดำเนินการในอดีตเช่น JavaScript ที่ไม่สร้างความรำคาญถูก จำกัด ไว้ที่วิธีการและวิธีการดำเนินการในเวลานั้น ในการแยกตรรกะรหัส DOM และ JavaScript เราต้องการวิธีการที่มีการบำรุงรักษาที่สูงขึ้น หลังจากความต้องการด้านหน้าของ JavaScript เพิ่มขึ้นกรอบส่วนหน้าจำนวนมากของ MVC/MVP ก็เกิดขึ้นเช่นเดียวกับที่เรียกว่า MVW (Model-View- สิ่งที่ใดก็ตาม) ของ AngularJs และวิธีการที่เหมาะกับ JavaScript และ DOM ในขั้นต้นเราพิจารณาการทำงานโดยตรงของการแสดงผลอินเตอร์เฟสและการโต้ตอบของผู้ใช้ แต่ตอนนี้เรามีการเชื่อมโยงข้อมูลไคลเอนต์คำแนะนำที่หลากหลายและการฉีดพึ่งพา สิ่งที่รอคอยเราจะเป็นรูปแบบการเขียนโปรแกรมใหม่ล่าสุดและวิธีคิด