Java Script Design Patterns

Přehled: V tomto dokumentu se budeme hovořit o různých návrhových vzorů používaných v JavaScriptu. Většina developerů zajímalo zjistit přesné nebo ideální návrhový vzor má být použit ve svém programu. Být upřímný, neexistuje žádný konkrétní odpověď na tuto otázku, nebo tam nejsou žádné vzorce, které by zjistit, zda je správný návrhový vzor které mají být použity v dané situaci. Takže v rámci takového okolností, bychom měli mít pevný vydechnutí návrhových vzorů a specifické problémy se zabývají, měli bychom být v lepší situaci, aby přijaly rozhodnutí, na které návrhový vzor, který bude použit v němž podmínka.

Úvod:
Design vzor je opakovaně použitelná řešení, které lze použít k běžným opakovaně se vyskytující problémy v designu a vývoj software. Návrhový vzor může být také nazývaný jako šablony slouží k řešení společných problémů. Návrhové vzory mají tři hlavní výhody:

Jsou osvědčená řešení: Návrhový vzor poskytují solidní přístup při vývoji softwaru a využívá osvědčených technik.
Lze snadno znovu použít: Návrhové vzory jsou koncepční a poskytují z roztoku box, který bude vyhovovat našim potřebám. Tato vlastnost činí návrhové vzory robustnější a mohou být znovu použity v obdobných podmínkách.
Vzory jsou expresivní: Každá výprava vzor představuje předdefinovanou pevnou strukturu a slovní zásobu, která může být použita pro poskytnutí řešení větších problémů.

Konstrukce vzor nikdy poskytuje přesné řešení problému. Je důležité poznamenat, že role vzorů je poskytnout systém řešení.

Druhy návrhových vzorů
Návrhové vzory lze rozdělit do následujících tří dílčích kategorií:

Tvořivý návrhový vzor : V této kategorii jsou tyto vzory designu spadají :
- jedináček
- Stavitel
- Továrna
- Abstraktní
- Prototyp
- Stavitel
Pattern strukturální design : V této kategorii jsou tyto vzory designu spadají :
- tapetář
- Fasáda
- Muší váha
- Adaptér
- zastupování
Behaviorální návrhový vzor : V této kategorii následující návrhový vzor podzim :
- iterátor
- Návštěvník
- Prostředník
- Pozorovatel

Vzory v JavaScriptu:
Následující způsoby jsou běžně používané v JavaScriptu:

konstruktér Pattern
modul Pattern
Singleton
Observer
Mediator Pattern
prototyp Pattern
příkaz Pattern
fasádní vzor
Factory Pattern
dekorátor
flyweight

Konstruktor Pattern:
Jak na objektově orientovaného programování pojetí klasického, konstruktor je speciální typ metody, která se používá k vytvoření instance objektu v paměti. V JavaScriptu je vytvoření objektu provádí pomocí některého z následujících tří přístupů:

Listing 1: Tři přístupy používané v JavaScriptu k vytvoření objektů

[Code]

// Přístup 1

Byl newObject = {};

//Přístup 2

var newObject = Object.create(nula);

//Přístup 3

var newObject = new Object();

[/Code]

Ve třetím přístupu, Objekt je vytvořena pomocí konstruktoru objektu, kde se žádná hodnota předaná nebo sadu. Existuje několik způsobů, jak nastavit hodnoty na nově vytvořený objekt. These are:

Listing 2: Způsobů, jak nastavit hodnoty konstruktoru

[Code]

//Přístup 1

newObject.someKey = "Hello World"

//Přístup 2

newObject[someKey] = "Hello World"

//Přístup 3

