Како користити ЈаваСцрипт обрасце дизајна

ЈаваСцрипт шаблони дизајна пружају доказана решења за уобичајене проблеме у развоју софтвера. Разумевање и примена ових образаца ће вам омогућити да напишете бољи, ефикаснији ЈаваСцрипт код.

Увод у ЈаваСцрипт обрасце дизајна

Концепти садржани у обрасцима дизајна ЈаваСцрипт-а служе да вас упуте како да превазиђете уобичајене проблеме са којима ћете се суочити као ЈаваСцрипт програмер.

Требало би да разумете основне апстракције иза образаца, тако да их можете применити на свој одређени проблем. Такође би требало да будете у могућности да идентификујете када било који од наведених образаца може бити користан за ваш код.

Образац модула

Образац модула, који обезбеђује енкапсулацију, је део ЈаваСцрипт-ов систем модула. Пружа начин да се осигурају приватни подаци и понашање унутар модула док се излаже јавни АПИ. Омогућава вам да креирате самосталне објекте модула са приватним и јавним нивоима приступа.

Ово је помало као што можете користите модификаторе приступа за класу на језику као што је Јава или Ц++.

У ЈаваСцрипт-у можете имплементирати образац модула помоћу затварања.

Коришћењем затварања за затварање приватних чланова (функција, променљивих, података), креирате опсег у коме су ови чланови доступни, али нису директно изложени спољном свету. Ово помаже у постизању инкапсулације, задржавајући унутрашње детаље сакривеним од спољашњег кода.

Поред тога, враћање јавног АПИ-ја из затварања омогућава приватни приступ одређеним функцијама или својствима које желите да изложите као део интерфејса модула.

Ово ће вам дати контролу над деловима модула који су доступни другим деловима базе кода. То одржава јасну границу између јавне и приватне функционалности.

Ево примера:

конст СхоппингЦартМодуле = (функција () {
// Приватни подаци
дозволити цартИтемс = [];
// Приватна метода
функцијаизрачунатиТоталИтемс() {
повратак цартИтемс.редуце((укупно, ставка) => укупно + ставка.количина, 0);
 }
// Јавни АПИ
повратак {
 аддИтем (ставка) {
 цартИтемс.пусх (ставка);
 },
 гетТоталИтемс() {
повратак израчунатиТоталИтемс();
 },
 цлеарЦарт() {
 цартИтемс = [];
 }
 };
})();
// Пример употребе
СхоппингЦартМодуле.аддИтем({ име: 'Производ 1', количина: 2 });
СхоппингЦартМодуле.аддИтем({ име: 'Производ 2', количина: 1 });
конзола.лог (СхоппингЦартМодуле.гетТоталИтемс()); // Излаз: 3
СхоппингЦартМодуле.цлеарЦарт();
конзола.лог (СхоппингЦартМодуле.гетТоталИтемс()); // Излаз: 0

У овом примеру, СхоппингЦартМодуле представља модул креиран коришћењем шаблона модула. Извршење кода иде овако:

1. Тхе ИИФЕ омотава цео блок кода, стварајући функцију која се одмах извршава по декларацији. Ово успоставља приватни опсег за чланове модула.
2. цартИтемс је приватни низ. Није директно доступан изван модула.
3. израчунатиТоталИтемс() је приватна метода која израчунава укупан број артикала у корпи. Користи се смањити() метод за понављање цартИтемс низ и сабрати количине свих ставки.
4. Модул враћа свој јавни АПИ као литерал објекта, излажући три јавне методе: Додајте ставку(), гетТоталИтемс(), и цлеарЦарт().
5. Изван модула, можете приступити јавним методама модула за интеракцију са функционалношћу корпе за куповину.

Овај пример показује како вам образац модула омогућава да инкапсулирате приватне податке (цартИтемс) и понашање (израчунатиТоталИтемс) унутар модула док пружа јавни интерфејс (Додајте ставку, гетТоталИтемс, и цлеарЦарт) за интеракцију са модулом.

Образац посматрача

Образац Обсервер успоставља зависност један-према-више између објеката. Када се стање једног објекта промени, он обавештава све своје зависне особе и они се аутоматски ажурирају. Овај образац је посебно користан за управљање интеракцијама вођеним догађајима или раздвајање компоненти у систему.

У ЈаваСцрипт-у можете имплементирати образац Обсервер користећи уграђени аддЕвентЛистенер, диспатцхЕвент методе, или било које механизми за руковање догађајима. Претплатом посматрача на догађаје или субјекте, можете их обавестити и ажурирати када се одређени догађаји догоде.

