Unduh dan instal
Untuk menggunakan Seajs dalam proyek Anda, semua persiapan yang perlu Anda lakukan adalah mengunduh Sea.js dan meletakkannya di suatu tempat di proyek Anda.
Proyek Seajs saat ini di -host di GitHub, dengan beranda di https://github.com/seajs/seajs/. Anda dapat mengunduh Sea.js (terkompresi) atau sea-debug.js (tidak terkompresi) di direktori pembuatan perpustakaan git-nya.
Setelah unduhan selesai, letakkan di posisi yang sesuai dari proyek, dan kemudian perkenalkan melalui tag <script> pada halaman, dan Anda dapat menggunakan Seajs.
Prinsip Pembangunan Dasar Seajs
Sebelum membahas penggunaan spesifik Seajs, mari kita pertama kali memperkenalkan konsep modular dan prinsip -prinsip pengembangan Seajs.
Prinsip dasar menggunakan seajs untuk mengembangkan javascript adalah: semuanya adalah modul. Setelah SEAJS diperkenalkan, menulis kode JavaScript menjadi menulis satu modul satu demi satu. Data dan Metode dapat dipanggil oleh modul lain.
Selain itu, setiap modul harus didefinisikan dalam file JS terpisah, yaitu, satu sesuai dengan satu modul.
Berikut ini menggambarkan penulisan dan panggilan modul.
Definisi dan penulisan modul
Fungsi Definisi Modul Tentukan
Dalam Seajs, gunakan fungsi "Tentukan" untuk mendefinisikan modul. Karena dokumentasi Seajs tidak memiliki referensi lengkap untuk definisi, saya membaca kode sumber Seajs dan menemukan bahwa define dapat menerima tiga parameter:
Salin kode sebagai berikut:/**
* Mendefinisikan modul.
* @param {string =} id ID modul.
* @param {array. | String =} deps dependensi modul.
* @param {function () | Object} pabrik Fungsi pabrik modul.
*/
fn.define = function (id, deps, factory) {
// Kode fungsi…
}
Di atas dikutip dari Kode Sumber Seajs. Setelah membaca kode sumber, saya menemukan bahwa aturan parsing untuk jumlah parameter define yang berbeda adalah sebagai berikut:
Jika hanya ada satu parameter, maka tetapkan nilai ke pabrik.
Jika ada dua parameter, yang kedua ditugaskan ke pabrik;
Jika ada tiga parameter, mereka masing -masing ditugaskan untuk ID, DEP dan pabrik.
Namun, hampir semua tempat di mana define digunakan, termasuk contoh resmi Seajs, hanya satu fungsi pabrik yang disahkan, mirip dengan kode berikut:
Salinan kode adalah sebagai berikut:
Tentukan (fungsi (membutuhkan, ekspor, modul) {
// Kode modul ...
});
Saya pribadi merekomendasikan agar Anda mengikuti standar contoh resmi Seajs dan mendefinisikan modul dengan definisi parameter. Jadi apa yang akan dilakukan dengan ID dan DEP?
ID adalah string identifikasi suatu modul. Ketika Define hanya memiliki satu parameter, ID akan ditetapkan ke jalur absolut dari file JS ini secara default. Jika Anda menggunakan Define untuk menentukan modul dalam file A.JS di bawah example.com, ID modul ini akan ditugaskan ke http://example.com/a.js. ID. DEP umumnya tidak perlu diteruskan, dan modul yang diperlukan dapat dimuat dengan kebutuhan.
Analisis Pabrik Fungsi Pabrik
Fungsi pabrik adalah badan utama dan fokus modul. Ketika hanya satu parameter yang diteruskan untuk mendefinisikan (penulisan yang disarankan), parameter ini adalah fungsi pabrik.
1. Fungsi Pemuatan Modul Modul, yang digunakan untuk merekam modul yang bergantung.
2. Titik Eksportasi-Bayar, saat mendefinisikan data atau metode, memaparkannya ke panggilan eksternal.
3.module-metadata modul.
Tiga parameter ini dapat dipilih sesuai kebutuhan untuk menampilkan spesifikasi.
Mari kita bicara tentang modul di bawah ini. Modul adalah objek yang menyimpan informasi meta modul, sebagai berikut:
1.module.id - ID modul.
2.module.dependencies - Array yang menyimpan daftar ID dari semua modul yang bergantung pada modul ini.
3.module.Exports-poin ke objek yang sama dengan ekspor.
Tiga Mode untuk Modul Menulis
Mode pertama untuk mendefinisikan modul adalah mode berbasis ekspor:
Salinan kode adalah sebagai berikut:
Tentukan (fungsi (membutuhkan, ekspor, modul) {
var a = membutuhkan ('a'); // perkenalkan modul a
var b = membutuhkan ('b');
var data1 = 1; // data pribadi
var func1 = function () {// Metode Private
return A.Run (data1);
}
Exports.data2 = 2;
Exports.func2 = function () {// Metode publik
kembali 'halo';
}
});
Di atas adalah model definisi modul yang relatif "otentik". Selain menambahkan data publik dan metode untuk ekspor, Anda juga dapat secara langsung mengembalikan objek untuk mewakili modul, seperti kode berikut memiliki fungsi yang sama dengan kode di atas:
Salin kode sebagai berikut: tentukan (fungsi (membutuhkan) {
var a = membutuhkan ('a'); // perkenalkan modul a
var b = membutuhkan ('b');
var data1 = 1; // data pribadi
var func1 = function () {// Metode Private
return A.Run (data1);
}
kembali {
Data2: 2,
func2: function () {
kembali 'halo';
}
};
});
Jika definisi modul tidak memiliki kode lain dan hanya mengembalikan satu objek, metode penulisan yang disederhanakan berikut dapat ditemukan:
Salin kode sebagai berikut: tentukan ({
Data: 1,
func: function () {
kembali 'halo';
}
});
Metode ketiga sangat cocok untuk modul yang mendefinisikan data JSON murni.
Memuat dan referensi modul
Algoritma pengalamatan modul
Seperti yang disebutkan di atas, modul sesuai dengan file JS. di mana modul yang sebenarnya berada. Seajs mendukung pengidentifikasi berikut:
Alamat absolut - memberikan jalur absolut ke file JS.
menyukai:
Salinan kode adalah sebagai berikut: membutuhkan ("http: // contoh/js/a");
Itu berarti memuat http: //example/js/a.js.
Alamat relatif - Gunakan panggilan relatif untuk menemukan modul untuk menemukan alamat relatif dari file JS di mana fungsi beban berada.
Misalnya, muat di http: //example/js/b.js
Salinan kode adalah sebagai berikut: membutuhkan ("./ C");
Kemudian muat http: //example/js/c.js.
Alamat dasar - Jika pengidentifikasi string pemuatan bukanlah jalur absolut atau dimulai dengan "./", itu dibahas relatif terhadap "basis" dalam konfigurasi global Seajs.
Perhatikan bahwa saat memuat modul di atas, Anda tidak perlu melewati nama akhiran ".js" dan Seajs akan secara otomatis menambahkan ".js". Tetapi tiga kasus berikut tidak akan ditambahkan:
Saat memuat CSS, seperti:
Salinan kode adalah sebagai berikut: membutuhkan ("./ Module1-style.css");
Kapan jalan berisi "?", Seperti:
Salinan kode adalah sebagai berikut: membutuhkan (<a href = "http: //example/js/a.json? Cb = func"> http: //example/js/a.json? Cb = func </a> );
Saat jalan berakhir dengan "#", seperti:
Salinan kode adalah sebagai berikut: membutuhkan ("http: //example/js/a.json#");
Menurut skenario aplikasi yang berbeda, Seajs menyediakan tiga API untuk memuat modul, yaitu Seajs.Use, membutuhkan dan membutuhkan.async, yang diperkenalkan di bawah ini.
Seajs.use
Seajs.Use terutama digunakan untuk memuat modul entri. Modul entri setara dengan fungsi utama program C, dan juga merupakan akar dari seluruh pohon ketergantungan modul. Dalam contoh TinyApp di atas, init adalah modul entri. Penggunaan Seajs. Penggunaan adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
// mode tunggal
Seajs.use ('./ A');
// mode panggilan balik
seajs.use ('./ a', function (a) {
a.run ();
});
// mode multi-modul
seajs.use (['./ a', './b'], function (a, b) {
a.run ();
b.run ();
});
Secara umum, penggunaan. Penggunaan hanya digunakan untuk memuat modul entri pada halaman. Jika hanya ada satu modul entri, Anda juga dapat menghilangkan pelabuhan dengan menambahkan atribut "data-data" ke tag skrip yang memperkenalkan SEA. Metode penulisan berikut:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "UTF-8">
<title> tinyapp </iteme>
</head>
<body>
<p> </p>
<skrip src = "./ sea.js" data-main = "./ init"> </script>
</body>
</html>
Cara menulis ini akan membuat HTML lebih ringkas.
memerlukan
Persyaratan adalah metode pemuatan modul utama Seajs.
Salinan kode adalah sebagai berikut: var m = membutuhkan ('/path/to/module/file');
Berikut adalah pengantar singkat untuk mekanisme pemuatan otomatis Seajs. Seperti yang disebutkan di atas, setelah menggunakan Seajs, sertakan SEA. Seajs pertama -tama akan mengunduh modul entri, kemudian menggunakan ekspresi reguler untuk mencocokkan semua persyaratan dalam kode di sepanjang modul entri, dan kemudian mengunduh file JS yang sesuai sesuai dengan identifikasi jalur file dalam kebutuhan, dan kemudian mengulangi file JS yang diunduh. Seluruh proses mirip dengan operasi traversal grafik (karena mungkin ada ketergantungan silang, seluruh struktur data ketergantungan lebih merupakan grafik daripada pohon).
Setelah Anda memahami poin di atas, aturan berikut akan mudah dimengerti:
Pengidentifikasi jalur yang diteruskan untuk membutuhkan string literal, bukan ekspresi.
Salinan kode adalah sebagai berikut: membutuhkan ('modul' + '1');
membutuhkan ('Module'.TolowerCase ());
Ini akan menyebabkan Seajs gagal melakukan kecocokan reguler yang benar untuk mengunduh file JS yang sesuai.
membutuhkan.async
Seperti disebutkan di atas, Seajs akan merekam semua file JS yang diperlukan sekaligus melalui analisis statis ketika halaman HTML dibuka.
Salin kode sebagai berikut: membutuhkan.async ('/path/to/module/file', function (m) {
// kode panggilan balik ...
});
Dengan cara ini, hanya ketika modul ini digunakan, file JS yang sesuai akan diunduh, yang mewujudkan pemuatan kode JavaScript sesuai permintaan.
Konfigurasi Global Seajs
SEAJS menyediakan metode Seajs.config yang dapat mengatur konfigurasi global dan menerima objek konfigurasi yang mewakili konfigurasi global. Metode penggunaan spesifik adalah sebagai berikut:
Salin kode sebagai berikut: seajs.config ({
Pangkalan: 'Path/to/jslib/',
alias: {
'Aplikasi': 'path/to/app/'
},
Charset: 'UTF-8',
Timeout: 20000,
Debug: Salah
});
Di mana basis mewakili jalur alamat dasar selama pengalamatan dasar. Misalnya, basis diatur ke http://example.com/js/3-party/, lalu:
Salinan kode adalah sebagai berikut: var $ = membutuhkan ('jQuery');
http://example.com/js/3-party/jquery.js akan dimuat.
Alias dapat mengatur singkatan untuk jalur umum yang lebih lama.
Charset mewakili atribut charset dari tag skrip saat mengunduh JS.
Timeout menunjukkan waktu maksimum untuk mengunduh file, dalam milidetik.
Debug menunjukkan apakah itu berfungsi dalam mode debug.
Bagaimana Seajs bekerja dengan perpustakaan JS yang ada
Untuk menggunakan perpustakaan JS yang ada seperti jQuery dengan Seajs, cukup merangkum perpustakaan yang ada sesuai dengan aturan definisi modul Seajs. Misalnya, berikut ini adalah metode enkapsulasi untuk jQuery:
Salin kode sebagai berikut: define (function () {
// {{{{jQuery Kode asli dimulai
/*!
* Perpustakaan JavaScript JQuery v1.6.1
* http://jquery.com/
*
* Hak Cipta 2011, John Resig
* Dual berlisensi di bawah lisensi MIT atau GPL versi 2.
* http://jquery.org/license
*
* Termasuk sizzle.js
* http://sizzlej.com/
* Hak Cipta 2011, Dojo Foundation
* Dirilis di bawah lisensi MIT, BSD, dan GPL.
*
* Tanggal: Kamis 12 Mei 15:04:36 2011 -0400
*/
// ...
//}}} jQuery Kode asli berakhir
mengembalikan $ .noconflict ();
});
Pengemasan dan Penerapan Proyek Seajs
Seajs awalnya mengintegrasikan alat penempatan kemasan SM. Gagasan inti SPM adalah untuk menggabungkan dan mengompres kode semua modul dan kemudian menggabungkannya ke dalam modul entri. . Namun, karena SPM belum dirilis untuk versi resmi, artikel ini tidak bermaksud memperkenalkannya secara rinci.
Bahkan, karena JS menggabungkan dan alat kompresi yang digunakan untuk setiap proyek berbeda, SPM mungkin tidak sepenuhnya cocok untuk setiap proyek. Setelah memahami prinsip -prinsip Seajs, Anda dapat menulis skrip penggabungan dan pengemasan yang cocok dengan karakteristik proyek Anda.