interface Web
js tutoriel
Utilisation de RequireJS pour implémenter le chargement différé dans les applications JavaScript_Basics
Utilisation de RequireJS pour implémenter le chargement différé dans les applications JavaScript_Basics
Qu'elles soient simples ou complexes, les applications web sont composées de certains fichiers HTML, JavaScript et CSS. Habituellement, les développeurs utilisent des frameworks JavaScript tiers tels que JQuery, Knockout, Underscore, etc. pour améliorer la vitesse de développement. Étant donné que ces frameworks JavaScript ont été développés dans un but précis et ont fait leurs preuves, il est plus approprié de les utiliser directement que d'implémenter les fonctions requises à partir de zéro. Cependant, à mesure que la complexité des applications continue d’augmenter, il devient de plus en plus important d’écrire du code propre, à faible couplage et maintenable. Dans cet article, j'expliquerai comment le framework RequireJS aide les développeurs d'applications à écrire du code plus modulaire et comment il améliore les performances des applications grâce au chargement paresseux des fichiers JavaScript.
Nous n'utiliserons pas le framework RequireJS au début, puis le reconstruirons en utilisant RequireJS dans le chapitre suivant.
La page HTML suivante contient un élément
avec l'identifiant "message". Lorsque l'utilisateur visite cette page, elle affichera l'ID de commande et les informations sur le nom du client.
Le fichier Common.JS contient les définitions de deux modules - Commande et Client. La fonction showData est combinée avec le corps de la page. Elle place les informations à afficher dans la page en appelant la fonction d'écriture. À titre d'exemple, j'ai codé en dur l'identifiant sur 1 et le nom du client sur Prasad dans la fonction showData.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript NonRequireJS</title>
<script src="common.js" type="text/javascript"></script>
</head>
<body>
<strong>Display data without RequireJS</strong>
<p id="message" />
<script type="text/javascript">
showData();
</script>
</body>
</html>
Common.JS
function write(message) {
document.getElementById('message').innerHTML += message + '</br>';
}
function showData() {
var o = new Order(1, "Prasad");
write("Order Id : " + o.id + " Customer Name : " + o.customer.name);
}
function Customer(name) {
this.name = name;
return this;
}
function Order(id, customerName) {
this.id = id;
this.customer = new Customer(customerName);
return this;
}
Ouvrez cette page dans votre navigateur, vous verrez les informations suivantes.
Bien que le code ci-dessus soit capable d'afficher le résultat, il présente encore quelques problèmes :
- Le fichier Common.JS contient toutes les fonctions qui doivent être définies (écriture, showData), et les modules (Commande, Client) sont difficiles à maintenir et à réutiliser. Si vous souhaitez réutiliser la fonction d'écriture dans d'autres pages et référencer le fichier JavaScript ci-dessus, vous avez également importé d'autres fonctions et modules qui peuvent ne pas être nécessaires pour cette page.
- Le module Commande (ou « classe » en termes orientés objet) crée une instance du module Client lors du processus d'initialisation. Cela signifie que le module Commande dépend du module Client. Le couplage étroit entre ces modules rend difficile la refactorisation et la maintenance lors des optimisations futures.
- Chaque fois que le client demande cette page, le fichier Common.JS sera chargé dans le DOM. Dans l'exemple ci-dessus, même si nous n'avons besoin que d'afficher des informations sur la page, nous chargeons toujours ces modules inutiles (Client, Commande) en mémoire. Le chargement de ressources d'application inutiles (JavaScript, CSS, fichiers image, etc.) peut réduire les performances de l'application.
- Les modules du fichier Common.JS peuvent être séparés en différents fichiers JavaScript, mais lorsque l'application devient de plus en plus complexe, il est difficile de juger des dépendances entre les fichiers JavaScript et de l'ordre de chargement des fichiers à charger. .
Le framework RequireJS gère les dépendances entre les fichiers JavaScript et les charge séquentiellement selon les besoins.
Créez des applications avec RequireJS
Regardons maintenant le code refactorisé. Le code HTML ci-dessous fait référence au fichier Require.JS. L'attribut data-main définit le seul point d'entrée pour cette page. Dans le scénario ci-dessous, il indique à RequireJS de charger Main.js au démarrage.
<!DOCTYPE html> <html> <head> <title>JavaScript RequireJS</title> <script src="Require.Js" type="text/javascript" data-main="Main.js"></script> </head> <body> <strong>Display data using RequireJS</strong> <p id="message" /> </body> </html>
Main.JS
Puisque ce fichier a été spécifié via l'attribut data-main, RequireJS le chargera le plus rapidement possible. Ce fichier utilise les fonctions du framework RequireJS pour déterminer et définir des dépendances sur d'autres fichiers JavaScript. Dans l'extrait de code ci-dessous, le premier paramètre représente la dépendance (en fonction du fichier Order.JS) et le deuxième paramètre est une fonction de rappel. RequireJS analyse toutes les dépendances et les charge, puis exécute cette fonction de rappel. Attention, la valeur du premier paramètre (Order) doit être cohérente avec le nom du fichier (Order.JS).
require(["Order"], function (Order) {
var o = new Order(1, "Prasad");
write(o.id + o.customer.name);
});
Commande.JS
Le framework RequireJS fournit un moyen simple de définir et de maintenir les dépendances entre les fichiers JavaScript. La fonction de définition dans le code ci-dessous déclare que Customer.JS doit être chargé avant de traiter la fonction de rappel de commande.
define(["Customer"],
function (Customer) {
function Order(id, custName) {
this.id = id;
this.customer = new Customer(custName);
}
return Order;
}
);
Customer.JS
Ce fichier ne dépend d'aucun autre fichier JavaScript, donc la valeur du premier paramètre de la fonction de définition est un tableau vide.
define([],
function () {
function Customer(name) {
this.name = name;
}
return Customer;
}
);
D'accord, ouvrez maintenant cette application avec votre navigateur et vous verrez le résultat suivant. Notez que RequireJS charge uniquement les fichiers JavaScript requis.
Résumé
Dans cet article, nous analysons comment le framework RequireJS gère les dépendances entre les fichiers JavaScript et les charge selon les besoins. Il aide les développeurs à écrire du code plus faiblement couplé, modulaire et maintenable.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript
Dec 17, 2023 pm 02:54 PM
Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.
WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel
Dec 17, 2023 pm 05:30 PM
WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket
Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript
Dec 17, 2023 am 09:39 AM
Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de réservation en ligne. À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.
Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel
Dec 17, 2023 pm 12:09 PM
Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande
JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel
Dec 17, 2023 pm 05:13 PM
JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous
Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP
Jan 05, 2024 pm 06:08 PM
Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest
Comment obtenir facilement le code d'état HTTP en JavaScript
Jan 05, 2024 pm 01:37 PM
Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service
Comment utiliser insertBefore en javascript
Nov 24, 2023 am 11:56 AM
Utilisation : En JavaScript, la méthode insertBefore() est utilisée pour insérer un nouveau nœud dans l'arborescence DOM. Cette méthode nécessite deux paramètres : le nouveau nœud à insérer et le nœud de référence (c'est-à-dire le nœud où le nouveau nœud sera inséré).
