วิธีการใช้การโหลดแบบโมดูลาร์ของหน้า HTML แบบดั้งเดิม

สำหรับเว็บไซต์ มีโมดูลที่ใช้ร่วมกันจำนวนมากระหว่างหลายเพจ เช่น ส่วนหัว ส่วนท้าย คอลัมน์ผู้ใช้ เป็นต้น สำหรับเฟรมเวิร์กที่มีเอ็นจิ้นการดูแบ็คเอนด์ การแชร์เหล่านี้ค่อนข้างง่ายที่จะแยกออกมา ตัวอย่างเช่น asp.net mvc มี MasterPage รูปแบบรวม @Section และฟังก์ชันอื่นๆ ที่สามารถแชร์ฟังก์ชันเทมเพลตการดูได้ แต่สำหรับ HTML คุณไม่โชคดีนัก ฟังก์ชั่นเหล่านี้ไม่มีอยู่ในไฟล์ html ดังนั้นเมื่อคุณใช้หน้า HTML ล้วนๆ ในการเขียนเว็บไซต์แอปพลิเคชัน คุณอาจต้องเผชิญกับงานซ้ำๆ เหล่านี้ แม้ว่าคุณจะสามารถซ้อน IFrames ได้ก็ตาม วิธีการดำเนินการนี้ไม่เหมาะและเป็นมิตร

เมื่อเร็วๆ นี้ ฉันติดตั้งเว็บไซต์ตามเฟรมเวิร์กของตัวเอง เนื่องจากเฟรมเวิร์กไม่มีกลไกการดูแบ็คเอนด์ ฉันจึงพบปัญหาประเภทนี้... เรามาดูสถานการณ์จริงกันก่อน

หน้า HTML สองหน้าข้างต้นไม่ซ้ำกันยกเว้นส่วนหลัก และบล็อกข้อมูลอื่นๆ ก็เหมือนกัน หากไม่มีเอ็นจิ้นการดูแบ็คเอนด์คุณคิดจะทำอะไร... ในตอนแรก การแก้ไขทุกครั้งจะต้องซิงโครไนซ์กับเพจอื่น ต่อมาฉันพบว่าการทำเช่นนี้จะทำให้ฉันตายอย่างแน่นอน หลังจากคิดอยู่สักพักฉันก็คิดวิธีแก้ปัญหาขึ้นมา

หลังจากคิดดูแล้ว ฉันพบว่าเทมเพลตสาธารณะสามารถแยกออกมาเป็นไฟล์ HTML ได้ (ชื่อไฟล์ชื่อชั่วคราวคือ PublicModule.html) ดังนี้:

 <แม่แบบ> <แม่แบบ id=ส่วนหัว> <div class=navbar-header> <ปุ่ม class=navbar-toggle ชนิดยุบ=ปุ่ม data-toggle=ยุบข้อมูลเป้าหมาย=.navbar-ยุบ> <span class=sr-only> สลับการนำทาง</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a class=navbar-brand href=/>.Net Library</a> </div> <div class=navbar-ยุบ บทบาทการล่มสลาย=การนำทาง> <div style=margin-top:15px;margin-left:120px; position:absolute;><span style=color:white;padding-top:20px;>XXXXX</span></div> <ul class=nav navbar-nav></ul> <ul class=nav navbar-nav navbar-right> <li> <a href=/Blog.html>บล็อก</a></li> <li><a href=https://github.com/IKende/FastHttpApi target=_blank>github.com</a></li> <li><a href=/admin/index.html>การจัดการเว็บไซต์</a></li> </ul> </div> </template > <เทมเพลต id=doc_tags_navbar> <div class=container-fluid style=padding:0px;> <ul class=nav navbar-nav btn-group-sm id=tagbar> <li><a style=font-weight:bold; padding-bottom:6px;padding-top:6px; href=/index.html>หน้าแรก</a></li> <li v-for=item ใน Data><a v- ผูก: title=item.Remark style=font-weight:bold; padding-bottom:6px;padding-top:6px; v-bind:href=['/index.html?tag='+item.ID]>{{item.Title}}</a></li> </ul> </div><!-- / .container-fluid --> <script> var tagbarControl; tagbarControl = new Vue({ el: '#tagbar', data: { ข้อมูล: [] } }); var result = รอ $ListDocTags(); tagbarControl.Data = result.Data; } ListDocTags(); </script> </template><templates>

