web-dev-qa-db-fra.com

Meilleures pratiques Javascript orientées objet?

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

J'utilise des objets pour construire une bibliothèque, mais il existe plusieurs façons de définir des éléments dans JS, ce qui implique des conséquences importantes sur l'étendue, la gestion de la mémoire, l'espace de noms, etc. E.G:

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

Alors, quelles sont vraiment les meilleures pratiques lors du codage en OO en JS?

Les explications académiques vraiment attendues ici. Les liens vers des livres sont les bienvenus, dans la mesure où ils traitent de qualité et de robustesse.

MODIFIER :

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

javascriptoop
251
e-satis

Utiliser `var` ou pas

Vous devriez introduire n'importe quelle variable avec l'instruction var, sinon elle ira à la portée globale.

Cela vaut la peine de mentionner qu'en mode strict ("use strict";) les affectations de variables non déclarées jettent ReferenceError .

À l'heure actuelle, JavaScript n'a pas de portée de bloc. L'école de Crockford vous apprend à mettez les instructions var au début du corps de la fonction , tandis que le Guide de style de Dojo lit ceci toutes les variables doivent être déclarées dans le plus petit champ possible . (L'instruction let et sa définition = introduite dans JavaScript 1.7 ne fait pas partie du standard ECMAScript.)

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

Définir des éléments 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 tout votre code dans une expression de fonction - elle s'appelle le modèle de module. Il présente des avantages en termes de performances et permet également de minimiser et d’obscurcir votre code. Vous pouvez également vous assurer qu'il ne pollue pas l'espace de noms global. Fonctions d'habillage en JavaScript vous permet également d'ajouter un comportement orienté aspect. Ben Cherry a un article détaillé sur le modèle de module .

Utiliser `this` ou pas

Si vous utilisez l'héritage pseudo-classique en JavaScript, vous pouvez difficilement éviter d'utiliser this. Le type d’héritage que vous utilisez est une question de goût. Pour les autres cas, consultez l'article de Peter Michaux sur Widgets JavaScript sans "this" .

Utiliser `function 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. La 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 eux est que toutes les déclarations de fonctions sont placées en haut de la portée, ce qui peut avoir de l'importance dans certains cas. Sinon, ils sont égaux. function foo() est une forme abrégée. Vous trouverez plus de détails sur le levage dans l'article JavaScript Scoping and Hoisting .

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

C'est à vous. JavaScript comporte quatre modèles de création d'objet: pseudo-classique, prototypique, fonctionnel et parties ( Crockford, 2008 ). Chacun a ses avantages et ses inconvénients, voir Crockford dans ses entretiens vidéo ou obtenir son livre The Good Parts comme Anon 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, Dojo Toolkit fournit un cadre robuste pour écrire du code JavaScript orienté objet qui prend même en charge plusieurs héritages.

Les motifs

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

287
Török Gábor

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

Utilisation du var

Toute variable est supposée être déjà déclarée au niveau supérieur dans JS. Donc, chaque fois que vous voulez une nouvelle variable, déclarez-la pour éviter les mauvaises surprises, comme de manipuler 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 voulez simplement déclarer une variable publique, utilisez this.my_var = my_value faire cela.

Déclarer des méthodes

Dans JS, il existe 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" à cause de la portée amusante de JS. 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 ; en fin de ligne si vous l’oubliez. Ne comptez pas sur ce comportement, vous obtiendrez des erreurs difficiles à déboguer.

13
e-satis

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

Les meilleures pratiques avec OO ressemble plus à un objectif que de rechercher des modèles plutôt que de se concentrer sur la qualité du code, alors consultez recherche Google: modèles javascript et modèles jQuery .

8
Bleadof

Vous voudrez peut-être vérifier Les secrets du ninja JavaScript 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-navigateurs, à partir du sol, vers le haut."

Le brouillon est disponible chez l'éditeur: http://www.manning.com/resig/

Douglas Crockford a également publié quelques articles sur JavaScript en Nice sur sa page d’accueil: http://www.crockford.com/

5
gregers

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

Cela signifie [~ # ~] m [~ # ~] y [~ # ~] o [~ # ~] bject [~ # ~] o [~ # ~] Outils, outils multiples.

J'aime beaucoup leur interprétation de OOP en javascript. Vous pouvez également utiliser leur implémentation de classe avec jquery, pour ne pas avoir à abandonner jquery (bien que mootools le fasse tout aussi bien).

Quoi qu'il en soit, lisez bien le premier lien et voyez ce que vous en pensez, le deuxième lien est la documentation mootools.

MooTools & Héritage

Classes MooTools

5
Ryan Florence

Voici un livre qui couvre la plupart des bases:

Javascript orienté objet pour les applications et les bibliothèques de haute qualité

0
Praveen Angyan