Java Script Design Patterns

Overzicht: In dit document zullen we praten over de verschillende design patterns gebruikt in JavaScript. Het merendeel van de ontwikkelaars vragen zich af om uit te vinden van de exacte of de ideale ontwerp patroon te gebruiken in hun programma. Om eerlijk te zijn, er geen concreet antwoord op deze vraag of er geen formules hetgeen voor de juiste ontwerppatroon te gebruiken in een bepaalde situatie. Dus onder dergelijke omstandigheden, we moeten een stevige zucht van de design patterns en de specifieke problemen die zij behandelen hebben, moeten we in een betere positie om een beslissing over welk ontwerp patroon te gebruiken in welke toestand te nemen.

Introductie:
Een ontwerp patroon is een herbruikbare oplossing die gemeenschappelijke terugkerende problemen in de software ontwerp en ontwikkeling kan worden toegepast. Ontwerp patroon kan ook worden aangeduid als templates gebruikt om gemeenschappelijke problemen op te lossen. Design patterns hebben drie grote voordelen:

Ze zijn bewezen oplossingen: Ontwerp patroon zorgen voor een gedegen aanpak in de ontwikkeling van software en maakt gebruik van bewezen technieken.
Kan gemakkelijk worden hergebruikt: Design patterns zijn conceptuele en bieden out of the box oplossing die past bij onze behoeften. Deze eigenschap maakt de ontwerppatronen robuuster en kunnen worden hergebruikt in vergelijkbare omstandigheden.
Patronen zijn expressieve: Elk ontwerp patroon presenteert een vooraf gedefinieerde set structuur en woordenschat die gebruikt kunnen worden om oplossingen om grotere problemen te bieden.

Ontwerp patroon geeft nooit een exacte oplossing voor een probleem. Het is belangrijk op te merken dat de rol van patronen is om een oplossing te bieden regeling.

Soorten Design Patterns
Ontwerppatronen kan worden onderverdeeld in drie subcategorieën:

Creational Design Pattern : In deze categorie vallen de volgende design patterns :
- eenling
- Bouwer
- Fabriek
- Abstract
- Prototype
- Bouwer
Structural Design Pattern : In deze categorie vallen de volgende design patterns :
- Decorateur
- Facade
- Vlieggewicht
- Adapter
- volmacht
Behavioral Design Pattern : In deze categorie de volgende patroon val ontwerp :
- iterator
- Bezoeker
- Bemiddelaar
- Waarnemer

Patterns in JavaScript:
De patronen worden vaak gebruikt in JavaScript:

constructor Pattern
module Pattern
Singleton
Observer Pattern
mediator Pattern
prototype Pattern
commandopatroon
facade Pattern
Factory Pattern
decorator
vlieggewicht Patroon

De Constructor Pattern:
Zoals aangegeven in de klassieke object georiënteerd programmeren begrip, een aannemer is een speciaal type methode die wordt gebruikt om een exemplaar van een object te creëren in het geheugen. In JavaScript maken van objecten wordt uitgevoerd met een van de volgende drie benaderingen:

Listing 1: Drie benaderingen gebruikt in JavaScript om objecten te creëren

[Code]

// Nadering 1

was newObject = {};

//Nadering 2

var newObject = Object.create(nul);

//Nadering 3

var newObject = new Object();

[/Code]

In de derde benadering, Het object wordt gemaakt met behulp van het Voorwerp aannemer, waar geen waarde wordt doorgegeven of stel. Er zijn meerdere manieren om waarden ingesteld op een nieuw gevormde zaak. These are:

Listing 2: Manieren om waarden naar een aannemer

[Code]

//Nadering 1

newObject.someKey = "Hello World"

//Nadering 2

newObject[someKey] = "Hello World"

//Nadering 3

