Contoh lengkap
Saya telah mengatakan begitu banyak di atas, dan titik -titik pengetahuan relatif tersebar, jadi pada akhirnya saya berencana untuk menggunakan contoh Seajs lengkap untuk merangkai titik -titik pengetahuan ini bersama -sama untuk diringkas dan ditinjau oleh teman -teman Anda. Contoh ini berisi file -file berikut:
1.index.html - halaman utama.
2.Sea.js-seajs Script.
3.init.js-Modul init, modul entri, mengandalkan data, jQuery, dan gaya. Dimuat dari halaman utama.
4.data.js-data-modul, modul data JSON murni, dimuat oleh init.
5.JQuery.js-Modul Jejaring, Enkapsulasi Modular dari Perpustakaan JQuery, dimuat oleh Init.
6.Style.css-CSS Style Sheet, dimuat oleh Init sebagai modul gaya.
7. Kode Sea.js dan jQuery.js milik kode perpustakaan, jadi saya tidak akan membahas detailnya.
html:
Salin kode sebagai berikut: <! Doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "UTF-8">
<title> </title>
</head>
<body>
<Div id = "Content">
<p> </p>
<p> <a href = "#"> blog </a> </p>
</div>
<skrip src = "./ sea.js" data-main = "./ init"> </script>
</body>
</html>
Javascript:
Salinan kode adalah sebagai berikut:
//init.js
Tentukan (fungsi (membutuhkan, ekspor, modul) {
var $ = membutuhkan ('./ jQuery');
var data = membutuhkan ('./ data');
var css = membutuhkan ('./ style.css');
$ ('. Penulis'). html (data.author);
$ ('. Blog'). Attr ('href', data.blog);
});
//data.js
mendefinisikan({
Penulis: 'Zhangyang',
Blog: 'http://blog.codinglabs.org'
});
CSS:
Salinan kode adalah sebagai berikut:
.author {color: red; font-size: 10pt;}
.blog {font-size: 10pt;}
Efek operasi adalah sebagai berikut: