Js dizaino modeliai. Wp.template – HTML šablonai, skirti Javascript programoje „WordPress“. Dizaino modelių tipai

Tai yra div.

tam tikro turinio elementas. Antrajame mes nuėjome prie tuščios žymos

Paskutinėje mes nuėjome į elementas. Visų trijų rezultatas buvo vienodas – mums buvo grąžintas jQuery objektas, nurodantis DOM mazgą.

Kintamasis $ pritaiko jQuery kūrimo modelį. Kiekviename pavyzdyje mums buvo grąžintas jQuery DOM objektas ir turėjome prieigą prie visų jQuery bibliotekos pateiktų metodų, ir niekuomet nekvietėme document.createElement. JS biblioteka visa tai tvarkė už uždarų durų.

Įsivaizduokite, kiek daug darbo būtų, jei turėtume sukurti DOM elementą ir į jį įterpti turinį! Naudodami konstrukcijos modelį, galime sutelkti dėmesį į objekto tipą ir turinį, o ne į jo kūrimą.

Prototipo modelis

Anksčiau mes žiūrėjome į duomenų tipų apibrėžimo JavaScript programoje procesą, naudodami funkcijas ir pridedant metodus prie objekto prototipo. Prototipų modeliai (schemos) leidžia objektams paveldėti iš kitų objektų per savo prototipus.

Prototipo šablonas yra šablonas, kuriame objektai sukuriami iš esamo objekto šablono klonuojant.

Tai paprastas ir natūralus būdas įdiegti „JavaScript“ paveldėjimą. Pavyzdžiui:

Var Asmuo = (Pėdų skaičius: 2, Galvų skaičius: 1, Rankų skaičius: 2); //Object.create paima savo pirmąjį argumentą ir pritaiko jį naujojo objekto prototipui. var tilo = Objektas.kurti(asmuo); console.log(tilo.numHeads); //1 rezultatas tilo.numHeads = 2; console.log(tilo.numHeads) //2 rezultatas

Savybės (ir metodai) objekte Asmuo pritaikomi tilo objekto prototipui. Galime nepaisyti tilo objekto savybių, jei norime, kad jos skirtųsi.

Aukščiau pateiktame pavyzdyje naudojome Object.create(). Tačiau „Internet Explorer 8“ nepalaiko naujo metodo. Tokiais atvejais galime imituoti jo elgesį:

Var vehiclePrototype = ( init: function (carModel) ( this.model = carModel; ), getModel: function () ( console.log("Šios transporto priemonės modelis yra " + this.model); ) ); funkcija transporto priemonė (modelis) (funkcija F() (); F.prototype = vehiclePrototype; var f = new F(); f.init(modelis); return f; ) var car = vehicle ("Ford Escort"); automobilis.getModel();

Struktūriniai modeliai

Struktūriniai modeliai yra tikrai naudingi, ypač išsiaiškinant, kaip sistema turėtų veikti. Jie leidžia programas lengvai keisti ir išlikti valdomos. Iš šios nemažos grupės (adapteris, tiltas, jungiklis, dekoratorius, fasadas, vieno įėjimo taškas, oportunistas, tarpinis serveris) apsvarstysime šiuos modelius: kompozitorius ir fasadas.

Linker (dizaino raštas)

• Kompozitoriaus raštas yra kito tipo raštas, kurį tikriausiai naudojote to nesuvokdami.

Taigi ką tai reiškia? Pažvelkime į šį jQuery pavyzdį (dauguma JS bibliotekų turės atitikmenis):

