โหลดฟังก์ชั่น JS แบบไดนามิก
โดยทั่วไปเมื่อเราต้องการโหลดไฟล์ JS เราจะใช้แท็กสคริปต์เพื่อใช้งานคล้ายกับรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript" src = "example.js"> </script>
อย่างไรก็ตามการใช้แท็กสคริปต์เพื่อโหลดไฟล์ JS โดยตรงมีข้อเสียดังต่อไปนี้:
1. คำสั่งอ่านที่เข้มงวด เนื่องจากเบราว์เซอร์อ่านไฟล์ JavaScript ตามลำดับที่ <script> ปรากฏในหน้าเว็บแล้วเรียกใช้ทันทีเมื่อไฟล์หลายไฟล์ขึ้นอยู่กับกันและกันไฟล์ที่มีการพึ่งพาน้อยที่สุดจะต้องวางไว้ที่ด้านหน้าและไฟล์ที่มีการพึ่งพามากที่สุดจะต้องวางในตอนท้ายมิฉะนั้นรหัสจะรายงานข้อผิดพลาด
2. ปัญหาด้านประสิทธิภาพ เบราว์เซอร์ใช้ "โหมดซิงโครนัส" เพื่อโหลดแท็ก <script> นั่นคือหน้าจะเป็น "การปิดกั้น" รอไฟล์ JavaScript ที่จะโหลดจากนั้นเรียกใช้รหัส HTML ที่ตามมา เมื่อมีแท็กหลายแท็ก <script> เบราว์เซอร์ไม่สามารถอ่านได้ในเวลาเดียวกัน หนึ่งจะต้องอ่านก่อนที่จะอ่านอื่น ๆ ส่งผลให้มีการขยายเวลาการอ่านขนาดใหญ่และการตอบสนองของหน้านั้นช้า
ในเวลานี้เราจะนึกถึงการโหลด JS แบบไดนามิก วิธีการใช้งานของการโหลด JS แบบไดนามิกนั้นคล้ายกับรหัสต่อไปนี้
การคัดลอกรหัสมีดังนี้:
-
*@desc: เพิ่มสคริปต์แบบไดนามิก
*@param src: ที่อยู่ของไฟล์ js ที่โหลด
*@param callback: ฟังก์ชันการเรียกกลับที่ต้องเรียกหลังจากโหลดไฟล์ js
*@Demo:
adddynamicstyle ('http://webresource.c-ctrip.com/code/cquery/labjs/lab.js', function () {
Alert ('lab.js บนการโหลดเซิร์ฟเวอร์ CTRIP เสร็จสมบูรณ์')
-
-
ฟังก์ชั่น adddynamicjs (src, callback) {
var script = document.createElement ("สคริปต์");
script.setAttribute ("type", "text/javascript");
script.src = src [i];
script.charset = 'GB2312';
document.body.appendchild (สคริปต์);
ถ้า (โทรกลับ! = ไม่ได้กำหนด) {
script.onload = function () {
การโทรกลับ ();
-
-
-
สิ่งนี้จะไม่ทำให้เกิดการอุดตันหน้า แต่จะทำให้เกิดปัญหาอื่น: ไฟล์ JavaScript ที่โหลดในวิธีนี้ไม่ได้อยู่ในโครงสร้าง DOM ดั้งเดิมดังนั้นฟังก์ชันการเรียกกลับที่ระบุไว้ในเหตุการณ์ DOM-Ready (DomContentLoaded) และเหตุการณ์ Window.Onload ไม่ถูกต้อง
ในเวลานี้เราจะนึกถึงการใช้ไลบรารีฟังก์ชั่นภายนอกเพื่อจัดการปัญหาการโหลด JS อย่างมีประสิทธิภาพ
ไปที่หัวข้อหลักและพูดคุยเกี่ยวกับ lab.js
lab.js
หากเราใช้วิธีการดั้งเดิมในการโหลด JS รหัสที่เราเขียนโดยทั่วไปจะมีสไตล์ที่แสดงในรหัสต่อไปนี้
การคัดลอกรหัสมีดังนี้:
<script src = "aaa.js"> </script>
<script src = "bbb-a.js"> </script>
<script src = "bbb-b.js"> </script>
<script type = "text/javascript">
initaaa ();
initbbb ();
</script>
<script src = "ccc.js"> </script>
<script type = "text/javascript">
initccc ();
</script>
หากเราใช้ lab.js เพื่อใช้ฟังก์ชันรหัสด้านบนเราใช้วิธีการต่อไปนี้
การคัดลอกรหัสมีดังนี้:
<!-โหลดไลบรารี lab.js ก่อน->
<script src = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js"> </script>
<script type = "text/javascript">
$ lab
.Script ("aaa.js"). รอ () // เมธอด. wait () โดยไม่มีพารามิเตอร์หมายถึงการรันไฟล์ JavaScript ที่เพิ่งโหลดทันที
.Script ("BBB-A.JS")
.script ("bbb-b.js") // โหลด aaa.js bbb-a.js bbb-b.js จากนั้นดำเนินการ initaaa initbbbbb
.wait (function () {// เมธอด. wait () ที่มีพารามิเตอร์จะเรียกใช้ไฟล์ JavaScript ที่โหลดทันที แต่ยังเรียกใช้ฟังก์ชั่นที่ระบุในพารามิเตอร์
initaaa ();
initbbb ();
-
.Script ("ccc.js") // โหลด ccc.js และดำเนินการเมธอด initccc หลังจากโหลด ccc.js
. Wait (function () {
initccc ();
-
</script>
โซ่ห้องปฏิบัติการ $ หลายตัวสามารถทำงานได้ในเวลาเดียวกัน แต่พวกเขามีความเป็นอิสระอย่างสมบูรณ์และไม่มีความสัมพันธ์กับคำสั่งซื้อ หากคุณต้องการตรวจสอบให้แน่ใจว่าไฟล์ JavaScript ทำงานหลังจากไฟล์อื่นคุณสามารถเขียนได้ในการดำเนินการห่วงโซ่เดียวกันเท่านั้น เฉพาะเมื่อสคริปต์บางอย่างไม่เกี่ยวข้องอย่างสมบูรณ์คุณควรพิจารณาแยกพวกเขาออกเป็นห่วงโซ่ห้องปฏิบัติการ $ ที่แตกต่างกันซึ่งบ่งชี้ว่าไม่มีความสัมพันธ์ระหว่างพวกเขา
ตัวอย่างการใช้งานทั่วไป
การคัดลอกรหัสมีดังนี้:
$ lab
.Script ("script1.js") // script1, script2 และ script3 ไม่ได้ขึ้นอยู่กับกันและกันและสามารถดำเนินการในลำดับใด ๆ
.Script ("script2.js")
.Script ("script3.js")
. Wait (function () {
การแจ้งเตือน ("สคริปต์ 1-3 ถูกโหลด!");
-
.Script ("script4.js") // คุณต้องรอ script1.js, script2.js, script3.js เพื่อดำเนินการก่อนการดำเนินการ
.wait (function () {script4func ();});
การคัดลอกรหัสมีดังนี้:
$ lab
.Script ("script.js")
.Script ({src: "script1.js", พิมพ์: "text/javascript"})
.Script (["script1.js", "script2.js", "script3.js"])
.Script (ฟังก์ชัน () {
// สมมติว่า `_is_ie` กำหนดโดยหน้าโฮสต์ว่าเป็นจริงใน IE และ FALSE ในเบราว์เซอร์อื่น ๆ
ถ้า (_is_ie) {
กลับ "ie.js"; // เฉพาะใน IE สคริปต์นี้จะถูกโหลด
-
อื่น {
คืนค่า null; // ถ้าไม่อยู่ใน IE การเรียกสคริปต์นี้จะถูกละเว้นอย่างมีประสิทธิภาพ
-
-
ดู lab.js การโหลดข้อมูลในคอนโซล
หากคุณต้องการดีบักหรือดูข้อมูลการโหลด JS แต่ละรายการบนคอนโซลคุณสามารถใช้วิธี $ lab.setGlobaldefaults สำหรับรายละเอียดโปรดดูตัวอย่างรหัส
การคัดลอกรหัสมีดังนี้:
<!-โหลด Lab Library Lab.js ของ CTRIP ก่อนและดาวน์โหลดออนไลน์->
<script type = "text/javascript" src = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js" charset = "gb2312"
<script type = "text/javascript">
$ lab.setGlobaldefaults ({debug: true}) // เปิดการดีบัก
$ lab
// ห่วงโซ่การดำเนินการครั้งแรก
.Script ('http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js')
.Script ('http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js')
// ห่วงโซ่การดำเนินการครั้งที่สอง
. Wait (function () {
//console.log(window.$)
//console.log(window._)
-
// ห่วงโซ่การดำเนินการครั้งที่สาม
.Script ('http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js'
.Script ('http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js')
// ห่วงโซ่การดำเนินการครั้งที่สี่
. Wait (function () {
// console.log (plugin1function)
// console.log (plugin2function)
-
// ห่วงโซ่การดำเนินการครั้งที่ห้า
.Script ('JS/AAA.JS')
.Script ('JS/BBB.JS')
// ห่วงโซ่การดำเนินการครั้งที่หก
. Wait (function () {
// console.log (module1function)
// console.log (module2function)
-
</script>
ในเวลานี้เปิดคอนโซลและดูข้อมูลดังที่แสดงในรูปต่อไปนี้:
ฉันเชื่อว่าคุณจะประหลาดใจกับฟังก์ชั่นการดีบักของ Lab.js เมื่อคุณเห็นสิ่งนี้ ในความเป็นจริง Lab.js ค่อนข้างทรงพลังและฉันแค่เข้าใจคุณสมบัติง่าย ๆ บางอย่าง เขียนมันลงก่อนและแบ่งปันกับมัน นอกจากนี้ยังเป็นเพื่อความสะดวกของตัวเองในอนาคต