Object.defineProperty( newObject, “someKey”, {

hodnota : "Ahoj světe"

zapisovatelný : skutečný

enumerable : skutečný

konfigurovatelný : skutečný

);

[/Code]

Singleton:
Všichni víme, že Singleton omezuje tvorbu objektu do jedné instance. Singleton je realizován vytvořením třídy s metodou, která vytvoří nové instance objektu pouze tehdy, když neexistují žádné jiné instance. V JavaScriptu jednočetných sloužit jako společný zdroj jmenného prostoru, který jej chrání implementaci z globálního jmenného prostoru. v JavaScriptu, Singleton se provádí následujícím způsobem:

Listing 3: implementace Singleton v JavaScriptu

[Code]

Byl mySingleton = (funkce () {

// Instance ukládá odkaz na Singleton

var instance;

funkce init() {

// jedináček

// Soukromé metody a proměnné

funkce privateMethod(){

console.log( “Jsem soukromý” );

}

Byl soukromou proměnná = “Im také soukromé”;

var privateRandomNumber = Math.random();

return {

// Veřejné metody a proměnné

publicMethod: funkce () {

console.log( “Veřejnost mě vidíte!” );

publicProperty: “Jsem také veřejnost”,

getRandomNumber: funkce() {

vrátit privateRandomNumber;

}

};

return {

// Získat instance Singleton pokud existuje

// nebo vytvořit jeden, pokud se tak nestane

getInstance: funkce () {

jestliže ( !instance ) {

instance = init();

}

vrátí instanci;

}

};

})();

Byl myBadSingleton = (funkce () {

// Instance ukládá odkaz na Singleton

var instance;

funkce init() {

// jedináček

var privateRandomNumber = Math.random();

return {

getRandomNumber: funkce() {

vrátit privateRandomNumber;

}

};

return {

// Vždy vytvořit novou instanci Singleton

getInstance: funkce () {

instance = init();

vrátí instanci;

}

};

})();

// Používání:

Byl single1 = mySingleton.getInstance();

Byl single2 = mySingleton.getInstance();

console.log( singleA.getRandomNumber() === singleB.getRandomNumber() ); // skutečný

var badSingle1 = myBadSingleton.getInstance();

var badSingle2 = myBadSingleton.getInstance();

console.log( badSingleA.getRandomNumber() !== badSingleB.getRandomNumber() ); // skutečný

[/Code]

Jak na GoF, Singleton je použitelná v těchto situacích:

Tam by měl existovat přesně na instanci objektu.
Jediným instance by měl být rozšiřitelný pomocí sub-classing ji.

The Observer Pattern:
V Observer, objekt (také nazýván jako předmět) udržuje seznam objektů v závislosti na tom označován jako pozorovatelé. Předmětem automaticky upozorní na pozorovatele jakoukoli změnu, co se stalo, pomocí mechanismu vysílání. Provádění Observer je uvedeno níže.

Listing 4: Seznam závislých pozorovatelů předmět může mít

[Code]

funkce 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 ){ jestliže( index > -1 && index < this.observerList.length ){ return this.observerList[ index ]; }}; ObserverList.prototype.Insert = function( obj, index ){ var pointer = -1; jestliže( index === 0 ){ this.observerList.unshift( obj ); pointer = index; }else if( index === this.observerList.length ){ this.observerList.push( obj ); pointer = index; } return pointer;}; ObserverList.prototype.IndexOf = function( obj, startIndex ){ var i = startIndex, ukazatel = -1; zatímco( já < this.observerList.length ){ jestliže( this.observerList[já] === obj ){ pointer = i; } i ; } return pointer;}; ObserverList.prototype.RemoveAt = function( index ){ jestliže( index === 0 ){ this.observerList.shift(); }else if( index === this.observerList.length -1 ){ this.observerList.pop(); }}; // Extend an object with an extensionfunction extend( extension, obj ){ pro ( var klíč v prodloužení ){ obj[key] = prodloužení[key]; }}

[/Code]

Listing 5: Předmět

[Code]

funkce Subject(){ this.observers = new ObserverList();} Subject.prototype.AddObserver = function( pozorovatel ){ this.observers.Add( pozorovatel );}; Subject.prototype.RemoveObserver = function( pozorovatel ){ this.observers.RemoveAt( this.observers.IndexOf( pozorovatel, 0 ) );}; Subject.prototype.Notify = function( kontext ){ var observerCount = this.observers.Count(); pro(var i=0; já < observerCount; i ){ this.observers.Get(já).Aktualizovat( kontext ); }};

[/Code]

Ve výše uvedeném příkladu, použitím složek Observer, jsme nyní definovat:

Tlačítko pro přidávání nových pozorovatelné políčka na stránku
Kontrolní políčko, které budou působit jako subjekt, oznamující další políčka měly by být porovnávány
Kontejner pro nové zaškrtávací políčka přidává

HTML kód je pod

Listing 5: HTML kód

[Code]

<Tlačítko id =”addNewObserver”>Přidejte políčko New Observer</tlačítko><input id =”mainCheckbox” type =”checkbox”/><div id =”observersContainer”></div>

[/Code]

Summary: Takže v tomto článku jsem diskutovali podrobnosti o návrhových vzorů JavaScriptu. V návrhové vzory jsou použitelné pro všechny typy jazyků, jako je objektově orientovaného jazyka Java, a také skriptovací jazyk jako JavaScriptu. Ale existují rozdíly a my jsme viděli jej do výše uvedených příkladech. Takže uzavřít diskusi můžeme říci, že Návrhové vzory jsou používány poskytovat řešení často se vyskytujících problémů. A mějte na paměti, že Návrhové vzory jsou