Documents non officiels, organiser le texte et des exemples de vos propres documents officiels pour une recherche rapide.
Pourquoi utiliser Sea.js?
Sea.js poursuit des méthodes d'écriture et d'organisation de code simples et naturelles, avec les caractéristiques de base suivantes:
Spécification de définition du module simple et convivial: Sea.js suit la spécification CMD et peut écrire du code du module comme node.js.
Organisation de code naturel et intuitif: le chargement automatique des dépendances et la configuration concise et claire nous permettent de profiter de plus de codage.
Sea.js fournit également des plugins communs, qui sont très utiles pour le débogage du développement et l'optimisation des performances, et ont de riches interfaces extensibles.
compatibilité
Sea.js a des cas de test complets et est compatible avec tous les navigateurs grand public:
Chrome 3+
Firefox 2+
Safari 3.2+
Opéra 10+
IE 5.5+
Sea.js peut fonctionner du côté mobile, y compris l'application en mode hybride. En théorie, Sea.js peut fonctionner sur n'importe quel moteur de navigateur.
Seajs.ConfigObject
objet alias
Configuration d'alias, après la configuration, vous pouvez utiliser require to appelez required ('jQuery');
SeaJs.Config ({alias: {'jQuery': 'jQuery / jQuery / 1.10.1 / jQuery'}}); Define (fonction (require, exports, module) {// référence jQuery module var $ = require ('jQuery');});Objet des chemins
Définissez des chemins pour faciliter les appels transversaux. En définissant le chemin de manière flexible, vous pouvez spécifier sur un certain répertoire sans affecter la base.
SeaJs.Config ({// Set Path Paths: {'Gallery': 'https://a.alipayobjects.com/gallery'}, // Définit des alias pour faciliter les appels à alias: {'cale Define (fonction (require, exports, module) {var _ = require ('calendrier'); // => le chargé est https://a.alipayobjects.com/gallery/underscore.js});objet VARS
Configuration variable. Dans certains scénarios, le chemin du module ne peut être déterminé que pendant l'exécution, et vous pouvez utiliser la variable VARS pour la configurer.
VARS est configuré avec la valeur de variable dans l'identifiant du module, et la variable est représentée par {key} dans l'identifiant du module.
SeaJs.Config ({// Configuration variable VARS: {'Locale': 'zh-cn'}}); Define (fonction (require, exports, module) {var lang = require ('./ i18n / {Locale} .js'); // => le chargé est path / to / i18n / zh-cn.js});tableau de cartes
Cette configuration peut cartographier et modifier les chemins de module, et peut être utilisé pour la conversion de chemin, le débogage en ligne, etc.
Seajs.config ({map: [['.js', '-debug.js']]}); définir (fonction (require, exports, module) {var a = require ('./ a'); // => le chargé est path / vers / a-debug.js});tableau de précharge
À l'aide de l'élément de configuration de la précharge, vous pouvez charger et initialiser le module spécifié à l'avance avant de charger le module normal.
La chaîne vide dans la précharge sera ignorée.
// dans les anciens navigateurs, chargez les modules ES5 et JSON Seajs.config ({preload: [function.prototype.bind? '': 'Es5-safe', this.json? '': 'Json']});Remarque: La configuration en précharge doit être chargée jusqu'à l'utilisation. Par exemple:
SeaJs.Config ({Preload: 'A'}); // Avant de charger B, il garantira que le module A a chargé et exécuté SeaJs.Use ('./ B');La configuration de précharge ne peut pas être placée dans le fichier du module:
SeaJs.Config ({Preload: 'A'}); définir (fonction (require, exportts) {// Lors de l'exécution ici, il ne peut pas être garanti que le module a a été chargé et exécuté});Debug Boolean
Lorsque la valeur est vraie, le chargeur ne supprime pas la balise de script insérée dynamiquement. Le plug-in peut également décider de la sortie du journal et d'autres informations en fonction de la configuration de débogage.
chaîne de base
Sea.js analysera l'identifiant de niveau supérieur par rapport au chemin de base.
Remarque: Généralement, veuillez ne pas configurer le chemin de base. Mettre Sea.js dans le chemin approprié est souvent plus simple et plus cohérent.
CharsetString | Fonction
L'attribut Charset de la balise <Script> ou <ink> lors de l'obtention du fichier de module. La valeur par défaut est UTF-8
Charset peut également être une fonction:
SeaJs.Config ({Charset: fonction (URL) {// Les fichiers du répertoire XXX sont chargés en codage GBK if (url.indexof ('http://example.com/js/xxx') === 0) {return 'gbk';} // autres fichiers sont encodés dans UTF-8 return 'utf-8';});Seajs.User la fonction
Utilisé pour charger un ou plusieurs modules dans une page. Seajs.use (id, rappel?)
// Charger un module SeaJs.use ('./ a'); // Charger un module, exécuter un rappel SeaJs.use ('./ a', fonction (a) {a.doSomething ();}); // Chargez plusieurs modules, exécuter le rappel Seajs.use (['./ a', './b'], fonction (a, b) {a.dosomething ();Remarque: SeaJs.Use n'a rien à voir avec l'événement DOM Prêt. Si certaines opérations doivent être exécutées après DOM prête, vous devez utiliser des bibliothèques de classe telles que jQuery pour vous assurer. Par exemple
SeaJs.use (['jQuery', './Main'], fonction ($, main) {$ (document) .ready (function () {main.init ();});});Remarque: le premier paramètre de la méthode d'utilisation doit être présent, mais il peut être nul ou une variable
var bootstrap = ['bootstrap.css', 'bootstrap-re-reselive.css', 'bootstrap.js']; seajs.use (bootstrap, function () {// faire quelque chose});Seajs.cache ojbect
Grâce à SeaJs.Cache, vous pouvez vérifier toutes les informations du module dans le système de module actuel.
Par exemple, ouvrez Seajs.org, puis entrez Seajs.cache dans le panneau de console des outils de développeur WebKit, et vous pouvez voir:
Objet> http://seajs.org/docs/assets/main.js: x> https://a.alipayobjects.com/jquery/jquery/1.10.1/jquery.js: x> __proto__: objet: objet
Ce sont les modules utilisés sur la page d'accueil du document. Développez un élément pour voir les informations spécifiques du module. La signification peut être trouvée dans la section du module de la spécification de définition du module CMD.
fonction SeajsLove
Similaire à require.resolve, le mécanisme interne du système du module utilisera la résolution de chemin des paramètres de chaîne entrants.
Seajs.Resolve ('jQuery'); // => http: //path/to/jquery.jsseajsololve ('./a', 'http://example.com/to/b.js') ;/ => http://example.com/to/a.jsLa méthode SeaJs. Resolve peut non seulement être utilisée pour déboguer si la résolution de chemin est correcte, mais aussi dans l'environnement de développement du plug-in.
Seajs.data objet
Grâce à SeaJs.Data, vous pouvez visualiser toutes les configurations SEAJS et les valeurs de certaines variables internes, qui peuvent être utilisées pour le développement du plug-in. Il peut également être utilisé pour le débogage lors du chargement de problèmes.
Questions fréquemment posées
À propos de l'identification du module
Les identificateurs de modules SeaJS sont principalement de petites cordes de chameau ,. ou ..
// Dans l'usine de http://example.com/js/a.js: require.resolve ('./ b'); // => http://example.com/js/b.js// dans l'usine de http://example.com/js/a.js: require.resolve ('../ c'); // => http://example.com/c.jsIl est divisé en logos de niveau relatif et de haut niveau. Si cela commence avec. ou., c'est un identifiant relatif. Le petit interrupteur de chaîne de chameau est l'identifiant de niveau supérieur.
// Supposons que le chemin de base soit: http://example.com/assets/// dans le code du module: require.resolve ('galerie / jQuery / 1.9.1 / jQuery'); // => http://example.com/assets/gallery/jquery/1.9.1/jquery.jsÀ propos du chemin
En plus d'être une identification de niveau relativement élevé, les SEAJS peuvent également utiliser des chemins normaux pour charger des modules.
Passons à l'analyse du script de la page actuelle (vous pouvez cliquer avec le bouton droit pour afficher le code source)
// Le chemin de mer de Sea.js, c'est-à-dire le chemin de base, est relatif à la page actuelle <script src = "http://yslove.net/actjs/assets/sea-modules/seajs/2.1.1/sj.js"> </ script> <script type = "Text / javascrip // Identification de niveau supérieur, basé sur le chemin de base 'ActJs': 'ActJs / Core / 0.0.7 / Core.js', // => http: // 'position': 'ActJs / util / 0.0.2 / position.js'}}); SeaJs.Config ({Alias: {// Normal Path, Relative to the actuel page 'affiche': affichez l'affichage ': Affichez: affichez l'affichage': Affiche: Affiche: Affiche: Affichez l'affichage actuel '. '../../actjs/assets/widget/src/widget-affix.js', // identifiant relatif, relatif à la page actuelle 'init': './src/init.js'}}); </ script>Au début, je pense que le chemin Seajs est un peu inhabituel, car c'est le chemin de base. N'oubliez pas que le chemin de base est le chemin supérieur du fichier dans Sea.js, puis tous les identifiants de niveau supérieur et identificateurs relatifs sont ajustés par rapport à cette base.