$(.myList").addClass("pasirinkta"); $("#mano prekė").addClass("pasirinkta"); //Nedarykite to ant didelių lentelių, tai tik pavyzdys. $("#duomenųTable tbody tr").on("paspaudimas", funkcija(įvykis)( įspėjimas($(this).text()); )); $("#myButton").on("paspaudimas", funkcija(įvykis) ( alert("Spustelėta."); ));

Dauguma „JavaScript“ bibliotekų teikia nuoseklią API, neatsižvelgiant į tai, ar susiduriame su vienu DOM elementu, ar su DOM elementų masyve. Pirmajame pavyzdyje galime pridėti pasirinktą klasę prie visų elementų, atitinkančių .myList parinkiklį, bet galime naudoti tą patį metodą, kai kalbame apie vieną DOM elementą #myItem. Panašiai galite pridėti įvykių tvarkyklę naudodami on() metodą keliuose mazguose arba prie vieno mazgo per tą pačią API.

Naudodama sudėtinius išdėstymus, jQuery (ir daugelis kitų bibliotekų) suteikia mums supaprastintą API.

Sudėtinis šablonas kartais gali sukelti problemų. Laisvai koduotoje kalboje, pvz., „JavaScript“, naudinga žinoti, ar kalbame apie vieną elementą, ar su keliais elementais. Kadangi šablonų kūrimo priemonė abiem naudoja tą pačią API, dažnai galime supainioti vieną su kitu ir įvykti netikėta klaida. Kai kurios bibliotekos, pvz., YUI3, siūlo du atskirus elementų gavimo būdus (Y.one() vs Y.all()).

Fasadas (dizaino raštas)

Štai dar vienas modelis, kurį laikome savaime suprantamu dalyku. Objektas, kuris abstrahuoja kūrinį su keliomis klasėmis, sujungiant jas į vieną visumą.

Fasado raštas suteikia vartotojui paprastą sąsają, slepiantį pagrindinius jo sudėtingumus.

Fasado raštas beveik visada pagerina programinės įrangos dalies naudojimą. Naudojant jQuery kaip pavyzdį, vienas iš labiausiai paplitusių bibliotekos metodų yra ready() metodas:

$(document).ready(function() ( //čia eina visas tavo kodas... ));

Read() metodas iš tikrųjų įgyvendina fasadą. Jei pažvelgsite į šaltinį, rasite štai ką:

Paruošta: (function() ( ... //Mozilla, Opera ir Webkit if (document.addEventListener) ( document.addEventListener("DOMContentLoaded", idempotent_fn, false); ... ) //IE įvykio modelis else if ( document.attachEvent) ( // užtikrinti suaktyvinimą prieš įkeliant; gali vėluoti, bet saugus iframes document.attachEvent("onreadystatechange", idempotent_fn); // Atsarginis window.onload, kuris visada veikia window.attachEvent("onload", idempotent_fn ... ) ))

Ready() metodas nėra toks paprastas. „jQuery“ normalizuoja naršyklės nepastovumą, kad „ready()“ įsijungtų tinkamu laiku. Tačiau, kaip kūrėjas, jums bus pateikta paprasta sąsaja.

Dauguma fasadų šablonų pavyzdžių vadovaujasi šiuo principu. Norėdami jį įgyvendinti, dažniausiai remiamės sąlyginiais teiginiais, tačiau pateikiame jį kaip paprastą vartotojo sąsają. Kiti šio modelio įgyvendinimo būdai yra animate () ir css ().

Elgesio modeliai

Bet kuri į objektą orientuota programinės įrangos sistema turės ryšius tarp objektų. Nesugebėjus organizuoti tokių ryšių gali atsirasti klaidų, kurias sunku rasti ir ištaisyti. Elgesio projektavimo modeliai numato įvairius komunikacijos tarp objektų organizavimo būdus (atsakomybės grandinė, įsakymas, vertėjas, iteratorius, tarpininkas, saugotojas, stebėtojas, tarnas, specifikacija, būsena, strategija, šablono metodas, lankytojas ir kt.). Šiame skyriuje apžvelgsime stebėtojo ir tarpininko modelius.

Stebėtojo šablonas

Štai kas sakoma apie stebėtoją:

Stebėtojo modelyje objektas gali turėti stebėtojų, kurie domisi jo gyvavimo ciklu, sąrašą. Kiekvieną kartą, kai objektas daro ką nors įdomaus, jis siunčia pranešimą savo stebėtojams. Jei stebėtojui nebeįdomu klausytis objekto, jis gali jį pašalinti iš savo sąrašo.

Šiam modeliui apibūdinti reikia trijų metodų:

publikuoti(duomenys): iškviečiamas objektas, kai turi pranešimą. Kai kurie duomenys gali būti perkelti naudojant šį metodą.
užsiprenumeruoti (stebėtojas): objektas kviečiamas įtraukti stebėtoją į savo stebėtojų sąrašą.
unsubscribe(stebėtojas): iškviečiamas objektas, kad pašalintų stebėtoją iš stebėtojų sąrašo.
Dauguma šiuolaikinių „JavaScript“ bibliotekų palaiko šiuos tris metodus kaip savo įvykių infrastruktūros dalį. Paprastai yra on() arba add() metodas, trigger() arba fire() metodas ir off() arba detach() metodas. Apsvarstykite šį fragmentą:

//Paprasčiausiai sukuriame ryšį tarp jQuery įvykių metodų var o = $(()); $.subscribe = o.on.bind(o); $.atsisakyti prenumeratos = o.off.bind(o); $.publish = o.trigger.bind(o); // Naudojimas document.on("tweetsReceived", function(tweets) ( //atlikite kai kuriuos veiksmus, tada suaktyvinkite įvykį $.publish("tweetsShow", tweets); )); //Galime užsiprenumeruoti šį įvykį ir tada paleisti savo renginį. $.subscribe("tweetsShow", function() ( //kažkaip parodyti tviterius .. //public po to, kai jie bus parodyti $.publish("tweetsDisplayed); )); $.subscribe("tweetsDisplayed, function() (. ..));

Stebėtojo modelis yra vienas iš paprasčiausių įgyvendinamų modelių ir labai galingas. „JavaScript“ puikiai tinka šiam modeliui pritaikyti, nes jis pats yra pagrįstas įvykiais. Kitą kartą kurdami žiniatinklio programas apsvarstykite galimybę kurti modulius, kurie būtų laisvai sujungti ir kaip komunikacijos priemonę pritaikykite stebėtojo modelį. Stebėtojo modelis gali tapti problemiškas, jei dalyvauja per daug objektų ir stebėtojų.

Šablono tarpininkas

Paskutinis modelis, į kurį žiūrėsime, yra tarpininkas. Jis panašus į „Observer“ modelį, tačiau turi keletą reikšmingų skirtumų.

Tarpininkas palengvina naudojimąsi vienu bendru objektu, kuris užmezga ryšį su keliais objektais. Visi objektai sąveikauja vienas su kitu per tarpininką.

Programinės įrangos kūrimo pasaulyje tarpininko modelis naudojamas, kai sistema tampa per sudėtinga. Nurodant tarpininkus, bendravimas gali vykti per vieną subjektą, o ne keli subjektai, bendraudami tarpusavyje. Šia prasme tarpininkas gali būti naudojamas pakeisti sistemą, kuri įgyvendina stebėtojo modelius.
Pakalbėkime apie tai, kaip galite jį naudoti. Įsivaizduokite, kad turite žiniatinklio programą, kuri leidžia vartotojams spustelėti albumą ir leisti muziką iš jo. Galite sukurti tokį tarpininką:

$("#album").on("spustelėti", funkcija(e) ( e.preventDefault(); var albumId = $(this).id(); mediator.publish("playAlbum", albumId; )) ; var playAlbum = function(id) ( … mediator.publish("albumas Pradėtas groti", (dainų sąrašas: [..], dabartinėDaina: "Be tavęs")); ); var logAlbumPlayed = function(id) ( //Prisijungti albumą Benend); var updateUserInterface = function(album) ( //Atnaujinkite vartotojo sąsają, kad būtų rodoma, kas leidžiama); //Tarpininko prenumeratos mediator.subscribe("playAlbum", playAlbum); mediator.subscribe("playAlbum", logAlbumPlayed); mediator.subscribe("albumasStartedPlaying", updateUserInterface);

Šio modelio pranašumas yra tas, kad vienas objektas yra atsakingas už komunikaciją, o stebėtojo modelio atveju keli objektai gali klausytis ir prisijungti vienas kito.
Stebėtojo šablone nėra nė vieno objekto, kuriame būtų apribojimų. Vietoj to, stebėtojas ir subjektas turi bendradarbiauti, kad išlaikytų apribojimą. Bendravimo modelius lemia tai, kaip stebėtojai ir subjektai yra tarpusavyje susiję: vienas subjektas paprastai turi daug stebėtojų, o kartais vieno subjekto stebėtojas yra kito stebėtojo subjektas.

Išvada

Puikus dizaino modelių dalykas yra tai, kad kažkas jau sėkmingai juos naudojo praeityje. Yra daug atvirojo kodo, kuris įdiegia įvairius JavaScript modelius. Kaip kūrėjai, turime žinoti, kokie modeliai yra ir kada juos taikyti.

Vertimas ()
Nuotraukų šaltinis – Fotolia.ru

Sveiki, habr!
Nustebau, kad centre nebuvo išsamaus straipsnio šia tema, o tai iškart paskatino mane ištaisyti šią akivaizdžią neteisybę.

Aplinkoje, kurioje žiniatinklio programų kliento pusė tampa vis storesnė, verslo logika nenumaldomai šliaužia ant kliento, o node.js vis labiau kėsinasi į serverių technologijų suverenitetą, negalima negalvoti apie architektūros projektavimo metodus. JavaScript. Ir šiuo klausimu mums neabejotinai turėtų padėti dizaino modeliai - šabloniniai metodai, kaip išspręsti dažnai kylančias problemas. Šablonai padeda sukurti architektūrą, kuriai reikia mažiausiai pastangų, kai reikia atlikti pakeitimus. Tačiau nereikėtų jų suvokti kaip panacėjos, t.y., grubiai tariant, jei kodo kokybė „nepuiki“, jame knibždėte knibžda kietas kodas ir glaudūs ryšiai tarp logiškai nepriklausomų modulių, tai jokie šablonai jo neišgelbės. Bet jei užduotis yra sukurti keičiamo dydžio architektūrą, modeliai gali būti gera pagalba.
Tačiau šiame straipsnyje kalbama ne apie dizaino modelius kaip tokius, o apie jų taikymą „JavaScript“. Pirmoje šio straipsnio dalyje parašysiu apie generatyvinių modelių naudojimą.

Singletonas

Jei užduotis būtų apibūdinti šį modelį viena fraze, tai būtų maždaug taip: Singleton yra klasė, kuri gali turėti tik vieną egzempliorių.
Paprasčiausias ir akivaizdžiausias „JavaScript“ sprendimas šiam modeliui įgyvendinti yra naudoti objektus:

Var app = ( property1: "value", property2: "value", ... method1: function () ( ... ), ... )

Šis metodas turi ir privalumų, ir trūkumų. Tai lengva apibūdinti, daugelis žmonių jį naudoja nesuvokdami, kad egzistuoja jokie modeliai, o tokia rašymo forma bus suprantama bet kuriam JavaScript kūrėjui. Tačiau jis taip pat turi reikšmingą trūkumą: pagrindinis pavienio modelio tikslas yra suteikti prieigą prie objekto nenaudojant visuotinių kintamųjų, o šis metodas suteikia prieigą prie programos kintamojo tik esamoje srityje. Tai reiškia, kad programos objektą galime pasiekti iš bet kurios programos vietos tik tuo atveju, jei jis yra visuotinis. Dažniausiai tai yra labai nepriimtina; geras JavaScript kūrimo stilius yra naudoti ne daugiau kaip vieną visuotinį kintamąjį, kuriame yra viskas, ko reikia. Tai reiškia, kad aukščiau pateiktą metodą programoje galime naudoti ne daugiau kaip vieną kartą.
Antrasis metodas yra šiek tiek sudėtingesnis, bet ir universalesnis:

Funkcija SomeFunction () ( if (typeof (SomeFunction.instance) == "objektas") ( grąžinti SomeFunction.instance; ) this.property1 = "value"; this.property2 = "value"; SomeFunction.instance = tai; grąžinti šį ; ) SomeFunction.prototype.method1 = funkcija () ( )

Dabar, naudodami bet kurią modulinę sistemą (pavyzdžiui, Reikalavimus), galime bet kurioje programos vietoje prijungti failą su šios konstruktoriaus funkcijos aprašymu ir pasiekti savo objektą vykdydami:

Var someObj = new SomeFunction();

Tačiau šis metodas turi ir trūkumą: egzempliorius išsaugomas tiesiog kaip statinė konstruktoriaus savybė, leidžianti bet kam jį perrašyti. Norime, kad bet kokiomis aplinkybėmis galėtume pasiekti reikiamą objektą iš bet kurio programos kampo. Tai reiškia, kad kintamasis, kuriame išsaugosime egzempliorių, turi būti privatus, o uždarymai mums tai padės.

Funkcija SomeFunction () ( var egzempliorius; SomeFunction = funkcija () ( grąžinti egzempliorių; ) this.property1 = "vertė"; this.property2 = "vertė"; pavyzdys = tai; )

Atrodytų, tai yra visų problemų sprendimas, tačiau senųjų vietą užima naujos. Būtent: visos savybės, įtrauktos į konstruktoriaus prototipą po egzemplioriaus sukūrimo, nebus pasiekiamos, nes iš tikrųjų jie bus rašomi senajam konstruktoriui, o ne naujai apibrėžtam. Tačiau yra tinkama išeitis iš šios situacijos:

Funkcija SomeFunction () ( var instance; SomeFunction = funkcija () ( grąžinti egzempliorių; ) SomeFunction.prototype = tai; pavyzdys = naujas SomeFunction (); instance.constructor = SomeFunction; instance.property1 = "vertė"; instance.property2 = " vertė"; grąžinti atvejį;)

Šis vienetinio apibūdinimo būdas neturi visų aukščiau išvardintų trūkumų ir yra gana tinkamas universaliam naudojimui, tačiau viengubo apibūdinimo metodai naudojant uždorį neveiks su Reikalavimu, bet jei juos šiek tiek pakeisite ir iškelsite kintamąjį iš pačios funkcijos sukurtas uždarymas į define naudojamą funkciją, tada problema bus išspręsta:

Define(, function () ( var instance = null; function SomeFunction() ( if (pavyzdys) ( grąžinti egzempliorių; ) this.property1 = "value"; this.property2 = "value"; pavyzdys = tai; ); return SomeFunction ; ));

Gamyklinis metodas

Gamyklos metodas turi du pagrindinius tikslus:
1) Nenaudokite aiškiai konkrečių klasių
2) Sujunkite dažniausiai naudojamus objektų inicijavimo metodus
Paprasčiausias gamyklos metodo įgyvendinimas yra šis pavyzdys:

Funkcija Foo () ( //... ) funkcija Bar () ( //... ) funkcija gamykla (tipas) ( jungiklis (tipas) ( didžioji raidė "foo": grąžinti naują Foo(); didžioji raidė "bar": grįžti naujas Baras();

Atitinkamai, objektų kūrimas atrodys taip:

Foo = gamykla ("foo"); baras = gamykla("baras");

Galima naudoti elegantiškesnį sprendimą:

Funkcija PetFactory() ( ); PetFactory.register = function(pavadinimas, PetConstructor) ( if (Funkcijos pavadinimas) ( PetConstructor = pavadinimas; pavadinimas = null; ) if (!(Funkcijos PetConstructor egzempliorius)) ( throw ( pavadinimas: "Klaida", pranešimas: "PetConstructor yra neveikia" ) ) this = PetConstructor; ); PetFactory.create = function(petName) ( var PetConstructor = tai; if (!(PetConstructor instanceof Function)) ( throw ( pavadinimas: "Klaida", pranešimas: "konstruktorius "" + petName + "" undefined" ) ) return new PetConstructor ();

Šiuo atveju neapsiribojame gamyklos sukurtų klasių skaičiumi, galime pridėti tiek, kiek norime, tokiu būdu:

PetFactory.register("šuo", funkcija() ( this.say = funkcija () ( console.log("gav"); ) ));

Arba taip:

Funkcija Cat() ( ) Cat.prototype.say = funkcija () ( console.log("miau"); ) PetFactory.register(Cat);

Abstraktų fabrikas

Abstrakčioji gamykla naudojama tarpusavyje susijusių arba tarpusavyje susijusių objektų grupei sukurti.
Tarkime, kad turime kelis iššokančiuosius langus, kurie susideda iš tų pačių elementų, tačiau šie elementai atrodo skirtingai ir skirtingai reaguoja į vartotojo veiksmus. Kiekvienas iš šių elementų bus sukurtas gamykliniu metodu, o tai reiškia, kad kiekvienam iššokančiųjų langų tipui reikia savo objektų gamyklos.
Pavyzdžiui, apibūdinkime „BluePopupFactory“ gamyklą, kurios struktūra yra lygiai tokia pati kaip „PetFactory“, todėl praleisime detales ir tiesiog ją naudosime.

Funkcija BluePopup () ( //iššokančio lango kūrimas) BluePopup.prototype.attach = funkcija (elementai) ( //kitų UI elementų prijungimas prie lango) BluePopupFactory.register("popup", BluePopup); function BluePopupButton () ( //mygtuko kūrimas mėlynam iššokančiam langui) BluePopupButton.prototype.setText = funkcija (tekstas) ( //teksto nustatymas ant mygtuko) BluePopupFactory.register("button", BluePopupButton); function BluePopupTitle () ( //mėlynojo lango pavadinimo kūrimas) BluePopupTitle.prototype.setText = funkcija (tekstas) ( //pavadinimo teksto nustatymas) BluePopupFactory.register("title", BluePopupTitle);

Tikriausiai turėtume turėti kokią nors klasę, atsakingą už sąsajos elementus.

Funkcija UI () ( //klasė, atsakinga už vartotojo sąsajos elementus)

Ir prie jo pridėsime „createPopup“ metodą:

UI.createPopup = funkcija (gamykla) ( var popup = factory.create("popup"), buttonOk = factory.create("button"), mygtukasCancel = gamykla.sukurti("mygtukas"), title = factory.create(" title"); buttonOk.setText("Gerai"); buttonCancel.setText("Atšaukti"); title.setText("Be pavadinimo"); popup.attach(); )

Kaip matote, „createPopup“ kaip argumentą priima gamyklą, sukuria patį iššokantįjį langą ir mygtukus su jo pavadinimu, tada prideda juos prie lango.
Po to galite naudoti šį metodą taip:

Var newPopup = UI.createPopup(BluePopupFactory);

Atitinkamai galite aprašyti neribotą skaičių gamyklų ir perduoti tą, kurios jums reikia kurdami kitą iškylantįjį langą.

Kartais nepageidautina kartoti klasę tiesiogiai. Tada mes kreipiamės į generatyvinius modelius, kurie gali pasirinkti optimalų momentų mechanizmą.

Paprasta gamykla

Pačiam pasidaryti duris statant namą būtų gana sunku, todėl jas gausite jau paruoštas iš parduotuvės.

Raštas Paprasta gamykla pagamina reikiamą kopiją, nevargindama kliento šio proceso sudėtingumo.

Įgyvendinimo pavyzdys

Sukurkime netiesioginę sąsają visoms durims:

/* Door getWidth() getHeight() */ klasė WoodenDoor ( konstruktorius(plotis, aukštis)( this.width = plotis this.height = aukštis ) getWidth() ( return this.width ) getHeight() ( grąžinti this.height ) )

Suorganizuosime gamyklą, kuri juos gamins:

Const DoorFactory = ( makeDoor: (plotis, aukštis) => new WoodenDoor (plotis, aukštis))

Tai viskas, galite dirbti:

Const door = DoorFactory.makeDoor(100, 200) console.log("Width:", door.getWidth()) console.log("Height:", door.getHeight())

Modelis yra naudingas, jei kuriant objektą reikia tam tikros logikos. Tikslinga perkelti pasikartojantį kodą į atskirą paprastą gamyklą.

Gamyklinis metodas

Atrankos vadovas dirba su kandidatais į įvairias laisvas darbo vietas. Užuot gilinęsis į kiekvienos pareigybės subtilybes, techninį pokalbį jis deleguoja kolegoms specialistams.

Šis šablonas leidžia sukurti skirtingus objekto variantus, neteršiant konstruktoriaus nereikalingu kodu.

Įgyvendinimo pavyzdys

Pradėkime nuo paties mėsainio:

Class Burger ( konstruktorius(statytojas) ( this.size = builder.size this.cheeze = builder.cheeze || false this.pepperoni = builder.pepperoni || false this.lettuce = builder.lettuce || false this.tomato = statybininkas .pomidoras || klaidingas ) )

O štai statybininkas:

Klasė BurgerBuilder ( konstruktorius(dydis) ( this.size = dydis ) addPepperoni() ( this.pepperoni = true return this ) addLettuce() ( this.lettuce = true return this ) addCheeze() ( this.cheeze = true return this ) addTomato() ( this.tomato = true return this ) build() ( return new Burger(this) ) )

Voila! Štai mūsų mėsainis:

Const mėsainis = (naujas BurgerBuilder(14)) .addPepperoni() .addLettuce() .addTomato() .build()

„Builder“ šablonas reikalingas, jei objektas gali egzistuoti įvairiais variantais arba egzistavimo procesas susideda iš kelių žingsnių.

Singletonas

Šalyje turi būti vienas prezidentas, kitaip kils chaosas.

Šis modelis apgaubia objektą ir dinamiškai keičia jo elgesį.

Įgyvendinimo pavyzdys

Paimkime, pavyzdžiui, kavą. Paprasčiausia kava, įgyvendinanti atitinkamą sąsają:

/* Kavos sąsaja: getCost() getDescription() */ klasė SimpleCoffee( getCost() ( grąžinti 10 ) getDescription() ( grąžinti "Paprasta kava" ) )

Norime į kavą dėti įvairių priedų, tam sukursime keletą dekoratorių:

Class MilkCoffee ( konstruktorius(kava) ( this.coffee = kava ) getCost() ( return this.coffee.getCost() + 2 ) getDescription() ( return this.coffee.getDescription() + ", milk" ) ) klasė WhipCoffee ( konstruktorius(kava) ( this.coffee = kava ) getCost() ( return this.coffee.getCost() + 5 ) getDescription() ( return this.coffee.getDescription() + ", whip" ) ) class VanillaCoffee ( konstruktorius (kava) ( this.coffee = kava ) getCost() ( grąžinti this.coffee.getCost() + 3 ) getDescription() ( grąžinti this.coffee.getDescription() + ", vanilė" ) )

Dabar galite pasigaminti kavos pagal savo skonį:

Leiskite someCoffee someCoffee = new SimpleCoffee() console.log(someCoffee.getCost())// 10 console.log(someCoffee.getDescription())// Simple Coffee someCoffee = new MilkCoffee(someCoffee) console.log(getCoffee(someCoffee. ))// 12 console.log(someCoffee.getDescription())// Paprasta kava, pienas someCoffee = new WhipCoffee(someCoffee) console.log(someCoffee.getCost())// 17 console.log(someCoffee.getDescription() )// Paprasta kava, pienas, grietinėlė someCoffee = new VanillaCoffee(someCoffee) console.log(someCoffee.getCost())// 20 console.log(someCoffee.getDescription())// Paprasta kava, pienas, grietinėlė, vanilė

Fasadas

Norėdami įjungti kompiuterį, tiesiog paspauskite mygtuką. Tai labai paprasta, tačiau įsijungiančiame kompiuteryje vyksta daug sudėtingų dalykų. Fasadas yra paprasta sąsaja su sudėtinga sistema.

Įgyvendinimo pavyzdys

Sukurkime kompiuterių klasę:

Klasės kompiuteris ( getElectricShock() ( console.log("Ouch!") ) makeSound() ( console.log("pyyptelėjimas!") ) showLoadingScreen() ( console.log("Įkeliama..") ) bam() ( console.log("Parengta naudoti!") ) closeEverything() ( console.log("Bup bup buzz buzz!") ) sooth() ( console.log("Zzzzz") ) pullCurrent() ( konsolė. žurnalas ("Haaah!") ) )

ir paprastas fasadas dėl sudėtingų funkcijų:

Klasė ComputerFacade ( konstruktorius(kompiuteris) ( this.computer = kompiuteris ) turnOn() ( this.computer.getElectricShock() this.computer.makeSound() this.computer.showLoadingScreen() this.computer.bam() ) turnOff() ( this.computer.closeEverything() this.computer.pullCurrent() this.computer.sooth() ) )

Tai labai palengvina darbą su kompiuteriu:

Const computer = new ComputerFacade(new Computer()) computer.turnOn() // Ouch! Pyp pyp! Įkeliama.. Paruošta naudoti! computer.turnOff() // Bup bup buzz! Haah! Zzzzz

Oportunistas

Tolimojo susisiekimo traukiniuose vanduo karštiems gėrimams verdamas dideliuose induose – visiems iš karto. Tai leidžia sutaupyti elektros (arba dujų).

Darbo paieškos svetainėse galite užsiprenumeruoti jus dominančias darbo parinktis. Kai pasirodys tinkamas pasiūlymas, svetainė siunčia jums pranešimą.

Stebėtojo šablonas leidžia pranešti visiems suinteresuotiems objektams apie įvykusius pokyčius.

Įgyvendinimo pavyzdys

Pareiškėjai nori gauti pranešimus:

Const JobPost = title = (( pavadinimas: pavadinimas )) class JobSeeker ( konstruktorius(vardas) ( this._name = vardas ) notify(jobPost) ( console.log(this._name, "buvo pranešta apie naują skelbimą:", jobPost.title) ) )

Skelbimų lenta gali siųsti šiuos pranešimus:

Class JobBoard ( konstruktorius() ( tai._prenumeratoriai = ) subscribe(jobSeeker) ( this._subscribers.push(jobSeeker) ) addJob(jobPosting) ( this._subscribers.forEach(subscriber = ( subscriber.notify(jobPosting) )) ) )

// kurti prenumeratorius const jonDoe = naujas Darbo ieškantis asmuo ("John Doe") const janeDoe = naujas Darbo ieškantis asmuo("Jane Doe") const kaneDoe = naujas JobSeeker("Kane Doe") // sukurti pranešimų lentą // užsiregistruoti kandidatams const darbo lenta = new JobBoard() jobBoard.subscribe(jonDoe) jobBoard.subscribe(janeDoe) // pranešti prenumeratoriams apie naują laisvą darbo vietąBoard.addJob(JobPost("Programinės įrangos inžinierius")) // John Doe buvo pranešta apie naują skelbimą: Programinė įranga Inžinierius // Jane Doe buvo pranešta apie naują įrašą: programinės įrangos inžinierius

Lankytojas

Norėdami keliauti į užsienį, turite gauti leidimą (vizą). Tačiau atvykę į šalį galite saugiai aplankyti įvairias vietas, neprašydami papildomo leidimo. Jums tereikia apie juos žinoti.

Lankytojo šablonas leidžia pridėti papildomų operacijų prie objektų nekeičiant jų šaltinio kodo.

Įgyvendinimo pavyzdys

Imituojame zoologijos sodą su įvairių tipų gyvūnais:

Class Monkey ( shout() ( console.log("Ooh oo aa aa!") ) accept(operation) ( operation.visitMonkey(this) ) class Lion ( roar() ( console.log("Roaaar!") ) accept (operacija) ( operacija.visitLion(this) ) ) class Dolphin ( speak() ( console.log("Tuut tuttu tuutt!") ) accept(operation) ( operation.visitDolphin(this) ) )

Dabar norime klausytis, kokius garsus jie skleidžia. Norėdami tai padaryti, sukursime lankytoją:

Const kalba = (aplankytiBeždžionė(beždžionė)(beždžionė.šaukti()), aplankyti liūtas(liūtas)(liūtas.riaumoti()), aplankyti delfiną(delfinas)(delfinas.kalbėti() ))

Jis tiesiog pasiekia kiekvieną klasę ir iškviečia norimą metodą:

Const beždžionė = new Monkey() const lion = new Lion() const delfinas = new Dolphin() monkey.accept(speak) // Ooh oo aa aa! liūtas.priimk(kalbėk) // Roaaar! delfinas.priimti(kalbėk) // Tuut tutt tuutt!

Lankytojas leidžia esamų objektų nekeisti. Su jo pagalba galite, pavyzdžiui, pridėti galimybę šokinėti prie visų šių gyvūnų nekurdami papildomų metodų.

Const jump = ( visitMonkey(beždžionė) ( console.log("Šoko 20 pėdų aukščio! ant medžio!") ), visitLion(liūtas) ( console.log("Šoko 7 pėdas! Atgal ant žemės!") ) , visitDolphin(delphin) ( console.log("Šiek tiek vaikščiojo vandeniu ir dingo") ) )

Beždžionė.priimti(kalbėk) // Ooh oo aa aa! beždžionė.accept(jump) // Pašoko į 20 pėdų aukštį! prie medžio! liūtas.priimk(kalbėk) // Roaaar! liūtas.accept(jump) // Nušoko 7 pėdas! Vėl ant žemės! delfinas.priimti(kalbėk) // Tuut tutt tuutt! delfinas.accept(jump) // Šiek tiek pavaikščiojo vandeniu ir dingo

Strategija

Norėdami tvarkyti tam tikrą duomenų rinkinį, naudojate burbulų rūšiavimo algoritmą. Jis puikiai susidoroja su mažais kiekiais, bet sulėtėja su dideliais. Quicksort turi priešingą problemą. Tada nusprendžiate pakeisti algoritmą, atsižvelgdami į rinkinio dydį. Tai yra jūsų strategija.

Strategijos šablonas leidžia perjungti naudojamą algoritmą, atsižvelgiant į situaciją.

Įgyvendinimo pavyzdys

Pirmos klasės funkcijos padės jums įgyvendinti strategiją „JavaScript“.

Const bubbleSort = duomenų rinkinys => ( console.log("Rūšiavimas naudojant burbulų rūšiavimą") // ... // ... return dataset ) const quickSort = duomenų rinkinys => ( console.log("Rūšiavimas naudojant greitą rūšiavimą") / / ... // ... grąžinti duomenų rinkinį )

Ir tai yra klientas, kuris gali naudoti bet kokią strategiją:

Const sorter = duomenų rinkinys => (if(duomenų rinkinys.length > 5)( return quickSort ) else ( return bubbleSort ) )

Dabar galite rūšiuoti masyvus:

Const longDataSet = const shortDataSet = const sorter1 = rūšiatorius(longDataSet) const rūšiuotojas2 = rūšiuotojas(shortDataSet) sorter1(longDataSet) // Rūšiavimas naudojant greitą rūšiavimą sorter2(shortDataSet) // Rūšiavimas naudojant burbulų rūšiavimą

valstybė

Jūs piešiate „Paint“. Priklausomai nuo jūsų pasirinkimo, teptukas keičia savo būseną: nudažo raudona, mėlyna ar bet kokia kita spalva.

Būsenos modelis leidžia pakeisti klasės elgesį pasikeitus būsenai.

Įgyvendinimo pavyzdys

Sukurkime teksto rengyklę, kurioje galėsite keisti teksto būseną – pusjuodžiu, kursyvu ir pan.

Tai yra konvertavimo funkcijos:

Const largeCase = inputString => inputString.toUpperCase() const smallCase = inputString => inputString.toLowerCase() const defaultTransform = inputString => inputString

O štai pats redaktorius:

Class TextEditor ( konstruktorius(transform) ( this._transform = transform ) setTransform(transform) ( this._transform = transform ) type(words) ( console.log(this._transform(words)) ) )

Galite dirbti:

Const redaktorius = new TextEditor(defaultTransform) editor.type("Pirmoji eilutė") redaktorius.setTransform(UpperCase) editor.type("Second line") editor.type("Third line") editor.setTransform(lowerCase) editor.type ("Ketvirtoji eilutė") editor.type("Fifth line") // Pirma eilutė // SECOND LINE // TREČIA EILUUTĖ // ketvirta eilutė // penkta eilutė

Šablono metodas

Statai namą pagal konkretų planą: iš pradžių pamatai, paskui sienos ir tik tada stogas. Šių veiksmų eilės keisti negalima, tačiau jų įgyvendinimas gali skirtis.

Šablono metodas apibrėžia algoritmo „skeletą“, bet perduoda žingsnių įgyvendinimą vaikų klasėms.

Įgyvendinimo pavyzdys

Sukurkime įrankį, skirtą programos testavimui, kūrimui ir diegimui.

Bazinė klasė apibrėžia surinkimo algoritmo skeletą:

Class Builder ( // Šablono metodas build() ( this.test() this.lint() this.assemble() this.deploy() ) )

O vaikų klasės yra konkretus kiekvieno žingsnio įgyvendinimas:

Klasė AndroidBuilder pratęsia Builder ( test() ( console.log("Vykdomi Android testai") ) lint() ( console.log("Android kodo įvedimas") ) assemble() ( console.log("Android versijos surinkimas" ) ) deploy() ( console.log("Android build'o diegimas serveryje") ) ) klasė IosBuilder pratęsia Builder ( test() ( console.log("Vykdomi ios testai") ) lint() ( console.log("Linting ios kodas")) assemble() (console.log("IOS versijos surinkimas") ) deploy() (console.log("IOS versijos diegimas serveryje") ) )

Surinkime projektą:

Const androidBuilder = naujas AndroidBuilder() androidBuilder.build() // Vykdomi android testai // Android kodo įvedimas // Android versijos surinkimas // Android versijos diegimas serveryje const iosBuilder = naujas IosBuilder() iosBuilder.build() // „IOS“ testų vykdymas // „ios“ kodo įterpimas // „ios“ versijos surinkimas // „ios“ versijos diegimas serveryje

Kiekvienas kūrėjas stengiasi parašyti patogų ir lengvai skaitomą kodą. Didėjant programoms, kodo struktūrizavimas tampa svarbia dalimi.
Projektavimo modeliai atlieka svarbų vaidmenį atliekant šią užduotį, nes jie sudaro organizacinę struktūrą bendriems klausimams konkrečiomis aplinkybėmis.
Kurdami programas, interneto kūrėjai JavaScript dažnai nesąmoningai sąveikauja su dizaino modeliais.

Jie linkę naudoti kai kuriuos dizaino modelius daugiau nei kitus, nors įvairiems atvejams yra platus dizaino modelių sąrašas.

Šiame įraše norėčiau aptarti bendrus modelius, kaip pagerinti jūsų programavimo žinias ir pasinerti į juos giliau JavaScript.

Dizaino modeliai apima šiuos modelius:

– Modulis

- Prototipas

— Stebėtojas

– Vienišius

Kiekvienas šablonas susideda iš daugybės savybių, tačiau pabrėžiu šiuos pagrindinius dalykus:

1. Kontekstas: Kur / kokiomis aplinkybėmis naudojamas tas ar kitas modelis?

2. Problema: Kokią problemą bandome išspręsti?

3. Sprendimas: Kaip naudoti šį modelį šiai problemai išspręsti?

4. Įgyvendinimas: Kaip atrodo įgyvendinimas?

# Šablono modulis (Modulis)

„JavaScript“ programoje moduliai yra labiausiai paplitęs dizaino modelis, skirtas kodo dalims atskirti nuo kitų komponentų. Tai suteikia laisvą jungtį, kad būtų išlaikytas geros struktūros kodas.
Tiems, kurie yra susipažinę su objektinėmis kalbomis, moduliai yra "klases" V JavaScript. Vienas iš daugelio klasių privalumų yra inkapsuliavimas – būsenos ir elgesio apsauga nuo kitų klasių prieigos.
Modulio modelis suteikia prieigą prie viešųjų ir privačių lygių (taip pat mažiau saugių ir privilegijuotų).

Ši kalba UML aprašoma prototipo sąsaja, naudojama konkretiems įgyvendinimams klonuoti.

Norint klonuoti objektą, turi būti konstruktorius, kuris sukurtų pirmąjį objektą. Toliau naudokite raktinį žodį prototipas Kintamieji ir metodai yra susieti su objekto struktūra. Pažvelkime į paprastą pavyzdį:

var TeslaModelS = function() ( this.numWheels = 4; this.manufacturer = "Tesla"; this.make = "Model S"; ) TeslaModelS.prototype.go = function() ( // Ratai sukasi ) TeslaModelS. prototipas stop = funkcija () ( )

Tai. ratų skaičius = 4; Tai. mark = "Model S" ; TeslaModelS. prototipas. go = funkcija () ( // Ratai sukasi TeslaModelS. prototipas. sustabdyti = funkcija () ( // Uždedamos stabdžių trinkelės

Konstruktorius leidžia sukurti vieną objektą TeslaModelS. Kuriant naują objektą TeslaModelS, tai išsaugos konstruktoriuje inicijuotą būseną. Be to, funkcijos palaikymas eik Ir sustabdyti lengva, nes mes juos paskelbėme naudodami prototipus. Tas pats būdas išplėsti funkciją naudojant prototipą aprašytas toliau:

var TeslaModelS = function() ( this.numWheels = 4; this.manufacturer = "Tesla"; this.make = "Model S"; ) TeslaModelS.prototype = ( go: function() ( // Ratai sukasi), sustabdyti : function() ( // Uždėtos stabdžių trinkelės ) )

var TeslaModelS = funkcija () ( Tai. ratų skaičius = 4; Tai. gamintojas = "Tesla" ; Tai. mark = "Model S" ; TeslaModelS. prototipas = ( Go:function()( // Ratai sukasi Sustabdyti: funkcija () ( // Uždedamos stabdžių trinkelės

ATSEKANTIS PROTOTIPO RAŠTAS

Kaip ir šablono modulis, prototipo šablonas turi variantų Atskleidžiantis. Atskleidžiantis modelis suteikia inkapsuliaciją su viešaisiais ir privačiais nariais.

Kadangi grąžiname objektą, objekto prototipo priešdėlyje nurodysime funkciją. Išplėtę savo pavyzdį, galime pasirinkti, ką norime parodyti dabartiniame prototipe, kad išlaikytume savo prieigos lygius:

var TeslaModelS = function() ( this.numWheels = 4; this.manufacturer = "Tesla"; this.make = "Model S"; ) TeslaModelS.prototype = function() ( var go = function() ( // Ratai sukasi );

var TeslaModelS = funkcija () ( Tai. ratų skaičius = 4; Tai. gamintojas = "Tesla" ; Tai. mark = "Model S" ; TeslaModelS. prototipas = funkcija () ( Var go = funkcija() ( // Ratai sukasi } ; Variant sustabdymas = funkcija () ( // Uždedamos stabdžių trinkelės } ; Grįžti ( Paspauskite stabdžių pedalą: sustabdykite, PressGasPedal: eik } () ;

Atkreipkite dėmesį, kaip veikia Sustabdyti Ir Eik bus apsaugotas nuo grąžinamo objekto dėl to, kad nepatenka į grąžinamo objekto apimtį. Nes JavaScript natūraliai palaiko prototipinį paveldėjimą, nereikia perrašyti pagrindinių elementų (arba savybių ar bruožų).

# Stebėtojo šablonas (Stebėtojas)

Taip atsitinka, kad viena programos dalis pasikeičia, o kitas dalis reikia atnaujinti. IN Kampinis j s jei $apimtis Objektas atnaujinamas, įvykis gali būti paleistas, kad būtų pranešta kitam komponentui. Stebėtojo modelis apima tai, kad jei objektas yra modifikuotas, jis praeina (transliacijos) priklausomus objektus, kad pasikeitimas įvyko.

Kitas puikus pavyzdys yra modelio peržiūros valdiklio (MVC) architektūra; vaizdas atnaujinamas pasikeitus modeliui. Vienas iš pranašumų yra vaizdo atsiejimas nuo modelio, siekiant sumažinti priklausomybes.

Kaip parodyta UML diagramoje, reikalingi objektai yra subjektas, stebėtojas, Ir betono. Objektas tema yra nuorodų į betono stebėtojai pranešti apie bet kokius pakeitimus. Objektas stebėtojas yra abstrakti klasė, kuri leidžia betono stebėtojaiįdiegti pranešimo metodą.

Pažiūrėkime į pavyzdį KampinisJS, kuri apima stebėtojo modelį per įvykių valdymą.

// 1 valdiklis $scope.$on("pavadinimasChanged", function(event, args) ( $scope.name = args.name; )); ... // 2 valdiklis $scope.userNameChanged = function(name) ( $scope.$emit("nameChanged", (vardas: pavadinimas)); );

// Valdiklis 1 $apimtis. $ on ("nameChanged" , function ( event , args ) ( $apimtis. vardas = args. vardas ; } ) ; . . . // Valdiklis 2 $apimtis. userNameChanged = funkcija (vardas) ( $apimtis. $emit("vardasPakeistas", (vardas:vardas));

Su šablonu Stebėtojas svarbu atskirti, ar tai savarankiškas objektas, ar tema .

Svarbu pažymėti, kad nors šablonas Stebėtojas ir suteikia daug privalumų, tačiau vienas iš trūkumų yra reikšmingas našumo sumažėjimas, nes „stebėtojų“ ( stebėtojai) padidėjo. Vienas žinomiausių stebėtojų yra stebėtojai . IN KampinisJS Galime stebėti ( žiūrėti) kintamieji, funkcijos ir objektai. Ciklas $$ virškinimas veikia ir praneša kiekvienam stebėtojai naujos reikšmės, kai keičiasi objekto plotas.

Galime sukurti savo Dalykai Ir Stebėtojai V JavaScript. Pažiūrėkime, kaip tai įgyvendinama:

var Subject = function() ( this.observers = ; return ( subscribeObservers: function(observer) ( this.observers.push(observer); ), unsubscribeObserver: function(observer) ( var index = this.observers.indexOf(observer) ; if(index > -1) ( this.observers.splice(index, 1); ) ), notifyObserver: function(observer) ( var index = this.observers.indexOf(observer); if(index > -1) ( this.observers.notify(index) ), notifyAllObservers: function() ( for(var i = 0; i< this.observers.length; i++){ this.observers[i].notify(i); }; } }; }; var Observer = function() { return { notify: function(index) { console.log("Observer " + index + " is notified!"); } } } var subject = new Subject(); var observer1 = new Observer(); var observer2 = new Observer(); var observer3 = new Observer(); var observer4 = new Observer(); subject.subscribeObserver(observer1); subject.subscribeObserver(observer2); subject.subscribeObserver(observer3); subject.subscribeObserver(observer4); subject.notifyObserver(observer2); // Observer 2 is notified! subject.notifyAllObservers(); // Observer 1 is notified! // Observer 2 is notified! // Observer 3 is notified! // Observer 4 is notified!

var Subject = funkcija() ( Tai. stebėtojai = ; Grįžti ( SubscribeObserver: funkcija (stebėtojas) ( Tai. stebėtojai. stumti(stebėtojas); } , UnsubscribeObserver: funkcija (stebėtojas) ( Jei (indeksas > ; - 1 ) ( Tai. stebėtojai. sandūra(indeksas, 1); } , NotifyObserver: funkcija (stebėtojas) ( Var indeksas = tai . stebėtojai. indexOf(stebėtojas); Jei (indeksas > ; - 1 ) ( Tai. stebėtojai[indeksas]. pranešti(indeksas); } , NotifyAllObservers : funkcija () ( Dėl (var i = 0 ; i & lt ; tai . stebėtojai . ilgis ; i ++ ) ( Tai. stebėtojai[i]. pranešti (i); } ; } ; var Stebėtojas = funkcija() ( Grįžti ( Pranešti: funkcija (indeksas) ( Konsolė. log("Stebėtojas " + indeksas + " pranešta!" ) ; var subjektas = new Subject(); var stebėtojas1 = naujas Stebėtojas(); var stebėtojas2 = naujas Stebėtojas();

Nors galime rašyti bet ką JavaScript, tai gali sukelti problemų, jei naudosime netinkamus dizaino modelius arba netinkamai įgyvendinsime reikiamą modelį.

Kūrėjai linkę naudoti naujausias sistemas ir bibliotekas kurdami žiniatinklio programas, sujungdami dvi ar daugiau iš jų į vieną projektą ir dažnai pamiršta pagrindines šių bibliotekų kūrimo idėjas.

Dizaino modeliai yra panašūs į architektūrinius brėžinius, nes parodo, kaip teisingai ir greitai išspręsti programinės įrangos kūrimo problemą. Jie sukurti naudojant geriausią praktiką, kuri padeda užtikrinti mūsų žiniatinklio programų stabilumą ir daugeliu atvejų saugumą. Nes JavaScript nėra tradicinė į objektą orientuota programavimo kalba, apibrėžti dizaino modelius jame gali būti šiek tiek sunku, bet ne neįmanoma.

Šiame straipsnyje aptarsime įvairius dizaino modelius ir kaip galime juos geriausiai įgyvendinti. Dėl trumpumo mes kalbėsime tik apie penkis dažniausiai naudojamus šablonus.

Dizaino modelių tipai

Programinės įrangos kūrime yra daug dizaino modelių. Šie modeliai suskirstyti į tris grupes, kurias trumpai apžvelgsime toliau:

Generatyviniai modeliai: šie modeliai sutelkia dėmesį į objektų kūrimo būdą. Kuriant objektus didelėse programose, visada yra tendencija viską komplikuoti. Naudojant generatyvius dizaino modelius, ši problema išsprendžiama kontroliuojant objekto kūrimą.

Struktūriniai modeliai: Struktūriniai modeliai suteikia būdų, kaip valdyti ryšius tarp objektų, taip pat sukurti klasių struktūrą. Vienas iš būdų tai pasiekti yra naudoti paveldėjimą ir kompoziciją, kad iš mažų objektų būtų sukurtas didelis objektas.

Elgesio modeliai: Elgesio modeliai yra modeliai, kuriuose pagrindinis dėmesys skiriamas objektų sąveikai. Nors generatyviniai modeliai apibūdina tam tikrą laiko momentą, o struktūriniai modeliai apibūdina daugiau ar mažiau statinę struktūrą, elgesio modeliai apibūdina procesą arba srautą.

Šablono modulio kūrimas

Modulis labai dažnai naudojamas kuriant programinę įrangą ir tai išraiška, susidedanti iš funkcijos, kuri nedelsiant vykdoma.

// ir čia turime kodą

Visas modulio kodas yra privatus. Kintamieji importuojami perduodant reikšmes, o eksportuojami vykdant funkciją, kuri grąžina objektą. Moduliai yra naudingi didelėse sistemose, nes padeda išlaikyti švarią visuotinę vardų erdvę, taip pat užtikrinti, kad jūsų funkcijas būtų galima importuoti ir eksportuoti.

Įdiegto modulio pavyzdys parodytas žemiau:

Const parinktys = (
vartotojo vardas: "Michailas",
priegloba: "svetainė"
};

Konfigūracija = (funkcija(parametrai) (

// grąžina viešai prieinamus duomenis

Grįžti (
prisijungti: prisijungti
};

Const vartotojo vardas = params.username \|\| "",
serveris = params.serveris \|\| "",
slaptažodis = params.password \|\| "";

Funkcija checkPass()
{
if (this.password === "") (
įspėjimas ("be slaptažodžio!");
return false;
}

Grąžinti tiesa;
}

Funkcija checkUsrname()
{

Jei (this.username === "")
{
alert("nėra vartotojo vardo!");
return false;
}

Grąžinti tiesa;
}

Funkcijos prisijungimas ()
{
if (checkPass() && checkUsrname())
{
// atlikti autorizaciją
}
}

))(galimybės);

Atkreipkite dėmesį, kad naudotojo vardo, pagrindinio kompiuterio vardo ir slaptažodžio reikšmės yra nuolat importuojamos ir eksportuojamos. Modulių naudojimas suteikia švarią architektūrą, dėl kurios jūsų kodas bus lengviau skaitomas ir mažiau klaidingas.