เมื่อเว็บไซต์ฟังก์ชั่นค่อยๆกลายเป็นความสมบูรณ์ยิ่งขึ้น JS ในหน้าเว็บมีความซับซ้อนและป่องมากขึ้นเรื่อย ๆ วิธีดั้งเดิมของการนำเข้าไฟล์ JS ผ่านแท็กสคริปต์ไม่สามารถตอบสนองรูปแบบการพัฒนาอินเทอร์เน็ตปัจจุบันได้อีกต่อไป เราต้องการชุดของความต้องการที่ซับซ้อนเช่นการทำงานร่วมกันของทีมการใช้โมดูลซ้ำการทดสอบหน่วย ฯลฯ
VegureJS เป็นเฟรมเวิร์กการโหลดโมดูล JavaScript ขนาดเล็กมากและเป็นหนึ่งในผู้ดำเนินการที่ดีที่สุดของข้อกำหนด AMD เวอร์ชันล่าสุดของ VeutheJS เป็นเพียง 14K หลังจากการบีบอัดซึ่งมีน้ำหนักเบามาก นอกจากนี้ยังสามารถทำงานร่วมกับเฟรมเวิร์กอื่น ๆ ได้และการใช้ VeutheJS จะปรับปรุงคุณภาพของรหัสส่วนหน้าของคุณอย่างแน่นอน
ประโยชน์ที่จะต้องนำมาใช้
คำอธิบายอย่างเป็นทางการของ RequireJS:
VegureJS เป็นไฟล์ JavaScript และโมดูล มันได้รับการปรับให้เหมาะสมสำหรับการใช้งานในเบราว์เซอร์ แต่สามารถใช้ในสภาพแวดล้อม JavaScript อื่น ๆ เช่นแรดและโหนด การใช้ตัวโหลดสคริปต์แบบแยกส่วนเช่น VeutheJS จะปรับปรุงความเร็วและคุณภาพของรหัสของคุณ
ความหมายทั่วไป:
ในเบราว์เซอร์สามารถใช้เป็นตัวโหลดโมดูลสำหรับไฟล์ JS หรือสามารถใช้ในสภาพแวดล้อมโหนดและแรด, Balabala ... ข้อความนี้อธิบายฟังก์ชั่นพื้นฐานของ reghegs "การโหลดแบบแยกส่วน" การโหลดแบบแยกส่วนคืออะไร? เราจะอธิบายทีละคนจากหน้าต่อไปนี้
ก่อนอื่นให้ดูสถานการณ์ทั่วไปและอธิบายวิธีการใช้ requirejs ผ่านตัวอย่าง
วิธีการเขียนปกติ
index.html:
<! doctype html> <html> <head> <head> <script type = "text/javascript" src = "a.js"> </script> </head> <body> <pan> ร่างกาย </span> </body> </html>
A.JS:
ฟังก์ชั่น fun1 () {การแจ้งเตือน ("มันทำงาน");} fun1 ();บางทีคุณอาจชอบเขียนสิ่งนี้
(function () {function fun1 () {alert ("มันทำงาน");} fun1 ();}) ()วิธีที่สองใช้ขอบเขตบล็อกเพื่อประกาศว่าฟังก์ชั่นป้องกันการก่อมลพิษตัวแปรทั่วโลก สาระสำคัญยังคงเหมือนเดิม เมื่อเรียกใช้สองตัวอย่างข้างต้นฉันไม่ทราบว่าคุณสังเกตเห็นว่าเมื่อมีการดำเนินการแจ้งเตือนเนื้อหา HTML จะว่างเปล่านั่นคือ <span> ร่างกาย </span> จะไม่ปรากฏขึ้นและจะปรากฏขึ้นหลังจากคลิกยืนยันเท่านั้น นี่คือผลลัพธ์ของ JS ที่ปิดกั้นการแสดงผลของเบราว์เซอร์
ต้องการวิธีการเขียน
แน่นอนก่อนอื่นคุณต้องไปที่เว็บไซต์ VeutheJS เพื่อดาวน์โหลด js -> requirejs.rog
index.html:
<! doctype html> <html> <head> <script type = "text/javascript" src = "require.js"> </script> <script type = "text/javascript"> ต้องการ ("A"]); </script> </head> <body> <span> ร่างกาย </span> </body> </html>A.JS:
define (function () {function fun1 () {alert ("มันทำงาน");} fun1 ();})เบราว์เซอร์แจ้งว่า "ใช้งานได้" ซึ่งหมายความว่าทำงานได้อย่างถูกต้อง แต่มีความแตกต่างเล็กน้อย เวลานี้เบราว์เซอร์ไม่ว่างเปล่าและร่างกายก็ปรากฏขึ้นบนหน้า จนถึงตอนนี้เราสามารถรู้ได้ว่า VeutheJS มีข้อได้เปรียบดังต่อไปนี้:
1. ป้องกันการโหลด JS จากการปิดกั้นการแสดงผลหน้า
2. โหลด JS โดยใช้การโทรของโปรแกรมเพื่อป้องกันฉากที่น่าเกลียดต่อไปนี้
<script type = "text/javascript" src = "a.js"> </script> <script type = "text/javascript" src = "b.js"> </script> <script type = "text/javascript" src = "c.js"> </script> src = "d.js"> </script> <script type = "text/javascript" src = "e.js"> </script> <script type = "text/javascript" src = "f.js"> </script> <script type = "text/javaScript" src = "f.js" src = "g.js"> </script> <script type = "text/javaScript" src = "h.js"> </script> <script type = "text/javascript" src = "i.js"> </script> <script type = "text/javascript
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการทำความเข้าใจเครื่องมือโมดูลาร์ที่จำเป็น JS