Java Script Design Patterns

Oversigt: I dette dokument vil vi tale om de forskellige design mønstre, der anvendes i JavaScript. De fleste af de udviklere spekulerer at finde ud af den nøjagtige eller det ideelle design mønster, der skal anvendes i deres program. For at være ærlig, der er ingen konkrete svar på dette spørgsmål, eller der er ikke nogen formler, som ville finde frem til de korrekte design mønster, der skal anvendes i en given situation. Så under sådanne omstændigheder, vi bør have en fast gisp af design mønstre og de specifikke problemer, de beskæftiger sig med, vi bør være i en bedre situation til at tage en beslutning om, hvilke design mønster, der skal bruges i hvilken tilstand.

Indledning:
Et mønster er en genbrugelig løsning, som kan anvendes til fælles re forekommende problemer i software design og udvikling. Design mønster kan også betegnes som skabeloner bruges til at løse fælles problemer. Design mønstre har tre store fordele:

De er bevist løsninger: Design mønster giver en solid tilgang i softwareudvikling og bruger gennemprøvede teknikker.
Kan let genbruges: Design mønstre er konceptuelle og giver ud af boksen løsning, som passer til vores behov. Denne funktion gør det design mønstre mere robust, og de kan genbruges i lignende forhold.
Mønstre er udtryksfulde: Hvert design mønster præsenterer en foruddefineret sæt struktur og ordforråd, som kan anvendes til at tilvejebringe løsninger på større problemer.

Design mønster aldrig giver en eksakt løsning på et problem. Det er vigtigt at bemærke, at den rolle mønstre er at tilvejebringe en løsning ordning.

Typer af Design Patterns
Designmønstre kan inddeles i følgende tre underkategorier:

Creational Design Mønster : I denne kategori følgende design mønstre falde :
- Singleton
- Builder
- Fabrik
- Abstrakt
- Prototype
- Bygger
Strukturel Design Mønster : I denne kategori følgende design mønstre falde :
- Dekoratør
- facade
- Fluevægt
- adapter
- Proxy
Behavioral Design Mønster : I denne kategori følgende mønster falde :
- iterator
- Besøgende
- Mediator
- Observer

Mønstre i JavaScript:
Følgende mønstre er almindeligt anvendt i JavaScript:

Constructor Mønster
Modul Mønster
Singleton Pattern
Observer Pattern
Mediator Mønster
Prototype Mønster
Command Pattern
facade Mønster
Factory Pattern
Dekoratør Mønster
Fluevægt Mønster

Den Constructor Mønster:
Som pr klassiske objektorienteret programmering koncept, en constructor er en særlig type af metode, der anvendes til at oprette en forekomst af et objekt i hukommelsen. I JavaScript skabelse objekt sker ved hjælp af en af følgende tre metoder:

Listing 1: Tre tilgange, der anvendes i JavaScript til at oprette objekter

[Code]

// Nærme sig 1

var newObject = {};

//Nærme sig 2

var newObject = Object.create(nul);

//Nærme sig 3

var newObject = ny Object();

[/Code]

I den tredje tilgang, Objektet oprettet ved hjælp af Object konstruktør, hvor ingen værdi bestået eller indstillet. Der er flere måder at angive værdier til en nyoprettet objekt. These are:

Listing 2: Måder at angive værdier til en konstruktør

[Code]

//Nærme sig 1

newObject.someKey = "Hello World"

//Nærme sig 2

newObject[someKey] = "Hello World"

//Nærme sig 3

