Java Script Design Patterns

Ülevaade: Selles dokumendis räägime erinevatest disaini mustrite kasutatud JavaScript. Enamik arendajaid ei tea, et selgitada välja täpne või ideaalne disain muster, mida tuleb kasutada oma programmi. Ausalt öeldes, puudub konkreetne vastus sellele küsimusele või seal ei ole valemid, mis õigete disain muster, mida kasutatakse antud olukorras. Nii sellistel asjaolu, meil peaks olema kindel ohe disaini mustrite ja konkreetseid probleeme, millega nad tegelevad, meil peaks olema paremas olukorras teha otsus, mille disain muster, mida kasutatakse mis seisukorras.

Sissejuhatus:
Disain muster on korduvkasutatavad lahendus, mida saab rakendada ühist kordumist probleeme tarkvara projekteerimine ja arendus. Disain muster võib leiduda ka malle kasutada, et lahendada ühiseid probleeme. Design mustrid on kolm suurt kasu:

Nad on tõestanud lahendusi: Disain muster annab tugeva lähenemist tarkvara arendamise ja kasutab tõestatud tehnikate.
Võib kergesti taaskasutada: Design mustrid on kontseptuaalne ja pakkuda karbist välja lahenduse, mis sobib meie vajadustele. See funktsioon teeb disaini mustrite tugevam ja neid saab uuesti kasutada sarnastes tingimustes.
Mustrid on väljendusrikas: Iga disain muster tutvustab eelnevalt määratud struktuuri ja sõnavara, mida saab kasutada, et pakkuda lahendusi suuremad probleemid.

Disain muster kunagi annab täpse lahendus probleemile. On oluline märkida, et rolli patterns on pakkuda välja lahendus skeemi.

Tüübid Design Patterns
Design mustreid saab jagada järgmistesse kolme alaliigid:

Creational Design Pattern : Selles kategoorias järgmistes disaini mustrite langeda :
- Singleton
- Ehitaja
- tehas
- Abstraktne
- prototüüp
- ehitaja
Struktuurifondide Design Pattern : Selles kategoorias järgmistes disaini mustrite langeda :
- dekoraator
- fassaad
- Flyweight
- adapter
- volikiri
Käitumist Design Pattern : Selles kategoorias järgmistes disain muster sügisel :
- Iterator
- külaline
- vahendaja
- vaatleja

Mustrid JavaScript:
Järgmised mustrid on levinud JavaScript:

Ehitaja Muster
Moodul Muster
Singleton Pattern
vaatleja Pattern
Vahendaja Muster
Prototype Muster
Command Muster
Fassaad Muster
Factory Pattern
Maalritööd Muster
Kärpässarja Muster

Ehitaja Muster:
Nagu iga klassikalise objektorienteeritud programmeerimise kontseptsiooni, ehitaja on eritüüpi meetod, mida kasutatakse luua näiteks objekti mälu. JavaScript objekti loomine saab teha kasutades mis tahes järgmise kolme lähenemist:

Listing 1: Kolm kasutatavad lähenemisviisid JavaScript luua objekte

[Code]

// lähenemine 1

oli newObject = {};

//lähenemine 2

var newObject = Object.create(null);

//lähenemine 3

var newObject = new Object();

[/Code]

Kolmandas lähenemist, objekt on loodud, kasutades Object ehitaja kus väärtust ei läbinud või määrata. Seal on mitu võimalust määrata väärtused uue objekti. These are:

Listing 2: Võimalusi seatud väärtused ehitaja

[Code]

//lähenemine 1

newObject.someKey = "Hello World"

//lähenemine 2

newObject[someKey] = "Hello World"

//lähenemine 3

