Un exemple complet
J'ai dit tellement de choses ci-dessus, et les points de connaissance sont relativement dispersés, donc à la fin, je prévois d'utiliser un exemple complet de SeaJS pour enchaîner ces points de connaissance pour que vos amis résument et révisent. Cet exemple contient les fichiers suivants:
1.Index.html - Page principale.
2.sea.js-seajs Script.
3.Init.js - Module intérieur, module d'entrée, s'appuyant sur les données, jQuery et style. Chargé à partir de la page principale.
4.data.js-data module, pur module de données JSON, chargé par init.
5.JQUERY.JS - Module jQuery, encapsulation modulaire de la bibliothèque jQuery, chargée par init.
6.style.css - Fiche de style CSS, chargée par init en tant que module de style.
7. Les codes de Sea.js et JQuery.js appartiennent au code de la bibliothèque, donc je ne vais pas entrer dans les détails.
HTML:
Copiez le code comme suit: <! Doctype html>
<html lang = "zh-cn">
<adal>
<meta charset = "utf-8">
<Title> </Title>
</ head>
<body>
<div id = "contenu">
<p> </p>
<p> <a href = "#"> blog </a> </p>
</div>
<script src = "./ sea.js" data-main = "./ init"> </cript>
</docy>
</html>
javascript:
La copie de code est la suivante:
//init.js
définir (fonction (require, exportations, module) {
var $ = require ('./ jQuery');
var data = require ('./ data');
var css = require ('./ style.css');
$ ('. Auteur'). Html (data.author);
$ ('. blog'). att ('href', data.blog);
});
//data.js
définir({
Auteur: «Zhangyang»,
Blog: 'http://blog.codingLabs.org'
});
CSS:
La copie de code est la suivante:
.Author {Color: Red; Font-Size: 10pt;}
.blog {taille de police: 10pt;}
L'effet de fonctionnement est le suivant: