Quels sont quelques exemples d’implémentations de modèles de conception utilisant JavaScript ?

Question

Je suis un programmeur moyennement qualifié utilisant JavaScript mais je ne suis pas un gourou.Je sais que vous pouvez faire des choses assez puissantes avec, mais je n'ai tout simplement pas vu grand-chose d'autre qu'une manipulation assez basique du DOM.Je me demande si les gens pourraient fournir quelques exemples de concepts de modèles de conception traditionnels tels que la méthode Factory, Singleton, etc. en utilisant JavaScript.Dans quels cas ces modèles seraient-ils utilisés sur le Web ?

Answer 1

Je voulais juste ajouter mon modèle JavaScript préféré que j'ai appris des modèles de conception JavaScript Pro que Jonathan Rauch avait déjà recommandés.

Il s’agit du modèle singleton d’espace de noms.Fondamentalement, vous créez des espaces de noms via des singletons qui vous permettent de masquer les méthodes et les variables d'une utilisation externe.Les méthodes masquées/exposées sont en réalité masquées car elles sont définies dans la fermeture.

var com = window.com || {};
com.mynamespace = com.mynamespace || {};
com.mynamespace.newpackage = (function() {
    var myPrivateVariable = "hidden";
    var myPublicVariable = "exposed";

    function myPrivateMethod() {
        return "also hidden";
    }

    function myPublicMethod() {
        return "also exposed";
    }

    return {
        myPublicMethod: myPublicMethod,
        myPublicVariable: myPublicVariable
    };
})();

Answer 2

Nickolay en a parlé, mais les modèles de conception ne sont pas cohérents entre les langages qui présentent des différences drastiques.J'ai déjà lu (et je suis d'accord) qu'un modèle de conception est souvent le signe de fonctionnalités manquantes dans le langage.

À titre d'exemple parfait, le modèle "Factory" est totalement inutile dans certains langages, Ruby comme exemple auquel je pense (car la construction d'objets n'est qu'une méthode sur l'instance de classe) :

# create a factory for MyObject
my_factory = MyObject
instance_1 = my_factory.new

# change the factory to another class
my_factory = MyOtherObject
instance_2 = my_factory.new

Chaque fois que vous appliquez un modèle de conception à un langage différent de celui pour lequel il a été initialement développé, assurez-vous de déterminer s'il est VRAIMENT nécessaire et de quelles manières vous pourriez l'améliorer avec les nouvelles fonctionnalités linguistiques disponibles.Les modèles de conception ne sont qu'un guide, vous devez toujours vous demander si l'utilisation que vous envisagez a vraiment besoin du modèle, ou s'il peut être mieux adopté dans votre cas.

Answer 3

Il y a un bon gratuit livre en ligne d'Addy Osmani, présentant les modèles de conception Javascript : Modèles de conception JavaScript essentiels pour les débutants, volume 1

Answer 4

@jamting :

Le modèle de conception singleton en JavaScript

Oh mon Dieu.Je suis sans voix.

Vers OP :oui, bien sûr, vous pouvez le faire dans un certain sens, mais certains modèles, comme vous y êtes habitué, ne sont pas aussi visibles qu'en Java.Par exemple, singleton serait simplement un objet :

var singleton = {
    sayHello: function() {
       alert("Hello!")
    }
};

Wikipedia a un exemple de Usine en JS.

Answer 5

J'ai récemment utilisé Le meilleur cours d'animation de Bernie qui fait largement appel à Stratégie Design pattern.Bernie fait un excellent travail en décrivant pourquoi le modèle de stratégie doit être utilisé, mais n'explique malheureusement pas exactement comment fonctionne le code.Là encore, lorsque vous utilisez une référence de modèles de conception, jetez un œil au code et aux commentaires dans animator.js pour un bon exemple de la façon d'utiliser le modèle de stratégie.

Exemple:

// This object controls the progress of the animation 
ex1 = new Animator();
// The Animator's subjects define its behaviour 
ex1.addSubject(updateButton);
function updateButton(value) {
    $('ex1Button').innerHTML = "Progress: " + Math.round(value * 100) + "%";
}

// now click below: each click to the button calls ex1.toggle()

Answer 6

Comment s’appelle cette pratique en JavaScript ?

Il s’agit du modèle de conception d’auto-invocation.Je ne l'avais jamais vu avant de commencer à Javascript.

Answer 7

Je soupçonne qu'ils le peuvent - voici un exemple de Singleton :

Le modèle de conception singleton en JavaScript

Answer 8

Bien sûr qu’ils le peuvent.Voici un livre sur le sujet :
Modèles de conception JavaScript professionnels
Voici un exemple du modèle Factory :
Modèle d'usine en Javascript

Answer 9

Je voudrais ajouter ici ce que j'ai étudié en groupe avec une discussion sur les modèles de conception en C# et JavaScript.Ce qui me plaît pendant la réunion, c'est que le gars C# écrit des codes en JavaScript et la même chose pour le gars JavaScript.Après avoir quitté la réunion, j'essaie d'en apprendre davantage à la maison et de bloguer ici.http://tech.wowkhmer.com/category/Design-Patterns.aspx pour C# et JavaScript.

Answer 10

Écouter à Justin Diaz parlant du modèle de conception pour Javascript.L'exposé est également basé sur son livre Pro Javascript Techniques mentionné ci-dessus.La conférence dure environ 45 minutes sur Google I/O.