Modularité JS-RequireJS-js tutoriel-php.cn

Aujourd'hui, je vous présente la modularisation JS - RequireJS Quelles sont les précautions concernant la modularisation JS et comment devez-vous utiliser RequireJS ? Ce qui suit est un cas pratique, jetons-y un œil.

J'ai toujours entendu parler de RequireJS auparavant, mais je n'ai jamais eu la chance d'en apprendre davantage. Je sais seulement que c'est une API pour la modularisation de js. Je travaille récemment sur React et ses idées de modularisation coïncident avec les idées de modularisation js. Je veux juste ajouter RequireJS au projet tout en appliquant React pour voir si cela aura un bon effet sur le chargement ou le développement des pages.

Qu'est-ce que RequireJS ?

Avant d'expliquer ce qu'est RequireJS, je dois mentionner le contexte de l'histoire modulaire de Javascript. En fait, au début, JavaScript est apparu comme un langage de script émergent doté d’une vision immense. Ce n’était pas un langage conçu uniquement pour le client. C’est juste qu’avec la popularité ultérieure des applications Web, JavaScript s’est rapidement répandu en tant que langage de script côté navigateur, et la concurrence entre Netscape et Microsoft l’a standardisé prématurément. Cela a conduit à de nombreux défauts de JS, dont l'un est la modularité (mais vous pouvez être surpris de constater que javascript utilise effectivement import, export, etc. comme mots réservés, ce qui montre que cela a effectivement été pris en compte lors de la conception. Le nouveau standard es6 permet également la modularisation native des supports). Puis, à mesure que les applications Web deviennent de plus en plus complexes, de plus en plus de codes JavaScript sont intégrés, et avec l'essor des nœuds, la programmation modulaire devient indispensable.

Il y a donc eu le système de modules pris en charge plus tard par la boîte à outils Dojo et la bibliothèque Closure de Google. Il existe également deux spécifications standards très courantes, CommonJS et AMD. Je n'entrerai pas dans les détails ici. Il suffit de savoir que l'API qui implémente la spécification CommonJS charge les modules de manière synchrone, tandis que l'API qui implémente la spécification AMD charge les modules de manière asynchrone.
Donc en théorie, le chargement non bloquant des spécifications AMD est plus adapté au navigateur. RequireJS est la meilleure implémentation de la spécification AMD. Copiez une description de RequireJS à partir d'un document officiel :

RequireJS est un chargeur de module JavaScript. C'est idéal pour une utilisation dans le navigateur, mais il peut également être utilisé dans d'autres environnements de script, comme Rhino et Node. L'utilisation de RequireJS pour charger des scripts modulaires améliorera la vitesse de chargement et la qualité de votre code.

Pourquoi RequireJS ?

Donc, maintenant que nous savons ce que fait RequireJS, nous savons presque pourquoi nous utilisons RequireJS. Mais résumons les avantages de l’utilisation de RequireJS.

"Chargement" asynchrone. Nous savons que les sites Web placent généralement le script à la fin du code HTML, afin d'éviter le blocage des pages provoqué par le navigateur exécutant js. En utilisant RequireJS, la fonction de rappel sera exécutée après le chargement du js correspondant. Ce processus est asynchrone, il ne bloquera donc pas la page.

Chargement sur demande. Grâce à RequireJS, vous pouvez charger le module js correspondant lorsque vous devez charger la logique js, évitant ainsi un grand nombre de requêtes et de transmission de données lors de l'initialisation de la page Web. Peut-être que pour certaines personnes, certains modules peuvent ne pas être disponibles du tout. est nécessaire, alors cela semble inutile.

Gestion plus pratique des dépendances des modules. Je pense que vous devez avoir rencontré des erreurs de dépendance en raison de problèmes d'ordre des balises de script. Cette fonction n'est pas définie, cette variable n'est pas définie, etc. Grâce au mécanisme de RequireJS, vous pouvez garantir que les fichiers associés sont exécutés une fois tous les modules dépendants chargés, afin qu'ils puissent jouer un rôle dans la gestion des dépendances.

Gestion des versions plus efficace. Pensez-y, si vous utilisez encore un script pour introduire un jQuery2, modifiez ces 100 pages. Mais si votre requireJS a un mappage de chemin jQuery dans la configuration, vous n'avez besoin de changer qu'un seul endroit.

Bien sûr, il existe d'autres avantages tels que cdn incapable de charger les fichiers js, des fichiers locaux peuvent être demandés, etc., que je ne listerai pas ici.

RequireJS Utilisez

Fichiers qui doivent être introduits dans la page

<script data-main="js/main" src="xxx/xxxx/require.js"></script>

Copier après la connexion

Utilisez RequireJS, il vous suffit d'introduire un require.js. Il convient de noter qu'une meilleure pratique consiste à introduire ce js uniquement via la balise

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours