Modele Java Script Dizajn

Përmbledhje: Në këtë dokument ne do të flasim për modele të ndryshme të projektimit të përdorura në JavaScript. Shumica e zhvilluesve të pyes veten për të gjetur saktë ose modelin ideal të projektimit që do të përdoret në programin e tyre. Për të qenë i sinqertë, nuk ka asnjë përgjigje konkrete për këtë pyetje, ose nuk ka ndonjë formulat e cila do të gjeni se modelin e saktë të projektimit që do të përdoret në një situatë të caktuar. Pra, nën rrethana të tilla, ne duhet të kemi një gulç të fortë nga modelet e projektimit dhe problemet specifike që merren me, ne duhet të jetë në një situatë më të mirë për të marrë një vendim mbi të cilin model të projektimit që do të përdoret në të cilën kusht.

Parathënie:
Një model projektimit është një zgjidhje e reusable të cilat mund të aplikohet për problemet e përbashkëta të ri-ndodhin në hartimin e programeve dhe zhvillimin. model të projektimit mund të cilësohet si templates përdoret për të zgjidhur problemet e përbashkëta. modelet e projektimit kanë tre përfitime të mëdha:

Ata janë provuar zgjidhje: model dizajn të sigurojë një qasje të fortë në zhvillimin e softuerit dhe përdor teknika të provuar.
Mund të ripërdoren lehtë: modelet e projektimit janë konceptuale dhe në mes të të zgjidhjes kuti që i përshtatet nevojave tona. Kjo veçori e bën të modelet e projektimit më të fuqishme dhe mund të ri-përdoren në kushte të ngjashme.
Modelet janë ekspresive: Çdo model dizajn paraqet një strukturë paracaktuara të caktuar dhe fjalorin e cila mund të përdoret për të siguruar zgjidhje për problemet më të mëdha.

model të projektimit nuk ofron një zgjidhje të saktë për një problem. Është e rëndësishme të theksohet se roli i modeleve është që të sigurojë një skemë zgjidhje.

Llojet e modeleve të projektimit
modelet e projektimit mund të ndahen në këto tri kategori nën:

Creational Dizajn Pattern : Në këtë kategori modelet e mëposhtme projektimit të bien :
- letër tek
- Ndërtues
- fabrikë
- abstrakt
- prototip
- ndërtues
Strukturore Dizajn Pattern : Në këtë kategori modelet e mëposhtme projektimit të bien :
- bojaxhi
- fasadë
- Flyweight
- përshtatës
- prokurë
Sjelljes Dizajn Pattern : Në këtë kategori si më poshtë dizajn model vjeshtë :
- iterator
- vizitor
- ndërmjetës
- mbikëqyrës

Modelet në JavaScript:
Modelet e mëposhtme janë përdorur zakonisht në JavaScript:

Konstruktor Pattern
Moduli Pattern
Singleton Pattern
Observer Pattern
ndërmjetësi Pattern
Prototype Pattern
Komanda Pattern
fasada Pattern
Fabrika Pattern
bojaxhi Pattern
Flyweight Pattern

Konstruktor Pattern:
Sipas konceptit klasik orientuar objekt programimit, një konstruktor është një lloj i veçantë i metodës e cila është përdorur për të krijuar një shembull i një objekti në memorie. Në JavaScript krijimi objekti është bërë duke përdorur ndonjë prej tri qasjet e mëposhtme:

Listing 1: Tri qasje përdoren në JavaScript për të krijuar objekte të

[Code]

// afrim 1

ishte newObject = {};

//afrim 2

var newObject = Object.create(zero);

//afrim 3

var newObject = Object ri();

[/Code]

Në qasjen e tretë, Objekti është krijuar duke përdorur Object konstruktor ku nuk ka vlera kaluar ose vendosur. Ka mënyra të shumta për të vendosur vlerat në një objekt të krijuar rishtazi. These are:

Listing 2: Mënyrat për të vendosur vlerat në një konstruktor

[Code]

//afrim 1

newObject.someKey = "Hello World"

//afrim 2

newObject[someKey] = "Hello World"

//afrim 3

