Java Skriba Desegno Skemoj – Lasita-a Esplori

Java Script Design Patterns

Java Skriba Desegno Skemoj

Superrigardo: En ĉi tiu dokumento ni parolos pri la malsamaj desegnaj skemoj uzita en JavaScript. Plejparto de la ellaborantoj scivolas trovi ekstere la ĝustan aŭ la ideala desegna skemo esti uzita en ilia programo. Esti honesta, Estas ne konkreta respondo al ĉi tiu demando aŭ tie ne estas ajna formulae kiu trovus ekstere la ĝustan desegnan skemon esti uzita en donita situacion. Do sub tia cirkonstanco, Ni devus havi firmaon ekspiras de la desegnaj skemoj kaj la specifaj problemoj ili traktas, Ni devus esti en pli bona situacio preni decidon sur kiu desegna skemo esti uzita en kiu kondiĉo.

Enkonduko:
Desegna skemo estas reusable solvo kiu povas esti aplikita al ofta re-okazanta problemojn en softvara desegno kaj evoluado. Desegna skemo ankaŭ povas esti nomita kiel ŝablonoj uzita solvi oftajn problemojn. Desegnaj skemoj havas tri gravajn utilojn:

  • Ili estas pruvita solvojn: Desegna skemo provizas solidan alproksimiĝon en softvara evoluado kaj uzoj pruvita teknikojn.
  • Povas esti facile reused: Desegnaj skemoj estas koncipaj kaj elprovizi de la skatola solvo kiu konvenas al niaj bezonoj. Ĉi tiu ĉefaĵo faras la desegnajn skemojn pli fortika kaj ili povas esti re-uzita en similaj kondiĉoj.
  • Skemoj estas esprimplenaj: Ĉiu desegna skemo prezentas predefined ara strukturo kaj vortenhavo kiu povas esti uzita provizi solvojn al pli grandaj problemoj.

Desegna skemo neniam provizas ĝustan solvon al problemo. Ĝi estas grava noti ke la rolo de skemoj estas provizi solvan planon.

Tipoj de Desegnaj Skemoj
Desegnaj skemoj povas esti disigita en sekvanta tri sub kategorioj:

  • Creational Desegna Skemo : En ĉi tiu kategorio la sekvanta desegna skema falo :
    • Singleton
    • Constructor
    • Fabriko
    • Abstrakta
    • Prototipo
    • Konstruisto
  • Struktura Desegna Skemo : En ĉi tiu kategorio la sekvanta desegna skema falo :
    • Dekoraciisto
    • Fasado
    • Flyweight
    • Adaptilo
    • Prokuro
  • Konduta Desegna Skemo : En ĉi tiu kategorio la sekvanta desegna skema falo :
    • Iterator
    • Vizitanto
    • Mediaciisto
    • Observanto

Skemoj en JavaScript:
La sekvantaj skemoj estas ofte uzita en JavaScript:

  • Constructor Skemo
  • Kapsula Skemo
  • Singleton Skemo
  • Observanta Skemo
  • Mediaciista Skemo
  • Prototipa Skemo
  • Komanda Skemo
  • Fasada Skemo
  • Fabrika Skemo
  • Dekoraciista Skemo
  • Flyweight Skemo

La Constructor Skemo:
Kiel por la klasika objekto oriented programara koncepto, constructor estas speciala tipo de metodo kiu estas uzita krei okazon de objekto en la memoro. En JavaScript objekta kreo estas farita uzanta iun ajn de la sekvanta tri alproksimiĝoj:

Enlistiganta 1: Tri alproksimiĝoj uzita en JavaScript krei Objektojn

[Kodo]

// Alproksimiĝo 1

Var newObject = {};

//Alproksimiĝo 2

Var newObject = Objekto.Kreas(Null);

//Alproksimiĝo 3

Var newObject = nova Objekto();

[/Kodo]

En la tria alproksimiĝo, La Objekto estas kreita uzanta la Objekton constructor kie neniu valoro estas pasita aŭ aro. Estas multoblaj vojoj fiksi valorojn al lastatempe kreita objekton. Ĉi tiuj estas:

Enlistiganta 2: Vojoj fiksi valorojn al constructor

[Kodo]

//Alproksimiĝo 1