กำหนดบล็อกเทมเพลตผ่านแท็กเทมเพลต จากนั้นกำหนด ID เฉพาะสำหรับแต่ละบล็อก นักเรียนบางคนอาจถามว่าเทมเพลตนั้นไม่ใช่แท็ก HTML ที่ถูกต้อง แล้วจะจัดการกับมันอย่างไร เบราว์เซอร์เทมเพลตที่ถูกต้องไม่สามารถจัดการได้ แต่ JQuery สามารถทำได้ ณ จุดนี้ ฉันเชื่อว่านักเรียนบางคนเข้าใจหลักการ

หลังจากกำหนดโมดูลแล้ว จะอ้างอิงเป็น HTML ได้อย่างไร? ในความเป็นจริง HTML ไม่รองรับฟังก์ชันดังกล่าว แต่เราสามารถกำหนดแอตทริบิวต์ที่กำหนดเองบางอย่างสำหรับ HTML ที่จะตีความโดย JQuery ที่นี่เรากำหนดแอตทริบิวต์สล็อตเพื่อระบุ ID เทมเพลต

 <div class=navbar navbar-inverse navbar-fixed-top> <div class=container slot=header> </div> </div> <nav class=navbar navbar-default style=padding:0px;margin:0px;min -ความสูง:0px; slot=doc_tags_navbar> </nav>

มีการกำหนดเทมเพลตและอ้างอิง HTML ของเพจด้วย ถัดไป จะต้องรวมเข้าด้วยกัน ณ จุดนี้เชื่อว่าเพื่อนๆ ที่คุ้นเคยกับ JQuery คงจะคิดออกแล้วว่าต้องทำอย่างไร :)

สำหรับ JQuery คุณสามารถโหลดหน้าโมดูลสาธารณะและแปลงเป็น DOM จากนั้นแทนที่องค์ประกอบด้วยช่องที่กำหนดไว้บนหน้า

 ฟังก์ชั่น moduleLoad(url) { $.get(url, function (result) { var html = $(result); var __templates = html; $([slot]).each(function () { var id = $(this) .attr('slot'); var body = $(__templates).find('#' + id).html(); $(this).html(body); }); });}$(document).ready(function () { moduleLoad(/PublicModule.html);});

โค้ดนี้เรียบง่ายและมีประสิทธิภาพ บันทึกสคริปต์ทั้งหมดลงในไฟล์ จากนั้นเพิ่มลงในเพจ จากนั้นสคริปต์จะโหลดโดยอัตโนมัติ

ตอนนี้หน้า HTML ที่สามารถโหลดได้ในครั้งเดียวจะต้องโหลด Ajax หรือไม่? ในความเป็นจริง คุณสามารถใช้กลยุทธ์แคชในเครื่องสำหรับเพจ HTML ของโมดูลสาธารณะ เพื่อให้สามารถดึงเพจทั้งหมดได้โดยตรงจากโลคัลเมื่อโหลดโมดูล เนื่องจากส่วนสาธารณะถูกแยกออกมา การสะสมของเพจที่เกี่ยวข้องจะน้อยลงและ ความเร็วในการโหลดเร็วขึ้น

สำหรับผู้ที่คุ้นเคยกับการใช้เอ็นจิ้นการดูฝั่งเซิร์ฟเวอร์ การใช้โมเดลการพัฒนาส่วนหน้า HTML/JS อย่างเต็มรูปแบบอาจเป็นเรื่องยากสักหน่อย แต่การพัฒนาส่วนหน้าโดยใช้ HTML/JS ทั้งหมดมีข้อดีที่ชัดเจน การประมวลผลมุมมองไม่จำเป็นต้องมีการตีความบริการ ซึ่งช่วยลดการสูญเสียเซิร์ฟเวอร์ได้อย่างมาก HTML สามารถทำแคชเป็นภาษาท้องถิ่นได้ดีขึ้น และขณะนี้มีเฟรมเวิร์ก HTML/JS จำนวนมากที่อนุญาต ให้คุณเขียนได้ง่ายขึ้นและง่ายขึ้น

ข้างต้นเป็นวิธีการที่ตัวแก้ไขแนะนำให้คุณใช้การโหลดหน้า HTML แบบดั้งเดิมแบบโมดูลาร์ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันแล้วตัวแก้ไขจะตอบกลับคุณทันเวลา