Les meilleures pratiques du Javascript orienté objet ?

Question

Je me retrouve à coder un gros projet en Javascript. Je me souviens que le dernier projet a été une véritable aventure parce que le JS bricolé peut rapidement devenir illisible et je veux que ce code soit propre.

Eh bien, j'utilise des objets pour construire une lib, mais il y a plusieurs façons de définir les choses en JS, impliquant des conséquences importantes dans la portée, la gestion de la mémoire, l'espace de nom, etc. E.G :

• en utilisant var ou pas ;
• définissant des choses dans le fichier, ou dans un (function(){...})() style jquery ;
• en utilisant this ou pas ;
• en utilisant function myname() o myname = function() ;
• définir des méthodes dans le corps de l'objet ou utiliser le "prototype" ;
• etc.

Quelles sont donc les meilleures pratiques pour coder en OO en JS ?

Des explications académiques sont vraiment attendues ici. Les liens vers des livres sont les bienvenus, pour autant qu'ils traitent de la qualité et de la robustesse.

EDIT :

J'ai fait quelques lectures, mais je suis toujours très intéressé par les réponses aux questions ci-dessus et par les meilleures pratiques.

Answer 1

Utiliser `var` ou non

Vous devez introduire toute variable avec le caractère var sinon, il atteint la portée globale.

Il convient de mentionner qu'en mode strict ( "use strict"; ) les affectations de variables non déclarées sont rejetées ReferenceError .

Actuellement, JavaScript n'a pas de portée de bloc. L'école Crockford vous apprend à placer les déclarations var au début du corps de la fonction alors que le guide de style de Dojo indique que toutes les variables doivent être déclarées dans la plus petite portée possible . (Le let déclaration et définition introduite dans JavaScript 1.7 ne fait pas partie de la norme ECMAScript).

C'est une bonne pratique de lier les propriétés des objets régulièrement utilisés à des variables locales, car cela est plus rapide que de rechercher toute la chaîne de portée. (Voir Optimisation de JavaScript pour des performances extrêmes et une faible consommation de mémoire .)

Définir des choses dans le fichier, ou dans un `(function(){...})()`.

Si vous n'avez pas besoin d'atteindre vos objets en dehors de votre code, vous pouvez envelopper l'ensemble de votre code dans une expression de fonction - c'est ce qu'on appelle le modèle de module. Il présente des avantages en termes de performances et permet également de réduire et de masquer votre code à un niveau élevé. Vous pouvez également vous assurer qu'il ne polluera pas l'espace de noms global. Habillage des fonctions en JavaScript vous permet également d'ajouter un comportement orienté vers les aspects. Ben Cherry a un article approfondi sur le modèle de module .

Utiliser `this` ou non

Si vous utilisez l'héritage pseudo-classique en JavaScript, vous pouvez difficilement éviter d'utiliser les éléments suivants this . C'est une question de goût quant au modèle d'héritage que vous utilisez. Pour d'autres cas, consultez l'article de Peter Michaux sur les Widgets JavaScript sans "this .

Utilisation de `fonction myname()` ou `myname = function();`

function myname() est une déclaration de fonction et myname = function(); est une expression de fonction affectée à la variable myname . Cette dernière forme indique que les fonctions sont des objets de première classe, et que vous pouvez faire n'importe quoi avec elles, comme avec une variable. La seule différence entre les deux est que toutes les déclarations de fonctions sont hissées au sommet de la portée, ce qui peut être important dans certains cas. Sinon, elles sont égales. function foo() est une forme abrégée. Vous trouverez de plus amples informations sur le levage dans le document Scoping et levage JavaScript article.

Définition des méthodes dans le corps de l'objet ou utilisation du "prototype".

C'est vous qui décidez. JavaScript dispose de quatre modèles de création d'objets : pseudo-classique, prototypique, fonctionnel et par parties ( Crockford, 2008 ). Chacun a ses avantages et ses inconvénients, voir Crockford dans sa vidéo parle ou obtenir son livre Les bons côtés comme Anon a déjà suggéré .

Cadres de travail

Je vous suggère de choisir quelques frameworks JavaScript, d'étudier leurs conventions et leur style, et de trouver les pratiques et les modèles qui vous conviennent le mieux. Par exemple, le Boîte à outils Dojo fournit un cadre robuste pour écrire du code JavaScript orienté objet, qui prend même en charge l'héritage multiple.

Motifs

Enfin, il existe un blog consacré à explorer les modèles et anti-modèles JavaScript courants . Consultez également la question Existe-t-il des normes de codage pour JavaScript ? dans Stack Overflow.

Answer 2

Recherchez le Google Tech Talk de Doug Crockford "Javascript : Les bonnes parties" Il a également publié un livre et d'autres conférences en ligne sur Yahoo, je crois.

Answer 3

Je vais écrire des choses que j'ai lues ou mises en application depuis que j'ai posé cette question. Ainsi, les personnes qui la liront ne seront pas frustrées, car la plupart des réponses sont des RTMF déguisées (même si je dois admettre que les livres suggérés SONT bons).

Utilisation du Var

Toute variable est censée être déjà déclarée à la portée supérieure en JS. Ainsi, lorsque vous souhaitez créer une nouvelle variable, déclarez-la pour éviter les mauvaises surprises comme la manipulation d'une variable globale sans s'en rendre compte. Par conséquent, il faut toujours utiliser le mot-clé var.

Dans un objet make, var la variable private. Si vous voulez simplement déclarer une variable publique, utilisez this.my_var = my_value pour le faire.

Déclarer des méthodes

En JS, ce sont de nombreuses façons de déclarer des méthodes. Pour un programmeur OO, la manière la plus naturelle et la plus efficace est d'utiliser la syntaxe suivante :

Dans le corps de l'objet

this.methodName = function(param) {

/* bla */

};

Il y a un inconvénient : les fonctions internes ne pourront pas accéder à "this" à cause de la drôle de portée JS. Douglas Crockford recommande de contourner cette limitation en utilisant une variable locale conventionnelle nommée "that". Cela devient donc

function MyObject() {

    var that = this;

    this.myMethod = function() {

        jQuery.doSomethingCrazy(that.callbackMethod);

    };

};

Ne vous fiez pas à la fin automatique de la ligne

JS essaie d'ajouter automatiquement ; au bout de la ligne si vous l'oubliez. Ne comptez pas sur ce comportement, car vous obtiendrez des erreurs qui seront difficiles à déboguer.

Answer 4

Il faut d'abord se renseigner sur le programmation basée sur des prototypes pour que vous sachiez à quel genre de bête vous avez affaire, puis jetez un œil à Guide de style JavaScript au MDC et Page JavaScript au MDC . Je trouve également préférable de forcer la qualité du code avec un outil, par exemple. JavaScript Lint ou d'autres variantes.

Les meilleures pratiques en matière d'OO ressemblent plus à une recherche de modèles qu'à une concentration sur la qualité du code. Recherche Google : modèles javascript et Modèles jQuery .

• Accélérez votre JavaScript

Answer 5

Il y a quelque temps, j'ai écrit un article expliquant quelques trucs OO. Peut-être le trouverez-vous utile : http://sebagr.com/2009/02/28/classes-in-javascript .

Gardez à l'esprit que cela ne concerne que les problèmes OO, alors que de nombreuses choses que vous demandez ici ne sont pas strictement OO.