web-dev-qa-db-fra.com

Exemples de code JavaScript de qualité dans les applications Web open source

J'ai du mal à trouver un moyen d'écrire un bon code JavaScript efficace, largement accepté par les autres développeurs et pas très laid.

Jusqu'à récemment, ce que j'utilisais n'était que des objets littéraux et des éléments de jQuery, mais après avoir lu "JavaScript: The Good Parts" de Douglas Crockford, je me rends maintenant pleinement compte que JavaScript ne se résume pas à AJAX, à ses modifications et à une simple animation.

Le problème est que JavaScript ne semble pas beaucoup standardisé. La quantité de modèles de POO/héritage disponibles me submerge. Je ne suis pas habitué à chaque structure/bibliothèque fournissant sa propre implémentation d'héritage. Je ne veux pas non plus prendre de mauvaise décision à ce sujet car cela impliquerait de réécrire tout le code en cas de problème.

Donc, ce que je recherche, ce sont les applications Web open source existantes qui utilisent fortement JavaScript, si possible côté client, pour voir quels modèles sont utilisés dans des projets réels. Je voudrais voir le code des applications Web, pas des cadres ou des 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;)

javascriptdesign-patternsopen-source
38
Juliusz Gonera

Ce que je recommande toujours à quiconque s’intéresse à ce genre de chose, c’est: STICK À 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 onglets; Utilise les.

N'entrez jamais dans une équipe solide avec un style normalisé, car cela donne une meilleure apparence, à moins que cela ne cause de gros problèmes.

Si vous ne travaillez pas en équipe et que vous êtes intéressé par un style de codage; then utilise le style des bibliothèques que vous utilisez le plus .

Sur le plan organisationnel, la fermeture est ce qu'il y a de mieux… mais pour moi, c'est comme si je lisais Java au lieu de javascript. Allez comprendre.

7
Ferrerira

Oui. Quelques gourous de JavaScript ont beaucoup écrit sur la façon d'écrire du code JavaScript, sur les prototypes OOP avec JavaScript, même sur la manière dont les variables d'indentation et de nommage doivent être effectuées.

Toutefois, si vous recherchez une grande implémentation de JavaScript pour étudier à titre d'exemple, je rechercherais des implémentations de jeux HTML5. Il est pratiquement garanti que vous trouverez un exemple assez grand, bien écrit et non minimisé.

5
filipemgs

Si vous êtes intéressé par les normes JavaScript, je voudrais vérifier 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.

Comme exemples, le code source de jQuery a été mentionné dans les commentaires. jQuery fait du bon travail, mais j’aimerais également consulter Narwhal JS pour obtenir des exemples de la façon dont les choses devraient être faites.

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

Vous ne trouverez pas de solution à votre problème et c’est ainsi que JavaScript est conçu. Je recommanderais d'expérimenter. Je trouve que Douglas Crockford a beaucoup de bonnes idées, mais cela ne signifie pas que vous deviez le suivre à la lettre.

4
babsher

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

2
standup75

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

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

1) Lisez le tutoriel de programmation mozilla javascript orienté objet. Leur explication de l'héritage javascript est exactement ce que Google fermeture utilise. Personnellement, je pense que ce que Crockford appelle «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’oddball ici sans classes non plus).

https://developer.mozilla.org/fr/Introduction_to_Object-Orient_JavaScript

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

3) Prenez une base de code javascript procédurale existante et refactorisez-la en objets. Utilisez les astuces de «Clean Code» de Robert C. Martin qui s'appliquent à tous les langages de programmation.

4) Structurez votre code afin qu'il contienne de nombreux fichiers différents, similaires à la manière dont vous utiliseriez les classes dans un langage avec des classes.

5) Implémentez l'injection de dépendance sans un conteneur IOC en créant tous vos objets au niveau supérieur et en les intégrant dans les objets qui en dépendent.

Il y a beaucoup plus, mais j'espère que c'est un début utile.

Voici ce que j'estime être la bonne façon de mettre en œuvre l'héritage en javascript. cela provient de la bibliothèque de fermeture 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;
};
2
davidjnelson

Il existe plusieurs façons d'apprendre à écrire un bon code JS.

Vous pouvez lire des livres. JavaScript Patterns de Stoyan Stefanov est le meilleur concernant l'organisation du code JS et les modèles courants, y compris l'héritage.

Un autre bon moyen d'apprendre consiste simplement à consulter le code excellent des autres développeurs et à l'utiliser. La meilleure bibliothèque que j'ai vue du point de vue de l'organisation du code et de l'utilisation des modèles est Google Closure Library . Il est utilisé en interne par Google dans la RIA, comme Gmail Google Docs.

0
bjornd

Une personne gentille d'irc a suggéré cet eBook et je l'ai trouvé très utile.

Apprentissage de modèles de conception JavaScript

Un livre de Addy Osmani

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

0
Bronwen

Par coïncidence, sur SlashDot, il existe aujourd'hui un review de la 6e édition de Javascript: Le Guide définitif , qui, selon le critique, "conserve sa couronne comme ressource de référence ultime pour les programmeurs JavaScript". C'est 1100 pages.

Oui, ce n'est pas l'exemple d'application que vous recherchiez, mais le livre contient de nombreux exemples et conseils sur les meilleures pratiques.

0
DOK