ฉันเขียนรหัสทดสอบและใช้ lequire.js เพื่อร่วมมือกับ plug-in text.js เพื่อใช้แอปพลิเคชันหน้าเดียวที่ง่ายที่สุด สามารถบันทึกได้อย่างง่ายดายและอำนวยความสะดวกในการตรวจสอบในอนาคต
ที่อยู่ Git: https://github.com/lily1010/requirespa
มาดูไดเรกทอรีด้านล่าง
ดังที่เห็นได้จากโครงการข้างต้นฉันสกัด CSS แยกกันและดำเนินการโหลดตามความต้องการนั่นคือ test1.css จะโหลดเมื่อโหลด test1.html และ test2.css จะโหลดเมื่อโหลด test2.html
มาดูรหัสรายการ html ก่อน
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1, type = style = </> <script data-main = "js/main" src = "js/require.js"> </script> <div> </div> </body> </html>
ข้างต้นเป็นเรื่องง่ายมาก ก่อนอื่นกำหนด Data Main registjs entry นอกจากนี้เพื่อที่จะโหลด CSS ตามความต้องการฉันได้กำหนดคลาส CSS-attribute
2. กำหนดค่าพา ธ และทำการประมวลผลแบบลอจิคัลใน main.js
require.config ({paths: {"jQuery": "lib/jQuery-1.11.0", "text": "lib/text", "text1": "../ แม่แบบ/test1.html", // ให้ความสนใจกับเส้นทาง "text2": "../ "CSS2": "../ style/test2.css"}}) ต้องการ (['jQuery', 'text! text1', 'text! text2', 'text! css1', 'text! css2'], ฟังก์ชั่น ($, template1, template2, css1, css2) $ (". css-attribute"). html (css1); $ (". page"). html (template2);ข้างต้นเป็นสิ่งที่ต้องการพื้นฐานที่สุดเพียงแค่ให้ความสนใจกับการใช้ text.js มันง่ายมาก
สามกันมาดูโครงสร้างและรูปแบบสองหน้า
code code test1.html มีดังนี้:
<div> <putton> คลิกฉันเพื่อข้ามไปที่หน้าสองของ Spa </button> </div>
② CSS ของ test1.html นั่นคือรหัส test1.css มีดังนี้:
.Test1 {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ด้านล่าง: 0; ซ้าย: 0; ขวา: 0; พื้นหลังสี: สีแดง;}. ข้าม {ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ซ้าย: 50%; -webkit-transform: แปล (-50%,-50%); แปลง: แปล (-50%,-50%);}เอฟเฟกต์มีดังนี้:
code code test2.html มีดังนี้:
<div> <putton> ฉันเป็นหน้าสองคลิกฉันเพื่อกลับไปที่หน้าแรก </button> </div>
④ CSS ของ test2.html นั่นคือรหัส test2.css มีดังนี้:
.test2 {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ด้านล่าง: 0; ซ้าย: 0; ขวา: 0; พื้นหลังสี: สีชมพู;}. skip2 {ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ซ้าย: 50%; -webkit-transform: แปล (-50%,-50%); แปลง: แปล (-50%,-50%);}เอฟเฟกต์มีดังนี้:
บทความข้างต้นต้องใช้การใช้งานแอปพลิเคชันหน้าเดียว (SPA) อย่างง่ายคือเนื้อหาทั้งหมดที่ฉันได้แชร์กับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น