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

Question

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

N'hésitez pas à poster du code, même si aucun modèle de conception formel n'y est associé.

J'ai écrit beaucoup de javascript, mais je n'ai pas appliqué beaucoup de motifs orientés objet à ce que je suis en train de faire, et je suis sûr qu'il me manque beaucoup.

Answer 1

Voici trois populaire JavaScript modèles. Ces arrive d'être facilement réalisable en raison de fermetures:

• Le Module de Modèle - Exemple (et populaire) par Eric Miraglia
• Memoization - Exemple par Oliver Steele
• Nourrissage - Exemple de Dustin Diaz

Vous pouvez également vouloir vérifier:

• Pro JavaScript Modèles de Conception par Ross Harmes et Dustin Diaz

Ce qui suit est un Google I/O conférence de 2008 présenté par Diaz, où il discute de certains thèmes de son livre:

• Google I/O 2008 - Modèles de Conception dans un Langage Expressif

Answer 2

L'héritage

J'utilise une notation pour l'héritage qui est basé sur ExtJS 3, qui je trouve fonctionne assez proche de l'émulation classique héritage en Java. Essentiellement, il s'exécute 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();

Les espaces de noms

Je suis d'accord aussi avec Eric Miraglia sur coller pour les espaces de noms, donc le code ci-dessus doit être exécuté à l'intérieur de son propre contexte, en dehors de la fenêtre de l'objet, cela est essentiel si vous voulez que votre code à exécuter en tant que l'un des nombreux simultanée des cadres / les bibliothèques de l'exécution dans la fenêtre du navigateur.

Cela signifie que la seule façon de la fenêtre de l'objet par l'intermédiaire de votre propre espace de noms / module de l'objet:

// 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 faire usage de plus d'avances de la programmation orientée objet des constructions telles que des interfaces pour améliorer la conception de votre application. Mon approche est d'améliorer l' Function.prototype afin d'obtenir une notation long de ces lignes:

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

OO Modèles

Comme pour les "Modèles" dans le Java sens, j'ai seulement trouvé une utilisation pour le pattern Singleton (idéal pour la mise en cache) et le pattern observer pour event-driven fonctionnalités telles que l'attribution des actions quand un utilisateur clique sur un bouton.

Un exemple de l'utilisation du Pattern observer 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 un couple de trucs dans mon sac de OO JS, j'espère qu'ils vous soient utiles.

Je recommande si vous avez l'intention d'aller en bas de cette route que vous avez lu Douglas Crockfords Javascript: les Bonnes Parties. Ses un livre brillant pour ce genre de choses.

Answer 3

Je suis fan du Motif de Module. C'est une façon de mettre en œuvre extensible, non-dépendante (la plupart du temps) cadres.

Exemple:

Le cadre, Q, est définie comme ceci:

var Q = {};

Pour ajouter une fonction:

Q.test = function(){};

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

Dans un module, vous devez d'abord créer le cadre de l'objet s'il n'existe pas (ce qui est un exemple de l' Singleton pattern):

if (!Q)
    var Q = {};

Q.myFunction = function(){};

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

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

Answer 4

Le modèle singleton est souvent très utile pour les tâches d’encapsulation et d’organisation. Vous pouvez même changer l'accessibilité.

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

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

Answer 5

J'aime beaucoup le modèle de chaînage des méthodes de jquery, qui vous permet d'appeler plusieurs méthodes sur un même objet. Il est très facile d'effectuer plusieurs opérations dans une seule ligne de code.

Exemple:

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