Java Script Design Patterns

Преглед: В този документ, ние ще говорим за различните модели дизайн, използвани в JavaScript. Повечето от разработчиците се чудя, за да разберете точния или идеалният дизайн моделът да бъде използван в тяхната програма. Да бъда честен, няма конкретен отговор на този въпрос или няма никакви формули, които ще открият правилния дизайн модел, за да се използват в дадена ситуация. Така че при такова обстоятелство, ние трябва да имаме една фирма издихание на моделите на дизайна и специфичните проблеми, те се справят с, трябва да сме в по-добра ситуация, за да вземе решение по които дизайн модел да се използва в което състояние.

Въвеждане:
A модел дизайн е решение за многократна употреба, които могат да бъдат приложени към общите проблеми повторно разпространение в софтуерния дизайн и разработка. Дизайн модел също може да се обозначават като шаблони, използвани за решаване на общи проблеми. Дизайн модели имат три основни предимства:

Те са доказани решения: Дизайн модел осигури солидна подход в разработването на софтуер и използва доказани техники.
Може лесно да се използва повторно: Дизайн модели са концептуални и предоставят от разтвора на кутия, която отговаря на нашите нужди. Тази функция прави моделите на дизайна по-силен и те могат да бъдат повторно използвани в подобни условия.
Моделите са изразителни: Всеки модел дизайн представя предварително определен набор структура и лексика, която може да се използва за предоставяне на решения за по-големи проблеми.

Дизайн модел никога не осигурява точно решение на проблема. Важно е да се отбележи, че ролята на модели е да предостави схема разтвор.

Видове Design Patterns
Дизайн модели могат да бъдат разделени в резултат на три под категории:

Творческия Design Pattern : В тази категория следните модели дизайн попадат :
- сек
- Строител
- Фабрика
- абстрактен
- прототип
- Строител
Структурно Design Pattern : В тази категория следните модели дизайн попадат :
- декоратор
- Фасада
- Flyweight
- адаптер
- пълномощник
Поведенчески Design Pattern : В тази категория следния дизайн модел есента :
- Iterator
- посетител
- посредник
- наблюдател

Модели в JavaScript:
Следните модели обикновено се използват в JavaScript:

Конструктор Pattern
Модул Pattern
Singleton Pattern
Observer Pattern
Посредник Pattern
Prototype Pattern
Command Pattern
Фасада Pattern
Factory Pattern
декоратор Pattern
миниобект

Шарката Конструктор:
Според концепцията на класическата обектно-ориентирано програмиране, конструктор е особен вид метод, който се използва за създаване на инстанция на обект в паметта. В JavaScript създаване обект се извършва с помощта на всеки от следните три подхода:

Listing 1: Три подходи, използвани в JavaScript за създаване на обекти

[Code]

// подход 1

беше newObject = {};

//подход 2

Var newObject = Object.create(нула);

//подход 3

Var newObject = нов обект();

[/Code]

В третия подход, Обектът е създаден с помощта на конструктора на обекта, където няма никаква стойност се предава или набор. Има много начини да се определят стойности за новосъздадена обект. These are:

Listing 2: Начини за определени стойности на конструктор

[Code]

//подход 1

newObject.someKey = "Hello World"

//подход 2

newObject[someKey] = "Hello World"

//подход 3

