Saya menulis kode uji dan menggunakan kebutuhan.js untuk bekerja dengan plug-in text.js untuk mengimplementasikan aplikasi halaman tunggal paling sederhana. Ini dapat direkam dengan mudah dan memfasilitasi tinjauan di masa depan.
Alamat git: https://github.com/lily1010/requirespa
Mari kita lihat direktori di bawah ini
Seperti dapat dilihat dari proyek di atas, saya mengekstraksi CSS secara terpisah dan diimplementasikan pemuatan sesuai permintaan, yaitu, test1.css akan dimuat ketika test1.html dimuat, dan test2.css akan dimuat ketika test2.html dimuat.
1. Mari kita lihat kode entri.html kode terlebih dahulu
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> </style> </head> <body> <script Data-main = "js/main" src = "js/need.js"> </script> <div> </div> </body> </html>
Di atas sangat sederhana. Pertama-tama tentukan data entri ENTNEJS. Selain itu, untuk memuat CSS sesuai permintaan, saya mendefinisikan kelas CSS-attribute.
2. Konfigurasikan jalur dan lakukan pemrosesan logis di Main.js
membutuhkan.config ({paths: {"jQuery": "lib/jQuery-1.11.0", "text": "lib/text", "text1": "../ Templat/test1.html", // Perhatikan Path "Text2": "../ Templat/Test. "css2": "../ style/test2.css"}}) memerlukan (['jQuery', 'Text! Text1', 'Text! Text2', 'Text! CSS1', 'Text! CSS2'], function ($, Templat1, Template2, CSS1, CSS2) {//Template1, Template2, CSS1, CSS2) $ (". CSS-ATTRIBUTE"). HTML (CSS1); $ (".Di atas adalah konfigurasi membutuhkan yang paling mendasar, cukup perhatikan penggunaan teks.js, sangat sederhana
3. Mari kita lihat struktur dan gaya dua halaman
① Kode test1.html adalah sebagai berikut:
<div> <button> Klik saya untuk melompat ke halaman kedua spa </button> </div>
② CSS Test1.html, yaitu, kode test1.css adalah sebagai berikut:
.test1 {position: absolute; TOP: 0; Bawah: 0; Kiri: 0; Kanan: 0; latar belakang-warna: merah;}. Lewati {position: absolute; Atas: 50%; Kiri: 50%; -webkit-transform: translate (-50%,-50%); Transform: Translate (-50%,-50%);}Efeknya adalah sebagai berikut:
③The test2.html kode adalah sebagai berikut:
<div> <button> Saya adalah halaman kedua, klik saya untuk kembali ke halaman pertama </tutton> </div>
④ CSS Test2.html, yaitu, Test2.CSS Code adalah sebagai berikut:
.test2 {position: absolute; TOP: 0; Bawah: 0; Kiri: 0; Kanan: 0; latar belakang-warna: pink;}. skip2 {position: absolute; Atas: 50%; Kiri: 50%; -webkit-transform: translate (-50%,-50%); Transform: Translate (-50%,-50%);}Efeknya adalah sebagai berikut:
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.