Un ejemplo completo
He dicho mucho por encima, y los puntos de conocimiento están relativamente dispersos, por lo que al final planeo usar un ejemplo completo de SEAJS para unir estos puntos de conocimiento para que sus amigos resuman y revisen. Este ejemplo contiene los siguientes archivos:
1.index.html - página principal.
2.SEA.JS-SEAJS Script.
3.init.js-módulo de entrada, módulo de entrada, depender de datos, jQuery y estilo. Cargado desde la página principal.
4.data.js-data módulo, módulo de datos JSON puro, cargado por init.
5.jquery.js-JQuery Module, Encapsulación modular de la biblioteca jQuery, cargada por Init.
6.style.css-Hoja de estilo-CSS, cargada por init como módulo de estilo.
7. Los códigos de SEA.js y jQuery.js pertenecen al código de la biblioteca, por lo que no entraré en detalles.
HTML:
Copie el código de la siguiente manera: <! DocType Html>
<html lang = "zh-cn">
<Evista>
<meta charset = "utf-8">
<title> </title>
</ablo>
<Body>
<div id = "contenido">
<p> </p>
<p> <a href = "#"> blog </a> </p>
</div>
<script src = "./ sea.js" data-menta = "./ init"> </script>
</body>
</html>
JavaScript:
La copia del código es la siguiente:
//init.js
Definir (función (requerir, exportar, módulo) {
var $ = request ('./ jQuery');
var data = require ('./ data');
var css = request ('./ style.css');
$ ('. Autor'). Html (data.author);
$ ('. Blog'). attr ('href', data.blog);
});
//data.js
definir({
Autor: 'Zhangyang',
Blog: 'http://blog.codinglabs.org'
});
CSS:
La copia del código es la siguiente:
.author {color: rojo; font-size: 10pt;}
.blog {font-size: 10pt;}
El efecto de operación es el siguiente: