Um exemplo completo
Eu disse muito acima, e os pontos de conhecimento estão relativamente dispersos; portanto, no final, pretendo usar um exemplo completo do SEAJS para reunir esses pontos de conhecimento para que seus amigos resumissem e revisem. Este exemplo contém os seguintes arquivos:
1.Index.html - Página principal.
2.SEA.JS-SEAJS Script.
3.init.js-Init Módulo, módulo de entrada, confiando em dados, jQuery e estilo. Carregado na página principal.
4.data.js-data módulo, módulo de dados JSON puro, carregado por init.
5.jQuery.js-JQuery Module, encapsulamento modular da biblioteca jQuery, carregado por init.
6.style.css-CSS Folha de estilo, carregada por init como um módulo de estilo.
7. Os códigos de Sea.js e jQuery.js pertencem ao código da biblioteca, para que não entre em detalhes.
html:
Copie o código da seguinte forma: <! 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>
<script src = "./ Sea.js" data-main = "./ init"> </script>
</body>
</html>
JavaScript:
A cópia do código é a seguinte:
//init.js
Definir (função (requer, exporta, módulo) {
var $ = requer ('./ jQuery');
var dados = requer ('./ dados');
var css = requer ('./ style.css');
$ ('. Autor'). html (data.author);
$ ('. blog'). Att ('href', data.blog);
});
//data.js
definir({
Autor: 'Zhangyang',
Blog: 'http://blog.codinglabs.org'
});
CSS:
A cópia do código é a seguinte:
.Author {Color: Red; font-size: 10pt;}
.blog {font-size: 10pt;}
O efeito de operação é o seguinte: