Télécharger et installer
Pour utiliser les Seajs dans votre projet, toute la préparation que vous devez faire est de télécharger Sea.js et de la mettre quelque part dans votre projet.
Le projet Seajs est actuellement hébergé sur GitHub, avec la page d'accueil à https://github.com/seajs/seajs/. Vous pouvez télécharger Sea.js (compressé) ou Sea-Debug.js (non compressé) dans le répertoire de construction de sa bibliothèque GIT.
Une fois le téléchargement terminé, mettez-le dans la position correspondante du projet, puis introduisez-le via la balise <cript> sur la page, et vous pouvez utiliser SEAJS.
Principes de développement de base des Seajs
Avant de discuter de l'utilisation spécifique des SeaJS, introduisons d'abord le concept modulaire et les principes de développement des SeaJS.
Le principe de base de l'utilisation de SEAJS pour développer JavaScript est: tout est un module. Après l'introduction de Seajs, la rédaction du code JavaScript est devenue une écriture d'un module après l'autre. Les données et les méthodes du public peuvent être appelées par d'autres modules.
De plus, chaque module doit être défini dans un fichier JS séparé, c'est-à-dire un correspondant à un module.
Ce qui suit décrit l'écriture et l'appel des modules.
Définition et écriture de modules
Fonction de définition du module définir
Dans les Seajs, utilisez la fonction "définir" pour définir un module. Étant donné que la documentation SEAJS n'a pas de référence complète pour la définition, j'ai lu le code source SeaJS et j'ai constaté que Define peut recevoir trois paramètres:
Copiez le code comme suit: / **
* Définit un module.
* @param {String =} ID L'ID du module.
* @param {Array. | String =} dépasse les dépendances du module.
* @param {function () | objet} usine La fonction d'usine du module.
* /
fn.define = fonction (id, deps, usine) {
// Code de fonction…
}
Ce qui précède est extrait du code source SEAJS. Après avoir lu le code source, j'ai constaté que les règles d'analyse pour le nombre de paramètres différents de définir sont les suivants:
S'il n'y a qu'un seul paramètre, affectez la valeur à l'usine.
S'il y a deux paramètres, le second est affecté à l'usine;
S'il y a trois paramètres, ils sont assignés respectivement à l'ID, les DEP et l'usine.
Cependant, presque tous les endroits où définir sont utilisés, y compris l'exemple officiel de Seajs, une seule fonction d'usine est adoptée, similaire au code suivant:
La copie de code est la suivante:
définir (fonction (require, exportations, module) {
// Code du module ...
});
Je vous recommande personnellement de suivre les normes des exemples officiels de SEAJS et de définir le module avec une définition de paramètre. Alors, que sera-t-il fait avec ID et DEP?
L'ID est la chaîne d'identification d'un module. Si vous utilisez définir pour définir le module dans le fichier A.JS sous Example.com, l'ID de ce module sera affecté à http://example.com/a.js. L'ID. Les DEP n'ont généralement pas besoin d'être transmis et les modules nécessaires peuvent être chargés de requises.
Fonction d'usine Analyse d'usine
Les fonctions d'usine sont le corps principal et la focalisation du module. Lorsqu'un seul paramètre est passé pour définir (écriture recommandée), ce paramètre est la fonction d'usine.
1. Fonction de chargement du module de requise, utilisée pour enregistrer les modules dépendants.
2. Le point d'exports-interface, lors de la définition de données ou de méthode, les expose aux appels externes.
3.Module - Les métadonnées du module.
Ces trois paramètres peuvent être sélectionnés au besoin pour afficher la spécification.
Parlons du module ci-dessous. Un module est un objet qui stocke les méta-informations du module, comme suit:
1.Module.id - L'ID du module.
2.Module.Dependces - Un tableau qui stocke la liste d'ID de tous les modules dont ce module dépend.
3.Module.exports - Point au même objet que les exportations.
Trois modes pour les modules d'écriture
Le premier mode pour définir les modules est le mode basé sur les exportations:
La copie de code est la suivante:
définir (fonction (require, exportations, module) {
var a = requis ('a');
var b = requis ('b');
var data1 = 1; // données privées
var func1 = fonction () {// méthode privée
retour a.run (data1);
}
export.data2 = 2;
export.func2 = function () {// Méthode publique
retour «bonjour»;
}
});
Ce qui précède est un modèle de définition de module relativement "authentique". En plus d'ajouter les données publiques et les méthodes des exportations, vous pouvez également renvoyer directement un objet pour représenter le module, comme le code suivant a la même fonction que le code ci-dessus:
Copiez le code comme suit: Define (fonction (require) {
var a = requis ('a');
var b = requis ('b');
var data1 = 1; // données privées
var func1 = fonction () {// méthode privée
retour a.run (data1);
}
retour {
data2: 2,
func2: function () {
retour «bonjour»;
}
};
});
Si la définition du module n'a pas d'autre code et ne renvoie qu'un seul objet, la méthode d'écriture simplifiée suivante peut être trouvée:
Copiez le code comme suit: Define ({
Données: 1,
func: function () {
retour «bonjour»;
}
});
La troisième méthode est très adaptée aux modules qui définissent les données JSON pures.
Chargement et référence des modules
Algorithme d'adressage du module
Comme mentionné ci-dessus, un module correspond à un fichier JS. où se trouve le module réel. Seajs soutient les identificateurs suivants:
Adresse absolue - Donne le chemin absolu vers le fichier JS.
comme:
La copie de code est la suivante: require ("http: // exemple / js / a");
Cela signifie charger http: //example/js/a.js.
Adresse relative - Utilisez des appels relatifs pour trouver le module pour trouver l'adresse relative du fichier JS où se trouve la fonction de chargement.
Par exemple, chargez-le en http: //example/js/b.js
La copie de code est la suivante: exiger ("./ c");
Puis chargez http: //example/js/c.js.
Adresse de base - Si l'identifiant de chaîne de chargement n'est ni un chemin absolu ni par "./", il est abordé par rapport à la "base" dans la configuration globale des SeaJS.
Notez que lors du chargement des modules ci-dessus, vous n'avez pas besoin de passer le nom du suffixe ".js" et les Seajs ajouteront automatiquement ".js". Mais les trois cas suivants ne seront pas ajoutés:
Lors du chargement de CSS, comme:
La copie de code est la suivante: require ("./ module1-style.css");
Quand le chemin contient "?", Comme:
La copie de code est la suivante: require (<a href = "http: //example/js/a.json? Cb = func"> http: //example/js/a.json? Cb = func </a> ));
Lorsque le chemin se termine par "#", comme:
La copie de code est la suivante: require ("http: //example/js/a.json#");
Selon différents scénarios d'application, SEAJS fournit trois API pour le chargement des modules, à savoir les SeaJ.User, l'exiger et l'exiger.async, qui sont introduits ci-dessous.
Seajs.User
Seajs.Use est principalement utilisé pour charger le module 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 de dépendance du module. Dans l'exemple TinyApp ci-dessus, init est le module d'entrée. L'utilisation de Seajs.Use est la suivante:
La copie de code est la suivante:
// Mode unique
Seajs.use ('./ a');
// mode de rappel
Seajs.use ('./ a', fonction (a) {
a.run ();
});
// mode multi-module
Seajs.use (['./ a', './b'], fonction (a, b) {
a.run ();
B.Run ();
});
Généralement, Seajs.Use est uniquement utilisé pour charger le module d'entrée sur la page. S'il n'y a qu'un seul module d'entrée, vous pouvez également omettre SEAJS.User en ajoutant l'attribut "Data-Main" à la balise de script qui introduit Sea.js. Méthode d'écriture suivante:
La copie de code est la suivante:
<! Doctype html>
<html lang = "zh-cn">
<adal>
<meta charset = "utf-8">
<Title> TinyApp </Title>
</ head>
<body>
<p> </p>
<script src = "./ sea.js" data-main = "./ init"> </cript>
</docy>
</html>
Cette façon d'écrire rendra HTML plus concise.
exiger
Le besoin est la méthode de chargement du module principal des SEAJS.
La copie de code est la suivante: var m = require ('/ path / to / module / fichier');
Voici une brève introduction au mécanisme de chargement automatique des SeaJS. Comme mentionné ci-dessus, après avoir utilisé SEAJS, incluez simplement Sea.js. Alors, comment les autres fichiers JS se chargent-ils? SEAJS téléchargera d'abord le module d'entrée, puis utilisera des expressions régulières pour correspondre à toutes les exigences dans le code le long du module d'entrée, puis téléchargez le fichier JS correspondant en fonction de l'identification du chemin du fichier dans l'exigence, puis itérera le fichier JS téléchargé. L'ensemble du processus est similaire au fonctionnement de traversée d'un graphique (car il peut y avoir une dépendance transversale, la structure des données de dépendance entière est un graphique plutôt qu'un arbre).
Une fois que vous comprenez le point ci-dessus, les règles suivantes seront faciles à comprendre:
L'identifiant de chemin passé pour exiger doit être un littéral de chaîne, pas une expression.
La copie de code est la suivante: require ('module' + '1');
exiger ('module'.tolowercase ());
Cela entraînera que SEAJS ne parviendra pas à effectuer des matchs réguliers corrects pour télécharger le fichier JS correspondant.
exiger.async
Comme mentionné ci-dessus, SeaJS enregistre tous les fichiers JS requis à la fois via une analyse statique lorsque la page HTML est ouverte.
Copiez le code comme suit: require.async ('/ path / to / module / fichier', fonction (m) {
// Code de rappel ...
});
De cette façon, ce n'est que lorsque ce module est utilisé, le fichier JS correspondant sera téléchargé, ce qui réalise le chargement à la demande du code JavaScript.
Configuration globale de SeaJs
SeaJS fournit une méthode SeaJs.Config qui peut configurer une configuration globale et recevoir un objet de configuration représentant la configuration globale. La méthode d'utilisation spécifique est la suivante:
Copiez le code comme suit: Seajs.config ({{
base: 'path / to / jslib /',
alias: {
'app ":' path / vers / app / '
},
Charset: «UTF-8»,
Timeout: 20000,
débogue: faux
});
Où la base représente le chemin d'adresse de base pendant l'adressage de la base. Par exemple, la base est définie sur http://example.com/js/3-party/, alors:
La copie de code est la suivante: var $ = require («jQuery»);
http://example.com/js/3-party/jquery.js sera chargé.
L'alias peut définir l'abréviation pour des chemins communs plus longs.
Charset représente l'attribut Charset de la balise de script lors du téléchargement JS.
Le délai d'expiration indique le temps maximum pour télécharger le fichier, en millisecondes.
Debug indique si cela fonctionne 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, encapsulez simplement la bibliothèque existante selon les règles de définition du module de Seajs. Par exemple, ce qui suit est la méthode d'encapsulation pour jQuery:
Copiez le code comme suit: Define (function () {
// {{{{jQuery Le code original commence
/ *!
* JAQUERY JavaScript Library V1.6.1
* http://jquery.com/
*
* Copyright 2011, John Rebi
* Dual sous licence sous les licences MIT ou GPL version 2.
* http://jquery.org/license
*
* Comprend Sizzle.js
* http://sizzlejs.com/
* Copyright 2011, la Dojo Foundation
* Libéré sous les licences MIT, BSD et GPL.
*
* Date: jeu 12 mai 15:04:36 2011 -0400
* /
// ...
//}}} jQuery Code original se termine
retourner $ .NoConflict ();
});
Emballage et déploiement du projet SEAJS
Seajs a initialement intégré un outil de déploiement emballé SM. L'idée principale de SPM est de fusionner et de compresser le code de tous les modules, puis de le fusionner dans le module d'entrée. . Cependant, puisque SPM n'a pas été publié pour la version officielle, cet article n'a pas l'intention de le présenter en détail.
En fait, comme les outils de fusion JS et de compression utilisés pour chaque projet sont différents, le SPM peut ne pas convenir entièrement pour chaque projet. Après avoir compris les principes des SeaJS, vous pouvez écrire un script de fusion et d'emballage qui correspond aux caractéristiques de votre projet.