Seajs adalah kerangka kerja pemuatan modul yang dikembangkan oleh Yubo yang mengikuti spesifikasi CommonJS, yang dapat digunakan untuk dengan mudah dan senang memuat modul JavaScript dan gaya modul CSS. Seajs sangat kecil, karena volume setelah kompresi dan GZIP hanya 4K, dan antarmuka dan metode juga sangat kecil. Seajs memiliki dua core: definisi modul dan pemuatan modul dan dependensi. Seajs sangat kuat. Seajs dapat memuat modul JavaScript dan gaya modul CSS apa pun. SEAJS akan memastikan bahwa ketika Anda menggunakan modul, Anda telah memuat modul lain yang Anda andalkan ke dalam lingkungan yang menjalankan skrip. Yu Bo mengatakan bahwa Seajs dapat memungkinkan Anda untuk menikmati kesenangan menulis kode tanpa khawatir tentang masalah pemuatan. Apakah Anda bosan dengan begitu banyak referensi JS dan CSS? Saya menghitung referensi 39 CSS dan JS di beranda situs web perusahaan kami. Dampaknya dapat dibayangkan:
1. Tidak kondusif untuk pemeliharaan, front-end dan back-end adalah sama
2. Ada terlalu banyak permintaan HTTP. Tentu saja, ini dapat diselesaikan melalui penggabungan, tetapi jika tidak ada backend yang langsung bergabung, biaya tenaga kerja sangat tinggi. Bahkan jika backend menggabungkan dan memeliharanya, string yang panjang pasti akan melihatnya.
Menggunakan Seajs dapat menyelesaikan masalah ini dengan sangat baik.
Definisi modul
Mendefinisikan modul lebih sederhana. Misalnya, mendefinisikan modul Sayhello dan membuat dokumen Sayhello.js:
Salinan kode adalah sebagai berikut:
Tentukan (fungsi (membutuhkan, ekspor, modul) {
Exports.sayhello = function (ELEID, TEXT) {
document.geteLementById (ELEID) .InnerHTML = Teks;
};
});
Pertama -tama mari kita lihat parameter ekspor. Parameter ekspor digunakan untuk menyediakan API modul. Artinya, modul lain dari ekspor ini dapat mengakses metode Sayhello.
Penggunaan pemuatan modul
Misalnya, ada elemen di halaman kami dengan ID "out" dan kami ingin mengeluarkan "halo seajs!",
Kemudian kita dapat memperkenalkan Sea.js dulu
Kemudian gunakan modul Sayhello:
Salinan kode adalah sebagai berikut:
seajs.use ("sayhello/sayhello", function (katakanlah) {
say
});
Di sini penggunaannya adalah metode menggunakan modul:
Parameter pertama adalah representasi modul, yang diwakili oleh jalur relatif relatif terhadap Sea.js. Suffix ".js" setelah Sayshello.js dapat dihilangkan. Tentu saja, ada banyak metode untuk mengidentifikasi modul ini. Untuk detailnya, silakan periksa deskripsi resmi: http://seajs.com/docs/zh-cn/module-ididentifier.html
Parameter pertama adalah fungsi panggilan balik. Say.sayhello () memanggil metode ekspor. Sayhello dari modul Sayhello. Tentu saja, ada parameter katakan dalam fungsi panggilan balik ini.
Dependensi modul
Ketergantungan modul sebenarnya harus ada ketika modul didefinisikan. Misalnya, tulis ulang modul Sayhello di atas. Misalkan kita sudah memiliki modul DOM umum, seperti beberapa metode seperti mendapatkan elemen, pengaturan gaya, dll., Seperti modul DOM seperti itu, tulis dom.js sebagai berikut
Salinan kode adalah sebagai berikut:
Tentukan (fungsi (membutuhkan, ekspor, modul) {
var dom = {
/**
* Dapatkan objek DOM melalui atribut ID elemen, parameternya adalah string, atau beberapa string
* @id getById
* @method getById
* @param {string} id atribut id
* @return {htmlelement | Objek} htmleLement dengan ID, atau nol jika tidak ada yang ditemukan.
*/
getById: function () {
var els = [];
untuk (var i = 0; i <arguments.length; i ++) {
var el = argumen [i];
if (typeof el == "string") {
el = document.geteLementById (el);
}
if (arguments.length == 1) {
mengembalikan el;
}
elspush (el);
}
mengembalikan els;
},
/**
* Dapatkan objek, Anda dapat meneruskan objek atau string. Jika string dilewatkan, objek diperoleh dalam bentuk dokumen.getElementById ()
* @id dapatkan
* @param {string} el html elemen
* @return {objek} objek htmlelement.
*/
get: function (el) {
if (el & amp; amp; & amp; amp; (el.tagname || el.item)) {
mengembalikan el;
}
kembalikan this.getById (el);
}
};
return dom;
});
Maka modul Sayhello dapat ditulis seperti ini. Agar tidak mempengaruhi halaman demo asli, saya mengatur modul Sayhelloa baru. Kita bisa menulis sayhelloa.js seperti ini:
Salinan kode adalah sebagai berikut:
Tentukan (fungsi (membutuhkan, ekspor, modul) {
var dom = membutuhkan ("dom/dom");
membutuhkan ("Sayhelloa/Sayhello.css");
Exports.sayhello = function (ELEID, TEXT) {
Dom.get (eleid) .innerHtml = teks;
};
});
Fungsi yang diperlukan digunakan untuk menetapkan dependensi modul. Misalnya, modul Sayhelloa di atas tergantung pada modul DOM karena metode GET dari modul DOM digunakan.
Perhatikan bahwa var dom = membutuhkan ("dom/dom") di sini, kalimat ini menetapkan modul DOM yang diterapkan ke DOM; Membutuhkan ("Sayhelloa/Sayhello.css") secara langsung menerapkan modul atau file CSS Sayhello.css. Ini akan merujuk ke file CSS di halaman.
Saya telah membuat masalah dengan Seajs dalam beberapa hari terakhir. Semakin saya membuat masalah dengan itu, semakin saya menyukainya. Terima kasih Yu Bo! Terima kasih Seajs! Tentu saja Anda mungkin berpikir bahwa tidak perlu melakukan ini dengan contoh sederhana seperti itu. Memang, jika proyek -proyek kecil dengan lebih sedikit file JS merasa senang tentang keuntungan modular, tetapi lebih banyak keuntungan modular tercermin dalam jumlah file JS atau proyek menengah atau di atas.