Najlepších 10 návrhových vzorov JavaScriptu by mal vedieť každý vývojár

Blog

Najlepších 10 návrhových vzorov JavaScriptu by mal vedieť každý vývojár

1. Konštrukčný vzor

V klasickom objektovo orientované programovacie jazyky , konštruktor je špeciálna metóda používaná na inicializáciu novovytvoreného objektu, akonáhle mu je alokovaná pamäť. V JavaScripte je takmer všetko objektom, najčastejšie nás zaujímajú konštruktory objektov. Pretože objektové konštruktéry sa používajú na vytváranie špecifických typov objektov, napríklad na prípravu objektu na použitie, ako aj na prijímanie argumentov, môže konštruktér použiť na nastavenie hodnôt vlastností a metód člena pri prvom vytváraní objektu.








Ako sme videli, vieme JavaScript nepodporuje koncept tried, takže vo vnútri konštruktora, kľúčové slovo, ktoré odkazuje na nový objekt, ktorý sa vytvára, pri opätovnom vytváraní objektu, môže základný konštruktor vyzerať nasledovne:



function Car(model, year, miles) { this.model = model; this.year = year; this.miles = miles; } 

// Usage:
var bmw = new Car(‘M4’, ‘2019’, ‘1000’);



2. Modul Pattern

Moduly sú neoddeliteľnou súčasťou architektúry všetkých robustných aplikácií a spravidla pomáhajú udržiavať čisto oddelené a organizované jednotky kódu pre projekt.






kde kúpiť waves crypto

Existuje niekoľko možností implementácie modulov. Tie obsahujú:

  • Objektový doslovný zápis
  • Modul Pattern
  • Moduly AMD
  • Modul CommonJS
  • ECMAScript Moduly Harmony

Objektové literály:

var newObject = {  
variableKey: variableValue,
functionKey: function() {
//…
}
};

Vzory modulov:

Začnime sa zaoberať implementáciou vzoru modulu vytvorením modulu, ktorý je samostatný.

var testModule = (function() {  
var counter = 0;
return {
incrementCounter: function() {
return ++counter;
},
resetCounter: function() {
counter = 0;
}
};
})();

// Usage:
testModule.incrementCounter();
testModule.resetCounter();

3. Vzor modulu odhaľovania

Jedna vec, ktorú môže odhaľovací modul urobiť, je vyhnúť sa opakovaniu názvu hlavného objektu, keď chceme volať jednu verejnú metódu z druhej alebo pristupovať k verejným premenným.

var myRevealingModule = (function() {  
var privateVariable = ‘not okay’,
publicVariable = ‘okay’;
function privateFun() {
return privateVariable;
}

function publicSetName(strName) {
privateVariable = strName;
}

function publicGetName() {
privateFun();
}

return {
setName: publicSetName,
message: publicVariable,
getName: publicGetName
};
})();

//Usage:

myRevealingModule.setName(‘Marvin King’);

4. Singletonový vzor

Vzor Singleton je teda známy, pretože obmedzuje vytváranie inštancií triedy na jeden objekt. Singletony sa líšia od statických tried, pretože ich inicializáciu môžeme oddialiť. spravidla preto, že vyžadujú určité informácie, ktoré nemusia byť počas inicializačného času k dispozícii. V prípade kódu, ktorý nevie o predchádzajúcom odkaze na ne, neposkytujú metódu na jednoduché získanie. Pozrime sa na štruktúru singletonu:

var singletonPattern = (function() {  
var instance;
function init() {
// Singleton
function privateMethod() {
console.log(‘privateMethod’);
}
var privateVariable = ‘this is private variable’;
var privateRandomNumber = Math.random();
return {
publicMethod: function() {
console.log(‘publicMethod’);
},
publicProperty: ‘this is public property’,
getRandomNumber: function() {
return privateRandomNumber;
}
};
}

return {
// Get the singleton instance if one exists
// or create if it doesn’t
getInstance: function() {
if (!instance) {
instance = init();
}
return instance;
}
};
})();

// Usage:
var single = singletonPattern.getInstance();

5. Vzor pozorovateľa

Pozorovateľ je návrhový vzor, ​​v ktorom objekt udržiava zoznam objektov v závislosti od svojich pozorovateľov a automaticky ich upozorňuje na akékoľvek zmeny stavu.

  • Predmet
  • Vedie zoznam pozorovateľov, zariadení, ktoré pridávajú alebo odoberajú pozorovateľov
  • Pozorovateľ
  • Poskytuje aktualizačné rozhranie pre objekt, ktorý musí byť upozornený na zmenu stavu subjektu
  • Predmet betónu
  • Vysiela oznámenia pozorovateľom o zmenách stavu, ukladá stav ConcreteObservers
  • ConcreteObserver
  • Ukladá odkaz na ConcreteSubject, implementuje aktualizačné rozhranie pre pozorovateľa, aby sa zaistil súlad stavu s predmetmi
function 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) {
if (index > -1 && index return this.observerList[index];
}
};

//…

Keď subjekt potrebuje upozorniť pozorovateľov na niečo zaujímavé, čo sa deje, odošle upozornenie pozorovateľom (vrátane konkrétnych údajov týkajúcich sa témy oznámenia)

Keď si už neželáme, aby bol konkrétny pozorovateľ upozornený na zmeny subjektom, u ktorého je zaregistrovaný, subjekt ho môže odstrániť zo zoznamu pozorovateľov. V budúcnosti budem hovoriť viac o funkcii, ako môže byť pozorovateľ široko používaný v JavaScripte.

6. Vzorec mediátora

