Différence entre le chargement de script principal de données et normal
Lorsque vous utilisez RequireJS, quelle est la différence entre l'inclusion de votre script avec
<script data-main="scripts/main" src="scripts/require.js"></script>
et
<script src="scripts/require.js"></script>
c'est-à-dire qu'est-ce que le data-main changement d'attribut concernant le chargement dans un script? J'ai lu les documents à ce sujet , et le différent n'est pas entièrement clair pour moi.
Vous utilisez généralement un script data-main pour définir les options de configuration, puis chargez le premier module d'application. Remarque: la balise de script require.js générée pour votre module de données principal inclut l'attribut async. Cela signifie que vous ne pouvez pas supposer que le chargement et l'exécution de votre script de données principales se termineront avant les autres scripts référencés plus loin dans la même page.
La documentation mentionne que vous utiliserez généralement un script data-main pour définir les options de configuration et charger le premier module d'application - mais vous ne pouvez pas le faire également que via une ancienne balise script? Y a-t-il un avantage à faire la configuration en chargeant le module d'application avec un data-main attribut?
Est le seul différent avec data-main le chargement asynchrone? Ou y a-t-il quelque chose de plus?
data-main Est juste une autre façon d'effectuer l'appel initial require de votre application. Pour illustrer ... ceci:
<script data-main="scripts/main" src="scripts/require.js"></script>
est équivalent à ceci:
<script src="scripts/require.js"></script>
<script>require(["scripts/main"])</script>
Les deux formes sont toutes deux asynchrones. C'est vraiment tout ce qu'il y a à faire. Les considérations sur le nombre de points d'entrée dont vous disposez ou sur l'emplacement de la configuration RequireJS sont complètement orthogonales à l'utilisation de data-main. En d'autres termes, ces considérations jouent un rôle dans votre utilisation de data-main Dans la même mesure qu'elles jouent un rôle dans votre utilisation de require(["scripts/main"]).
La partie de la documentation que vous avez citée ne fait qu'obscurcir les choses en mentionnant que le script chargé avec data-main Crée un élément script dans l'élément head avec le async ensemble d'attributs, car ce n'est pas différent du chargement d'un script via RequireJS . Chaque script unique chargé par RequireJS aura un élément script créé pour lui, dans head, et aura l'attribut async défini.
Il est courant d'utiliser data-main Pour les applications qui n'ont qu'un seul point d'entrée et de placer la configuration de RequireJS dans le module spécifié dans data-main, Mais ce n'est en aucun cas requis. Par exemple, ceci est une utilisation parfaitement valable:
<script>
require = {
// RequireJS config here...
};
</script>
<script data-main="scripts/main" src="scripts/require.js"></script>
<script>
require(["foo"], function (foo) {
foo.something();
});
</script>
La configuration est donnée à RequireJS en définissant require dans l'espace global avant de charger RequireJS. (Si require est défini avant le chargement de RequireJS, il prendra la valeur de require comme configuration.) En plus de lancer l'application en chargeant scripts/main, Ce code charge également foo et appelle une méthode dessus: deux points d'entrée.
data-main Est pour quand vous voulez avoir un point d'entrée unique pour votre application. Cette ligne de script unique chargera RequireJS avec scripts/main.js Et lancera votre application.
Le résultat de
<script data-main="scripts/main" src="scripts/require.js"></script>
est que <script async src="scripts/main.js"></script> est ajouté au document lors de l'exécution; il s'agit du script qui contiendra votre bloc require.config() et récupérera votre premier script d'application. Si vous ne spécifiez pas de data-main, Vous ne chargez que Require et aucun de vos scripts d'application, sauf si vous chargez explicitement un fichier de configuration et le premier module.
Que pensez-vous que Require chargera si vous ne lui dites pas de charger quoi que ce soit?
Si vous faites pas utilisez data-main, Vous devez fournir un point d'entrée après loading Require (c'est ainsi que je l'ai toujours fait, pour pas de bonne raison autre que c'est comme ça que je l'ai appris.) Lisez à propos de options de configuration pour voir comment vous feriez cela.
J'utilise ce modèle en développement:
<script src="js/lib/require.js"></script>
<script src="js/config.js"></script>
<script>
// same as data-main
require.config({baseUrl : 'js'});
require(['js/main']);
</script>
En tant que point d'entrée unique, le contenu de config.js Et l'appel require(['js/main']) suivant seraient dans le script référencé comme data-main.
Si vous utilisez l'optimiseur statique pour créer un bundle de production, rien de tout cela n'a d'importance car vous chargez simplement le bundle.
data-main est le script que le fichier require.js traitera. Comme le dit la documentation, il est courant de définir des options de configuration dans ce script. Mais il existe d'autres façons de procéder. Dans de nombreux cas, c'est l'endroit le plus simple et le plus efficace. Mais pas toujours.
Le script pointé par data-main listera également les dépendances du code défini par le fichier. Les dépendances sont là où se trouve la viande. Il est typique, mais pas obligatoire, que ce premier module soit chargé et exécute ce qui est finalement l'application réelle.
Addendum en réponse au commentaire:
Il y a certains concepts dont vous devez être conscients qui aideront à donner un sens à cette approche.
Premièrement, il n'y a pas un seul (ou un couple, ou même quelques) script (s). Ce type de chargeur est conçu pour gérer beaucoup, beaucoup de très petits scripts. Chacun avec un objectif très spécifique et souvent (de préférence) unique. Appelez ces modules (ou unités) de scripts.
Tout module donné peut dépendre d'un certain nombre d'autres modules pour fonctionner. Le modèle AMD permet aux dépendances de chaque module d'être répertoriées dans la définition de ce module.
RequireJS triera qui a besoin de quoi et dans quel ordre et ne laissera pas les scripts s'exécuter jusqu'à ce que tous les modules dont ils dépendent soient chargés et prêts.
Ce n'est donc pas du tout comme mettre un lien de script (ou plusieurs liens) dans une page comme nous l'avons tous grandi. C'est une approche très différente du développement javascript. Une fois que vous avez compris et découvert comment décomposer votre code en unités de fonctionnalité discrètes, il est vraiment assez simple.
<script data-main="scripts/main.js" src="scripts/vendor/requirejs/require.js"></script>
src chargera d'abord "scripts/vendor/requirejs/require.js". Ensuite, l'attribut data-main exécutera "scripts/main.js".