NewObject.SomeKey = “Hala Mondo”

//Alproksimiĝo 2

NewObject[SomeKey] = “Hala Mondo”

//Alproksimiĝo 3

Objekto.DefineProperty( NewObject, “SomeKey”, {

Valoro : “Hala Mondo”

Writable : Vera

Enumerable : Vera

Agordebla : Vera

);

[/Kodo]

La Singleton Skemo:
Ni ĉiuj scias ke la singleton skemo restriktas la kreon de objekto al ununura okazo. Singleton skemo estas efektivigita de kreanta klason kun metodo kiu kreas novan okazon de la objekto nur kiam ne aliaj okazoj ekzistas. En JavaScript singletons servas kiel komuna rimedo namespace kiu izolas efektivigon de la tutmonda namespace. En JavaScript, Singleton estas efektivigita en la sekvanta maniero:

Enlistiganta 3: Singleton efektivigo en JavaScript

[Kodo]

Var mySingleton = (Funkcio () {

// Okazo entenas referencon al la Singleton

Var okazo;

Funkcii init() {

// Singleton

// Privataj metodoj kaj variables

Funkcii privateMethod(){

Regilaro.Ŝtipo( “Mi estas privata” );

}

Var privateVariable = “Im ankaŭ privata”;

Var privateRandomNumber = Matematiko.Hazarda();

Reveno {

// Publikaj metodoj kaj variables

PublicMethod: Funkcio () {

Regilaro.Ŝtipo( “La publiko povas vidi min!” );

},

PublicProperty: “Mi estas ankaŭ publika”,

GetRandomNumber: Funkcio() {

Revena privateRandomNumber;

}

};

};

Reveno {

// Akiri la Singleton okazo se unu ekzistas

// Aŭ krei unu se ĝi faras ne

GetInstance: Funkcio () {

Se ( !Okazo ) {

Okazo = init();

}

Revena okazo;

}

};

})();

Var myBadSingleton = (Funkcio () {

// Okazo entenas referencon al la Singleton

Var okazo;

Funkcii init() {

// Singleton

Var privateRandomNumber = Matematiko.Hazarda();

Reveno {

GetRandomNumber: Funkcio() {

Revena privateRandomNumber;

}

};

};

Reveno {

// Ĉiam krei novan Singleton okazo

GetInstance: Funkcio () {

Okazo = init();

Revena okazo;

}

};

})();

// Uzado:

Var single1 = mySingleton.GetInstance();

Var single2 = mySingleton.GetInstance();

Regilaro.Ŝtipo( SingleA.GetRandomNumber() === SingleB.GetRandomNumber() ); // Vera

Var badSingle1 = myBadSingleton.GetInstance();

Var badSingle2 = myBadSingleton.GetInstance();

Regilaro.Ŝtipo( BadSingleA.GetRandomNumber() !== BadSingleB.GetRandomNumber() ); // Vera

[/Kodo]

Kiel por la GoF, Singleton estas aplikebla en la sekvantaj situacioj:

  • Tie devus ekzisti ĝuste sur okazo de la Objekto.
  • La sola okazo devus esti extensible de sub-klasifikanta ĝin.

La Observanta Skemo:
En la Observanta skemo, La objekto (Ankaŭ vokita kiel temo) Daŭrigas liston de objektoj dependanta sur ĝi plu-gvidita al kiel observantoj. La temo aŭtomate sciigas al la observantoj ajna ŝanĝo kiu okazis, Uzanta la elsendan mekanismon. Efektivigo de la Observanta Skemo estas montrita sub.

Enlistiganta 4: Listo de dependaj Observantoj temo povas havi

[Kodo]

Funkcii ObserverList(){ Tio ĉi.ObserverList = [];} ObserverList.Prototipo.Aldonas = funkcion( Obj ){ Reveni tion ĉi.ObserverList.Puŝo( Obj );}; ObserverList.Prototipo.Senhoma = funkcio(){ Tio ĉi.ObserverList = [];}; ObserverList.Prototipo.Kalkula = funkcio(){ Reveni tion ĉi.ObserverList.Longeco;}; ObserverList.Prototipo.Akiras = funkcion( Indekso ){ Se( Indekso > -1 && Indekso < Tio ĉi.ObserverList.Longeco ){ Reveni tion ĉi.ObserverList[ Indekso ]; }}; ObserverList.Prototipo.Enigaĵa = funkcio( Obj, Indekso ){ Var sugesto = -1; Se( Indekso === 0 ){ Tio ĉi.ObserverList.Unshift( Obj ); Sugesta = indekso; }Alia se( Indeksi === tion ĉi.ObserverList.Longeco ){ Tio ĉi.ObserverList.Puŝo( Obj ); Sugesta = indekso; } Revena sugesto;}; ObserverList.Prototipo.IndexOf = funkcio( Obj, StartIndex ){ Var i = startIndex, Sugesto = -1; Dum( I < Tio ĉi.ObserverList.Longeco ){ Se( Tio ĉi.ObserverList[I] === Obj ){ Sugesto = i; } I ; } Revena sugesto;}; ObserverList.Prototipo.RemoveAt = funkcio( Indekso ){ Se( Indekso === 0 ){ Tio ĉi.ObserverList.Movo(); }Alia se( Indeksi === tion ĉi.ObserverList.Longeco -1 ){ Tio ĉi.ObserverList.Popmuziko(); }}; // Etendi objekton kun extensionfunction etendas( Etendaĵo, Obj ){ Por ( Var ŝlosilo en etendaĵo ){ Obj[Kerna] = Etendaĵo[Kerna]; }}

[/Kodo]

Enlistiganta 5: La Temo

[Kodo]

Funkcia Temo(){ Tio ĉi.Observantoj = nova ObserverList();} Temo.Prototipo.AddObserver = funkcio( Observanto ){ Tio ĉi.Observantoj.Aldonas( Observanto );}; Temo.Prototipo.RemoveObserver = funkcio( Observanto ){ Tio ĉi.Observantoj.RemoveAt( Tio ĉi.Observantoj.IndexOf( Observanto, 0 ) );}; Temo.Prototipo.Sciigas = funkcion( Kunteksto ){ Var observerCount = tio ĉi.Observantoj.Kalkulo(); Por(Var i=0; I < ObserverCount; I ){ Tio ĉi.Observantoj.Akiras(I).Ĝisdatigo( Kunteksto ); }};

[/Kodo]

En la supra ekzemplo, Uzanta la Observantajn erojn, Ni nun difinas:

  • Butono por aldonanta novan observebla checkboxes al la paĝo
  • Kontrolo checkbox kiu agos kiel temo, Sciiganta alia checkboxes ili devus esti kontrolita
  • Ujo por la nova checkboxes estado aldonita

La HTMLa kodo estas kiel nesufiĉe

Enlistiganta 5: La HTMLa kodo

[Kodo]

<Butona identigaĵo=”AddNewObserver”>Aldoni Novan Observanton checkbox</Butono><Eniga identigaĵo=”MainCheckbox” Tipo=”Checkbox”/><Div identigaĵo=”ObserversContainer”></Div>

[/Kodo]

Resuma: Do en ĉi tiu artikolo mi diskutis detalojn pri la JavaScript desegnaj skemoj. La desegnaj skemoj estas aplikeblaj al ĉiuj tipoj de lingvoj kiel objekto oriented lingvo java kaj ankaŭ scripting lingvo kiel JavaScript. Sed estas diferencoj kaj ni vidis ĝin en la ekzemploj sur. Tiel konkludi la diskuton ni povas diri tiujn Desegnajn skemojn estas uzita provizi solvon al ofte okazanta problemojn. Kaj bonvolu teni en menso ke Desegnaj skemoj estas

  • Estas Pruvita solvon
  • Povas esti facile uzita
  • Estas esprimplena

Hope vi komprenis la konceptojn kaj ĝi helpos vin efektivigi ĝin en via propra projekto. Feliĉa legado.

Pli interesaj artikoloj sur JS — Vi devas legi

Enkonduko al AngularJS

Fundamento por Apps de Zurb

Kiel fiksi CSS3 nemoveblaĵoj de Java Skribo?

Etikedita sur: ,
============================================= ============================================== Buy best TechAlpine Books on Amazon
============================================== ---------------------------------------------------------------- electrician ct chestnutelectric
error

Enjoy this blog? Please spread the word :)

Follow by Email
LinkedIn
LinkedIn
Share