JavaScript en action: Exemples et projets du monde réel

L'application de JavaScript dans le monde réel comprend un développement frontal et back-end. 1) Afficher les applications frontales en créant une application de liste TODO, impliquant les opérations DOM et le traitement des événements. 2) Construisez une API RESTful via Node.js et Express pour démontrer les applications back-end.

introduction

Dans le monde de la programmation d'aujourd'hui, JavaScript est passé d'un simple langage de script client à un langage de programmation complet, largement utilisé dans le développement d'applications frontales, back-end, mobiles et de bureau. Avez-vous déjà été curieux de savoir comment transformer JavaScript de l'apprentissage théorique aux applications pratiques? Cet article vous amènera à explorer l'application de JavaScript dans le monde réel et vous aidera à maîtriser les compétences pratiques de cette langue puissante à travers de vrais exemples et projets. Que vous soyez un débutant ou un développeur expérimenté, après avoir lu cet article, vous pourrez appliquer JavaScript à vos projets réels avec plus de confiance.

Examen des bases JavaScript

La connaissance de base de JavaScript comprend des variables, des fonctions, des objets, des tableaux, des boucles et des instructions conditionnelles, etc. Ce sont les pierres angulaires pour comprendre et appliquer JavaScript. Pour les débutants, il est crucial de maîtriser ces concepts de base. Dans le même temps, JavaScript fournit également une série d'objets et de méthodes intégrés, tels que les opérations DOM, le traitement d'événements et la programmation asynchrone, qui sont des outils fréquemment utilisés dans des projets réels.

Dans les applications pratiques, il est également important de comprendre l'environnement d'exécution et la portée de JavaScript. L'environnement d'exécution JavaScript peut être un navigateur, Node.js ou un autre runtime JavaScript. Comprendre les différences dans ces environnements peut vous aider à mieux écrire du code multiplateforme.

Analyse de la fonction de base JavaScript

Programmation axée sur des événements

L'un des noyaus de JavaScript est la programmation axée sur les événements, ce qui le rend extrêmement puissant lors de la gestion des interactions utilisateur et des opérations asynchrones. La programmation motivée par des événements vous permet d'écouter des événements spécifiques (tels que des clics, une entrée du clavier ou un chargement de données) et d'exécuter le code correspondant lorsque l'événement est déclenché.

 // Événement Écoute Exemple Document.getElementById ('MyButton'). AddEventListener ('Click', function () {
    alert ('bouton cliqué!');
});

L'avantage de la programmation axée sur les événements est qu'il peut rendre votre application plus sensible aux opérations des utilisateurs, tout en rendant la structure du code plus claire et plus modulaire. Cependant, la gestion d'un grand nombre d'écouteurs d'événements peut causer des problèmes de performance, donc dans les applications pratiques, les auditeurs d'événements doivent être gérés raisonnablement.

Programmation asynchrone

Les capacités de programmation asynchrones de JavaScript le font bien fonctionner lors de la gestion des opérations d'E / S et des demandes de réseau. En utilisant les fonctions de rappel, la promesse et l'async / attendre, JavaScript peut facilement gérer les opérations asynchrones, en évitant de bloquer le thread principal.

 // Exemple asynchrone en utilisant la fonction promise fetchData () {
    retourner la nouvelle promesse ((résoudre, rejeter) => {
        setTimeout (() => {
            résoudre («données obtenues avec succès»);
        }, 1000);
    });
}

fetchData (). alors (data => console.log (data));

L'avantage de la programmation asynchrone est qu'elle peut améliorer la vitesse de réponse et l'expérience utilisateur de l'application, mais vous devez également prêter attention à la gestion de Rappel Hell and Promise Chains pour éviter que le code ne devienne difficile à maintenir.

Exemple d'utilisation

Créer une application de liste de tâches simples

Voyons l'application de JavaScript dans des projets réels via une application de liste de todo simple. Cette application permettra aux utilisateurs d'ajouter, de supprimer et de baliser les tâches.

 // Todo List application const todolist = [];

fonction addtodo (tâche) {
    todolist.push ({tâche, terminé: false});
    redertodolist ();
}

fonction toggletodo (index) {
    Todolist [index] .completed =! Todolist [index] .completed;
    redertodolist ();
}

fonction removetodo (index) {
    todist.splice (index, 1);
    redertodolist ();
}

