Exemple simple d'un bon style de programmation Javascript ?

Question

J'ai du mal avec Javascript. La plupart de mes problèmes ne proviennent pas d'un manque de compréhension du langage (enfin, ça aussi, mais soyez indulgent avec moi). Le problème principal est plutôt de comprendre ce qu'est un bon style de programmation/d'organisation du code.

Par exemple, j'ai besoin d'avoir différentes entités (formulaires, zones de texte, tableaux, etc.) dans une page, et de les faire modifier en fonction d'événements, déclenchés par l'utilisateur ou par Ajax.

Ma première idée était de définir une classe pour chaque entité, de définir des méthodes sur le prototype de ces classes, puis d'instancier les classes en les liant à des identifiants HTML spécifiques (soit implicitement, soit lorsqu'elles sont instanciées avec new), et d'enregistrer des gestionnaires entre les événements et les appels de méthode. En d'autres termes, une sorte de "style QT". Je me suis vite rendu compte que ce n'est pas trivial. Vous ne pouvez pas enregistrer directement des méthodes d'objet comme callbacks, vous devez les envelopper dans une fermeture, etc...

Une autre idée que j'ai eue était de déclarer juste un tas de fonctions de rappel, sans objets, et chaque rappel opère sur des variables globales et sur le DOM. Rapide et sale, pas de chichis. C'est comme si votre page n'était qu'un gros objet dont les événements sont gérés en interne.

Toutes les solutions auxquelles j'ai pu penser m'ont donné l'impression de mal utiliser l'outil. Au final, je ne me sens pas à l'aise car j'ai vu très peu de code javascript dans mon expérience de programmation, et c'est très différent de tous les langages avec lesquels j'ai de l'expérience. En jetant un coup d'oeil aux premiers trucs que je télécharge, c'est garanti d'être une perte de temps, car ils sont compressés et/ou obfusqués et/ou pas "à jour" avec les "bonnes pratiques javascript" actuelles, donc je vous demande une page web simple, puissante et propre plus son code javascript associé pour entrer rapidement dans un style de programmation/présentation de code approprié.

(J'utilise jQuery, mais ma question est indépendante de cela. Néanmoins, un exemple utilisant jQuery serait préférable).

Answer 1

J'ai appris à écrire du JavaScript en lisant l'ouvrage de Douglas Crockford intitulé JavaScript : Les bons côtés . Il a également beaucoup de trucs en ligne vous pouvez vérifier .

Mon style de base est d'abandonner les mécanismes de création de classes de JavaScript et de le traiter plus comme Scheme en créant des "objets" avec des fermetures et une notation littérale d'objet. (Je ne sais pas si vous avez une certaine expérience de Scheme ; si non, cette approche peut vous sembler moins naturelle). Pour une meilleure explication de la manière de procéder, Crockford a rédigé un court essai. aquí . Voici un petit exemple :

var pezDispenser = (function () {
    var amount = 20;
    return {
        dispense: function () {
            if (amount > 0) }
                amount -= 1;
                alert('delicious pez!');
            } else {
                alert('no more pez!');
            }
        }
    };
}());

pezDispenser.dispense();

J'ai trouvé que c'était une approche assez puissante et flexible.

Crockford dispose également d'un guide de style général pour la langue aquí y aquí .

J'espère que cela vous aidera.

Answer 2

J'ai un exemple de la façon dont je réalise des applications JavaScript dans cette question . Le résumé est :

• Créer un fichier pour chaque objet singleton. Dans votre code, stockez la couche intermédiaire ajax et l'interface utilisateur dans des fichiers séparés.
• Créer un objet singleton global pour les 3 couches habituelles du projet : GUI, Backend et App.
• N'utilisez jamais d'ajax pur en dehors de l'objet Backend. Stockez l'URL de la page côté serveur dans l'objet Backend et créez une fonction qui utilise cette URL pour contacter le serveur.
• Avoir une classe JSON sur le serveur qui peut signaler les erreurs et les exceptions au client. Dans l'objet Backend, vérifiez si l'objet JSON renvoyé contient une erreur, et appelez la fonction serverError dans la classe GUI pour présenter l'erreur à l'utilisateur (ou au développeur).

Answer 3

Cette question date d'il y a longtemps.

Mais j'ai aimé cette page : 42 Meilleures pratiques Javascript (Opera)