Charge requireJS module inline le corps HTML?
Je suis l'intégration de RequireJS dans un CMS, donc je l'ai mise sur le bas de ma page modèle:
<html>
<body>
{Placeholder1}
<script src="scripts/require.js" data-main="scripts/main"></script>
{Placeholder2}
</body>
</html>
Ensuite sur chaque page, je voudrais créer une fonction qui tire parti de RequireJS. J'ai donc essayé de placer ce sur le bas de la page:
<html>
<body>
<h1>Home</h1>
<div class="slider">Slider content</div>
<script src="scripts/require.js" data-main="scripts/main"></script>
<script type="text/javascript">
require([
'jquery',
'utils',
'slider'
], function ($, utils, slider) {
slider.start();
});
</script>
</body>
</html>
Mais je suis 404 sur jquery, utils et le slider js fichiers. Il semble que ce n'est pas la lecture de mon main.js les configs que j'ai:
require.config({
paths: {
jquery: 'libs/jquery-1.8.1.min',
utils: 'libs/utils',
slider: 'libs/jquery.slider.min'
},
shim: {
slider: ['jquery']
}
});
require([ 'utils' ], function (utils) {
utils.init();
});
J'ai essayé de chargement RequireJS et main dans la page de la tête, mais a obtenu des résultats incohérents de cette façon. Parfois, jquery, utils et curseur serait chargé dans le temps et d'autres fois non. C'est comme si la ligne "exiger" sur le bas de la page n'est pas au courant de la principale RequireJS sur la page ou les règles de dépendances, mais mon point d'arrêt est atteint dans main.js donc je sais qu'il est appelé. Est-ce parce que main.js est chargé de manière asynchrone, mais mon inline "exiger" bloc sur le bas de la page est chargée sur la page de rendu? Comment puis-je contourner ce problème?
J'ai utilisé RequireJS avec succès avant, mais sans un CMS. J'ai toujours l'habitude de "définir" et des modules toujours appelé asychronously, mais n'a jamais eu à appeler RequireJS fonction inline comme ça. Toutes les idées sur la manière correcte de le faire?
OriginalL'auteur Basem | 2012-10-02
Vous devez vous connecter pour publier un commentaire.
La chose importante ici est que les options de configuration sont mis en avant tous les modules sont demandés. Comme vous l'avez souligné à juste titre, il y a des conditions de course que signifient les options de configuration dans votre
main.js
ne sont pas chargés dans le temps. Le plus simple chemin de ronde, ce serait de mettre les options de configuration inline avant larequire.js
script est chargé.En bas de la page:
Voir aussi Comment RequireJS travailler avec plusieurs pages et une vue partielle?
scripts/main
fichier contient le MOINS JS module. En outre, supposons que la ligne nécessitent d'appel nécessite également de ce module. Maintenant, si la ligne téléphonique est accessible avant le script principal, est chargé (ce qui est généralement le cas), le module sera obtenu à deux reprises. Si le contenu n'est pas un AMD module cela peut conduire à des erreurs!OriginalL'auteur Simon Smith
Il semble que ce qui se passe est que le main.js est chargé de manière asynchrone, tandis que la ligne besoin est appelé immédiatement. C'est pourquoi il y a des résultats contradictoires. La solution est de ne PAS utiliser les données-le principal attribut et appelez le main.js fichier via la balise de script en dessous de la require.js balise de script.
Vous pouvez toujours déterminer la baseUrl de l'chargé main.js fichier de:
L'une des raisons de l'utilisation d'RequireJS est d'éviter une dépendance à l'égard des variables globales, donc éviter de le faire.
thx pour le conseiller. Avec des systèmes de CMS il est difficile de l'éviter. Dans mon opinion, presque tous les CMS sont obsolètes.
Ajout d'une réponse comme il a obtenu assez long 😉
Cela a été me rend fou! Je vous remercie. Le stupide: j'ai déjà eu ce genre de problème, il y a un an mais ne pense pas que cela tout de suite.
OriginalL'auteur Basem