Série de didacticiels d'introduction à SeaJS : Utilisation de SeaJS (2)_Seajs

Télécharger et installer

Pour utiliser SeaJS dans votre projet, tout ce que vous avez à faire est de télécharger sea.js et de le placer quelque part dans votre projet.
Le projet SeaJS est actuellement hébergé sur GitHub et la page d'accueil est https://github.com/seajs/seajs/. Vous pouvez télécharger sea.js (compressé) ou sea-debug.js (non compressé) depuis le répertoire build de sa bibliothèque git.
Après le téléchargement, placez-le à l'emplacement correspondant du projet, puis introduisez-le via la balise <script> </script>

Principes de développement de base de SeaJS

Avant d'aborder l'utilisation spécifique de SeaJS, présentons d'abord le concept modulaire et les principes de développement de SeaJS.
Le principe de base de l'utilisation de SeaJS pour développer du JavaScript est le suivant : tout est un module. Après l'introduction de SeaJS, l'écriture de code JavaScript devient l'écriture de modules les uns après les autres. Le concept de modules dans SeaJS est quelque peu similaire aux classes orientées objet - les modules peuvent avoir des données et des méthodes, et les données et les méthodes peuvent être définies comme publiques ou privées. . Les données publiques et les méthodes peuvent être appelées par d'autres modules.
De plus, chaque module doit être défini dans un fichier js distinct, c'est-à-dire qu'un correspond à un module.
Ce qui suit décrit l'écriture et l'appel des modules.

Définition et rédaction des modules

Fonction de définition de module définir
La fonction "define" est utilisée dans SeaJS pour définir un module. Parce que la documentation SeaJS n'a pas de référence complète sur Définir, j'ai lu le code source de SeaJS et j'ai découvert que Définir peut recevoir trois paramètres :

Copier le code Le code est le suivant :

/**
* Définit un module.
* @param {string=} id L'identifiant du module.
* @param {Array.|string=} deps Les dépendances du module.
* @param {function( )|Object} factory La fonction d'usine du module.
*/
fn.define = function(id, deps, factory) {
//code de la fonction…
}

Ce qui précède est ce que j'ai extrait du code source de SeaJS. Les paramètres qui peuvent être définis sont l'ID du module, le tableau de modules dépendants et la fonction d'usine. Après avoir lu le code source, j'ai découvert que les règles d'analyse définies pour différents nombres de paramètres sont les suivantes :
S'il n'y a qu'un seul paramètre, attribuez-le à l'usine.
S'il y a deux paramètres, le second est affecté à factory ; si le premier est array, il est affecté à deps, sinon il est affecté à id.
S'il y a trois paramètres, attribuez-les respectivement à id, deps et factory.
Cependant, presque tous les endroits où définir est utilisé, y compris les exemples officiels de SeaJS, n'y transmettent qu'une fonction d'usine, similaire au code suivant :

Copier code Le code est le suivant :

define(function(require, exports, module) {
//code du module...
>});

Personnellement, il est recommandé de suivre le standard de l'exemple officiel SeaJS et de définir le module avec un paramètre définir. Alors, qu’arrivera-t-il aux identifiants et aux dépôts ?
id est la chaîne d'identification d'un module. Lorsque définir n'a qu'un seul paramètre, id se verra attribuer par défaut le chemin absolu de ce fichier js. Si définir est utilisé pour définir un module dans le fichier a.js sous exemple.com, l'ID de ce module sera attribué à http://example.com/a.js. Il est recommandé de ne pas transmettre l'ID à moins que. il y a un besoin particulier. Généralement, deps n'a pas besoin d'être transmis. Les modules qui doivent être utilisés peuvent être chargés avec require.

Analyse d'usine de fonction d'usine

La fonction d'usine est le corps principal et l'objectif du module. Lorsqu'un seul paramètre est passé à définir (méthode d'écriture recommandée), ce paramètre est la fonction usine. A ce moment, les trois paramètres de la fonction usine sont :
1.require - fonction de chargement de module, utilisée pour enregistrer les modules dépendants. .
2.exports——Point d'interface, la définition de données ou de méthodes dessus l'exposera aux appels externes.
3.module——Métadonnées du module.
Ces trois paramètres peuvent être affichés et spécifiés selon les besoins.
Parlons des modules. Le module est un objet qui stocke les méta-informations du module, comme suit :
1.module.id - l'ID du module.
2.module.dependencies - un tableau qui stocke une liste des ID de tous les modules dont dépend ce module.
3.module.exports - pointe vers le même objet que les exportations.

Trois modes d'écriture des modules

Le premier mode de définition des modules est basé sur les exports :

Copier le code Le code est le suivant :

