Patterns Java Script design

Vue d'ensemble: Dans ce document, nous allons parler des différents modèles de conception utilisés dans JavaScript. La plupart des développeurs se demandent de savoir exactement ou le modèle de conception idéal pour être utilisé dans leur programme. Pour être honnête, il n'y a pas de réponse concrète à cette question ou il n'y a pas de formules qui trouveraient le modèle de conception correcte à utiliser dans une situation donnée. Donc, dans de telles circonstances, nous devrions avoir un souffle ferme des modèles de conception et les problèmes spécifiques qu'ils traitent, nous devrions être dans une meilleure situation pour prendre une décision sur laquelle la conception motif à être utilisé dans quelle condition.

Présentation:
Un modèle de conception est une solution réutilisable qui peut être appliquée à des problèmes de re-produisant des communes dans la conception et le développement de logiciels. Conception modèle peut également être appelé en tant que modèles utilisés pour résoudre des problèmes communs. Les modèles de conception ont trois avantages majeurs:

Ils sont des solutions éprouvées: Conception modèle fournit une approche solide dans le développement de logiciels et utilise des techniques éprouvées.
Peut être facilement réutilisés: Les modèles de conception sont conceptuels et fournissent de la solution de la boîte qui convient à nos besoins. Cette caractéristique rend les modèles de conception plus robuste et ils peuvent être réutilisés dans des conditions similaires.
Les motifs sont expressifs: Chaque modèle de conception présente une structure de jeu prédéfini et le vocabulaire qui peut être utilisé pour fournir des solutions aux grands problèmes.

Design Pattern ne fournit une solution exacte à un problème. Il est important de noter que le rôle des modèles consiste à fournir un système de solution.

Types de Design Patterns
Les modèles de conception peuvent être divisés en trois catégories suivantes sous:

Conception Creational Motif : Dans cette catégorie, les modèles de conception suivants tombent :
- Singleton
- Constructeur
- Usine
- Abstrait
- Prototype
- Constructeur
Structural Design Motif : Dans cette catégorie, les modèles de conception suivants tombent :
- Décorateur
- Façade
- Poids mouche
- Adaptateur
- Procuration
Conception comportementale Motif : Dans cette catégorie, la conception modèle d'automne suivant :
- Iterator
- Visiteur
- Médiateur
- Observateur

Patterns en JavaScript:
Les modèles suivants sont couramment utilisés en JavaScript:

constructor Motif
Motif de module
Motif Singleton
Motif d'observateur
Mediator Motif
Prototype Motif
Motif de commande
Façade Motif
Motif de l'usine
Décorateur Motif
Flyweight Motif

Le motif Constructor:
Selon le concept de programmation orienté objet classique, un constructeur est un type spécial de la méthode qui est utilisée pour créer une instance d'un objet dans la mémoire. En JavaScript création de l'objet se fait en utilisant l'une des trois approches suivantes:

Listing 1: Trois approches utilisées en JavaScript pour créer des objets

[Code]

// Approche 1

était newObject = {};

//Approche 2

var newObject = Object.create(zéro);

//Approche 3

var newObject = new Object();

[/Code]

Dans la troisième approche, l'objet est créé en utilisant le constructeur de l'objet où aucune valeur est passée ou un ensemble. Il existe de multiples façons de définir des valeurs à un objet nouvellement créé. These are:

Listing 2: Façons de définir des valeurs à un constructeur

[Code]

//Approche 1

newObject.someKey = "Bonjour tout le monde"

//Approche 2

newObject[someKey] = "Bonjour tout le monde"

//Approche 3

