Maison >interface Web >js tutoriel >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 :
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 :
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 :
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 :
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.
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 :
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 :
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 :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 :
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 :
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.