ช่วงการใช้งาน:
สำหรับโครงการการจัดการข้อมูลเช่น OA, MIS, ERP ฯลฯ เว็บไซต์ไม่ได้รับการพิจารณาในขณะนี้
ปัญหาที่พบ:
ในการทำโครงการให้เสร็จสมบูรณ์คุณมักจะต้องอ้างอิงไฟล์ JS จำนวนมากเช่น jQuery.js, Easyui ฯลฯ นอกจากนี้ยังมีคอลัมน์บางส่วนของไฟล์ JS ที่ฉันเขียนด้วยตัวเองดังนั้นไฟล์เหล่านี้จะโหลดได้อย่างไร? หากไฟล์เปลี่ยนไปไคลเอนต์จะอัปเดตแคชได้อย่างไรในเวลา มันจะดียิ่งขึ้นหากประสิทธิภาพการทำงานของจุดสามารถปรับปรุงได้
เป้า:
1. สามารถอ้างอิงไฟล์ JS ได้อย่างง่ายดาย
2. พยายามใช้แคชต่างๆเพื่อหลีกเลี่ยงการอ่านไฟล์บ่อยครั้งจากเซิร์ฟเวอร์
3. หากไฟล์ JS ได้รับการอัปเดตหรือเพิ่มหรือลดลงลูกค้าจะต้องสามารถอัปเดตโดยอัตโนมัติและทันที
4. นำไฟล์ JS กลับมาใช้ซ้ำ
โครงสร้างหน้า:
โดยทั่วไปโครงการเช่น OA และ MIS ส่วนใหญ่จะถูกนำมาใช้โดยใช้ Frameset หรือ IFRAME ซึ่งนำแนวคิดของหน้าหลักและหน้าเด็ก เราสามารถใช้สิ่งนี้เพื่อสร้างความยุ่งยาก
หน้าเว็บสามารถแบ่งออกเป็นสามส่วน: เชลล์หน้าแรกฉลากรายการข้อมูลแบบฟอร์ม (เพิ่มแก้ไข) เนื่องจากวิธีการโหลด JS ที่นี่จำเป็นต้องใช้โครงสร้างหน้านี้และเป็นไปได้อย่างแม่นยำด้วยเหตุผลนี้ว่าเว็บไซต์ไม่ได้รับการสนับสนุนในขณะนี้
ดูเหมือนคุ้นเคยกับภาพนี้ ใช่นั่นคือโครงสร้าง
ข้อความ
ทุกวันนี้เมื่อพูดถึงแอปพลิเคชันเวอร์ชันเว็บมันพึ่งพา JS ต่าง ๆ มากขึ้นเช่น JQuery ของบุคคลที่สาม, Easyui, My97 ฯลฯ รวมถึง JS ต่าง ๆ ที่เขียนด้วยตัวเอง ต้องใช้ฟังก์ชั่นที่มากขึ้นเรื่อย ๆ จำเป็นต้องใช้ JS มากขึ้นเรื่อย ๆ และมีการแก้ไขไฟล์ JS มากขึ้นบ่อยครั้ง ปัญหามากมายเกิดขึ้นเช่นการเขียน <script src = ""> สำหรับแต่ละหน้า มันลำบากเกินไป คุณต้องเปลี่ยนหน้ากี่หน้าเพื่อเพิ่มไฟล์ JS ใหม่? จะอัปเดตไฟล์ JS ได้อย่างไรทันที? วิธีทำให้ไคลเอนต์โหลด JS เร็วขึ้น ไฟล์ JS บางไฟล์ยังมีการพึ่งพา จะตรวจสอบคำสั่งโหลดได้อย่างไร? บทความนี้เกี่ยวกับการแบ่งปันวิธีแก้ปัญหาของฉัน
การโหลดแบบไดนามิก
เห็นได้ชัดว่ามันลำบากในการใช้ <Script> เพื่อโหลด JS บนหน้าดังนั้นฉันควรทำอย่างไร? หลังจากคิดถึงมันฉันยังคงใช้การโหลดแบบไดนามิกเพื่อแก้ปัญหา ฉันยังค้นหาออนไลน์และพบว่ามีวิธีการมากมายรวมถึงวิธีการที่เขียนด้วยตัวเองและผู้ที่จัดเป็นกรอบ (เช่น SEEJS) บางครั้งฉันก็ยังรู้สึกว่าฉันมีทักษะมากกว่าในการทำหนึ่งดังนั้นฉันวางแผนที่จะเขียนด้วยตัวเอง
วิธีการโหลดแบบไดนามิก? ใช้วิธีการที่จัดทำโดย jQuery? นี่ก็โอเค แต่หน้าต้องอ้างถึง jQuery และ JS ที่ฉันเขียนเพื่อโหลดไฟล์ JS กล่าวอีกนัยหนึ่งถ้าคุณต้องเขียนสอง <สคริปต์> s บนหน้าเว็บมันจะลำบาก หากคุณสามารถเขียนได้คุณจะต้องไม่เขียนสอง แม้ว่ามันจะเป็นอีกหนึ่ง แต่มันก็ลำบากมากที่จะมีอีกหนึ่ง ดังนั้นฉันจึงตัดสินใจที่จะเขียนด้วยมือด้วยวิธีการโหลดแบบไดนามิกด้วยมือด้วยมือ
ฉันควรทำอย่างไรถ้าฉันไม่สามารถเขียนได้ ป้า Baidu มาและช่วย หลังจากค้นหาทุกสิ่งในที่สุดฉันก็พบวิธีที่ค่อนข้างเหมาะดังนั้นฉันจะใช้สิ่งนี้
การคัดลอกรหัสมีดังนี้:
/* ฟังก์ชั่นที่ใช้การโหลดแบบไดนามิกของ JS มาจากอินเทอร์เน็ต หลังจากการดัดแปลงเล็กน้อยมันสามารถเข้ากันได้กับ IE10 */
var loadscript =
-
$$: ฟังก์ชั่น (id) {return document.getElementById (id); -
แท็ก: ฟังก์ชัน (องค์ประกอบ) {return document.getElementByTagname (องค์ประกอบ); -
CE: ฟังก์ชั่น (องค์ประกอบ) {return document.createElement (องค์ประกอบ); -
JS: ฟังก์ชั่น (URL, การโทรกลับ) {
var s = loadscript.ce ('สคริปต์');
s.type = "ข้อความ/javascript";
s.src = url;
if (document.documentMode == 10 || document.documentMode == 9) {
s.onerror = s.onload = โหลด;
} อื่น {
S.onreadyStateChange = พร้อม;
s.onerror = s.onload = โหลด;
-
loadscript.tag ('head') [0] .appendchild (s);
ฟังก์ชั่นพร้อม () {/*ie7.0/ie10.0*/
if (s.readyState == 'โหลด' || s.readyState == 'เสร็จสมบูรณ์') {
การโทรกลับ ();
-
-
ฟังก์ชั่นโหลด () {/*chrome/ie10.0*/
การโทรกลับ ();
-
-
-
คำสั่งซื้อ
รหัสใหม่เสร็จสมบูรณ์ ต่อไปนี้เป็นวิธีโหลดไฟล์ JS อื่น ๆ เนื่องจากมีไฟล์จำนวนมากและมีการอ้างอิงบางอย่างฉันจะคิดถึงมันและสร้างพจนานุกรมของไฟล์ JS จากนั้นทำลำดับการโหลดและโหลดตามลำดับนี้
เพื่อให้มีความเสถียรมากขึ้นฉันตัดสินใจที่จะใช้วิธีการโหลดทีละตัวนั่นคือโหลด JS หนึ่งตัวแล้วโหลด JS อื่น สิ่งนี้ทำให้มั่นใจได้ว่าการพึ่งพา แน่นอนว่าข้อเสียคือความเร็วในการโหลดจะช้าลง โดยทั่วไปหน้าเว็บสามารถโหลดได้ด้วยไฟล์ JS หลายไฟล์ซึ่งจะเร็วขึ้น
ใช้แคช
โดยทั่วไปเบราว์เซอร์จะมีแคชสำหรับแหล่งข้อมูลต่าง ๆ (เช่นหน้าเว็บ, รูปภาพ, JS, CSS ฯลฯ ) และจะไม่ดาวน์โหลดไปยังเซิร์ฟเวอร์อีกต่อไปหากมีอยู่แล้ว ดูเหมือนดี แต่มีสองปัญหา:
A. เบราว์เซอร์กำหนดได้อย่างไรว่าไฟล์ JS แคชเป็นล่าสุด?
B. ไฟล์ JS ได้รับการอัปเดตแล้ว จะบังคับให้เบราว์เซอร์อัปเดตได้อย่างไร?
เบราว์เซอร์ตัดสินอย่างไร? ฉันไม่รู้เกี่ยวกับขั้นตอนเฉพาะ แต่ฉันรู้ว่ามีขั้นตอนที่จะไปที่เซิร์ฟเวอร์เพื่อถามว่าไฟล์ JS ฉันแคชเป็นล่าสุดหรือไม่จากนั้นฉันสามารถตรวจสอบได้ว่าแคชท้องถิ่นเป็นล่าสุดหรือไม่ ถ้าเป็นล่าสุดฉันจะไม่รำคาญ ถ้าไม่ใช่ฉันจะดาวน์โหลดอันล่าสุด กล่าวคือแม้ว่าไคลเอนต์จะมีแคชของไฟล์ JS แล้วเบราว์เซอร์ก็ต้องยืนยันว่าเป็นล่าสุดและจะยังคงไปที่เซิร์ฟเวอร์เพื่อถาม นี่คือการต่อสู้ แน่นอนโดยทั่วไปกระบวนการนี้จะเร็วมาก แต่บางครั้งกระบวนการนี้จะช้ามาก
ดังนั้นจึงเป็นการดีกว่าที่จะพยายามหลีกเลี่ยงการโหลด JS ดังนั้นจึงมีการแนะนำ "การใช้ซ้ำของไฟล์ JS"
อัปเดตไฟล์ JS
ไฟล์ JS ได้รับการอัปเดตแล้ว แต่เบราว์เซอร์ยังคงใช้ไฟล์ JS ก่อนหน้านี้เนื่องจากมีการแคชและเขาดื้อรั้นว่าไฟล์ JS แคชเป็นไฟล์ล่าสุด ฉันควรทำอย่างไร?
วิธีที่ง่ายที่สุดคือโหลด JS ด้วยหมายเลขเวอร์ชันตามด้วย หากมีการอัปเดตหมายเลขเวอร์ชันจะเป็น +1 ตัวอย่างเช่น xxx.js? v = 1 หลังจากอัปเดตไฟล์ js มันคือ xxx.js? v = 2 ด้วยวิธีนี้ JS จะได้รับการปรับปรุงอย่างแน่นอน
ดูเหมือนง่าย แต่จะเพิ่มหมายเลขเวอร์ชันนี้ได้อย่างไร? จะอัปเดตหมายเลขเวอร์ชันเองได้อย่างไร?
นำกลับมาใช้ใหม่
เราต้องดูรูปภาพด้านบนก่อนซึ่งเป็นโครงสร้างหน้าด้วยหน้าเชลล์ (หรือหน้าแรก) ซึ่งเราเรียกหน้าหลัก มีหลายหน้าโหลดโดย iframes และเราเพิ่มลงในหน้าย่อย
วิธีการทั่วไปคือการโหลด jQuery.js บนหน้าหลักแล้ว jQuery.js ในหน้าเด็ก แน่นอนเมื่อหน้าย่อยกำลังโหลด jQuery.js มันจะถูกแยกออกจากแคชโดยตรงและโดยทั่วไปจะไม่รบกวนเซิร์ฟเวอร์อีกต่อไป
อย่างไรก็ตามเนื่องจากหน้าหลักได้รับการโหลดทำไมหน้าเด็กจึงต้องโหลดอีกครั้ง? สามารถโหลดได้โดยตรงในหน้าหลักหรือไม่? ฉันค้นหาออนไลน์และดูเหมือนจะไม่มีใครทำเช่นนั้น บางทีฉันอาจทางเลือกเกินไปฉันแค่ต้องการใช้วิธีนี้ ข้อได้เปรียบคือไฟล์ JS ทั้งหมดถูกโหลดในหน้าหลักและหน้าเด็กใช้ JS ที่โหลดในหน้าหลักโดยตรงเพื่อให้หน้าเด็กไม่จำเป็นต้องยุ่งกับไฟล์ JS นอกจากนี้ยังสามารถมีประสิทธิภาพมากขึ้น ท้ายที่สุดแม้ว่าคุณจะใช้แคชเพื่อโหลดคุณต้องตัดสินใจ จากนั้นเมื่อทำการดำเนินการโหลดจะยังคงมีการสูญเสียเล็กน้อย ยิ่งไฟล์ JS มากเท่าไหร่ก็ยิ่งชัดเจนมากขึ้นเท่านั้น
ดังนั้นวิธีการใช้งานดูเหมือนง่ายที่จะคิดเกี่ยวกับมัน
ใช้ jQuery ในหน้าหลัก
var aa = $ ('div'); // ค้นหา div ทั้งหมดในหน้าหลัก
เป็นไปได้ในหน้าย่อยหรือไม่?
var bb = top. $ ('div'); // div สามารถพบได้ แต่ไม่ใช่ div ของหน้าเด็ก แต่เป็น div ในหน้าหลัก
เกิดอะไรขึ้น? เหตุผลคือช่วงการค้นหา jQuery มีพารามิเตอร์สามตัว เรามักจะใช้เพียงคนแรกเท่านั้นและคนหลังจะถูกละเว้น พารามิเตอร์ที่สองคืออะไร? นั่นคือช่วงการค้นหา jQuery จะค้นหาที่ไหนเมื่อไม่มีการระบุ? ค้นหาในหน้าเว็บที่โหลด jQuery แทนที่จะค้นหาในหน้าเว็บที่เรียกว่า $
การแก้ปัญหานั้นง่ายมากเพียงเพิ่มพารามิเตอร์
var bb = top. $ ('div', เอกสาร); // ระบุช่วงการค้นหา: เอกสารของหน้าย่อย
เดี๋ยวก่อนมันดูน่ารำคาญมาก เมื่อเขียนสคริปต์เราควรพิจารณาด้วยว่าสคริปต์นี้ดำเนินการในหน้าหลักหรือในหน้าเด็กหรือไม่?
ตกลงทำแพ็คเกจง่ายๆเพื่อหลีกเลี่ยงปัญหานี้ เขียนฟังก์ชั่นในหน้าย่อย
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น $ (p1) {
กลับด้านบน $ (p1, เอกสาร);
-
โอเคทำงานเสร็จแล้วหรือยัง? ไม่แน่นอน! หากต้องการทำนายว่าจะเกิดอะไรขึ้นต่อไปโปรดฟังรายละเอียดครั้งต่อไป
PS: ดูตัวอย่างของตอนต่อไป มันเป็นรหัสการใช้งานที่เฉพาะเจาะจงและมีแนวคิดและแนวคิดบางอย่าง ฉันไม่รู้ว่าคุณมีอะไรอีกไหม ถ้าเป็นเช่นนั้นโปรดตอบกลับด้านล่าง ขอบคุณก่อน