Kata pengantar
Seajs adalah kerangka pemuatan modul JavaScript yang mengikuti spesifikasi CommonJS, yang dapat mengimplementasikan mekanisme pengembangan dan pemuatan modular JavaScript. Tidak seperti kerangka kerja JavaScript seperti jQuery, Seajs tidak memperluas fitur bahasa enkapsulasi, tetapi hanya mengimplementasikan modularisasi dan pemuatan dengan modul. Tujuan utama Seajs adalah untuk membuat pengembangan JavaScript modular dan memuat dengan mudah dan bahagia, insinyur front-end gratis dari file JavaScript berat dan pemrosesan ketergantungan objek, dan dapat fokus pada logika kode itu sendiri. Seajs dapat diintegrasikan dengan sempurna dengan kerangka kerja seperti jQuery. Menggunakan SEAJS dapat meningkatkan keterbacaan dan kejelasan kode JavaScript, menyelesaikan masalah kebingungan ketergantungan dan keterikatan kode yang umum dalam pemrograman JavaScript, dan memfasilitasi penulisan dan pemeliharaan kode.
Penulis Seajs adalah Yu Bo, seorang insinyur front-end Taobao.
Seajs sendiri mengikuti konsep ciuman (tetap sederhana, bodoh) untuk pengembangan. Dalam proses belajar Seajs, Anda dapat merasakan esensi dari prinsip ciuman di mana -mana - hanya melakukan satu hal dan melakukan satu hal dengan baik.
Artikel ini pertama kali menggunakan contoh untuk secara intuitif membandingkan pemrograman JavaScript tradisional dan pemrograman javascript modular menggunakan Seajs, dan kemudian membahas metode penggunaan Seajs secara rinci, dan akhirnya memberikan beberapa informasi yang terkait dengan Seajs.
Mode Tradisional vs Seajs Modularity
Misalkan kita sekarang mengembangkan aplikasi web TinyApp, dan kami memutuskan untuk menggunakan kerangka kerja jQuery di TinyApp. Beranda TinyApp akan menggunakan Module1.js, yang tergantung pada Module2.js dan Module3.js, dan Module3.js.
Pembangunan tradisional
Menggunakan metode pengembangan tradisional, kode masing -masing file JS adalah sebagai berikut:
Salin kode sebagai berikut: //module1.js
var module1 = {
run: function () {
return $ .merge (['module1'], $ .merge (module2.run (), module3.run ()));
}
}
//module2.js
var module2 = {
run: function () {
return ['Module2'];
}
}
//module3.js
var module3 = {
run: function () {
return $ .merge (['Module3'], Module4.run ());
}
}
//module4.js
var module4 = {
run: function () {
return ['Module4'];
}
}
Pada saat ini, index.html perlu referensi modul1.js dan semua dependensi yang mendasarinya (perhatikan pesanan):
Salin kode sebagai berikut: <! Doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "UTF-8">
<title> tinyapp </iteme>
<Script src = "./ jQuery-ini
<Script src = "./ Module4.js"> </script>
<Script src = "./ Module2.js"> </script>
<Script src = "./ Module3.js"> </script>
<Script src = "./ Module1.js"> </script>
</head>
<body>
<p> </p>
<script>
$ ('. Content'). html (module1.run ());
</script>
</body>
</html>
Seiring berjalannya proyek, akan ada semakin banyak file dan dependensi JS akan menjadi lebih dan lebih kompleks, membuat kode JS dan daftar skrip dalam HTML seringkali sulit dipertahankan.
Pengembangan modular Seajs
Mari kita lihat bagaimana menerapkan fungsionalitas yang sama menggunakan Seajs.
Pertama adalah index.html:
Salin kode sebagai berikut: <! Doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "UTF-8">
<title> tinyapp </iteme>
</head>
<body>
<p> </p>
<Script src = "./ Sea.js"> </script>
<script>
seajs.use ('./ init', function (init) {
init.initpage ();
});
</script>
</body>
</html>
Anda dapat melihat bahwa halaman HTML tidak perlu lagi memperkenalkan semua file JS dependensi, tetapi hanya memperkenalkan SEA. Saat membuat halaman.
index.html memuat modul init dan menggunakan metode initpage modul ini untuk menginisialisasi data halaman.
Mari kita lihat tulisan JavaScript modular berikut:
Salin kode sebagai berikut: //jquery.js
Tentukan (fungsi (membutuhkan, ekspor, modul) = {
// Kode JQuery.js asli ...
module.Exports = $ .noconflict (true);
});
//init.js
Tentukan (fungsi (membutuhkan, ekspor, modul) = {
var $ = membutuhkan ('jQuery');
var m1 = membutuhkan ('module1');
Exports.InitPage = function () {
$ ('. Konten'). html (m1.run ());
}
});
//module1.js
Tentukan (fungsi (membutuhkan, ekspor, modul) = {
var $ = membutuhkan ('jQuery');
var m2 = membutuhkan ('module2');
var m3 = membutuhkan ('module3');
exports.run = function () {
mengembalikan $ .merge (['Module1'], $ .merge (m2.run (), m3.run ()));
}
});
//module2.js
Tentukan (fungsi (membutuhkan, ekspor, modul) = {
exports.run = function () {
return ['Module2'];
}
});
//module3.js
Tentukan (fungsi (membutuhkan, ekspor, modul) = {
var $ = membutuhkan ('jQuery');
var m4 = membutuhkan ('module4');
exports.run = function () {
mengembalikan $ .merge (['Module3'], m4.run ());
}
});
//module4.js
Tentukan (fungsi (membutuhkan, ekspor, modul) = {
exports.run = function () {
return ['Module4'];
}
});
Pada pandangan pertama, kode tersebut tampaknya lebih rumit, karena contoh ini terlalu sederhana. Namun, dari ini kita masih dapat melihat beberapa fitur Seajs:
Pertama, halaman HTML tidak perlu memelihara daftar panjang tag skrip, cukup perkenalkan sea.js.
Yang kedua adalah bahwa kode JS disusun sebagai modul.
Melalui contoh ini, teman -teman harus memiliki kesan intuitif dari Seajs.