เมื่อการปรับระดับส่วนหน้าไม่เพียง แต่ JS ต้องการการจัดการแบบแยกส่วน แต่บางครั้ง HTML ก็ต้องการการจัดการแบบแยกส่วน ที่นี่เราแนะนำวิธีการใช้การพัฒนาโมดูลาร์ของรหัส HTML ผ่านทาง VeutheJS
วิธีโหลด html โดยใช้ requirejs
Reuqirejs มีปลั๊กอินข้อความที่สามารถอ่านเนื้อหาของไฟล์ที่ระบุและเนื้อหาที่อ่านคือข้อความ
วิธีดาวน์โหลดปลั๊กอินข้อความ
วิธีแรกสามารถดาวน์โหลดได้ผ่าน NPM:
การติดตั้ง npm requirejs/text
วิธีที่สองสามารถดาวน์โหลดได้โดยตรงจาก GitHub อย่างเป็นทางการ
เพียงคัดลอกเนื้อหาลงใน text.js โดยตรง
วิธีการติดตั้งปลั๊กอินข้อความ
คุณสามารถกำหนดค่าการพึ่งพาของปลั๊กอินข้อความใน main.js ใน reedjs ซึ่งคล้ายกับ jQuery เพียงตรวจสอบให้แน่ใจว่าสามารถโหลดเข้าไปในนั้นผ่านการโหลดปกติ
requirejs.config ({baseUrl: './', paths: {' text ': path+'/require/text ', ... }, shim: {... }});นอกจากนี้ยังสามารถวางโดยตรงใน baseUrl
วิธีใช้ข้อความ
ในโมดูลเป้าหมายให้ทำตามไวยากรณ์ต่อไปนี้:
กำหนด (ฟังก์ชั่น (ต้องการ) {var html = ต้องการ ("ข้อความ! html/test.html"); console.log (html);});หรือ
กำหนด (["ข้อความ! html/test.html"], ฟังก์ชัน (html) {console.log (html);});จะดำเนินการพัฒนาแบบแยกส่วนของ HTML ได้อย่างไร?
หลังจากอ่านด้านบนคุณสามารถใช้ข้อความได้แล้ว แต่ก็ยังไม่รู้วิธีจัดระเบียบรหัสส่วนหน้า
ใช้เกาลัด:
หน้าเว็บไซต์ของ Blog Garden จะข้ามไปยังหน้าต่างๆตามการนำทางด้านบน หากอยู่ในหน้าเดียวมันเป็นเรื่องง่ายที่จะคิดวิธีดั้งเดิมปุ่มนำทางสอดคล้องกับ div อื่น การคลิกปุ่มนั้นจะแสดง div ที่เกี่ยวข้อง divs อื่น ๆ จะถูกซ่อนไว้
จากนั้นรหัสส่วนหน้าอาจมีลักษณะเช่นนี้:
<html> <body> <cold> ปุ่มนำทาง 1, ปุ่มนำทาง 2, ปุ่มนำทาง 3 </nav> <div style = "display: block"> หน้าตรงกับปุ่ม 1 </div> <div style = "แสดง: ไม่มี" หน้า "
รหัสดังกล่าวจะยุ่งมาก ... และ HTML ส่วนหน้าจะยาวมาก ... ไม่เอื้อต่อการบำรุงรักษา
จากนั้นด้วยปลั๊กอินข้อความของ reuqirejs คุณสามารถทำได้:
<Html> <body> <vain> ปุ่มนำทาง 1 ปุ่มนำทาง 2 ปุ่มนำทาง 3 </av> <div id = "เป้าหมาย"> </div> </body> </html>
จากนั้นในโมดูลที่เกี่ยวข้อง:
$ ('#target'). html (ต้องการ ("ปุ่มข้อความ! เป้าหมายที่สอดคล้องกับ page.html"));สิ่งนี้จะทำให้คุณเป็นกันเองมากขึ้น! รหัสส่วนหน้ายังสามารถจัดการได้อย่างมีประสิทธิภาพด้วยโมดูล!
อย่างไรก็ตามควรสังเกตว่าวิธีนี้จะทำให้เหตุการณ์ถูกผูกไว้ไม่ถูกต้อง - ดังนั้นคุณต้อง rebind เหตุการณ์หลังจากวิธี HTML ()
ฉันจะแนะนำคุณมากมายเกี่ยวกับการใช้ RequireJS สำหรับการพัฒนาแบบแยกส่วนใน HTML และฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!