Meilleures pratiques Javascript orienté objet? [fermé]

251

Je me retrouve à coder un gros projet en Javascript. Je me souviens que la dernière était une aventure car JS hacky peut rapidement devenir illisible et je veux que ce code soit propre.

Eh bien, j'utilise des objets pour construire une bibliothèque, mais il y a plusieurs façons de définir des choses dans JS, impliquant des conséquences importantes dans la portée, la gestion de la mémoire, l'espace de noms, etc. EG:

  • utiliser varou non;
  • définir des éléments dans le fichier ou dans un (function(){...})()style jquery;
  • en utilisant thisou non;
  • en utilisant function myname()ou myname = function();
  • définir des méthodes dans le corps de l'objet ou utiliser "prototype";
  • etc.

Quelles sont donc les meilleures pratiques lors du codage en OO dans JS?

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

ÉDITER :

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

e-satis
la source
2
Peut-être que "orienté objet" dans le titre devrait être remplacé par "moderne".
viam0Zah
43
Hmmm, 79 votes positifs, 82 favoris, 91 votes positifs sur la réponse ... mais cela a été clos car pas constructif ... pourquoi ??
Brett Rossier
1
J'ai écrit une classe simple portant des fonctionnalités C ++ OOP en javascript avec une syntaxe simple et naturelle. Voir ma réponse ici: stackoverflow.com/a/18239463/1115652
14
Ce type de question est toujours fermé. Je comprends les raisons de cela, mais comme ce sont des questions importantes et toujours populaires (et comme je les trouve toujours quand j'ai une question similaire), je me demande si quelqu'un peut nous diriger vers le bon endroit pour les poser?
KP MacGregor
2
@BrettRossier À quoi sert le pouvoir si vous ne le maniez pas? SO est la démonstration en direct du fonctionnement d'un ordre hiérarchique démocratique. Certes, certains psychologues s'y intéressent ...

Réponses:

288

Utiliser `var` ou non

Vous devez introduire n'importe quelle variable avec l' varinstruction, sinon elle atteint la portée globale.

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

À l'heure actuelle, JavaScript n'a pas de portée de bloc. L'école de Crockford vous apprend à placer des instructions var au début du corps de la fonction , tandis que le guide de style de Dojo indique que toutes les variables doivent être déclarées dans la plus petite portée possible . (L' letinstruction et la définition introduites dans JavaScript 1.7 ne font pas partie de la norme ECMAScript.)

Il est recommandé de lier les propriétés des objets régulièrement utilisés aux 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 `((fonction () {...}) ()`

Si vous n'avez pas besoin d'accéder à vos objets en dehors de votre code, vous pouvez envelopper tout 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 masquer votre code à un niveau élevé. Vous pouvez également vous assurer qu'il ne polluera pas l'espace de noms global. Les fonctions d'habillage en JavaScript vous permettent également d'ajouter un comportement orienté aspect. Ben Cherry a un article détaillé sur le modèle de module .

Utiliser «ceci» ou non

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

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

function myname()est une déclaration de fonction et myname = function();est une expression de fonction affectée à une variable myname. Cette dernière forme indique que les fonctions sont des objets de première classe, et vous pouvez faire n'importe quoi avec elles, comme avec une variable. La seule différence entre elles 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, ils sont égaux. function foo()est une forme abrégée. Pour plus de détails sur le levage, consultez l'article JavaScript Scoping and Hoisting .

Définir des méthodes dans le corps de l'objet ou utiliser "prototype"

C'est à vous. JavaScript a quatre modèles de création d'objets: pseudo-classique, prototypique, fonctionnel et pièces ( Crockford, 2008 ). Chacun a ses avantages et ses inconvénients, voir Crockford dans ses conversations vidéo ou obtenir son livre The Good Parts comme Anon l'a déjà suggéré .

Cadres

Je vous suggère de choisir des 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 Dojo Toolkit 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 dédié à l' exploration des modèles et anti-modèles JavaScript courants . Consultez également la question Existe-t-il des normes de codage pour JavaScript? dans Stack Overflow.

