หลายคนอาจพบปัญหาในการโหลดไฟล์ JS อื่น ๆ ใน JavaScript แต่เพื่อนหลายคนอาจไม่รู้วิธีตัดสินว่าไฟล์ JS ที่เราต้องการโหลดนั้นถูกโหลดหรือไม่ หากเราไม่เสร็จสิ้นการโหลดเราจะไม่ประสบความสำเร็จ บทความนี้อธิบายวิธีการโหลดไฟล์ JS อื่น ๆ ใน JS และเรียกใช้ฟังก์ชั่นการเรียกกลับหลังจากโหลด
เราสามารถสร้างองค์ประกอบ <Script> แบบไดนามิกจากนั้นโหลดสคริปต์โดยการเปลี่ยนแอตทริบิวต์ SRC แต่เราจะรู้ได้อย่างไรว่าไฟล์สคริปต์ได้รับการโหลดแล้ว? เนื่องจากฟังก์ชั่นบางอย่างของเราจำเป็นต้องดำเนินการหลังจากโหลดสคริปต์และมีผล
หลังจากค้นหาทรัพยากรบนเครือข่ายฉันพบว่าในเบราว์เซอร์ IE คุณสามารถใช้ OnReadyStateChange ขององค์ประกอบ <Script> เพื่อตรวจสอบการเปลี่ยนแปลงในสถานะการโหลดและตรวจสอบว่าสคริปต์นั้นโหลดหรือเสร็จสมบูรณ์โดยการตัดสินว่า ReadeState นั้นโหลดหรือเสร็จสมบูรณ์ แทนที่จะเป็นเบราว์เซอร์ IE คุณสามารถใช้ OnLoad เพื่อตรวจสอบโดยตรงว่าสคริปต์นั้นโหลดหรือไม่
กระบวนการดำเนินการอย่างง่ายมีลักษณะเช่นนี้:
// IE ภายใต้: var script = document.createElement ("script"); script.setAttribute ("type", "text/javascript"); script.onreadystatechange = function () {ถ้า (this.readystate == "โหลด" }} script.setAttribute ("src", สคริปต์ [i]); // opera, ff, chrome, ฯลฯ : var script = document.createElement ("script"); script.setAttribute ("type", "text/javascript")); ประสบความสำเร็จ! ");} script.setAttribute (" src ", สคริปต์ [i]);หลักการนั้นง่ายมาก ตามหลักการง่าย ๆ ทั้งสองนี้เราทำการปรับเปลี่ยนบางอย่างและฉันเปลี่ยนเป็นสองฟังก์ชั่นคือการโหลดแบบอนุกรมและสคริปต์การโหลดแบบขนาน
เมื่อผ่านอาร์เรย์ที่มีพา ธ ไฟล์ JS หลายตัวฟังก์ชั่นการโหลดแบบอนุกรมเริ่มต้นจากการโหลดไฟล์สคริปต์แรก ทุกครั้งที่มีการโหลดสำเร็จไฟล์สคริปต์ถัดไปจะถูกโหลด หลังจากการโหลดทั้งหมดเสร็จสิ้นฟังก์ชั่นการโทรกลับจะถูกดำเนินการ การโหลดแบบขนานคือการโหลดไฟล์สคริปต์ทั้งหมดตั้งแต่ต้นนั่นคือพวกเขาเริ่มต้นจากจุดเดียวกันและเมื่อการโหลดทั้งหมดเสร็จสิ้นฟังก์ชั่นการเรียกกลับจะถูกดำเนินการ
หลังจากการทดสอบฟังก์ชั่นทั้งสองนี้เข้ากันได้กับเบราว์เซอร์กระแสหลักทั้งหมด
/*** การโหลด concatenate ของสคริปต์ที่ระบุ* concatenate loading [asynchronous] การโหลดทีละรายการแต่ละการโหลดเสร็จสมบูรณ์แล้วตัวถัดไปจะโหลด* หลังจากการโหลดทั้งหมดเสร็จสิ้นการเรียกกลับถูกเรียกใช้* @param array {ถ้า (typeof (สคริปต์)! = "object") var scripts = [สคริปต์]; var head = document.getElementsByTagname ("head") รายการ (0) || Document.DocumentElement; var s = array ใหม่ (), last = scripts.length - 1, recursiVeload = function (i) {// Recursives s [i] = document.createElement ("สคริปต์"); s [i] .setAttribute ("type", "text/javascript"); s [i] .onload = s [i] .onreadyStateChange = function () {// แนบตัวจัดการสำหรับเบราว์เซอร์ทั้งหมดถ้า (!/*@cc_on!@*/0 || this.readystate == "โหลด" || this.readystate == "เสร็จสมบูรณ์") this.parentNode.removeChild (นี่); ถ้า (i! = สุดท้าย) เรียกใช้ซ้ำ (i + 1); อื่นถ้า (typeof (callback) == "function") callback (); }} s [i] .setAttribute ("src", สคริปต์ [i]); head.appendchild (s [i]); - RecursiVeload (0);} /*** โหลดสคริปต์ที่ระบุในแบบขนาน* โหลดในแบบขนาน [synchronous] ในเวลาเดียวกันโดยไม่คำนึงว่าโหลดก่อนหน้านี้เสร็จสมบูรณ์หรือไม่โหลดทั้งหมดโดยตรง* เรียกใช้การเรียกกลับหลังจากการโหลดทั้งหมด* @param array ParallElloadScripts (สคริปต์, การโทรกลับ) {ถ้า (typeof (สคริปต์)! = "object") var scripts = [สคริปต์]; var head = document.getElementsByTagname ("head") รายการ (0) || document.documentElement, s = new Array (), โหลด = 0; สำหรับ (var i = 0; i <scripts.length; i ++) {s [i] = document.createElement ("สคริปต์"); s [i] .setAttribute ("type", "text/javascript"); s [i] .onload = s [i] .onreadyStateChange = function () {// แนบตัวจัดการสำหรับเบราว์เซอร์ทั้งหมดถ้า (!/*@cc_on!@*/0 || this.readystate == "โหลด" || this.readystate == "เสร็จสมบูรณ์") {โหลด ++;; this.onreadyStateChange = null; this.parentNode.removeChild (นี่); if (โหลด == scripts.length && typeof (callback) == "function") callback (); - S [i] .setAttribute ("SRC", สคริปต์ [i]); head.appendchild (s [i]); -ที่นี่แท็ก <script> จะถูกแทรกลงในแท็ก <head> แบบไดนามิกในหน้าและองค์ประกอบแท็กจะถูกลบออกโดยอัตโนมัติหลังจากโหลด
หากคุณระมัดระวังคุณจะพบว่าวิธีการที่เรียกว่าการรวบรวมแบบมีเงื่อนไขถูกใช้ที่นี่เป็นนิพจน์ (!/*@cc_on!@*/0) เพื่อพิจารณาว่าไม่ใช่เบราว์เซอร์ IE หรือไม่ การรวบรวมแบบมีเงื่อนไขไม่ได้เป็นจุดสนใจของบทความนี้ หากคุณสนใจคุณสามารถค้นหาสื่อที่เกี่ยวข้องเพื่อการเรียนรู้
วิธีการใช้ฟังก์ชั่นทั้งสองนี้: ที่นี่เราประกาศตัวแปรอาร์เรย์ที่มีที่อยู่ไฟล์ JS ระยะไกลสองตัว (แน่นอนสคริปต์แท็ก <Script> รองรับการสนับสนุนข้ามโดเมน):
var scripts = ["http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "http://wellstyled.com/files/jquery.debug/jquery.debug.jshing และปลั๊กอิน jQuery debug // จากนั้นคุณสามารถใช้วิธีการต่อไปนี้เพื่อโทรและเรียกใช้การโทรกลับหลังจากประสบความสำเร็จ seriesloadscripts (สคริปต์, function () { / * debug = new $ .debug ({posto: {x: 'ขวา', y: 'bottom'}, ความกว้าง: '480px', ความสูง: '50%'ฟังก์ชั่นที่โหลดเป็นอนุกรมใช้ที่นี่ แน่นอนคุณยังสามารถใช้ฟังก์ชั่นการโหลดแบบขนาน สามารถใช้งานได้ตามสถานการณ์ ขอแนะนำให้แต่ละสคริปต์ถัดไปมีการพึ่งพาสคริปต์ก่อนหน้านี้เพื่อใช้การโหลดแบบอนุกรมมิฉะนั้นใช้การเชื่อมต่อแบบขนานเนื่องจากในหลักการการเชื่อมต่อแบบขนานนั้นเร็วกว่าการเชื่อมต่ออนุกรม
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น