Le code source de tous les Sea.js est stocké sur GitHub: https://github.com/seajs/examples, et la structure du répertoire est:
Exemples / | - Sea-Modules Stores Seajs, jQuery et autres fichiers, qui est également le répertoire de déploiement du module | - Statique Static JS et CSS Fichiers pour chaque projet || - Bonjour | | - Lucky | `- TODO` - App Stores HTML et autres fichiers | - Hello.html | - Lucky.html `- Todo.html
Introduire le fichier principal de Seajs
<script src = "js / sea.js"> </ script> <script type = "text / javascript"> // élément de configuration des Seajs Seajs.config ({// Définit le chemin JS de base (se référant au répertoire racine des fichiers externes) Base: "./ JS", // Set aliases (pour les références ultérieures) Alias: {"jQuery": "JQUERY.J. Configuration (utilisée lors de l'appel à travers les répertoires ou lorsque le répertoire est plus profond) Chemins: {'jQuery': 'http://libs.baidu.com/jquery/2.0.0/'}, // Set Fichier Encoding Charset: "UTF-8", // Preload Fichier Preload: ['jQuery']}); // référence le fichier d'entrée principal seajs.use (['main', 'jQuery'], fonction (e, $) {// function de rappel alert ("Chargez tout terminé");}); </cript>Fichier d'entrée principal des Seajs (Main)
Définir (fonction (require, exportations, module) {// Le fichier d'entrée principal introduit d'autres dépendances de fichiers // var testReq = require ('index'); var testReq = require.async ('index', function () {// async chargement de rappel alert ("je suis la fonction de rappel de l'index de chargement asynchrone"); TestReq.Testinit ();Fichier de dépendance SEAJS (index)
Définir (fonction (require, exports, module) {// relâchez l'interface vers les exports extérieurs.Testinit = function () {alert ("je suis une interface");}; // si vous avez besoin de publier un grand nombre d'interfaces, vous pouvez utiliser le module var testoBj = {nom: "Qiangck", "Man", textfun: function () {alert (". module.exports ");}} // module.exports reçoit obj obj module.exports = testoBj;});Commande de chargement de fichiers
Commençons par Hello.html pour voir comment organiser le code à l'aide de Sea.js.
Modules de chargement en page
À la fin de la page hello.html, après avoir introduit Sea.js via le script, il y a un code de configuration:
// Configuration simple de Seajs Seajs.config ({base: "../sea-modules/", alias: {"jQuery": "jQuery / jQuery / 1.10.1 / jQuery.js"}}) // Chargez la module d'entrée Seajs.use ("../ static / hello / src / main")Une fois le téléchargement de Sea.js terminé, le module d'entrée sera chargé automatiquement. Le code de la page est aussi simple.
Code de module
Ce petit jeu a deux modules, spinning.js et main.js, qui suivent la méthode d'écriture unifiée:
// Tous les modules définissent définir (fonction (require, exports, module) {// introduire la dépendance var via require $ = require ('jQuery'); var spinning = requis ('./ spinning'); // fournir l'interface à l'extérieur par module exports.dosomething = ... // ou fournir l'interface à l'extérieur.Exports module.exports = ...});Ce qui précède est le format d'écriture du module CMD recommandé par Sea.js. Si vous avez utilisé Node.js, tout est naturel.