Java Script Design Patterns

Orokorra: Dokumentu honetan egingo du JavaScript erabili ezberdinak diseinu patroiak buruz hitz egin dugu. Garatzaileei gehienak galdetzen out zehatza edo ideal diseinu eredua aurkitzeko beren programa erabiliko dira. Egia esateko, ez hormigoia Galdera honen erantzuna ez da, edo ez daude, formula horrek jakiteko litzateke diseinu zuzena eredua den egoera jakin batean erabili ahal. Beraz, honelako egoera pean, diseinu patroiak oihua irmoa eta arazo zehatzak jorratzen diren eduki behar dugu, egoera hobean zein diseinu eredua zein baldintza erabili behar den erabaki bat hartu behar izan dugu.

Sarrera:
diseinu eredua A berrerabilgarriak irtenbide bat izango du berriro gertatzen arazo komunak aplika daiteke software diseinua eta garapena da. Diseinu eredua halaber deitu daiteke arazo komunak konpontzeko erabilitako txantiloiak. Diseinu patroiak hiru onura handiak izan:

konponbideak frogatu dute: Diseinu eredua software garapenean planteamendu sendo bat ematen eta frogatutako teknikak erabiltzen.
Erraz, berrerabili: Diseinu patroiak kontzeptuala dira eta kutxa irtenbide horrek gure beharretara egokitzen den kanpo ematen. Ezaugarri hau diseinu patroiak sendoagoak dira, eta ahal den antzeko baldintzetan berriro erabili.
Ereduak adierazkorra dira: diseinu patroi bakoitza aurrez definitutako multzo egitura eta lexikoa zein arazo handiagoak irtenbideak emateko erabil daiteke aurkezten.

Diseinu eredua inoiz arazo bat irtenbide zehatza ematen du. Garrantzitsua da jakitea ereduak eginkizuna dela irtenbide eskema bat emateko.

Design Patterns motak
Diseinu patroiak hiru sub kategoriak honako banatu daiteke:

Creational Design Eredua : Kategoria honetan, honako diseinu ereduak erori :
- Singleton
- Builder
- Factory
- Laburpena
- Prototype
- Builder
Structural Design Eredua : Kategoria honetan, honako diseinu ereduak erori :
- dekoratzailea
- Fatxada
- Flyweight
- egokitzaile
- Proxy
Jokabidearen Design Eredua : Kategoria honek jarraian diseinu eredua udazkenean :
- iteratzailea
- Bisitaria
- bitartekari
- Observer

Ikusteko Javascript-ereduak:
Hurrengo ereduak normalean JavaScript erabiltzen dira:

Constructor Pattern
modulua Pattern
Singleton Pattern
Observer Pattern
bitartekari Pattern
Prototype Pattern
Komando-eredua
Fatxada Pattern
Factory Pattern
dekoratzailea Pattern
flyweight Pattern

Constructor eredua:
du klasikoak objektu bideratutako programazio kontzeptu bakoitzeko, eraikitzaile batek objektu baten instantzia bat sortzeko memoria erabiltzen da metodo mota berezi bat da. JavaScript objektu sorkuntza erabiliz egiten da, honako hiru planteamendu edozein:

Listing 1: Objektuak sortzeko JavaScript erabiltzen Hiru planteamendu

[Code]

// Hurbiltze 1

zen newObject = {};

//Hurbiltze 2

var newObject = Object.create(zero);

//Hurbiltze 3

var newObject = Objektu berriak();

[/Code]

Hirugarren hurbildu, Objektu Object eraikitzaile non balio pasatzen ez edo ezarri erabiliz sortu da. Era asko daude balioak ezartzeko sortu berri den objektu bat. These are:

Listing 2: Moduak balioak ezartzeko eraikitzaile bati

[Code]

//Hurbiltze 1

newObject.someKey = "Hello World"

//Hurbiltze 2

newObject[someKey] = "Hello World"

//Hurbiltze 3