define(function(require, exports, module) {
var a = require('a'); //Introduire un module
var b = require('b'); // Introduire le module b

var data1 = 1; //Données privées

var func1 = function() { //Méthode privée
Return a.run(data1);
}

exports.data2 = 2; //Données publiques

exports.func2 = function() { //Méthode publique
return 'bonjour';
}
} );

Ce qui précède est un mode de définition de module relativement "authentique". En plus d'attacher des données et des méthodes publiques aux exportations, vous pouvez également renvoyer directement un module de représentation d'objet. Par exemple, le code suivant a la même fonction que le code ci-dessus :

Copier le code Le code est le suivant :

define(function(require) {

var a = require('a'); //Introduire un module
var b = require(' b'); //Introduire le module b

var data1 = 1; //Données privées

var func1 = function() { //Méthode privée
return a.run(data1 );
}

return {
data2 : 2,
func2 : function() {
return 'bonjour';
}
};
});

Si la définition du module n'a pas d'autre code et renvoie uniquement un objet, elle peut également être simplifiée comme suit :

Copiez le code Le code est le suivant :

define({

data: 1,
func: function() {
return 'hello';
}
}) ;

La troisième méthode est très adaptée aux modules qui définissent des données JSON pures.

Chargement et référence du module

Algorithme d'adressage de module
Comme mentionné ci-dessus, un module correspond à un fichier js, et lors du chargement d'un module, un paramètre string est généralement fourni pour indiquer à la fonction de chargement le module requis, donc il est nécessaire d'avoir un algorithme d'analyse depuis l'identifiant de chaîne jusqu'au chemin du fichier où se trouve le module réel. SeaJS prend en charge les identifiants suivants : Adresse absolue - donne le chemin absolu vers le fichier js.

Par exemple :

Copier le code Le code est le suivant :

require("http:/ /example/js /a");

signifie charger http://example/js/a.js.
Adresse relative - Utilisez l'appel relatif pour trouver le module en utilisant l'adresse relative du fichier js où se trouve la fonction de chargement.
Par exemple, chargez

dans http://example/js/b.js Copiez le code Le code est tel suit :

require("./c");

charge http://example/js/c.js.
Adresse de base - Si l'identifiant de la chaîne de chargement n'est ni un chemin absolu ni commençant par "./", il sera adressé par rapport à la "base" dans la configuration globale SeaJS. Cette méthode sera abordée plus tard.
Notez qu'il n'est pas nécessaire de passer le suffixe ".js" lors du chargement du module ci-dessus, SeaJS ajoutera automatiquement ".js". Cependant, il ne sera pas ajouté dans les trois situations suivantes :
Lors du chargement du CSS, tel que :

Copier le codeLe le code est le suivant :

require("./module1-style.css");

Lorsque le chemin contient "?", tel que :

Copier le code Le code est le suivant :

