Java Script Design Patterns

Baxış: Bu sənəddə biz JavaScript istifadə olunan müxtəlif dizayn nümunələri danışacaqlar. developers əksəriyyəti proqramı istifadə etmək üçün dəqiq və ya ideal dizayn model tapmaq üçün təəccüb. insafən, Bu suala konkret cavab var və ya bir vəziyyətdə istifadə edilə düzgün dizayn model tapmaq hər hansı düsturlar yoxdur. Belə halda, biz onlar ilə məşğul dizayn nümunələri möhkəm can və xüsusi problem olmalıdır, Biz vəziyyəti istifadə ediləcək olan dizayn model haqqında qərar qəbul etmək üçün daha yaxşı vəziyyətdə olmalıdır.

Giriş:
A dizayn model proqram dizayn və inkişaf ümumi yenidən baş problemlərə tətbiq edilə bilər ki, bir reusable həll edir. şablonları ümumi problemləri həll etmək üçün istifadə kimi Design model də adlandırıla bilər. Design nümunələri üç əsas fayda var:

Onlar həllər sübut edir: Design model proqram inkişaf möhkəm yanaşma təmin edir və sübut üsulları istifadə edir.
asanlıqla yeniden istifadə oluna bilər: Design nümunələri konseptual və bizim ehtiyaclarına uyğun qutusu həlli həyata təmin. Bu xüsusiyyət dizayn nümunələri daha möhkəm edir və onlar oxşar şəraitdə yenidən istifadə edilə bilər.
Patterns ifadəli var: Hər dizayn model böyük problemlərə həll təmin etmək üçün istifadə edilə bilər ki, əvvəlcədən təyin edilmiş set strukturu və lüğət təqdim.

Design model heç bir problemin dəqiq həll edir. Bu nümunələri rolu həll sxemi təmin etməkdir ki, qeyd etmək vacibdir.

Design Nümunələr növləri
Design nümunələri üç sub kateqoriyalara aşağıdakı bölünə bilər:

Yaradıcı Design Pattern : Bu kateqoriya aşağıdakı dizayn nümunələri düşmək :
- Singleton
- Inşaatçı
- zavod
- mücərrəd
- prototip
- inşaatçı
Structural Design Pattern : Bu kateqoriya aşağıdakı dizayn nümunələri düşmək :
- dekorator
- fasad
- Flyweight
- adapter
- Proxy
Davranış Design Pattern : Bu kateqoriya aşağıdakı dizayn model payız :
- iterator
- qonaq
- vasitəçi
- müşahidəçi

JavaScript Patterns:
Aşağıdakı nümunələri çox JavaScript istifadə olunur:

Constructor Pattern
Modul Pattern
Singleton Pattern
Observer Pattern
Mediator Pattern
Prototype Pattern
Command Pattern
Fasad Pattern
Factory Pattern
Decorator Pattern
flyweight Pattern

Constructor Pattern:
klassik obyekt yönümlü proqramlaşdırma anlayışı əsasən, bir konstruktor xatirəsinə bir obyekt bir misal yaratmaq üçün istifadə olunur metodu xüsusi növüdür. JavaScript obyekt yaradılması istifadə edilir aşağıdakı üç yanaşma hər hansı bir:

Listing 1: Obyektləri yaratmaq üçün JavaScript istifadə üç yanaşma

[Code]

// yanaşma 1

idi newObject = {};

//yanaşma 2

var newObject = Object.create(sıfır);

//yanaşma 3

var newObject = Yeni Object();

[/Code]

Üçüncü yanaşma, Object heç bir dəyəri qəbul və ya müəyyən Object konstruktor istifadə yaradılmışdır. yeni yaradılmış obyekt dəyərlər qurmaq üçün bir çox yolu vardır. These are:

Listing 2: bir konstruktor dəyərlər təyin etmək yolları

[Code]

//yanaşma 1

newObject.someKey = "Hello World"

//yanaşma 2

newObject[someKey] = "Hello World"

//yanaşma 3

