Saya menulis kode uji dan menggunakan kebutuhan.js untuk bekerja sama 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.
Mari kita lihat kode entri indeks.html dulu
<!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
Tiga, 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:
Artikel di atas memerlukan implementasi sederhana aplikasi satu halaman (SPA) adalah semua konten yang telah saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.