Ak sa zdá, že systém má príliš veľa priamych vzťahov medzi komponentmi. môže byť čas mať namiesto toho centrálny bod ovládania, cez ktorý komponenty komunikujú. Vzorec mediátora podporuje voľné spojenie tým, že zaisťuje, aby sa namiesto komponentov navzájom výslovne odkazovali.

var mediator = (function() {  
var topics = {};
var subscribe = function(topic, fn) {
if (!topics[topic]) {
topics[topic] = [];
}
topics[topic].push({ context: this, callback: fn });
return this;
};

// publish/broadcast an event to the rest of the application
var publish = function(topic) {
var args;
if (!topics[topic]) {
return false;
}
args = Array.prototype.slice.call(arguments, 1);
for (var i = 0, l = topics[topic].length; i var subscription = topics[topic][i];
subscription.callback.apply(subscription.content, args);
}
return this;
};
return {
publish: publish,
subscribe: subscribe,
installTo: function(obj) {
obj.subscribe = subscribe;
obj.publish = publish;
}
};
})();

7. Prototypový vzor

Jednou z výhod používania vzoru prototypu je, že pracujeme s prednosťami prototypu, ktoré JavaScript musí ponúkať skôr natívne, než sa pokúšať napodobňovať funkcie iných jazykov. Pozrime sa na príklad vzoru.

var myCar = {  
name: ‘bmw’,
drive: function() {
console.log(‘I am driving!’);
},
panic: function() {
console.log(‘wait, how do you stop this thing?’);
}
};

//Usages:

mesačný token ako kúpiť

var yourCar = Object.create(myCar);

console.log( yourCar.name ); //‘bmw’

8. Továrenský vzor

Factory môže poskytnúť generické rozhranie na vytváranie objektov, kde môžeme špecifikovať typ továrenského objektu, ktorý chceme vytvoriť. pozri diagram nižšie.

function Car(options)  
this.doors = options.doors

9. Mixinový vzor

Mixiny sú triedy, ktoré ponúkajú funkcie, ktoré môžu byť ľahko zdedené podtriedou alebo skupinou podtried za účelom opätovného použitia funkcie.

var Person = function(firstName, lastName) {  
this.firstName = firstName;
this.lastName = lastName;
this.gender = ‘male’;
};

var clark = new Person(‘Clark’, ‘kent’);

var Superhero = function(firstName, lastName, powers) {
Person.call(this.firstName, this.lastName);
this.powers = powers;
};

SuperHero.prototype = Object.create(Person.prototype);
var superman = new Superhero(‘Clark’, ‘Kent’, [‘flight’, ‘heat-vision’]);

console.log(superman); //output personal attributes as well as power

V tomto prípade je superhrdina schopný prepísať všetky zdedené hodnoty hodnotami špecifickými pre jeho objekt.

10. Dekoratívny vzor

Dekoratéry sú štruktúrnym vzorom, ktorého cieľom je podporiť opätovné použitie kódu. Podobne ako Mixíny ich možno považovať za ďalšiu životaschopnú alternatívu k podtriedam objektov. Dekoratéri klasicky ponúkali schopnosť dynamicky pridať správanie k existujúcim triedam v systéme. Myšlienka bola, že samotná výzdoba nebola zásadná pre základnú funkčnosť triedy. Pozrime sa, ako dekorátor funguje v JavaScripte

function MacBook() {  
this.cost = function() {
return 997;
};
this.screenSize = function() {
return 11.6;
};
}

// Decorator 1

function Memory(macbook) {
var v = macbook.cost();
macbook.cost = function() {
return v + 75;
};
}

// Decorator 2

function Engraving(macbook) {
var v = macbook.cost();
macbook.cost = function() {
return v + 200;
};
}

// Decorator 3

function Insurance(macbook) {
var v = macbook.cost();
macbook.cost = function() {
return v + 250;
};
}

var mb = new MacBook();

Memory(mb);
Engraving(mb);
Insurance(mb);

ako vytvoriť testovací plán v azúrovom devops

mb.cost(); // 1522

c# programovací jazyk pdf

Na jeden projekt sa nemusia použiť všetky vzorce a niektoré projekty môžu využívať výhody oddeľovania, ktoré ponúka vzor pozorovateľa. To znamená, že akonáhle budeme mať pevné pochopenie návrhových vzorov a konkrétnych problémov, na ktoré sa najlepšie hodia. Preto je integrácia do našej aplikačnej architektúry oveľa jednoduchšia.

Vďaka za prečítanie

Ak sa vám tento príspevok páčil, zdieľajte ho/lajkujte ho so všetkými svojimi priateľmi z oblasti programovania!

Sledujte nás na Facebook | Twitter

Ďalšie informácie o JavaScripte

Kompletný kurz JavaScript 2019: Stavajte skutočné projekty!

Vue JS 2 - Kompletný sprievodca (vrátane smerovača Vue a Vuex)

JavaScript Bootcamp - vytvorte aplikácie v reálnom svete

Web Developer Bootcamp

Tutoriál programovania JavaScript - Kompletný kurz JavaScript pre začiatočníkov

☞ Nové funkcie ES2019 by mal vedieť každý vývojár JavaScriptu

☞ Najlepšie rámce, knižnice a nástroje JavaScript, ktoré sa majú použiť v roku 2019

Reagujte vs Angular vs Vue.js podľa príkladu

☞ Microfrontends - prepojenie rámcov JavaScriptu (React, Angular, Vue atď.)

Vytváranie webových animácií pomocou súboru Anime.js

Ember.js vs Vue.js - čo je rámec JavaScript, ktorý pre vás funguje lepšie

☞ Stále potrebujeme rámce JavaScript?

#javascript #vzor-vzor #web-development