Object.defineProperty( newObject, “someKey”, {

værdi : "Hej Verden"

skrivbar : sand

enumerable : sand

konfigurerbar : sand

);

[/Code]

Den Singleton Pattern:
Vi ved alle, at det singleton mønster begrænser skabelsen af et objekt til enkelt forekomst. Singleton mønster implementeres ved at oprette en klasse med en fremgangsmåde, som skaber en ny forekomst af objektet kun når ingen andre forekomster findes. I JavaScript enkeltfødte tjene som en delt ressource namespace der isolerer implementering fra det globale navneområde. I JavaScript, singleton gennemføres på følgende måde:

Listing 3: Singleton implementering i JavaScript

[Code]

var mySingleton = (fungere () {

// Eksempel lagrer en henvisning til Singleton

var instans;

funktion init() {

// Singleton

// Private metoder og variabler

funktion privateMethod(){

console.log( “Jeg er privat” );

}

var privat variabel = “Im også privat”;

var privateRandomNumber = Math.random();

return {

// Offentlige metoder og variabler

publicMethod: fungere () {

console.log( “Offentligheden kan se mig!” );

publicProperty: “Jeg er også offentlige”,

getRandomNumber: fungere() {

returnere privateRandomNumber;

}

};

return {

// Få Singleton eksempel hvis en sådan findes

// eller oprette en, hvis den ikke gør det

getInstance: fungere () {

hvis ( !eksempel ) {

eksempel = init();

}

returnere eksempel;

}

};

})();

var myBadSingleton = (fungere () {

// Eksempel lagrer en henvisning til Singleton

var instans;

funktion init() {

// Singleton

var privateRandomNumber = Math.random();

return {

getRandomNumber: fungere() {

returnere privateRandomNumber;

}

};

return {

// Altid oprette en ny Singleton instans

getInstance: fungere () {

eksempel = init();

returnere eksempel;

}

};

})();

// Usage:

var Single1 = mySingleton.getInstance();

var single2 = mySingleton.getInstance();

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

var badSingle1 = myBadSingleton.getInstance();

var badSingle2 = myBadSingleton.getInstance();

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

[/Code]

Som pr GoF, singleton gælder i følgende situationer:

Der bør findes nøjagtigt på forekomst af Object.
Det eneste eksempel bør udvides ved at sub-klassificere det.

The Observer Pattern:
I Observer mønster, objektet (også kaldet som emne) vedligeholder en liste over objekter, afhængigt af det nævnt som observatører. Emnet meddeler automatisk til observatørerne enhver ændring, der er sket, hjælp udsendelsen mekanisme. Gennemførelse af Observer Pattern er vist nedenfor.

Listing 4: Liste over afhængige observatører et emne kan have

[Code]

funktion 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 ){ hvis( index > -1 && index < this.observerList.length ){ return this.observerList[ index ]; }}; ObserverList.prototype.Insert = function( obj, index ){ var pointer = -1; hvis( indeks === 0 ){ this.observerList.unshift( obj ); pointer = index; }ellers hvis( indeks === this.observerList.length ){ this.observerList.push( obj ); pointer = index; } return pointer;}; ObserverList.prototype.IndexOf = function( obj, startindex ){ var i = startIndex, pointer = -1; mens( Jeg < this.observerList.length ){ hvis( this.observerList[Jeg] === obj ){ pointer = i; } i ; } return pointer;}; ObserverList.prototype.RemoveAt = function( index ){ hvis( indeks === 0 ){ this.observerList.shift(); }ellers hvis( indeks === this.observerList.length -1 ){ this.observerList.pop(); }}; // Extend an object with an extensionfunction extend( extension, obj ){ for ( var nøglen i forlængelse ){ obj[key] = udvidelse[key]; }}

[/Code]

Listing 5: Emnet

[Code]

funktion Emne(){ this.observers = new ObserverList();} Subject.prototype.AddObserver = function( observatør ){ this.observers.Add( observatør );}; Subject.prototype.RemoveObserver = function( observatør ){ this.observers.RemoveAt( this.observers.IndexOf( observatør, 0 ) );}; Subject.prototype.Notify = function( sammenhæng ){ var observerCount = this.observers.Count(); for(var i=0; Jeg < observerCount; i ){ this.observers.Get(Jeg).Opdatering( sammenhæng ); }};

[/Code]

I ovenstående eksempel, ved hjælp af Observer komponenter, vi nu definere:

En knap til at tilføje nye observerbare afkrydsningsfelter til siden
En kontrol afkrydsningsfelt der skal fungere som et emne, underrette andre afkrydsningsfelter de skal kontrolleres
En beholder til det nye afkrydsningsfelter bliver tilføjet

HTML-koden er som under

Listing 5: HTML-koden

[Code]

<Knappen id =”addNewObserver”>Tilføj ny Observer afkrydsningsfeltet</knap><input id =”mainCheckbox” type =”afkrydsningsfelt”/><div id =”observersContainer”></div>

[/Code]

Summary: Så i denne artikel, jeg har diskuteret detaljerne om JavaScript design mønstre. Designet mønstre er gældende for alle typer af sprog som objektorienteret sprog java og også scripting sprog som JavaScript. Men der er forskelle, og vi har set det i eksemplerne ovenfor. Så for at afslutte diskussionen, vi kan sige, at design mønstre bruges til at give løsning på almindeligt forekommende problemer. Og husk på, at Design mønstre er