Object.defineProperty( newObject, “someKey”, {

väärtus : "Tere, Maailm"

kirjutatav : tõsi

enumerable : tõsi

seadistatav : tõsi

);

[/Code]

Singleton Pattern:
Me kõik teame, et üksikuid muster piirab loomine objekti üksikjuhtum. Singleton muster on rakendatud luues klassi meetod, mis loob uue Näiteks objekti ainult siis, kui ükski teine juhtudel olemas. JavaScript singletons olla jagatud ressurss nimeruumi mis isoleerib rakendamise ülemaailmsest nimeruumi. JavaScript, Singleton rakendatakse järgmisel viisil:

Listing 3: Singleton rakendamine JavaScript

[Code]

oli mySingleton = (funktsioon () {

// Astme salvestab viide Singleton

var näiteks;

funktsiooni init() {

// Singleton

// Eraldi meetodite ja muutujate

funktsiooni privateMethod(){

console.log( “Olen era-” );

}

oli era muutuja = “Im ka era-”;

var privateRandomNumber = math.random();

return {

// Avalik meetodite ja muutujate

publicMethod: funktsioon () {

console.log( “Avalik näete mind!” );

publicProperty: “Ma olen ka avaliku”,

getRandomNumber: funktsioon() {

tagasi privateRandomNumber;

}

};

return {

// Saada Singleton näiteks kui see on olemas

// või ühe, kui see ei ole

getInstance: funktsioon () {

kui ( !näiteks ) {

Näiteks = init();

}

tagasi näiteks;

}

};

})();

oli myBadSingleton = (funktsioon () {

// Astme salvestab viide Singleton

var näiteks;

funktsiooni init() {

// Singleton

var privateRandomNumber = math.random();

return {

getRandomNumber: funktsioon() {

tagasi privateRandomNumber;

}

};

return {

// Alati luua uus Singleton näiteks

getInstance: funktsioon () {

Näiteks = init();

tagasi näiteks;

}

};

})();

// kasutus:

oli single1 = mySingleton.getInstance();

oli single2 = mySingleton.getInstance();

console.log( singleA.getRandomNumber() === singleB.getRandomNumber() ); // tõsi

var badSingle1 = myBadSingleton.getInstance();

var badSingle2 = myBadSingleton.getInstance();

console.log( badSingleA.getRandomNumber() !== badSingleB.getRandomNumber() ); // tõsi

[/Code]

Nagu iga GoF, Singleton kohaldatakse järgmistel juhtudel:

Seal peaks olemas täpselt astme objekt.
Ainus Näiteks peaks olema võimalik laiendada, sub-Kvalifitseerides see.

The Observer Muster:
Observer muster, objekti (nimetatakse ka teema) säilitab objektide nimekirja sõltuvalt siis nimetatakse vaatlejad. Automaatselt objekti teatab vaatlejad iga muudatust, mis on juhtunud, kasutades saade mehhanism. Rakendamine Observer Muster on näidatud allpool.

Listing 4: Loetelu sõltuv Vaatlejad teema võib olla

[Code]

funktsiooni 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 ){ kui( index > -1 && index < this.observerList.length ){ return this.observerList[ index ]; }}; ObserverList.prototype.Insert = function( obj, index ){ var pointer = -1; kui( indeks === 0 ){ this.observerList.unshift( obj ); pointer = index; }else if( indeks === this.observerList.length ){ this.observerList.push( obj ); pointer = index; } return pointer;}; ObserverList.prototype.IndexOf = function( obj, startIndex ){ var i = startIndex, pointer = -1; kuigi( mina < this.observerList.length ){ kui( this.observerList[mina] === obj ){ pointer = i; } i ; } return pointer;}; ObserverList.prototype.RemoveAt = function( index ){ kui( indeks === 0 ){ this.observerList.shift(); }else if( indeks === this.observerList.length -1 ){ this.observerList.pop(); }}; // Extend an object with an extensionfunction extend( extension, obj ){ eest ( var võtme pikendus ){ obj[key] = pikendamine[key]; }}

[/Code]

Listing 5: Teema

[Code]

funktsiooni Teema(){ this.observers = new ObserverList();} Subject.prototype.AddObserver = function( vaatleja ){ this.observers.Add( vaatleja );}; Subject.prototype.RemoveObserver = function( vaatleja ){ this.observers.RemoveAt( this.observers.IndexOf( vaatleja, 0 ) );}; Subject.prototype.Notify = function( kontekst ){ var observerCount = this.observers.Count(); eest(var i=0; mina < observerCount; i ){ this.observers.Get(mina).ajakohastama( kontekst ); }};

[/Code]

Eespool toodud näites, kasutades Observer komponendid, nüüd määratleda:

Nupp lisamiseks uusi jälgitav ruudud lehele
Kontroll ruut, kes teeb subjektina, teatades muu ruudud nad tuleks kontrollida
Mahuti uue ruudud lisanduvad

HTML kood on all

Listing 5: HTML koodi

[Code]

<nuppu id =”addNewObserver”>Lisa uus Observer ruut</nupp><input id =”mainCheckbox” type =”kast”/><div id =”observersContainer”></div>

[/Code]

Summary: Nii et selles artiklis ma arutanud andmeid JavaScript disaini mustrite. Disain mustrid on rakendatav kõikide keelte nagu objektorienteeritud keel java ja ka Skriptikeelt nagu JavaScript. Kuid on ka erinevusi ja me oleme näinud seda näited eespool. Nii sõlmida arutelu võib öelda, et disain mustreid, mida kasutatakse, et anda lahendus sagedamini esinevaid probleeme. Ja pidage meeles, et Design mustrid on