วันนี้มีคนถามฉันว่าจะใช้แถบความคืบหน้าในการโหลด Javascript เช่นกล่องจดหมาย 163 ได้อย่างไร
ฉันไม่รู้ แต่มันก็ไม่ยากเลยที่จะนำไปใช้ เพราะ มี onload และ onreadystatechange นอกจากนี้เรายังมีแอตลาส
มีคลาสใน Atlas: Sys.ScriptLoader หน้าที่ของมันคือการโหลดไฟล์สคริปต์หลายไฟล์ในเพจตามลำดับ ก่อนที่จะนำไปใช้เรามาวิเคราะห์โค้ดของคลาสนี้กันก่อน
1Sys.ScriptLoader = ฟังก์ชั่น() {
2
3 //อาร์เรย์ของวัตถุอ้างอิงสำหรับสคริปต์ทั้งหมด
4 var _references;
5 // ฟังก์ชั่น Callback ดำเนินการหลังจากโหลดสคริปต์ทั้งหมดแล้ว
6 var _completionCallback;
7 // บริบท (พารามิเตอร์) ที่ให้ไว้เมื่อเรียกใช้ฟังก์ชันโทรกลับ
8 var _callbackContext;
9
10 // องค์ประกอบ HTTP () ของสคริปต์ที่กำลังโหลดอยู่
11 คือ _currentLoadingReference;
12 // ฟังก์ชั่นโทรกลับที่ถูกเรียกหลังจากโหลดสคริปต์ปัจจุบัน
13 var _currentOnScriptLoad;
14
15 // วิธีเดียวของ ScriptLoader คือการส่งผ่านพารามิเตอร์สามตัว ความหมายของพารามิเตอร์จะไม่ถูกทำซ้ำ
16 this.load = ฟังก์ชั่น (อ้างอิง, เสร็จสิ้นการโทรกลับ, callbackContext) {
17 _references = ข้อมูลอ้างอิง;
18 _completionCallback = โทรกลับเสร็จสิ้น;
19 _callbackContext = คอนเท็กซ์เรียกกลับ;
20
21 โหลดอ้างอิง();
ยี่สิบสอง }
ยี่สิบสาม
24 // เริ่มโหลดข้อมูลอ้างอิง
25 ฟังก์ชั่น loadReferences() {
26 // หากสคริปต์กำลังโหลดอยู่
27 // ซึ่งหมายความว่าวิธีนี้ไม่ได้ถูกเรียกเป็นครั้งแรก แต่ถูกโหลดในสคริปต์
28 // เรียกหลังจากเสร็จสิ้นเพื่อโหลดสคริปต์ถัดไป
29 ถ้า (_currentLoadingReference) {
30 // ตรวจสอบ readyState ขององค์ประกอบสคริปต์ปัจจุบัน ซึ่งเสร็จสมบูรณ์ภายใต้ IE
31 // โหลดเบราว์เซอร์อื่นเช่น FF แล้ว (จริงๆ แล้ว FF ไม่มีแอตทริบิวต์นี้
32 // แต่โค้ดด้านล่างนี้จะกำหนดให้โหลด)
33 // หากการโหลดล้มเหลว ให้ออก
34 ถ้า ((_currentLoadingReference.readyState != 'โหลดแล้ว') &&
35 (_currentLoadingReference.readyState != 'สมบูรณ์')) {
36 กลับ;
37 }
38 อื่น ๆ {
39 // เมื่อเข้าสู่สาขานี้แสดงว่าโหลดสำเร็จ
40
41 // หากสคริปต์ปัจจุบันกำหนดฟังก์ชัน onLoad
42 ถ้า (_currentOnScriptLoad) {
43 // โทรผ่าน eval (นี่คือปัญหา)
44 eval(_currentOnScriptLoad);
45 //ตั้งค่าเป็น null เพื่อปล่อยทรัพยากร
46 _currentOnScriptLoad = โมฆะ;
47 }
48
49 // ตั้งค่าเหตุการณ์ที่เกี่ยวข้องเป็นโมฆะเพื่อให้แน่ใจว่าทรัพยากรถูกเผยแพร่
50 ถ้า (Sys.Runtime.get_hostType() != Sys.HostType.InternetExplorer) {
51 // หากเบราว์เซอร์ปัจจุบันไม่ใช่ IE โปรดดูโค้ดด้านล่าง
52 // คุณจะพบว่าเหตุการณ์ onload ถูกกำหนดไว้สำหรับ
53 _currentLoadingReference.onload = null;
54 }
55 อื่น ๆ {
56 // หากเป็น IE ดูโค้ดด้านล่างแล้วคุณจะพบ
57 // กำหนดเหตุการณ์ onreadystatechange
58 _currentLoadingReference.onreadystatechange = null;
59 }
60
61 //ในที่สุดก็ปล่อยการอ้างอิง ปัจจุบัน
62 _currentLoadingReference = null;
63}
64}
65
66 // หากยังมีสคริปต์ที่ไม่ได้โหลดอยู่
67 ถ้า (_references.length) {
68 // หมดคิว.
69 การอ้างอิง var = _references.dequeue();
70 // สร้าง
71 var scriptElement = document.createElement('script');
72 //ตั้งค่า ปัจจุบันและฟังก์ชั่นการโทรกลับปัจจุบันเพื่อให้การโหลดสำเร็จ
73 _currentLoadingReference = scriptElement;
74 _currentOnScriptLoad = การอ้างอิง.onscriptload;
75
76 ถ้า (Sys.Runtime.get_hostType() != Sys.HostType.InternetExplorer) {
77 // หากไม่ใช่ IE ให้ตั้งค่าแอตทริบิวต์ readyState สำหรับ
78 // และใช้เหตุการณ์ onload
79 scriptElement.readyState = 'โหลดแล้ว';
80 scriptElement.onload = loadReferences;
81 }
82 อื่น ๆ {
83 // ถ้าเป็น IE ให้ใช้เหตุการณ์ onreadystatechange
84 scriptElement.onreadystatechange = loadReferences;
85}
86 scriptElement.type = 'ข้อความ/จาวาสคริปต์';
87 scriptElement.src = อ้างอิง URL;
88
89 // เพิ่ม ใน DOM
90 var headElement = document.getElementsByTagName('head')[0];
91 headElement.appendChild(scriptElement);
92
93 กลับ;
94}
95
96 // หากการดำเนินการมาถึงจุดนี้ แสดงว่าสคริปต์ทั้งหมดถูกโหลดแล้ว
97 // หากมีการกำหนดฟังก์ชันการเรียกกลับที่ดำเนินการหลังจากโหลดสคริปต์ทั้งหมดแล้ว
98 // จากนั้นดำเนินการและปล่อยทรัพยากร
99 ถ้า (_completionCallback) {
100 เสร็จสิ้นCallback = _completionCallback;
101 คือ callbackContext = _callbackContext;
102
103 _completionCallback = โมฆะ;
104 _callbackContext = โมฆะ;
105
106 เสร็จสิ้นการโทรกลับ (callbackContext);
107 }
108
109 _references = โมฆะ;
110 }
111}
112Sys.ScriptLoader.registerClass('Sys.ScriptLoader');
จะเห็นได้ว่าวิธีการสำหรับ Sys.ScriptLoader ในการโหลดสคริปต์คือการเพิ่มองค์ประกอบ ให้กับ
อันที่จริง โค้ดของ Sys.ScriptLoader นั้นเรียบง่ายมากและความคิดเห็นที่ฉันเพิ่มดูเหมือนจะไม่จำเป็น เป็นที่น่าสังเกตว่าทรัพยากรทั้งหมดจะถูกปล่อยออกมาให้มากที่สุด ให้ความสนใจเป็นพิเศษกับโค้ดที่เริ่มต้นจากบรรทัดที่ 99 อันดับแรกเนื้อหา if จะใช้ตัวแปรชั่วคราวเพื่อรักษาตัวแปรร่วมสองตัวไว้ จากนั้นจึงปล่อยตัวแปรส่วนกลาง จุดประสงค์คือเพื่อหลีกเลี่ยงการรั่วไหลของหน่วยความจำที่เกิดจากข้อยกเว้นที่เกิดขึ้นเมื่อมีการดำเนินการ Callback เสร็จสมบูรณ์ แม้ว่าจะมีความเป็นไปได้เพียงหนึ่งในหมื่นก็ตาม ยิ่งมี Javascript มากเท่าไหร่ ก็ยิ่งทำให้หน่วยความจำรั่วได้ง่ายขึ้นเท่านั้น วิธีที่ดีที่สุดคือให้ความสนใจกับปัญหานี้เมื่อเขียนโค้ด JS
ต่อไป อธิบายพารามิเตอร์แรกของวิธีการโหลด การอ้างอิง เดิมทีฉันคิดว่านี่คืออาร์เรย์ของคลาส Sys.Reference แต่ฉันพบว่าจริงๆ แล้วมันแตกต่างออกไปมาก ยังไงก็ลองดูโค้ดของคลาสนี้ดูครับ
1Sys.Reference = ฟังก์ชั่น () {
2
3 var _ส่วนประกอบ;
4 var _onload;
5
6 this.get_component = ฟังก์ชั่น() {
7 กลับ _ส่วนประกอบ;
8}
9 this.set_component = ฟังก์ชั่น (ค่า) {
10 _ส่วนประกอบ = ค่า;
11 }
12
13 this.get_onscriptload = ฟังก์ชั่น() {
14 กลับ _onload;
15}
16 this.set_onscriptload = ฟังก์ชั่น (ค่า) {
17 _onload = ค่า;
18}
19
20 this.dispose = ฟังก์ชั่น() {
21 _ส่วนประกอบ = โมฆะ;
ยี่สิบสอง }
ยี่สิบสาม
24 this.getDescriptor = ฟังก์ชั่น() {
25 var td = Sys.TypeDescriptor ใหม่ ();
26
27 td.addProperty('ส่วนประกอบ', วัตถุ);
28 td.addProperty('onscriptload', สตริง);
29 กลับ td;
30}
31}
32Sys.Reference.registerSealedClass('Sys.Reference', null, Sys.ITypeDescriptorProvider, Sys.IDisposable);
33Sys.TypeDescriptor.addType('สคริปต์', 'อ้างอิง', Sys.Reference);
เมื่อให้ความสนใจกับโค้ดของคลาส Sys.ScriptLoader เราจะเห็นว่าแต่ละองค์ประกอบของอาร์เรย์อ้างอิงนั้นแท้จริงแล้วเป็นเพียง "{ url : " http://www.sample.com/sample.js ", onscriptload : " alert(1)"}" ในรูปแบบวัตถุ แต่ก็ไม่เป็นไร คุณสามารถใช้ JSON เพื่อสร้างอาร์เรย์ดังกล่าวได้อย่างง่ายดาย
ณ จุดนี้ ฉันคิดว่าทุกคนควรคิดถึงวิธีใช้ Sys.ScriptLoader เพื่อสร้างแถบความคืบหน้าในการโหลด JS ได้อย่างง่ายดาย แต่ตอนนี้ฉันได้เขียนไว้ที่นี่แล้ว ฉันจะนำไปปฏิบัติด้วยวิธีง่ายๆ ต่อไป
อย่างแรกคือไฟล์ aspx
1<%@ ภาษาของเพจ = "C#" %>
2
3http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
4
5