Object.defineProperty( newObject, “someKey”, {

dəyər : "Hello World"

yazılabilir : doğru

enumerable : doğru

yapılandırılabilir : doğru

);

[/Code]

Singleton Pattern:
Biz bütün tek model bir misal bir obyekt yaradılması məhdudlaşdırır bilirik ki,. Singleton model heç bir digər hallarda mövcud yalnız obyektin yeni instansiya yaradır üsulu ilə bir sinif yaradılması ilə həyata keçirilir. JavaScript singletons qlobal ad olan həyata keçirilməsini təcrid paylaşılan resurs ad kimi xidmət. JavaScript In, Singleton aşağıdakı qaydada həyata keçirilir:

Listing 3: JavaScript Singleton həyata keçirilməsi

[Code]

idi mySingleton = (funksiyası () {

// Anı Singleton üçün istinad mağazalar

var instansiya;

funksiyası init() {

// Singleton

// Şəxsi üsulları və dəyişənlər

funksiyası privateMethod(){

console.log( “Mən özəl am” );

}

Şəxsi dəyişən idi = “Şəxsi də Im”;

var privateRandomNumber = Math.random();

return {

// İctimai üsulları və dəyişənlər

publicMethod: funksiyası () {

console.log( “ictimai məni görə bilərsiniz!” );

publicProperty: “Mən də ictimai am”,

getRandomNumber: funksiyası() {

privateRandomNumber qayıtmaq;

}

};

return {

// bir varsa Singleton instansiya alın

// bu deyil və ya bir yaratmaq

getInstance: funksiyası () {

əgər ( !instansiya ) {

instansiya = init();

}

instansiya qayıtmaq;

}

};

})();

idi myBadSingleton = (funksiyası () {

// Anı Singleton üçün istinad mağazalar

var instansiya;

funksiyası init() {

// Singleton

var privateRandomNumber = Math.random();

return {

getRandomNumber: funksiyası() {

privateRandomNumber qayıtmaq;

}

};

return {

// Həmişə yeni Singleton instansiya yaratmaq

getInstance: funksiyası () {

instansiya = init();

instansiya qayıtmaq;

}

};

})();

// istifadə:

idi single1 = mySingleton.getInstance();

idi Single2 = mySingleton.getInstance();

console.log( singleA.getRandomNumber() === singleB.getRandomNumber() ); // doğru

var badSingle1 = myBadSingleton.getInstance();

var badSingle2 = myBadSingleton.getInstance();

console.log( badSingleA.getRandomNumber() !== badSingleB.getRandomNumber() ); // doğru

[/Code]

Gof görə, Singleton aşağıdakı hallarda tətbiq edilir:

Obyekt instansiya məhz orada mövcud olmalıdır.
yeganə instansiya onu alt-classing ilə genişlənən olmalıdır.

Observer Pattern:
Observer model In, obyekt (də mövzu adlanan) bu asılı olaraq obyektlərin siyahısını saxlayır müşahidəçilər. mövzu avtomatik müşahidəçilərə baş verib hər hansı bir dəyişiklik bildirir, yayım mexanizmi istifadə edərək,. Observer Pattern həyata keçirilməsi aşağıda göstərilir.

Listing 4: bir mövzu ola bilər asılı Müşahidəçilər siyahısı

[Code]

funksiyası 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 ){ əgər( indeks > -1 && indeks < this.observerList.length ){ return this.observerList[ indeks ]; }}; ObserverList.prototype.Insert = function( obj, indeks ){ var pointer = -1; əgər( index === 0 ){ this.observerList.unshift( obj ); pointer = index; }başqa, əgər( index === this.observerList.length ){ this.observerList.push( obj ); pointer = index; } return pointer;}; ObserverList.prototype.IndexOf = function( obj, startIndex ){ var i = startIndex, pointer = -1; isə( mən < this.observerList.length ){ əgər( this.observerList[mən] === obj ){ pointer = i; } i ; } return pointer;}; ObserverList.prototype.RemoveAt = function( indeks ){ əgər( index === 0 ){ this.observerList.shift(); }başqa, əgər( index === this.observerList.length -1 ){ this.observerList.pop(); }}; // Extend an object with an extensionfunction extend( extension, obj ){ uğrunda ( uzadılması var əsas ){ obj[açar] = uzadılması[açar]; }}

[/Code]

Listing 5: Mövzu

[Code]

funksiyası Mövzu(){ this.observers = new ObserverList();} Subject.prototype.AddObserver = function( müşahidəçi ){ this.observers.Add( müşahidəçi );}; Subject.prototype.RemoveObserver = function( müşahidəçi ){ this.observers.RemoveAt( this.observers.IndexOf( müşahidəçi, 0 ) );}; Subject.prototype.Notify = function( Kontekst ){ var observerCount = this.observers.Count(); uğrunda(var i=0; mən < observerCount; i ){ this.observers.Get(mən).Update( Kontekst ); }};

[/Code]

Yuxarıdakı misalda, Observer komponentlər istifadə, biz indi müəyyən:

səhifə yeni müşahidə onay əlavə etmək üçün A 'düyməsinə
subyekti kimi çıxış edəcək A nəzarət onay, Onlar yoxlanılır olmalıdır digər onay bildiriş
Yeni onay üçün konteyner əlavə olunur

HTML code altında kimi

Listing 5: HTML code

[Code]

<düyməsini id =”addNewObserver”>New Observer onay kutusunu əlavə et</düymə><input id =”mainCheckbox” type =”onay”/><div id =”observersContainer”></div>

[/Code]

Summary: Belə ki, bu yazıda mən JavaScript dizayn nümunələri haqqında ətraflı müzakirə etdik. dizayn nümunələri obyekt yönümlü dil Java kimi Dil hər cür tətbiq və həmçinin JavaScript kimi dil scripting. Amma fərqlər var və biz yuxarıda nümunələri gördük. Beləliklə, biz Design nümunələri çox problemləri baş verən həll təmin etmək üçün istifadə olunur ki, demək olar müzakirə bağlamaq. And Design nümunələri var ki, unutmayın