fonction redertodolist () {
    const todolistelement = document.getElementById ('todolist');
    todolistelement.innerhtml = '';
    todolist.ForEach ((todo, index) => {
        const li = document.CreateElement ('li');
        li.innerhtml = `
            <entrée type = "Checkbox" $ {todo.compteted? &#39;vérifié&#39;: &#39;&#39;} onchange = "toggletodo ($ {index})">
            <span style = "Text-Decoration: $ {todo.completted? &#39;Line-Through&#39;: &#39;Aucun&#39;}"> $ {todo.task} </span>
            <bouton onclick = "removetodo ($ {index})"> delete </futton>
        `;
        todolistement.ApendChild (li);
    });
}

document.getElementById (&#39;addTodo&#39;). AddEventListener (&#39;click&#39;, function () {
    const task = document.getElementById (&#39;toDoinput&#39;). valeur;
    if (tâche) {
        addTodo (tâche);
        document.getElementById (&#39;ToDoInput&#39;). Value = &#39;&#39;;
    }
});

Cet exemple montre comment utiliser JavaScript pour manipuler DOM, traiter les événements et gérer l'état de données. Dans les projets réels, vous pouvez utiliser des structures de données plus complexes et des schémas de gestion de l'État tels que Redux ou Vuex.

Construisez une API RESTFul simple

JavaScript peut non seulement être utilisé pour le développement frontal, mais aussi pour le développement back-end. Construisons une API RESTful simple via Node.js et Express pour démontrer l'application de JavaScript dans le backend.

 // Créez une API RESTFul en utilisant Express
const Express = require ('express');
const app = express ();
Port const = 3000;

app.use (express.json ());

Soit Todos = [];

app.post ('/ todos', (req, res) => {
    const todo = req.body;
    todos.push (todo);
    res.status (201) .json (todo);
});

app.get ('/ todos', (req, res) => {
    res.json (todos);
});

app.put ('/ todos /: id', (req, res) => {
    const id = req.params.id;
    const todo = req.body;
    todos [id] = todo;
    res.json (TODO);
});

app.delete ('/ todos /: id', (req, res) => {
    const id = req.params.id;
    const DeletedTodo = todos.splice (id, 1);
    res.json (DeletedTodo);
});

app.Listen (port, () => {
    console.log (`serveur exécutant sur le port $ {port}`);
});

Cet exemple montre comment créer une API RESTful simple à l'aide de JavaScript et Node.js. Dans les projets réels, vous pouvez utiliser une base de données pour stocker les données et ajouter plus de vérification et de gestion des erreurs.

Optimisation des performances et meilleures pratiques

L'optimisation des performances et les meilleures pratiques sont cruciales dans les applications pratiques. Voici quelques suggestions d'optimisation des performances JavaScript et de meilleures pratiques:

• Réduire les opérations DOM : les opérations fréquentes du DOM peuvent causer des problèmes de performance, minimiser le nombre d'opérations DOM et utiliser des fragments de documents ou des DOM virtuels pour optimiser.
• Utilisation des délégués d'événements : Pour un grand nombre d'éléments, l'utilisation des délégués d'événements peut réduire le nombre d'écouteurs d'événements et améliorer les performances.
• Optimiser les opérations asynchrones : utilisez la promesse et async / attendez raisonnablement pour éviter l'enfer du rappel et améliorez la lisibilité et la maintenabilité du code.
• Segmentation du code et chargement paresseux : pour les grandes applications, l'utilisation de la segmentation du code et du chargement paresseux peut réduire le temps de chargement initial et améliorer l'expérience utilisateur.
• Utilisation du cache : pour les données fréquemment accessibles, l'utilisation du cache peut réduire les demandes de réseau et améliorer les performances.

Dans les projets réels, l'optimisation des performances et les meilleures pratiques doivent être ajustées et optimisées en fonction de la situation spécifique. Grâce à une pratique et à l'apprentissage continu, vous pourrez mieux maîtriser les compétences d'application de JavaScript et créer des applications efficaces et maintenables.

Grâce à cet article, vous avez appris l'application de JavaScript dans le monde réel, des applications de liste de tâches simples à la construction reposante d'API, à l'optimisation des performances et aux meilleures pratiques. J'espère que ces vrais exemples et projets pourront vous aider à mieux maîtriser JavaScript et l'appliquer de manière flexible dans de vrais projets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!