Object.defineProperty( newObject, “someKey”, {

vlerë : "Përshendetje Botë"

shkruajtshme : i vërtetë

enumerable : i vërtetë

configurable : i vërtetë

);

[/Code]

Singleton Pattern:
Ne të gjithë e dimë se modeli Singleton kufizon krijimin e një objekti për shembull të vetëm. Singleton model është zbatuar duke krijuar një klasë me një metodë që krijon një shembull të ri të objektit vetëm kur nuk ekzistojnë raste të tjera. Në JavaScript singletons shërbejë si hapësira e përbashkët të burimeve të cilat izolon zbatimin nga hapësira globale. në JavaScript, Singleton është zbatuar në këtë mënyrë:

Listing 3: Zbatimi Singleton në JavaScript

[Code]

ishte mySingleton = (funksion () {

// Shkallës ruan një referencë për Singleton

var shembull;

funksioni init() {

// letër tek

// Metodat private dhe ndryshoret

funksioni privateMethod(){

console.log( “Jam private” );

}

ishte e ndryshueshme private = “Im gjithashtu private”;

var privateRandomNumber = Math.random();

return {

// Metodat publike dhe ndryshoret

publicMethod: funksion () {

console.log( “Publiku mund të shihni mua!” );

publicProperty: “Unë jam gjithashtu publik”,

getRandomNumber: funksion() {

kthehen privateRandomNumber;

}

};

return {

// Merrni shembull Singleton nëse ekziston

// ose krijoni një të tillë në qoftë se ajo nuk ka

getInstance: funksion () {

nëse ( !shembull ) {

shembull = init();

}

kthehen shembull;

}

};

})();

ishte myBadSingleton = (funksion () {

// Shkallës ruan një referencë për Singleton

var shembull;

funksioni init() {

// letër tek

var privateRandomNumber = Math.random();

return {

getRandomNumber: funksion() {

kthehen privateRandomNumber;

}

};

return {

// Gjithmonë të krijuar një Singleton shembull të ri

getInstance: funksion () {

shembull = init();

kthehen shembull;

}

};

})();

// Usage:

ishte single1 = mySingleton.getInstance();

ishte Single2 = mySingleton.getInstance();

console.log( singleA.getRandomNumber() === singleB.getRandomNumber() ); // i vërtetë

var badSingle1 = myBadSingleton.getInstance();

var badSingle2 = myBadSingleton.getInstance();

console.log( badSingleA.getRandomNumber() !== badSingleB.getRandomNumber() ); // i vërtetë

[/Code]

Sipas GOF, Singleton zbatohet në situatat e mëposhtme:

Nuk duhet të ekzistojnë pikërisht në shkallën e Objektit.
shembull i vetëm duhet të jetë e zgjeruar nga nën-classing it.

The Observer Pattern:
Në model Observer, objekt (quajtur edhe si lëndë) mban një listë të objekteve në varësi të referuara si vëzhgues. Subjekti automatikisht njofton të vëzhguesve çdo ndryshim që ka ndodhur, duke përdorur mekanizmin e transmetimit. Zbatimi i Observer modeli është treguar më poshtë.

Listing 4: Lista e Vëzhguesve varur një temë mund të ketë

[Code]

funksioni 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 ){ nëse( indeks > -1 && indeks < this.observerList.length ){ return this.observerList[ indeks ]; }}; ObserverList.prototype.Insert = function( obj, indeks ){ var pointer = -1; nëse( indeksi i === 0 ){ this.observerList.unshift( obj ); pointer = index; }tjetër, nëse( Indeksi i === this.observerList.length ){ this.observerList.push( obj ); pointer = index; } return pointer;}; ObserverList.prototype.IndexOf = function( obj, startIndex ){ var i = startIndex, pointer = -1; derisa( unë < this.observerList.length ){ nëse( this.observerList[unë] === obj ){ pointer = i; } i ; } return pointer;}; ObserverList.prototype.RemoveAt = function( indeks ){ nëse( indeksi i === 0 ){ this.observerList.shift(); }tjetër, nëse( Indeksi i === this.observerList.length -1 ){ this.observerList.pop(); }}; // Extend an object with an extensionfunction extend( extension, obj ){ për ( Çelësi var në zgjerimin ){ obj[key] = extension[key]; }}

[/Code]

Listing 5: subjekti

[Code]

funksioni Subject(){ this.observers = new ObserverList();} Subject.prototype.AddObserver = function( mbikëqyrës ){ this.observers.Add( mbikëqyrës );}; Subject.prototype.RemoveObserver = function( mbikëqyrës ){ this.observers.RemoveAt( this.observers.IndexOf( mbikëqyrës, 0 ) );}; Subject.prototype.Notify = function( kontekst ){ var observerCount = this.observers.Count(); për(var i=0; unë < observerCount; i ){ this.observers.Get(unë).Update( kontekst ); }};

[/Code]

Në shembullin e mësipërm, duke përdorur komponente Vëzhguese, ne tani të përcaktuar:

Një buton për të shtuar kutitë e reja të vëzhgueshme në faqe
Nje kuti opsionale kontrollin e cila do të veprojë si një lëndë, njoftimin kutitë e tjera ato duhet të kontrollohen
Një enë për kutitë e reja duke u shtuar

Kodi HTML është si në

Listing 5: Kodi HTML

[Code]

<button id =”addNewObserver”>Shto checkbox New Observer</buton><input id =”mainCheckbox” type =”checkbox”/><div id =”observersContainer”></div>

[/Code]

Summary: Pra, në këtë artikull unë kemi diskutuar detajet në lidhje me modelet e projektimit JavaScript. Modelet e projektimit janë të zbatueshme për të gjitha llojet e gjuhëve, si e orientuar nga objekti gjuhën java dhe e shkruar gjuhën si JavaScript. Por ka dallime dhe ne kemi parë atë në shembujt më lartë. Pra, për të përfunduar diskutimin mund të themi se modelet e projektimit janë përdorur për të siguruar zgjidhje të zakonisht ndodhin probleme. Dhe ju lutem mbani në mend se modelet Dizajn janë