Ce que les tutoriels ne vous disent pas: comment aborder les projets

Maître les compétences du développement du projet JavaScript et dites au revoir aux dépendances du tutoriel! Cet article vous guidera sur la façon de réaliser des projets JavaScript indépendamment, plutôt que de simplement suivre les étapes du tutoriel. Nous explorerons l'ensemble du processus, de la planification du projet à l'optimisation du code à la recherche d'aide et de refactorisation de code.

De nombreux développeurs se plaignent que les tutoriels ne peuvent que les aider à réaliser des projets spécifiques, mais ils ne peuvent pas traiter indépendamment de nouveaux défis. En effet, les tutoriels ne fournissent généralement que des étapes, pas des idées pour résoudre des problèmes. De plus, comparer vos résultats intermédiaires avec les produits finis des autres est également facile à être frustrant.

Le développement réel du projet n'est pas aussi concis et clair que dans le tutoriel. Il s'agit d'un processus itératif plein d'essais, d'erreurs et de revues d'informations. Cet article vous aidera à maîtriser les méthodes de développement indépendamment des projets JavaScript.

Astuce importante: L'article contient quelques exemples de code. Cet article se concentre sur la compréhension du processus de développement du projet, plutôt que de se concentrer sur les détails techniques.

Étape 1: Consolider les connaissances de base

Tout d'abord, il est crucial de connaître JavaScript (et les bases de la programmation). Cela inclut les variables, les fonctions, les instructions conditionnelles, les boucles, les tableaux, les objets et les méthodes de manipulation DOM (par exemple getElementById, querySelectorAll et innerHTML). Vous pouvez utiliser Google ou MDN pour afficher les informations pertinentes à tout moment.

Les bases solides peuvent vous aider à vous concentrer sur le projet lui-même, plutôt que sur les détails grammaticaux, améliorant ainsi l'efficacité.

Étape 2: Faire un plan

Ne vous précipitez pas pour écrire du code, regardez d'abord le projet dans une perspective macro. Élaborez un plan global pour clarifier les objectifs qui doivent être atteints. Par exemple, pour développer un temporisateur à rebours, vous devez considérer la mesure du temps, le stockage de données, l'affichage numérique et le contrôle de synchronisation.

À ce stade, il n'est pas nécessaire de se soucier des détails techniques, de former simplement un plan global pour éviter de perdre des directives. Dans la conception de logiciels, cela est souvent appelé analyse de cas d'utilisation.

Étape 3: Décrire la logique (pseudocode) en langage naturel

Après avoir un plan, vous devez affiner les détails. Il est recommandé d'utiliser le langage naturel plutôt que le code pour décrire les fonctionnalités de chaque section (c'est ce qu'on appelle pseudocode). Cela vous permet de réfléchir clairement à la logique du projet sans être distrait par des détails grammaticaux.

Par exemple, le pseudo-code du temporisateur à rebours peut être le suivant:

• Obtenez l'heure actuelle
• Spécifiez l'heure de fin
• Calculez le temps restant
• boucle pour obtenir le temps restant
• Afficher le temps restant

Les pièces uniques peuvent être affinées:

• Afficher le temps restant
  • décomposer le temps en heures, minutes, secondes
  • Afficher les heures, les minutes et les secondes dans différents conteneurs

Avec une description logique claire, il sera beaucoup plus facile d'écrire du code.

Étape 4: Construction de blocs

à partir du pseudo-code, commencez à écrire de petits morceaux de code. Pour le compte à rebours, vous pouvez d'abord obtenir l'heure actuelle:

<code class="language-javascript">const currentTime = new Date().getTime();
console.log(currentTime);</code>

puis obtenez l'heure de fin:

<code class="language-javascript">const currentTime = new Date().getTime();
console.log(currentTime);</code>

Les avantages de la construction de blocs:

• garantit que chaque bloc fonctionnel fonctionne correctement avant d'être connecté.
• Réduisez la charge cognitive de traiter simultanément avec plusieurs parties.
• Améliorer l'efficacité et éviter de traiter trop d'informations en même temps.
• Il est plus facile de détecter et d'éviter les erreurs.
• Facile à expérimenter et à étudier.
• peut créer des extraits de code réutilisables.

Étape 5: Intégrez les extraits de code

Après avoir préparé chaque bloc de fonction, commencez à vous intégrer. La clé est de s'assurer que les blocs fonctionnels individuels fonctionnent toujours correctement après avoir été connecté, ce qui peut nécessiter quelques ajustements mineurs.

Par exemple, intégrez l'heure de début et l'heure de fin pour calculer l'heure restante:

<code class="language-javascript">const endTime = new Date().getTime() + 10 * 24 * 60 * 60 * 1000; // 10天后
console.log(endTime);</code>

Cette approche est plus facile que de construire l'ensemble du projet en une seule fois, car il évite le fardeau cognitif de traiter simultanément tous les détails.

Ensuite, nous pouvons appeler cette fonction à plusieurs reprises pour mettre à jour l'affichage de temps. Code html:

<code class="language-javascript">// ... (获取endTime的代码) ...

function getRemainingTime(deadline) {
  const currentTime = new Date().getTime();
  return deadline - currentTime;
}

console.log(getRemainingTime(endTime));</code>

Code javascript:

<code class="language-html"><div id="clock"></div></code>

Enfin, convertissez des millisecondes en jours, heures, minutes et secondes et ajoutez des styles.

Étape 6: Tester et expérimenter

Une fois que le code semble fonctionner correctement, essayez de le casser. Par exemple, que se passe-t-il lorsqu'un utilisateur clique sur un autre emplacement? Que se passe-t-il lors de la saisie de valeurs inattendues? La taille de l'écran fonctionne-t-elle correctement si elle est petite? Cela fonctionnera-t-il correctement dans le navigateur attendu? Y a-t-il un moyen plus efficace?

Étape 7: Recherchez l'aide

Demandez de l'aide à tout stade, qui peut provenir de matériaux de référence ou d'autres. Les développeurs expérimentés vérifient souvent les informations, ce qui n'est pas dommage.

Étape 8: refactorisation de code

Avant la fin du projet, le code doit être refactorisé. Voici quelques problèmes à considérer:

• Le code est-il concis et facile à lire?
• Le code est-il efficace?
• La dénomination des fonctions et des variables est-elle claire?
• y a-t-il un conflit de dénomination?
• La portée globale est-elle contaminée?
• Le processus d'édition a-t-il provoqué une erreur?
• La sortie doit-elle être polie?
• y a-t-il une redondance dans le code?
• est-il nécessaire de regarder le projet sous une nouvelle perspective?

En refactorisant, le code deviendra plus élégant.

Résumé

Les éléments de codage sont rarement un processus linéaire. Les petites itérations et expériences sont plus efficaces que de faire tout le travail en une seule fois.

J'espère que cet article pourra vous aider à surmonter les difficultés du développement du projet JavaScript. Si vous avez d'autres méthodes de développement de projet efficaces, veuillez les partager dans la section des commentaires.

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!