require(http://example /js/a.json?cb=func);

Lorsque le chemin se termine par "#", par exemple :

Copier le code Le code est le suivant :

require("http://example/js/a.json#");

En fonction des différents scénarios d'application, SeaJS fournit trois API pour charger les modules, à savoir seajs.use, require et require.async, qui sont présentées ci-dessous.

seajs.use

seajs.use est principalement utilisé pour charger des modules d'entrée. Le module d'entrée est équivalent à la fonction principale du programme C et est également la racine de l'ensemble de l'arborescence des dépendances du module. Dans l'exemple TinyApp ci-dessus, init est le module d'entrée. L'utilisation de seajs.use est la suivante :

Copier le code Le code est le suivant :

//Mode unique
seajs.use('./a');

//Mode de rappel
seajs.use('./a', function(a) {
a.run();
});

//Mode multi-module
seajs.use(['./a', './b'], function(a, b ) {
a.run ();
b.run();
});

Généralement, seajs.use n'est utilisé que pour charger le module de saisie sur la page , SeaJS analysera tous les modules dépendants le long du module d'entrée et les chargera. S'il n'y a qu'un seul module d'entrée, vous pouvez omettre seajs.use en ajoutant l'attribut "data-main" à la balise de script qui introduit sea.js. Par exemple, l'index.html de TinyApp ci-dessus peut également être modifié comme suit. écriture :

Copier le code Le code est le suivant :

Cette façon d'écrire rendra le HTML plus concis.

exiger

require est la principale méthode de chargement de module de SeaJS Lorsque d'autres modules sont nécessaires dans un module, require est généralement utilisé pour charger :

Copier le codeLe code est le suivant :

var m = require('/path/to/module/file');

Voici une brève introduction au mécanisme de chargement automatique de SeaJS. Comme mentionné ci-dessus, après avoir utilisé SeaJS, le code HTML n'a besoin que de contenir sea.js. Alors, comment les autres fichiers js sont-ils chargés ? SeaJS téléchargera d'abord le module d'entrée, puis utilisera des expressions régulières le long du module d'entrée pour correspondre à toutes les exigences du code, puis téléchargera le fichier js correspondant en fonction de l'identifiant du chemin de fichier dans le require, puis itérera et effectuera des opérations similaires sur le fichier js téléchargé. L'ensemble du processus est similaire à une opération de parcours de graphe (car il peut y avoir des dépendances intercycliques, la structure entière des données de dépendance est un graphe plutôt qu'un arbre).
Après avoir compris le point ci-dessus, les règles suivantes sont faciles à comprendre :
L'identifiant de chemin transmis à require doit être une chaîne littérale, pas une expression. Par exemple, la méthode suivante d'utilisation de require est incorrecte :

Copier le code Le code est le suivant :

require('module' '1');

require (' Module'.toLowerCase());

Cela empêchera SeaJS d'effectuer une correspondance régulière correcte pour télécharger le fichier js correspondant.

require.async

Comme mentionné ci-dessus, SeaJS enregistrera tous les fichiers js requis en même temps via une analyse statique lorsque la page html est ouverte. Si vous souhaitez qu'un certain fichier js soit téléchargé uniquement lorsqu'il est utilisé, vous pouvez utiliser require.async :

Copier le code Le code est le suivant :

require.async('/path/to/module/ file', function(m) {

//code de rappel...
});

De cette façon, uniquement lorsque ce module est utilisé, le fichier js correspondant sera téléchargé, réalisant ainsi le pressage du code JavaScript. Doit être chargé.

Configuration globale de SeaJS
SeaJS fournit une méthode seajs.config pour définir la configuration globale et recevoir un objet de configuration représentant la configuration globale. L'utilisation spécifique est la suivante :

Copier le code Le code est le suivant :

seajs.config({

base : 'chemin/vers/jslib/',
alias : {
'app' : 'chemin/vers/app/'
},
jeu de caractères : 'utf-8' ,
timeout : 20000,
debug : false
});

où base représente le chemin de l'adresse de base lors de l'adressage de base. Par exemple, la base est définie sur http://example.com/js/3-party/, puis :

Copier le code Le code est le suivant :

var $ = require('jquery');

chargera http://example.com/js/3-party/jquery.js.
alias peut définir des abréviations pour les longs chemins communs.
charset représente l'attribut charset de la balise script lors du téléchargement de js.
timeout indique la durée maximale de téléchargement des fichiers, en millisecondes.
debug indique s'il faut travailler en mode débogage.

Comment SeaJS fonctionne avec les bibliothèques JS existantes

Pour utiliser une bibliothèque JS existante telle que jQuery avec SeaJS, il vous suffit d'encapsuler la bibliothèque existante selon les règles de définition de module de SeaJS. Par exemple, voici la méthode d'encapsulation de jQuery :

Copiez le code Le code est le suivant :

define(function() {

//{{{le code original de jQuery démarre
/* !
* Bibliothèque JavaScript jQuery v1.6.1
* http://jquery.com/
*
* Copyright 2011, John Resig
* Double licence sous les licences MIT ou GPL version 2.
* http://jquery.org/license
*
* Comprend Sizzle.js
* http://sizzlejs.com/
* Copyright 2011, The Dojo Foundation
* Publié sous les licences MIT, BSD et GPL.
*
* Date : Jeu 12 mai 15 : 04:36 2011 -0400
*/
//...
//}}}Le code original de jQuery se termine

return $.noConflict();
}) ;

Packaging et déploiement du projet SeaJS

SeaJS a initialement intégré un outil d'empaquetage et de déploiement spm. Plus tard, afin d'être plus KISS, l'auteur a séparé spm de SeaJS et l'a transformé en un projet distinct. L'idée principale de spm est de fusionner et de compresser les codes de tous les modules et de les fusionner dans le module d'entrée. En raison des caractéristiques de SeaJS lui-même, le HTML peut être facilement basculé entre l'environnement de développement et l'environnement de production sans aucune modification. . Cependant, comme spm n'a pas encore publié de version officielle, cet article n'a pas l'intention de le présenter en détail. Les amis intéressés peuvent se référer à la page d'accueil de son projet github https://github.com/seajs/spm/.
En fait, étant donné que les outils de fusion et de compression JS utilisés par chaque projet sont différents, spm peut ne pas être totalement adapté à chaque projet. Après avoir compris les principes de SeaJS, vous pouvez écrire un script de fusion et de package qui répond aux caractéristiques de votre propre projet.