web-dev-qa-db-fra.com

Exemples de modèles de conception orientés objet javascript pratiques

Quels modèles de conception orientés objet utilisez-vous dans le javascript de votre application, et pourquoi?

N'hésitez pas à publier du code, même s'il n'y a pas de modèle de conception formel attaché.

J'ai écrit beaucoup de javascript, mais je n'ai pas appliqué beaucoup de modèles orientés objet à ce que je fais, et je suis sûr que je manque beaucoup.

javascriptjquerydesign-patternsoop
81
ming yeow

Voici trois modèles JavaScript populaires. Ceux-ci se trouvent être facilement implémentables à cause de fermetures :

Vous pouvez également consulter:

Ce qui suit est une conférence Google I/O de 2008 présentée par Diaz, où il aborde certains sujets de son livre:

53
Daniel Vassallo

Héritage

J'utilise une notation pour l'héritage qui est basée sur ExtJS , que je trouve assez proche de l'émulation de l'héritage classique en Java. Il fonctionne essentiellement comme suit:

// Create an 'Animal' class by extending
// the 'Object' class with our magic method
var Animal = Object.extend(Object, {
    move : function() {alert('moving...');}
});

// Create a 'Dog' class that extends 'Animal'
var Dog = Object.extend(Animal, {
    bark : function() {alert('woof');}
});

// Instantiate Lassie
var lassie = new Dog();

// She can move and bark!
lassie.move();
lassie.bark();

Espaces de noms

Je suis également d'accord avec Eric Miraglia sur le respect des espaces de noms afin que le code ci-dessus soit exécuté dans son propre contexte en dehors de l'objet fenêtre, cela est essentiel si vous prévoyez que votre code s'exécute comme l'un des nombreux cadres/bibliothèques simultanés s'exécutant dans la fenêtre du navigateur.

Cela signifie que la seule façon d'accéder à l'objet window est via votre propre objet namespace/module:

// Create a namespace / module for your project
window.MyModule = {};

// Commence scope to prevent littering 
// the window object with unwanted variables
(function() {

    var Animal = window.MyModule.Animal = Object.extend(Object, {
         move: function() {alert('moving...');}
    });

    // .. more code

})();

Interfaces

Vous pouvez également utiliser plus d'avancées OOP constructions telles que des interfaces pour améliorer la conception de votre application. Mon approche de celles-ci est d'améliorer la Function.prototype afin d'obtenir une notation dans ce sens:

var Dog = Object.extend(Animal, {
     bark: function() {
         alert('woof');
     }
     // more methods ..
}).implement(Mammal, Carnivore);

Modèles OO

Quant aux 'Patterns' dans le sens Java sens, je n'ai trouvé d'utilisation que pour le modèle Singleton (idéal pour la mise en cache) et le modèle Observer pour les fonctionnalités événementielles telles que l'attribution de certaines actions lorsqu'un utilisateur clique sur un bouton.

Un exemple d'utilisation du modèle d'observateur serait:

// Instantiate object
var lassie = new Animal('Lassie');

// Register listener
lassie.on('eat', function(food) {
   this.food += food;
});

// Feed lassie by triggering listener
$('#feeding-button').click(function() {
    var food = Prompt('How many food units should we give lassie?');
    lassie.trigger('eat', [food]);
    alert('Lassie has already eaten ' + lassie.food + ' units');
});

Et c'est juste quelques astuces dans mon sac de OO JS, j'espère qu'elles vous seront utiles.

Si vous avez l'intention de suivre cette voie, je vous recommande de lire Douglas Crockfords Javascript: the Good Parts . C'est un livre brillant pour ce genre de choses.

25
Steven de Salas

Je suis fan de Module Pattern. C'est un moyen de mettre en œuvre des frameworks extensibles et non dépendants (la plupart du temps).

Exemple:

Le framework, Q, est défini comme ceci:

var Q = {};

Pour ajouter une fonction:

Q.test = function(){};

Ces deux lignes de code sont utilisées ensemble pour former modules. L'idée derrière les modules est qu'ils étendent tous un cadre de base, dans ce cas Q, mais ne dépendent pas les uns des autres (s'ils sont conçus correctement) et peuvent être inclus dans n'importe quel ordre.

Dans un module, vous créez d'abord l'objet framework s'il n'existe pas (qui est un exemple du modèle Singleton):

if (!Q)
    var Q = {};

Q.myFunction = function(){};

De cette façon, vous pouvez avoir plusieurs modules (comme celui ci-dessus) dans des fichiers séparés et les inclure dans n'importe quel ordre. N'importe lequel d'entre eux créera l'objet cadre, puis l'étendra. Pas besoin de vérifier manuellement si le framework existe. Ensuite, pour vérifier si un module/fonction existe dans le code personnalisé:

if (Q.myFunction)
    Q.myFunction();
else
    // Use a different approach/method
20
Chris Laplante

Le modèle singleton est souvent très utile pour "l'encapsulation" et les trucs d'organisation. Vous pouvez même modifier l'accessibilité.

var myInstance = {
  method1: function () {
    // ...
  },
  method2: function () {
    // ...
  }
};

moyen le plus propre d'implémenter un singleton en javascript

6
Gordon Gustafson

J'aime vraiment le jquery pattern chaining pattern , vous permettant d'appeler plusieurs méthodes sur un même objet. Cela facilite grandement l'exécution de plusieurs opérations sur une seule ligne de code.

Exemple:

$('#nav').click(function() {
   $(this).css('color','#f00').fadeOut();
});
4
GSto

J'aime vraiment le Pattern Decorator avec les plugins jQuery. Plutôt que de modifier les plugins pour répondre à vos besoins, écrivez un plugin personnalisé qui transfère simplement les demandes et ajoute des paramètres et des fonctionnalités supplémentaires.

Par exemple, si vous devez passer un ensemble d'arguments par défaut tout le temps et que vous avez besoin d'un comportement légèrement différent qui est lié à la logique métier, écrivez un plugin qui fait tout pre et post le travail est nécessaire pour répondre à vos besoins et passe vos arguments par défaut si ces arguments particuliers ne sont pas spécifiés.

Le principal avantage de ceci est que vous pouvez mettre à jour vos bibliothèques et ne pas vous soucier du portage des modifications de bibliothèque. Votre code pourrait casser, mais il y a au moins la chance qu'il ne le fasse pas.

3
Stefan Kendall

L'un des modèles utiles dans le monde javascript est le modèle de chaînage qui est rendu populaire par LINQ en premier lieu, et est également utilisé dans jQuery.

ce modèle nous permet d'appeler différentes méthodes d'une classe de manière chaînante.

la structure principale de ce modèle serait

var Calaculator = function (init) {
    var result = 0;
    this.add = function (x) { result += (init + x); return this; };
    this.sub = function (x) { result += (init - x); return this; };
    this.mul = function (x) { result += (init * x); return this; };
    this.div = function (x) { result += (init / x); return this; };

    this.equals = function (callback) {
        callback(result);
    }

    return this;
};


new Calaculator(0)
    .add(10)
    .mul(2)
    .sub(5)
    .div(3)
    .equals(function (result) {
        console.log(result);
    });

l'idée clé de ce modèle est this mot clé, qui permet d'accéder à un autre membre public de la fonction Calculatrice.

3
Matrix Buster