Figure petits coupés concepts clés de l'analyse de l'auto-culture

avant-propos

avertissement de haute énergie, avant robuste sentier de montagne

Dans le dernier article une brève discussion au sujet de la Js modulaire, tout d'abord d'examiner les deux courants modulaires spécifications:

CommonJS spécifications du module de charge synchrone
spécifications du module de chargement asynchrone AMD / CMD

spécification de sortie CMD qui est le SeaJs actuellement très populaire, cet article est d'expliquer la rencontre de quelques concepts importants d'utilisation

module nommé
Module anonyme
C'est l'ID de chemin principe

Module anonyme

SeaJs modules définissent généralement d'une manière anonyme comme suit:

define(function(require,exports,module){xx})

module nommé

SeaJs En plus de définir la définition du module anonyme, le module peut également définir le nom

//define(BlockID,[Deps],function(require,exports,module){})
 define(‘A’,[],function(require,exports,module){xx})

Ce qui peut

Le premier paramètre définit le nom du module (à savoir, ID), utilisé pour identifier de manière unique le module
Le second paramètre pour le paramètre dépendant module du corps de la fonction du module de référence pour identifier le module qui dépend également de modules
Le troisième paramètre corps de module

Pourquoi avons-nous besoin d'être module nommé?

En effet, nous pouvons mettre tous les modules sont écrits de façon anonyme. Mais il a un gros inconvénient est le fichier Js modulaire peut provoquer un nombre particulièrement important, cela augmenterait efficacement le nombre de requêtes HTTP que
nous savons, relativement faible dans le fichier lorsque la taille du fichier ne modifie pas de manière significative le http des vitesses de téléchargement, mais si le fichier divisé en deux fichiers à télécharger, le coût accru est en effet un grand http
, donc nous avons besoin de modules Js fragmentés sont combinés en un seul fichier dans de nombreux cas. Mais tant de modules combinés dans un seul document, tous anonymes, le système à distinguer qui est qui ce module? Nous avons donc besoin d'identifier ces modules à un ID différent. Ainsi , ceux avec l'ID du module, le module est appelé à être nommé

À savoir, l'ID de chemin

Le module nommé ci - dessus explique ce qui est, pourquoi vous avez besoin le nom des appareils du module, nous arrivons maintenant à être nommé nom du module

SeaJs遵循的是路径即ID命名规则，意思就是具名模块的ID名是路径的一部分. 而沿着最终拼接出来的路径，肯定可以找得到这个具名模块

Sons autour, mais cette règle est très, très important . Auteur aussi dans le processus de l' étape de SeaJs compréhension sur le chemin d'innombrables puits, ici pour mettre en évidence un certain
premier regard sur le genre de chemin SeaJs écriture, en général, il peut être divisé en trois types.

Chemin relatif (caractères commençant chemin relatif, par exemple ../js/), le chemin de cette page comme point de départ
chemin direct ( en commençant par répertoire directe, par exemple js/), comme point de départ du chemin vers baseUrl
Chemin d'accès racine ( en commençant par le chemin racine, par exemple /app/js/) chemin vers le répertoire racine du projet en tant que point de départ

Prenez ensuite le fichier d'entrée index.html, par exemple:


<!--例1-->
<script>
    seajs.config({
    base: "../js/",      
    alias:{"JQ":"lib/jquery"}        
    })
    
    seajs.use("src/index.js")  
</script>

baseLe paramètre est la page en cours (index.html) comme référence, le chemin relatif est réglé sur la base baseUrl.
Dans le présent mode de réalisation l' baseensemble utilisé dans la forme d'un chemin relatif,baseUrl ＝ (index.html的位置) ＋ (../js/)
aliasUn module peut être nommé ( par exemple du module lib / jquery ID anonyme) alias (JQ), profitez d'alias qui peut être très long nom de chemin module nommé lui - même devient petit frais courte, généralement nécessaire à la page bibliothèques de référence.
dans ce mode de réalisation de la voie de transmission est une forme de JQ de trajet direct, le chemin = JQ (baseUrl) + (lib/jquery) = (index.html的位置)+ (../js/) + (lib/jquery/)
sea.useloader SeaJS est utilisé pour spécifier l'entrée, à travers les js entrée requises reload la page 7788 JS module de chargement de la demande pour atteindre le but de
la présente forme de réalisation, le chemin de sea.use est une forme de trajet direct, l'entrée chemin du fichier index.js =(baseUrl) + (src/index.js) = (index的位置) + (../js/) + (src/index.js)

Si vous écrivez sous une forme différente:

<!--例2-->
<script>
    seajs.config({
    base: "../js/",      
    alias:{"JQ":"../js/lib/jquery"}        
    })
    
    seajs.use("../js/src/index.js")  
</script>

base de réglage sous la forme d'un chemin relatif, puis baseUrl = (index.html的位置) ＋ (../js/)
chemin d'alias JQ après que le chemin est sous la forme d'un rapport, le chemin JQ = (index.html的位置) ＋ (../js/lib/jquery)
chemin de sea.use est sous la forme d'un chemin relatif, le chemin d'accès d'un fichier d'entrée = index.js (index.html的位置) + (../js/src/index.js)

Maintenant, prenez par exemple 1:

<!--例1-->
<script>
    seajs.config({
    base: "../js/",      
    alias:{"JQ":"lib/jquery"}        
    })
    
    seajs.use("src/index.js")  
</script>

Étant donné que le module nommé alias appelé lib / jquery, jquery alors votre ID define défini par le module doit être lib / jquery

define(‘lib/jquery’,[],function(require,exports,module){xx})

En outre, parce que aliasle module nommé (lib/jquery)utilise un chemin direct, basé sur le principe qui est l'ID de chemin, vous devriez être en mesure de suivre (baseUrl) + (lib/jquery)pour trouver l'emplacement module nommé, se trouve, sera certainement une erreur

Maintenant, prenez par exemple 2:

<!--例2-->
<script>
    seajs.config({
    base: "../js/",      
    alias:{"JQ":"../js/lib/jquery"}        
    })
    
    seajs.use("../js/src/index.js")  
</script>

Étant donné que le module nommé alias appelé ../js/lib/jquery, votre ID de module définir jquery, par définition, doit être ../js/lib/jquery

define(‘../js/lib/jquery’,[],function(require,exports,module){xx})

En outre, parce que aliasle module nommé (../js/lib/jquery)utilise un chemin relatif de la voie, selon le principe qui est l'ID de chemin, vous devriez être en mesure de suivre index.html当前位置 + (../js/lib/jquery)pour trouver l'emplacement module nommé, se trouve, sera certainement une erreur

L'utilisation réelle

Mais sur l'utilisation réelle, nous~~de base~~Ne pas écrire le module anonyme, mais tout écrire le module anonyme
et l' automatisation de la construction par le biais de plug-in des outils (tels que grogner, gulp, fis3) du module pour résoudre automatiquement anonyme anonyme des questions telles que la fourniture de connexes plug-ins grognement:

Module grunt-cmd de transport pour convertir le module anonyme nommé
grunt-cmd-concat module de fusion sera nommé à un fichier compressé Js

épilogue

SeaJs Dafa est bon, Grunt Dafa est bon, mais au moment de l' utilisation de ces outils, pas seulement un ou deux démo copie sur le bac. Dans de nombreux cas , vous souhaitez régler la structure de répertoire en fonction des caractéristiques de leurs propres œuvres, et 模块所在的路径, et 模块的ID, et enfin JS合并压缩le processus sont étroitement liés. Par conséquent, ils doivent comprendre les règles, il peut être encore plus facile à utiliser