Java Script Design Patterns

Oorsig: In hierdie dokument sal ons praat oor die verskillende ontwerp patrone wat in JavaScript. Die meeste van die ontwikkelaars wonder om uit te vind die presiese of die ideale ontwerp patroon te gebruik in hul program. Om eerlik te wees, daar is geen konkrete antwoord op hierdie vraag of daar nie enige formules wat sou uitvind die korrekte ontwerp patroon te gebruik in 'n gegewe situasie. So onder sulke omstandighede, Ons moet 'n ferm asem van die ontwerp van patrone en die spesifieke probleme wat hulle hanteer het, Ons moet in 'n beter situasie tot 'n besluit oor watter ontwerp patroon te gebruik waarin toestand te neem.

Inleiding:
'N ontwerp patroon is 'n herbruikbare oplossing wat tot algemene re voorkom probleme in sagteware ontwerp en ontwikkeling aangewend kan word. Ontwerp patroon kan ook genoem as voorbeelde gebruik word om gemeenskaplike probleme op te los. Ontwerp patrone het drie groot voordele:

Hulle bewys oplossings: Ontwerp patroon bied 'n stewige benadering in die ontwikkeling van sagteware en gebruik beproefde tegnieke.
Kan maklik weer gebruik: Ontwerp patrone is konseptuele en voorsien uit die boks oplossing wat pas by ons behoeftes. Hierdie funksie maak die ontwerp van patrone meer robuuste en hulle kan weer gebruik word in soortgelyke omstandighede.
Patrone is ekspressiewe: Elke ontwerp patroon bied 'n voorafgedefinieerde stel struktuur en woordeskat wat gebruik kan word om oplossings vir groter probleme verskaf.

Ontwerp patroon bied nooit 'n presiese oplossing vir 'n probleem. Dit is belangrik om daarop te let dat die rol van patrone is om 'n oplossing skema verskaf.

Tipes Design Patterns
Ontwerp patrone kan verdeel word in drie sub-kategorieë:

Skeppingsorde ontwerp patroon : In hierdie kategorie val die volgende ontwerp patrone :
- Singleton
- Builder
- Factory
- Abstract
- prototipe
- Bouwer
Strukturele ontwerp patroon : In hierdie kategorie val die volgende ontwerp patrone :
- Decorator
- fasade
- Vlieggewigtitel
- adapter
- proxy
Gedrags- ontwerp patroon : In hierdie kategorie die volgende patroon val ontwerp :
- iterator
- besoeker
- bemiddelaar
- Observer

Patrone in JavaScript:
Die volgende patrone word algemeen gebruik in JavaScript:

constructor Patroon
module Patroon
Singleton Patroon
Observer Patroon
bemiddelaar Patroon
prototipe Patroon
opdrag Patroon
fasade Patroon
Factory Patroon
Decorator Patroon
vlieggewig Patroon

Die Constructor Patroon:
Soos per die klassieke objekgeoriënteerde programmering konsep, 'n konstruktor is 'n spesiale tipe metode wat gebruik word om 'n voorbeeld van 'n voorwerp te skep in die geheue. In JavaScript skepping voorwerp is gedoen met behulp van die volgende drie benaderings:

Listing 1: Drie benaderings wat in JavaScript om voorwerpe te skep

[Code]

// benadering 1

was newObject = {};

//benadering 2

var newObject = Object.create(zero);

//benadering 3

var newObject = nuwe objek();

[/Code]

In die derde benadering, Die doel is geskep met behulp van die Object konstruktor waar geen waarde is geslaag of 'n stel. Daar is verskeie maniere om waardes te stel om 'n nuutgeskepte voorwerp. These are:

Listing 2: Maniere om waardes te stel om 'n konstruktor

[Code]

//benadering 1

newObject.someKey = "Hello World"

//benadering 2

newObject[someKey] = "Hello World"

//benadering 3