На пример, можете користити образац Обсервер да примените једноставан систем обавештења:

// Имплементација обрасца посматрача
функцијаНотифицатионСистем() {
// Списак претплатника
ово.субсцриберс = [];
// Метод за претплату на обавештења
ово.субсцрибе = функција (претплатник) {
ово.субсцриберс.пусх (претплатник);
 };
// Метод за одјаву на обавештења
ово.унсубсцрибе = функција (претплатник) {
конст индекс = ово.субсцриберс.индекОф (претплатник);
ако (индекс !== -1) {
ово.субсцриберс.сплице (индекс, 1);
 }
 };
// Метод за обавештавање претплатника
ово.нотифи = функција (порука) {
ово.субсцриберс.форЕацх(функција (претплатник) {
 субсцрибер.рецеивеНотифицатион (порука);
 });
 };
}
// Субсцрибер објецт
функцијаПретплатник(име) {
// Метод за примање и руковање обавештењима
ово.рецеивеНотифицатион = функција (порука) {
конзола.лог (име + ' примио обавештење: ' + порука);
 };
}
// Пример употребе
конст нотифицатионСистем = Нова НотифицатионСистем();
// Креирај претплатнике
конст претплатник1 = Нова Претплатник('Претплатник 1');
конст претплатник2 = Нова Претплатник('Претплатник 2');
// Претплатите се претплатницима на систем обавештења
нотифицатионСистем.субсцрибе (претплатник1);
нотифицатионСистем.субсцрибе (претплатник2);
// Обавести претплатнике
нотифицатионСистем.нотифи(„Ново обавештење!“);

Овде је циљ омогућити више претплатника да примају обавештења када се деси одређени догађај.

Тхе НотифицатионСистем функција представља систем који шаље обавештења, а Претплатник функција представља примаоце обавештења.

НотифицатионСистем има низ под називом претплатника за чување претплатника који желе да примају обавештења. Тхе претплатити се Метод омогућава претплатницима да се региструју додавањем себе у низ претплатника. Тхе одјавити се метод би уклонио претплатнике из низа.

Тхе обавестити метод у НотифицатионСистем понавља низ претплатника и позива рецеивеНотифицатион метод за сваког претплатника, омогућавајући му да рукује обавештењима.

Инстанце функције Субсцрибер представљају претплатнике. Сваки претплатник има метод рецеивеНотифицатион који одређује како ће поступати са примљеним обавештењима. У овом примеру, метод евидентира примљену поруку на конзоли.

Да бисте користили образац посматрача, креирајте инстанцу система НотифицатионСистем. Затим можете креирати инстанце Субсцрибер-а и додати их у систем обавештења користећи метод претплате.

Слање обавештења ће покренути метод рецеивеНотифицатион за сваког претплатника и евидентирати поруку за сваког претплатника.

Обсервер образац омогућава лабаву везу између система обавештења и претплатника, омогућавајући флексибилност. Образац промовише раздвајање брига што ће олакшати одржавање у системима вођеним догађајима.

Коришћење напредних ЈаваСцрипт образаца

Ево неколико општих савета за ефикасно коришћење напредних ЈаваСцрипт образаца:

• Узмите у обзир импликације перформанси: Напредни обрасци могу да унесу додатну сложеност, што може утицати на перформансе. Имајте на уму импликације перформанси и оптимизовати где је потребно.
• Избегавајте анти-шаблоне: темељно разумејте обрасце и избегавајте да упаднете у анти-обрасце или да их злоупотребите. Користите обрасце тамо где имају смисла и усклађени са захтевима ваше апликације.
• Пратите конвенције кодирања: Доследно пратите конвенције кодирања да бисте одржали читљивост и конзистентност у својој бази кода. Користите смислена имена променљивих и функција и обезбедите јасну документацију за своје обрасце.

Будите опрезни када примењујете ове обрасце

Образац модула омогућава инкапсулацију и промовише приватност података, организацију кода и креирање самосталних модула.

С друге стране, образац Обсервер олакшава комуникацију између компоненти успостављањем односа субјект-претплатник.

Требали бисте бити свесни потенцијалних замки и уобичајених грешака приликом имплементације напредних ЈаваСцрипт образаца. Избегавајте прекомерну употребу образаца где постоје једноставнија решења или креирање превише сложеног кода. Редовно прегледајте и рефакторите свој код како бисте били сигурни да остаје одржаван.