Artikel ini adalah ringkasan dari beberapa titik pengetahuan dari kebutuhan, disertai dengan analisis contoh dalam aplikasi multi-halaman.
Struktur direktori kasus ini adalah sebagai berikut:
Persyaratan API Tiga Fungsi Utama: Tentukan (Buat Modul), Persyaratan (Muat Muat), dan Config (config)
1. Muat file JS di file html
Konten Page1.html adalah sebagai berikut:
<!DOCTYPE html><html><head><title>Page 1</title><script data-main="scripts/page1" src="scripts/lib/require.js"></script></head><body><a href="page2.html">Go to Page 2</a></body></html>
Konten Page2.html adalah sebagai berikut:
<! Doctype html> <html> <head> <title> halaman 2 </itement> <skrip data-main = "skrip/page2" src = "Scripts/lib/libs.js"> </script> </head> <tody> <a href = "page1.
Ekstensi Pengetahuan:
Atribut data-data menentukan modul utama program Web, dan file ini pertama kali dimuat oleh NeedJS. Karena nama sufiks file default dari Persyaratan adalah JS, Page1.js dapat disingkat sebagai halaman1
Aturan prioritas jalur root untuk memuat file skrip
Saat memuat modul dengan kebutuhan (), akhiran .js akan dihilangkan dan akan dicari dari baseurl; Jika memiliki akhiran .js, atau dimulai dengan "/", atau berisi protokol URL (http/https), root akan
Cari sesuai dengan pengaturan jalur spesifik Anda
Config> Data-Main> Default BaseUrl
Jika data-data dan konfigurasi tidak disetel, baseUrl default adalah direktori di mana halaman HTML yang dirujuk. JS berada.
Atur data-utama, lalu BaseUrl adalah direktori di mana modul utama berada (misalnya, modul utama dalam HTML pertama adalah Page1.js, sehingga direktori tempat ia berada/skrip adalah direktori root)
Konfigurasi konfigurasi, atur secara eksplisit baseUrl, dan juga atur jalur terpisah untuk setiap modul.
2. Konfigurasikan jalur modul, dll.
Gunakan metode equips.config () untuk menyesuaikan perilaku pemuatan modul. Dalam aplikasi multi-halaman, konfigurasi dapat ditulis dalam file bersama, seperti file Common.js dalam contoh ini. Kemudian, setelah setiap halaman memuat konfigurasi saat ini, modul yang diperlukan dimuat dalam fungsi callback.
Kode Common.js adalah sebagai berikut:
membutuhkan.config ({baseUrl: 'Scripts/App', Paths: {jQuery: ['http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min' ,'..Lib/jQuery']}});Ekstensi Pengetahuan:
Item konfigurasi yang didukung:
Baseurl:
Jalur root pencarian untuk semua modul. Catatan: Ketika file JS yang dimuat (diakhiri dengan .js, dimulai dengan "/", berisi protokol), BaseUrl tidak akan digunakan;
Jalan:
Nama modul peta jalur yang tidak ditempatkan langsung di bawah BaseUrl. Posisi awal saat mengatur jalur relatif terhadap BaseUrl, kecuali pengaturan jalur dimulai dengan "/" atau berisi protokol URL;
Catatan: Jalur yang didefinisikan dalam jalur tidak dapat berisi akhiran .JS, karena mekanisme resolusi jalur akan secara otomatis menambahkan .JS sufiks; dan jalur pemuatan dapat diatur beberapa kali. Jika pemuatan dari CDN gagal, file JS lokal akan dimuat;
Shim:
Konfigurasikan untuk modul yang tidak menggunakan define () untuk mendeklarasikan dependensi;
Ada dua parameter yang perlu diperhatikan:
(1) Nilai Ekspor (nama variabel output), Expose Method Interface
(2) DEPS Array, menunjukkan ketergantungan modul
menyukai:
membutuhkan.config ({baseurl: '/scripts/lib', shim: {zepto: {exports: '$'}, backbone: {deps: ['underscore', 'zepto'], ekspor: 'backbone'}, 'zepto.anime': ['zepto']}} (zepto.3. Modul pemuatan
Kode Page1.js adalah sebagai berikut:
membutuhkan (['./ Common'], function (Common) {membutuhkan (['SayPage1'], function (waypage1) {waypage1.hello ();});});Kode Page2.js adalah sebagai berikut:
membutuhkan (['./ Common'], function (Common) {membutuhkan (['SayPage2'], function (waypage2) {waypage2.hello ();});});Ekspansi Pengetahuan:
Fungsi Perlu () menerima dua parameter. Parameter pertama adalah array yang mewakili modul yang tergantung; Parameter kedua adalah fungsi panggilan balik, dan itu akan dipanggil hanya setelah semua modul yang saat ini ditentukan dimuat dengan sukses. Modul yang dimuat dapat dipanggil sebagai parameter ke fungsi panggilan balik.
Untuk memastikan bahwa modul yang diperlukan dimuat hanya setelah konfigurasi selesai, ini terutama untuk analisis jalur yang benar dan mengharuskannya dalam fungsi callback.
4. Definisi modul
Kode di SaysPage1.js:
define (['jQuery'], function ($) {function sayshi () {$ ('body'). append ('<h1> halo page1! </h1>');} return {hello: sayhi}});Ekstensi Pengetahuan:
Fungsi define juga menerima dua parameter. Parameter pertama adalah array modul dependen, dan parameter kedua adalah fungsi panggilan balik.
Tentu saja, ketika akhirnya diluncurkan, file JS perlu digabungkan dan dikompresi. Anda dapat menggunakan R.JS, yang nyaman dan cepat ~
Di atas adalah contoh analisis aplikasi multi-halaman kebutuhan yang diperkenalkan kepada editor kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!