Object.defineProperty( newObject, “someKey”, {

balioa : "Kaixo Mundua"

idazgarria : Egia

enumerable : Egia

konfiguragarria : Egia

);

[/Code]

Singleton eredua:
Denok dakigu du singleton patroia duten objektu bat sortzea kasu bakar batera murrizten. Singleton patroia da zein denean bakarrik ez beste instantzia existitzen objektuaren instantzia berria sortzen metodo batekin klase bat sortzeko inplementatutako. JavaScript singletons bat baliabide partekatuak namespace bertan ezartzeko isolatzen du namespace global gisa balioko. JavaScript, singleton honela ezarri:

Listing 3: Singleton JavaScript ezartzeko

[Code]

zen mySingleton = (funtzio () {

// Auzialdiko Singleton erreferentzia bat gordetzen du

var instantzia;

funtzio init() {

// Singleton

// metodoak eta aldagai Pribatua

funtzio privateMethod(){

console.log( “pribatua naiz” );

}

aldagai pribatua zen = “Im halaber pribatua”;

var privateRandomNumber = Math.random();

return {

// metodoak Publikoaren eta aldagai

publicMethod: funtzio () {

console.log( “publikoek me ikusiko!” );

publicProperty: “halaber publiko naiz”,

getRandomNumber: funtzio() {

itzuli privateRandomNumber;

}

};

return {

// Talde Singleton instantzia bat existitzen bada

// edo sortu bat ez bada

getInstance: funtzio () {

bada ( !Esate ) {

Esate = init();

}

Esate itzuli;

}

};

})();

zen myBadSingleton = (funtzio () {

// Auzialdiko Singleton erreferentzia bat gordetzen du

var instantzia;

funtzio init() {

// Singleton

var privateRandomNumber = Math.random();

return {

getRandomNumber: funtzio() {

itzuli privateRandomNumber;

}

};

return {

// Sortu beti Singleton instantzia berria

getInstance: funtzio () {

Esate = init();

Esate itzuli;

}

};

})();

// Usage:

zen single1 = mySingleton.getInstance();

zen single2 = mySingleton.getInstance();

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

var badSingle1 = myBadSingleton.getInstance();

var badSingle2 = myBadSingleton.getInstance();

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

[/Code]

Gof per bezala, singleton ondorengo egoera hauetan aplikatzen da:

Ez dago zehazki egoteaz Object instantzia on.
Esate mihi hedagarria izan behar da azpi-sailkatzeko arabera.

Observer eredua:
Observer patroia ere, objektuaren (subjektu gisa ere deitzen) objektu den arabera zerrenda bat mantentzen aipatzen den behatzaile gisa. gaia automatikoki begirale bidaltzen Gertatu edozein aldaketa, difusio mekanismoa erabiliz. Observer Eredua ezartzea erakusten da azpian.

Listing 4: menpeko Behatzaileen zerrenda subjektu bat izan dezake

[Code]

funtzio 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( indizea ){ bada( indizea > -1 && indizea < this.observerList.length ){ return this.observerList[ indizea ]; }}; ObserverList.prototype.Insert = function( obj, indizea ){ var pointer = -1; bada( indizea === 0 ){ this.observerList.unshift( obj ); pointer = index; }bestela, bada,( indizea === this.observerList.length ){ this.observerList.push( obj ); pointer = index; } return pointer;}; ObserverList.prototype.IndexOf = function( obj, startIndex ){ var i = startIndex, erakuslea = -1; berriz( i < this.observerList.length ){ bada( this.observerList[i] === obj ){ pointer = i; } i ; } return pointer;}; ObserverList.prototype.RemoveAt = function( indizea ){ bada( indizea === 0 ){ this.observerList.shift(); }bestela, bada,( indizea === this.observerList.length -1 ){ this.observerList.pop(); }}; // Extend an object with an extensionfunction extend( extension, obj ){ for ( var gakoa luzapenean ){ obj[key] = luzapena[key]; }}

[/Code]

Listing 5: Gaia

[Code]

funtzio Gaia(){ this.observers = new ObserverList();} Subject.prototype.AddObserver = function( behatzaile ){ this.observers.Add( behatzaile );}; Subject.prototype.RemoveObserver = function( behatzaile ){ this.observers.RemoveAt( this.observers.IndexOf( behatzaile, 0 ) );}; Subject.prototype.Notify = function( testuinguru ){ var observerCount = this.observers.Count(); for(var i=0; i < observerCount; i ){ this.observers.Get(i).Update( testuinguru ); }};

[/Code]

Goiko adibidean, Observer osagaiak erabiliz, orain definitzen dugu:

behagarriak koadrotxo berriak gehituz orrialdera botoia A
kontrola kontrol-lauki horretan egingo ikasgai gisa jarduteko, beste koadrotxo egiaztatu behar dute jakinarazterakoan
kontrol lauki berria edukiontzi bat gehitzeko

HTML kode azpian bezala da

Listing 5: HTML kodea

[Code]

<botoia id =”addNewObserver”>Gehitu New Observer checkbox</botoia><sarrera id =”mainCheckbox” mota =”checkbox”/><div id =”observersContainer”></div>

[/Code]

Summary: Beraz, artikulu honetan xehetasun eztabaidatu dut JavaScript patroiak buruz. diseinu patroiak objektu bideratutako hizkuntza java bezalako hizkuntza mota guztientzako dira eta, era berean, hizkuntza scripting JavaScript bezalako. Baina badira desberdintasunak eta ikusi dugun adibide gainetik. Beraz, eztabaida bukatzeko Design ereduak duten irtenbidea arazo gehen emateko erabiltzen dira esan dezakegu. Eta mesedez, kontuan Design ereduak