viam0Zah
la source
1
"JavaScript a quatre modèles de création d'objets: pseudo-classique, prototypique, fonctionnel et pièces" - j'apprécierais vraiment un résumé des avantages et des inconvénients ici.
BadHorsie
2
"L' letinstruction et la définition introduites dans JavaScript 1.7 ne font pas partie de la norme ECMAScript." Maintenant, cela fait partie d'ES6.
Michał Perłakowski
13

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

Utilisation Var

Toute variable est censée être déjà déclarée à l'étendue supérieure dans JS. Donc, quand vous voulez une nouvelle variable, déclarez-la pour éviter les mauvaises surprises comme la manipulation d'une variable globale sans la remarquer. Par conséquent, utilisez toujours le mot clé var.

Dans un objet make, var la variable private. Si vous souhaitez simplement déclarer une variable publique, utilisez this.my_var = my_valuepour 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, le moyen le plus naturel et le plus efficace consiste à utiliser la syntaxe suivante:

À l'intérieur du corps de l'objet

this.methodName = function(param) {

/* bla */

};

Il y a un inconvénient: les fonctions internes ne pourront pas accéder à "ceci" en raison de la portée JS amusante. Douglas Crockford recommande de contourner cette limitation en utilisant une variable locale conventionnelle nommée "that". Alors ça devient

function MyObject() {

    var that = this;

    this.myMethod = function() {

        jQuery.doSomethingCrazy(that.callbackMethod);

    };

};

Ne comptez pas sur la fin de ligne automatique

JS essaie d'ajouter automatiquement ;à la fin de la ligne si vous l'oubliez. Ne comptez pas sur ce comportement, car vous obtiendrez des erreurs qui sont un gâchis à déboguer.

e-satis
la source
8

Vous devez d'abord lire la programmation basée sur un prototype afin de savoir à quel type de bête vous avez affaire, puis jeter un œil au guide de style JavaScript sur MDC et à la page JavaScript sur MDC . Je trouve également préférable de forcer la qualité du code avec un outil, c'est-à-dire. JavaScript Lint ou autres variantes.

Les meilleures pratiques avec OO semblent plus que vous voulez trouver des modèles plutôt que de vous concentrer sur la qualité du code, alors regardez la recherche Google: modèles javascript et modèles jQuery .

Bleadof
la source
5

Vous voudrez peut-être consulter Secrets of the JavaScript Ninja par John Resig (jQuery). "Ce livre est destiné à prendre un développeur JavaScript intermédiaire et à lui donner les connaissances dont il a besoin pour créer une bibliothèque JavaScript multi-navigateur, à partir du sol."

Le projet est disponible auprès de l'éditeur: http://www.manning.com/resig/

Douglas Crockford a également de beaux articles JavaScript sur sa page d'accueil: http://www.crockford.com/

Gregers
la source
5

Je me sens souvent comme le seul gars ici qui utilise MooTools pour mon javascript.

Il signifie M y O bjet O riented Outils, Mootools.

J'aime vraiment leur vision de la POO en javascript. Vous pouvez également utiliser leur implémentation de classe avec jquery, vous n'avez donc pas à abandonner jquery (bien que mootools le fasse tout aussi bien).

Quoi qu'il en soit, donnez une bonne lecture au premier lien et voyez ce que vous en pensez, le deuxième lien est vers les documents mootools.

MooTools et héritage

Classes MooTools

Ryan Florence
la source
Je ne pense pas que d'essayer de plier une langue pour l'adapter à votre ancien habbit est une bonne chose. C'est comme ces gens en C, en utilisant # pour remplacer, ça ressemble à fortran, ou bien. Je pense que vous devriez essayer d'apprendre le fonctionnement de la langue (et ses meilleures pratiquesà, et l'utiliser de la manière qui ne vous dérange pas trop. Mais ne le changez pas vraiment.
e-satis
2
Je pense que le système d'objets MooTools est assez élégant et m'aide vraiment à garder mon code organisé / encapsulé.
awesomo