Object.defineProperty( newObject, “someKey”, {

waarde : "Hello Wêreld"

skryfbare : ware

enumerable : ware

konfigureerbare : ware

);

[/Code]

Die Singleton Patroon:
Ons weet almal dat die Singleton patroon die skepping van 'n voorwerp om enkele geval beperk. Singleton patroon is geïmplementeer deur die skep van 'n klas met 'n metode wat 'n nuwe geval van die voorwerp net vir geen ander gevalle bestaan skep. In JavaScript single dien as 'n gedeelde hulpbron naamruimte wat implementering isoleer van die globale naamruimte. in JavaScript, Singleton geïmplementeer op die volgende wyse:

Listing 3: Singleton implementering in JavaScript

[Code]

was mySingleton = (funksie () {

// Aanleg slaan 'n verwysing na die Singleton

var byvoorbeeld;

funksie init() {

// Singleton

// Private metodes en veranderlikes

funksie privateMethod(){

console.log( “Ek is privaat” );

}

was private veranderlike = “Im ook private”;

var privateRandomNumber = Math.random();

return {

// Openbare metodes en veranderlikes

publicMethod: funksie () {

console.log( “Die publiek kan my sien!” );

publicProperty: “Ek is ook openbare”,

getRandomNumber: funksie() {

terugkeer privateRandomNumber;

}

};

return {

// Kry die Singleton byvoorbeeld as 'n mens bestaan

// of een skep as dit nie gebeur nie

getInstance: funksie () {

indien ( !byvoorbeeld ) {

Byvoorbeeld = init();

}

terugkeer byvoorbeeld;

}

};

})();

was myBadSingleton = (funksie () {

// Aanleg slaan 'n verwysing na die Singleton

var byvoorbeeld;

funksie init() {

// Singleton

var privateRandomNumber = Math.random();

return {

getRandomNumber: funksie() {

terugkeer privateRandomNumber;

}

};

return {

// Skep altyd 'n nuwe Singleton byvoorbeeld

getInstance: funksie () {

Byvoorbeeld = init();

terugkeer byvoorbeeld;

}

};

})();

// gebruik:

was single1 = mySingleton.getInstance();

was single2 = mySingleton.getInstance();

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

var badSingle1 = myBadSingleton.getInstance();

var badSingle2 = myBadSingleton.getInstance();

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

[/Code]

Soos per die GOF, Singleton is in die volgende situasies van toepassing:

Daar moet presies bestaan op aandrang van die Object.
Die enigste geval moet extensible wees deur die sub-klassifisering dit.

The Observer Patroon:
In die Observer patroon, die voorwerp (ook genoem as vak) hou 'n lys van voorwerpe na gelang van dit waarna verwys word as waarnemers. Die onderwerp kennis outomaties na die waarnemers enige verandering wat gebeur het, met behulp van die uitsending meganisme. Implementering van die Observer patroon is hieronder.

Listing 4: Lys van afhanklike Waarnemers n onderwerp kan hê

[Code]

funksie 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( indeks ){ indien( indeks > -1 && indeks < this.observerList.length ){ return this.observerList[ indeks ]; }}; ObserverList.prototype.Insert = function( obj, indeks ){ var pointer = -1; indien( indeks === 0 ){ this.observerList.unshift( obj ); pointer = index; }anders as( indeks === this.observerList.length ){ this.observerList.push( obj ); pointer = index; } return pointer;}; ObserverList.prototype.IndexOf = function( obj, startIndex ){ var i = startIndex, wyser = -1; terwyl( i < this.observerList.length ){ indien( this.observerList[i] === obj ){ pointer = i; } i ; } return pointer;}; ObserverList.prototype.RemoveAt = function( indeks ){ indien( indeks === 0 ){ this.observerList.shift(); }anders as( indeks === this.observerList.length -1 ){ this.observerList.pop(); }}; // Extend an object with an extensionfunction extend( extension, obj ){ vir ( var sleutel in voorligting ){ obj[key] = uitbreiding[key]; }}

[/Code]

Listing 5: Die onderwerp

[Code]

funksie Onderhewig(){ 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( konteks ){ var observerCount = this.observers.Count(); vir(var i=0; i < observerCount; i ){ this.observers.Get(i).Opdateer( konteks ); }};

[/Code]

In die bogenoemde voorbeeld, met behulp van die Observer komponente, ons nou definieer:

'N knoppie vir die toevoeging van nuwe waarneembaar blok om die bladsy
A beheer boks wat sal optree as 'n vak, kennis te stel ander blok hulle moet nagegaan
'N Houer vir die nuwe blok bygevoeg

Die HTML-kode is as onder

Listing 5: Die HTML-kode

[Code]

<knoppie id =”addNewObserver”>Nuwe Observer boks</knoppie><insette id =”mainCheckbox” type =”boks”/><div id =”observersContainer”></div>

[/Code]

Summary: So in hierdie artikel Ek besonderhede bespreek oor die JavaScript ontwerpspatrone. Die ontwerp van patrone is van toepassing op alle vorme van tale soos objekgeoriënteerde taal Java en ook script taal soos JavaScript. Maar daar is verskille en ons het dit gesien in die voorbeelde hierbo. So om die bespreking te sluit kan ons sê dat Design patrone word gebruik om oplossing vir algemeen voorkomende probleme verskaf. En hou asseblief in gedagte dat Design patrone is