Object.defineProperty( newObject, “someKey”, {

стойност : "Здравей свят"

писане : вярно

enumerable : вярно

конфигурируеми : вярно

);

[/Code]

Моделът Сингълтън:
Ние всички знаем, че Сингълтън модел ограничава създаването на обект за една инстанция. Сингълтън модел се реализира чрез създаване на клас с метод, който създава нова инстанция на обекта, само когато не са налице други случаи. В JavaScript singletons служат като споделен ресурс именно пространство, което изолира изпълнение от глобалното пространство. В JavaScript, Сингълтън се осъществява по следния начин:

Listing 3: изпълнение Singleton в JavaScript

[Code]

беше mySingleton = (функция () {

// Съд съхранява позоваване на Singleton

Var инстанция;

функция първоначален() {

// сек

// Частните методи и променливи

функция privateMethod(){

console.log( “Аз съм частен” );

}

е частна променлива = “Im също частен”;

Var privateRandomNumber = Math.random();

return {

// Публичните методи и променливи

publicMethod: функция () {

console.log( “Обществеността може да ме види!” );

publicProperty: “Аз също съм публична”,

getRandomNumber: функция() {

върнете privateRandomNumber;

}

};

return {

// Вземете Singleton инстанция, ако има такъв

// или да създадете един, ако това не е така

getInstance: функция () {

ако ( !инстанция ) {

Например = първоначален();

}

върнете инстанция;

}

};

})();

беше myBadSingleton = (функция () {

// Съд съхранява позоваване на Singleton

Var инстанция;

функция първоначален() {

// сек

Var privateRandomNumber = Math.random();

return {

getRandomNumber: функция() {

върнете privateRandomNumber;

}

};

return {

// Винаги се създаде нов Singleton инстанция

getInstance: функция () {

Например = първоначален();

върнете инстанция;

}

};

})();

// Usage:

беше single1 = mySingleton.getInstance();

беше single2 = mySingleton.getInstance();

console.log( singleA.getRandomNumber() === singleB.getRandomNumber() ); // вярно

Var badSingle1 = myBadSingleton.getInstance();

Var badSingle2 = myBadSingleton.getInstance();

console.log( badSingleA.getRandomNumber() !== badSingleB.getRandomNumber() ); // вярно

[/Code]

Съгласно GOF, Сингълтън е приложимо в следните ситуации:

Трябва да съществува точно на инстанция на обекта.
Единствената инстанция трябва да бъде разширяема чрез вторично classing.

Моделът Observer:
В модела на Observer, обекта (наричан също като предмет) поддържа списък на обекти, в зависимост от това, посочено като наблюдатели. Предметът автоматично известява за наблюдателите всяка промяна, която се е случило, се използва механизмът за предаване. Прилагане на модела на наблюдател е показано по-долу.

Listing 4: Списък на зависими Наблюдателите субект може да има

[Code]

функция 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 ){ ако( index > -1 && index < this.observerList.length ){ return this.observerList[ index ]; }}; ObserverList.prototype.Insert = function( OBJ, index ){ var pointer = -1; ако( индекс === 0 ){ this.observerList.unshift( OBJ ); pointer = index; }иначе, ако( индекс === this.observerList.length ){ this.observerList.push( OBJ ); pointer = index; } return pointer;}; ObserverList.prototype.IndexOf = function( OBJ, startIndex ){ var i = startIndex, показалка = -1; докато( аз < this.observerList.length ){ ако( this.observerList[аз] === OBJ ){ pointer = i; } I ; } return pointer;}; ObserverList.prototype.RemoveAt = function( index ){ ако( индекс === 0 ){ this.observerList.shift(); }иначе, ако( индекс === this.observerList.length -1 ){ this.observerList.pop(); }}; // Extend an object with an extensionfunction extend( extension, OBJ ){ за ( Var ключ в продължение ){ OBJ[key] = удължаване[key]; }}

[/Code]

Listing 5: Предметът

[Code]

функция Тема(){ this.observers = new ObserverList();} Subject.prototype.AddObserver = function( наблюдател ){ this.observers.Add( наблюдател );}; Subject.prototype.RemoveObserver = function( наблюдател ){ this.observers.RemoveAt( this.observers.IndexOf( наблюдател, 0 ) );}; Subject.prototype.Notify = function( контекст ){ var observerCount = this.observers.Count(); за(var i=0; аз < observerCount; I ){ this.observers.Get(аз).Актуализация( контекст ); }};

[/Code]

В горния пример, използване на компонентите на наблюдателя, ние сега се дефинира:

Бутон за добавяне на нови наблюдаеми отметки към страницата
А контрол квадратчето, което ще действа като субект, уведомяване други отметки те трябва да бъдат проверени
Контейнер за новите квадратчетата се прибавя

HTML кодът е както при

Listing 5: Кодът на HTML

[Code]

<бутон ID =”addNewObserver”>Нова Наблюдател квадратчето</бутон><вход ID =”mainCheckbox” тип =”квадратчето”/><Разделение ID =”observersContainer”></Разделение>

[/Code]

Summary: Така че в тази статия съм обсъждал подробности около моделите на дизайна на JavaScript. моделите на дизайна са приложими за всички видове езици като обектно ориентиран език Java и също скриптов език като JavaScript. Но има разлики и ние видяхме в примерите по-горе. Така че, за да се заключи, дискусията можем да кажем, че Дизайн модели се използват, за да се осигури решение на често срещаните проблеми. И моля, имайте предвид, че Дизайн модели са