Exemples de bon code JavaScript dans des applications web open source

Question

Je m'efforce de trouver un moyen d'écrire du bon code JavaScript qui soit efficace, largement accepté par les autres développeurs et pas très laid.

Jusqu'à récemment, je n'utilisais que des objets littéraux et des bouts de jQuery, mais après avoir lu "JavaScript" de Douglas Crockford : The Good Parts" de Douglas Crockford, je me rends compte que JavaScript ne se résume pas à AJAX, aux modifications du DOM et aux simples animations.

Le problème est que JavaScript ne semble pas très normalisé. La quantité de modèles de POE et d'héritage disponibles me dépasse. Je ne suis pas habitué à ce que chaque framework/librairie fournisse sa propre implémentation de l'héritage. Je ne veux pas non plus prendre une mauvaise décision concernant ces choses, car cela signifierait réécrire tout le code en cas de problème.

Je suis donc à la recherche d'applications web open source existantes qui utilisent beaucoup JavaScript, si possible du côté client, pour voir quels modèles sont utilisés dans des projets réels. J'aimerais voir le code des applications web, pas les frameworks ou les bibliothèques. Cela ne me dérange pas si ces applications web sont basées sur un framework (et si c'est Dojo ou RequireJS ce sera encore mieux parce que je les utilise ;)

Answer 1

Ce que je recommande toujours à tous ceux qui s'intéressent à ce genre de choses, c'est : S'EN TENIR À CE QUE FAIT VOTRE ÉQUIPE . S'ils utilisent camelCase pour les méthodes, vous l'utilisez. S'ils utilisent snake_case pour les variables, vous le faites. Si votre équipe préfère les espaces aux tabulations, utilisez-les.

Ne jamais entrer dans une équipe établie avec un style standardisé en changeant des choses parce que c'est mieux, à moins que cela ne cause de gros problèmes.

Si vous ne travaillez pas en équipe et que vous êtes intéressé par l'utilisation d'un style de codage, alors utiliser le style des bibliothèques les plus utilisées .

• Si vous utilisez jQuery s'en tenir à Directives de style de codage de jQuery
• Si vous utilisez Closure Utilisation de la bibliothèque JavaScript Style de codage Google
• Si vous utilisez MooTools Utilisation de la bibliothèque Guide de style de codage MooTools

Sur le plan de l'organisation, Closure est le meilleur mais pour moi, j'ai l'impression de lire du JAVA au lieu du javascript. Allez savoir.

Answer 2

Yep. Il y a quelques gourous du JavaScript qui ont beaucoup écrit sur la façon d'écrire JavaScript, sur la POO basée sur les prototypes avec JavaScript, et même sur la façon d'indenter et de nommer les variables.

Toutefois, si vous recherchez une mise en œuvre importante de JavaScript à étudier à titre d'exemple, je me tournerais vers les mises en œuvre de jeux HTML5. Il est pratiquement garanti que vous trouverez un exemple suffisamment grand et bien écrit qui n'est pas minifié.

Answer 3

Si vous vous intéressez aux normes JavaScript, je vous conseille de consulter le site suivant commonJS . Ils ont beaucoup de bonnes idées sur la façon dont JavaScript devrait être fait.

BravoJS est une bonne implémentation de module pour le navigateur.

Pour ce qui est des exemples, le code source de jQuery a été mentionné dans les commentaires. jQuery fait du bon travail, mais il n'est pas facile à utiliser. Narval JS pour des exemples de la façon dont les choses devraient être faites.

Voici un bon livre gratuit sur les modèles de conception que j'ai trouvé utile JavaScript essentiel et modèles de conception jQuery .

Vous ne trouverez pas une seule solution à votre problème et c'est ainsi que JavaScript est conçu. Je vous recommande d'expérimenter. Je trouve que Douglas Crockford a beaucoup de bonnes idées mais cela ne veut pas dire que vous devez le suivre à la lettre.

Answer 4

Un bon projet est : http://impactjs.com/ Une bonne lecture est : http://addyosmani.com/blog/essentialjsdesignpatterns/

Answer 5

Excellente question. Je n'ai pas pu trouver un seul exemple d'application open source orientée objet bien écrite. Tiny MCE était moyen, mais je ne le considérerais pas comme bien écrit : http://www.tinymce.com/

Cependant, j'ai écrit du javascript orienté objet propre et bien factorisé au travail. C'est propriétaire donc je ne peux pas le partager, mais je peux expliquer ce qui a fonctionné pour moi pour apprendre à le faire :

1) Lisez le tutoriel de mozilla javascript sur la programmation orientée objet. Leur explication de l'héritage javascript est exactement ce que google closure utilise. Personnellement, je pense que ce que Crockford appelle le pseudo classique est plus facile à lire et à maintenir puisque 4 des 5 autres langages de programmation que je connais utilisent des classes (java, c#, python, et php. perl est l'exception ici sans classes non plus).

https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript

2) Lisez le livre "Object Oriented Javascript" de Stoyan Stefanov.

3) Prendre une base de code javascript procédurale existante et la refactoriser en objets. Utilisez les conseils de "Clean Code" de Robert C. Martin car ils s'appliquent à tout langage de programmation.

4) Structurez votre code de façon à ce qu'il comporte plusieurs fichiers différents, de la même façon que vous utiliseriez des classes dans un langage avec des classes.

5) Implémenter l'injection de dépendance sans conteneur IOC en créant tous vos objets à un niveau supérieur et en les faisant descendre dans les objets qui en dépendent.

Il y a beaucoup d'autres choses à faire, mais j'espère que c'est un bon début.

Voici ce que je pense être la manière correcte d'implémenter l'héritage en javascript. Ceci provient de la bibliothèque de closure de google :

goog.inherits = function(childCtor, parentCtor) {
  /** @constructor */
  function tempCtor() {};
  tempCtor.prototype = parentCtor.prototype;
  childCtor.superClass_ = parentCtor.prototype;
  childCtor.prototype = new tempCtor();
  childCtor.prototype.constructor = childCtor;
};