Object.defineProperty( newObject, “someKey”, {

waarde : "Hallo Wereld"

schrijfbaar : waar

enumerable : waar

configureerbaar : waar

);

[/Code]

De Singleton:
We weten allemaal dat de Singleton het creëren van een object om één instantie beperkt. Singleton wordt uitgevoerd door het creëren van een klasse met een methode die een nieuw exemplaar van het object alleen als er geen andere gevallen bestaan creëert. In JavaScript eenlingen dienen als een gedeelde bron namespace waarin met de uitvoering isolaten van de wereldwijde namespace. in JavaScript, singleton wordt uitgevoerd op de volgende wijze:

Listing 3: Singleton implementatie in JavaScript

[Code]

was mySingleton = (functie () {

// Zo slaat een verwijzing naar de Singleton

var bijvoorbeeld;

functie init() {

// eenling

// Private methoden en variabelen

functie privateMethod(){

console.log( “Ik ben privé” );

}

was privé variabele = “Im ook prive”;

var privateRandomNumber = Math.random();

return {

// Openbare methoden en variabelen

publicMethod: functie () {

console.log( “Het publiek kan me zien!” );

publiek eigendom: “Ik ben ook openbaar”,

getRandomNumber: functie() {

terug privateRandomNumber;

}

};

return {

// Klik hier voor de Singleton bijvoorbeeld als deze bestaat

// of maak er een als het niet

getInstance: functie () {

indien ( !aanleg ) {

Bijvoorbeeld = init();

}

terug bijvoorbeeld;

}

};

})();

was myBadSingleton = (functie () {

// Zo slaat een verwijzing naar de Singleton

var bijvoorbeeld;

functie init() {

// eenling

var privateRandomNumber = Math.random();

return {

getRandomNumber: functie() {

terug privateRandomNumber;

}

};

return {

// Maak altijd een nieuw exemplaar Singleton

getInstance: functie () {

Bijvoorbeeld = init();

terug bijvoorbeeld;

}

};

})();

// Gebruik:

was eenpersoons 1 = mySingleton.getInstance();

was single2 = mySingleton.getInstance();

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

var badSingle1 = myBadSingleton.getInstance();

var badSingle2 = myBadSingleton.getInstance();

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

[/Code]

Zoals aangegeven in de GoF, Singleton is in de volgende situaties van toepassing:

Er moet exact bestaan op exemplaar van het object.
De enige instantie moet uitbreidbaar zijn door sub-classificeren is.

The Observer Pattern:
In de Observer patroon, het object (ook wel als onderwerp) houdt een lijst van objecten, afhankelijk van deze aangeduid als waarnemers. Het onderwerp meldt automatisch aan de waarnemers elke verandering die is gebeurd, met de uitzending mechanisme. Uitvoering van de Observer Pattern is hieronder weergegeven.

Listing 4: Lijst van afhankelijke waarnemers een onderwerp kan hebben

[Code]

functie 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 ){ indien( index > -1 && index < this.observerList.length ){ return this.observerList[ index ]; }}; ObserverList.prototype.Insert = function( obj, index ){ var pointer = -1; indien( index === 0 ){ this.observerList.unshift( obj ); pointer = index; }anders als( index === this.observerList.length ){ this.observerList.push( obj ); pointer = index; } return pointer;}; ObserverList.prototype.IndexOf = function( obj, startIndex ){ var i = startIndex, pointer = -1; terwijl( ik < this.observerList.length ){ indien( this.observerList[ik] === obj ){ pointer = i; } i ; } return pointer;}; ObserverList.prototype.RemoveAt = function( index ){ indien( index === 0 ){ this.observerList.shift(); }anders als( index === this.observerList.length -1 ){ this.observerList.pop(); }}; // Extend an object with an extensionfunction extend( extension, obj ){ voor ( var sleutel in het verlengde ){ obj[key] = uitbreiding[key]; }}

[/Code]

Listing 5: Het onderwerp

[Code]

functie Subject(){ this.observers = new ObserverList();} Subject.prototype.AddObserver = function( waarnemer ){ this.observers.Add( waarnemer );}; Subject.prototype.RemoveObserver = function( waarnemer ){ this.observers.RemoveAt( this.observers.IndexOf( waarnemer, 0 ) );}; Subject.prototype.Notify = function( context ){ var observerCount = this.observers.Count(); voor(var i=0; ik < observerCount; i ){ this.observers.Get(ik).Bijwerken( context ); }};

[/Code]

In het bovenstaande voorbeeld, met behulp van de Observer componenten, we nu definiëren:

Een knop voor het toevoegen van nieuwe waarneembare selectievakjes om de pagina
Een controle checkbox die zal fungeren als een subject, kennisgeving aan andere vakjes ze moeten worden gecontroleerd
Een houder voor de nieuwe selectievakjes toegevoegd

De HTML code is als in

Listing 5: De HTML-code

[Code]

<button id =”addNewObserver”>Voeg Nieuwe Observer checkbox</knop><ingang id =”mainCheckbox” type =”checkbox”/><div id =”observersContainer”></div>

[/Code]

Summary: Dus in dit artikel heb ik de details besproken over de JavaScript-design patterns. Het design patterns zijn van toepassing op alle soorten van talen zoals objectgeoriënteerde taal Java en ook scripttaal zoals JavaScript. Maar er zijn verschillen en we hebben gezien in de bovenstaande voorbeelden. Dus om de discussie te sluiten kunnen we zeggen dat een ontwerp patronen worden gebruikt om de oplossing voor veel voorkomende problemen zorgen. En houd er rekening mee dat een ontwerp patronen zijn