openclassroom Exemples de bon code JavaScript dans les applications Web open source




jquery (7)

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

Jusqu'à récemment, je n'utilisais que des objets littéraux et des morceaux de jQuery, mais après avoir lu "JavaScript: The Good Parts" de Douglas Crockford, je réalise maintenant qu'il y a plus de JavaScript que d'AJAX, de modifications DOM et d'animation simple.

Le problème est que JavaScript ne semble pas très standardisé. Le nombre de modèles de POO / d'héritage disponibles me submerge. Je ne suis pas habitué à chaque framework / bibliothèque fournissant sa propre implémentation de l'héritage. Je ne veux pas non plus prendre une mauvaise décision concernant de telles choses parce que cela signifierait réécrire tout le code en cas de problèmes.

Donc, ce que je recherche, ce sont des applications web open source qui utilisent fortement JavaScript, si possible côté client, pour voir quels modèles sont utilisés dans les projets réels. Je voudrais voir le code des applications web, pas des frameworks 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 ça sera encore mieux parce que je les utilise;)


Oui. Il y a quelques gourous de JavaScript qui ont beaucoup écrit sur la façon d'écrire du JavaScript, sur le POO basé sur un prototype avec JavaScript, et même sur la façon dont les variables indentantes et de nommage devraient être faites.

Cependant, si vous cherchez une implémentation importante 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 et bien écrit qui n'est pas minifié.




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

Cependant, j'ai écrit propre, bien factorisé javascript orienté objet 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 comment faire ça:

1) Lisez le didacticiel de programmation orienté objet mozilla javascript. Leur explication de l'héritage javascript est exactement ce que Google 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 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 aux objets. Utilisez les astuces de 'Clean Code' de Robert C. Martin telles qu'elles s'appliquent à n'importe quel langage de programmation.

4) Structurez votre code de façon à ce qu'il contienne de nombreux fichiers différents, similaires à ceux que vous utiliseriez dans une langue avec des classes.

5) Implémenter une injection de dépendances sans conteneur IOC en créant tous vos objets à un niveau supérieur et en les introduisant 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 je pense être la façon correcte d'implémenter l'héritage en javascript. c'est à partir de la bibliothèque de fermeture 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;
};

Il y a plusieurs façons d'apprendre à écrire du bon code JS.

Vous pouvez lire des livres. Le meilleur sur l'organisation du code JS et sur les modèles communs, y compris l'héritage est JavaScript Patterns par Stoyan Stefanov.

Une autre bonne façon d'apprendre est de regarder à travers l'excellent code des autres développeurs et de l'utiliser. La meilleure bibliothèque que j'ai vue à partir 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.


Ce que je recommande toujours à tous ceux qui sont intéressés par ce genre de chose est: COLLIER À CE QUE VOTRE ÉQUIPE FAIT . 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 sur les onglets; Utilise les.

N'entrez jamais dans une équipe stable avec un style normalisé qui change les choses parce que cela a l'air meilleur à moins que cela ne cause de gros problèmes.

Si vous ne travaillez pas dans une équipe et que vous êtes intéressé par l'utilisation d'un style de codage; Utilisez ensuite le style des bibliothèques que vous utilisez le plus .

Organisation sage, la fermeture est le meilleur .. mais pour moi, c'est comme si je lisais JAVA au lieu de javascript. Allez comprendre.


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.

En ce qui concerne les exemples, le code source de jQuery a été mentionné dans les commentaires. jQuery fait du bon travail, mais je voudrais également vérifier Narwhal JS pour des exemples de la façon dont les choses devraient être faites.

Voici un bon livre de modèles de design gratuit que j'ai trouvé utile Essential JavaScript et jQuery Design Patterns .

Vous ne trouverez pas une 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 devez le suivre à la lettre.





open-source