Object.defineProperty( newObject, “someKey”, {

valeur : "Bonjour le monde"

inscriptible : vrai

dénombrable : vrai

configurable : vrai

);

[/Code]

Le modèle Singleton:
Nous savons tous que le pattern singleton limite la création d'un objet à instance unique. modèle Singleton est mis en œuvre par la création d'une classe avec une méthode qui crée une nouvelle instance de l'objet que lorsque aucun autre cas existent. En JavaScript singletons servent un espace de noms de ressource partagée qui isole la mise en œuvre de l'espace de noms global. En JavaScript, singleton est mis en oeuvre de la manière suivante:

Listing 3: la mise en œuvre Singleton en JavaScript

[Code]

était mySingleton = (fonction () {

// Instance stocke une référence au Singleton

instance var;

function init() {

// Singleton

// méthodes et les variables privées

fonction privateMethod(){

console.log( “Je suis privé” );

}

était variable privée = “Im aussi privé”;

var privateRandomNumber = Math.random();

return {

// Méthodes publiques et les variables

publicMethod: fonction () {

console.log( “Le public peut me voir!” );

propriété publique: “Je suis aussi publique”,

getRandomNumber: fonction() {

retour privateRandomNumber;

}

};

return {

// Obtenez l'instance Singleton si elle existe

// ou en créer un si elle ne le fait pas

getInstance: fonction () {

si ( !exemple ) {

instance = initialisation();

}

retour instance;

}

};

})();

était myBadSingleton = (fonction () {

// Instance stocke une référence au Singleton

instance var;

function init() {

// Singleton

var privateRandomNumber = Math.random();

return {

getRandomNumber: fonction() {

retour privateRandomNumber;

}

};

return {

// Toujours créer une nouvelle instance Singleton

getInstance: fonction () {

instance = initialisation();

retour instance;

}

};

})();

// Usage:

était single1 = mySingleton.getInstance();

était single2 = mySingleton.getInstance();

console.log( singleA.getRandomNumber() === singleB.getRandomNumber() ); // vrai

var badSingle1 = myBadSingleton.getInstance();

var badSingle2 = myBadSingleton.getInstance();

console.log( badSingleA.getRandomNumber() !== badSingleB.getRandomNumber() ); // vrai

[/Code]

Comme par le GoF, singleton est applicable dans les situations suivantes:

Il devrait exister exactement sur l'instance de l'objet.
L'instance unique doit être extensible par sous-classing il.

Le pattern Observateur:
Dans le modèle Observateur, the object (également appelé comme sujet) maintient une liste d'objets en fonction de l'a renvoyé en tant qu'observateurs. Le sujet notifie automatiquement aux observateurs tout changement qui est arrivé, au moyen du mécanisme de diffusion. Mise en œuvre du modèle d'observateur est illustré ci-dessous.

Listing 4: Liste des observateurs à charge d'un sujet peut avoir

[Code]

fonction ObserverList(){ this.observerList = [];} ObserverList.prototype.Add = function( obj ){ return this.observerList.push( obj );}; ObserverList.prototype.Empty = function(){ this.observerList = [];}; ObserverList.prototype.Count = function(){ return this.observerList.length;}; ObserverList.prototype.Get = function( index ){ si( index > -1 && index < this.observerList.length ){ return this.observerList[ index ]; }}; ObserverList.prototype.Insert = function( obj, index ){ var pointer = -1; si( index === 0 ){ this.observerList.unshift( obj ); pointer = index; }else if( index === this.observerList.length ){ this.observerList.push( obj ); pointer = index; } return pointer;}; ObserverList.prototype.IndexOf = function( obj, startIndex ){ var i = startIndex, pointeur = -1; while( Je < this.observerList.length ){ si( this.observerList[Je] === obj ){ pointer = i; } i ; } return pointer;}; ObserverList.prototype.RemoveAt = function( index ){ si( index === 0 ){ this.observerList.shift(); }else if( index === this.observerList.length -1 ){ this.observerList.pop(); }}; // Extend an object with an extensionfunction extend( extension, obj ){ pour ( clé var en extension ){ obj[key] = Extension[key]; }}

[/Code]

Listing 5: L'objet

[Code]

fonction Objet(){ this.observers = new ObserverList();} Subject.prototype.AddObserver = function( observateur ){ this.observers.Add( observateur );}; Subject.prototype.RemoveObserver = function( observateur ){ this.observers.RemoveAt( this.observers.IndexOf( observateur, 0 ) );}; Subject.prototype.Notify = function( le contexte ){ var observerCount = this.observers.Count(); pour(var i=0; Je < observerCount; i ){ this.observers.Get(Je).Mettre à jour( le contexte ); }};

[/Code]

Dans l'exemple ci-dessus, en utilisant les composants d'observateurs, nous définissons maintenant:

Un bouton permettant d'ajouter de nouvelles cases observables à la page
Une case à cocher de contrôle qui agira en tant que sujet, informer les autres cases à cocher, ils doivent être vérifiés
Un conteneur pour les nouvelles cases étant ajouté

Le code HTML est comme sous

Listing 5: Le code HTML

[Code]

<button id =”addNewObserver”>Ajouter case Nouvel Observateur</button><entrée id =”mainCheckbox” type =”case à cocher”/><div id =”observersContainer”></div>

[/Code]

Summary: Donc, dans cet article, j'ai discuté des détails sur les modèles de conception JavaScript. Les modèles de conception sont applicables à tous les types de langages comme langage orienté objet java et aussi un langage de script comme JavaScript. Mais il y a des différences, et nous avons vu dans les exemples ci-dessus. Donc, pour conclure la discussion, nous pouvons dire que les modèles de conception sont utilisés pour fournir la solution des problèmes à se produire fréquemment. Et s'il vous plaît garder à l'esprit que les modèles de conception sont