Pokiaľ sa budete rozvíjať jednoduché aplikácie v Javascripte nebudete mať veľké problémy so zobrazením údajov na webovej stránke.
Ale pokiaľ ide o spracovanie veľkého množstva údajov, ktoré sú uložené v poliach a objektoch a ktoré musia byť podľa určitých pravidiel zobrazené na stránke, môžu tu nastať ťažkosti.
Napríklad potrebujete zobraziť na stránke zoznam používateľov stránky so všetkými ich parametrami (napríklad id, meno. Môže tam byť aj vek, pohlavie atď.). Predpokladajme, že tieto údaje sú vo vnútri objektu usersData
Var usersData = [ ( meno: "Dima", id: 1 ), ( meno: "Katy", id: 2 ), ( meno: "Lena", id: 3) ];
Na vyriešenie tohto problému môžete použiť slučku, potom môže riešenie vyzerať takto:
For(var i=0; i" + userData.name[i] + ""; }
Súhlaste s tým, že s touto formou zápisu môže pracovať iba programátor, ktorý vie písať v Javascripte. Poskytnite takýto kód dizajnérovi rozloženia a on tam ničomu nebude rozumieť.
Oveľa prehľadnejšie však bude zobrazenie údajov v tejto forme:
Aj človek, ktorý pozná iba značkovací jazyk HTML, už rozumie tejto forme záznamu. Intuitívne môžete zistiť, že zodpovedajúce hodnoty premenných budú nahradené v zložených zátvorkách.
Táto forma záznamu je možná pomocou takzvaných šablón.
Šablóna je špecifická šablóna v kóde HTML, ktorá je napísaná podľa určitých pravidiel. Keď kód Javascript začne interagovať s takouto šablónou, kód šablóny sa skonvertuje na kód HTML alebo uzly stromu DOM na stránke.
Syntax šablón v Javascripte sa môže líšiť. Jednotný štandard nie a všetko bude závisieť od knižnice alebo pluginu, ktorý použijete.
Tu je šablóna, ktorá vytvorí menu na stránke:
Tu sa namiesto zložených zátvoriek používa tento zápis:
Tu je ďalší príklad šablóny, ktorá nahrádza príslušné hodnoty CSS štýly v závislosti od akcií vykonaných používateľom.
MyButton ( box-shadow: ; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, ), color-stop(1, )); background:linear-gradient(to bottom, 5% , 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="", endColorstr="",GradientType=0);
Aby sme to zhrnuli, pozrime sa, aké výhody nám používanie šablón prinesie:
Intuitívny kód aj pre neprogramátorov;
Skrátená forma zápisu;
Dáta, kód javascript a výstup na stránky sú od seba oddelené, čo uľahčuje ich správu.
Vo všeobecnosti je na vás, či na webových stránkach použijete šablóny Javascript alebo nie. Už som sa rozhodol pre seba a už ich začínam používať v niektorých svojich vývojoch.
Niekedy nie je žiaduce vytvárať inštanciu triedy priamo. Potom sa uchýlime ku generatívnym vzorom, ktoré dokážu vybrať optimálny inštanciačný mechanizmus.
Jednoduchá továreňVyrobiť si dvere svojpomocne pri stavbe domu by bolo dosť náročné, preto ich dostanete už hotové z obchodu.
Vzor Jednoduchá továreň vyrába požadovanú kópiu bez toho, aby obťažovala klienta zložitosťou tohto procesu.
Príklad implementácieVytvorme implicitné rozhranie pre všetky dvere:
/* Dvere getWidth() getHeight() */ class WoodenDoor ( constructor(width, height)( this.width = width this.height = height ) getWidth() ( return this.width ) getHeight() ( return this.height ) )
Zorganizujeme továreň, ktorá ich bude vyrábať:
Const DoorFactory = ( makeDoor: (šírka, výška) => new WoodenDoor(šírka, výška) )
To je všetko, môžete pracovať:
Const door = DoorFactory.makeDoor(100, 200) console.log("Width:", door.getWidth()) console.log("Height:", door.getHeight())
Vzor je užitočný, ak vytvorenie objektu vyžaduje určitú logiku. Má zmysel presunúť opakujúci sa kód do samostatnej Simple Factory.
Továrenská metódaNáborový manažér pracuje s kandidátmi na rôzne voľné pracovné miesta. Namiesto toho, aby sa ponoril do zložitosti každej pozície, deleguje technický rozhovor na kolegov špecialistov.
Tento vzor vám umožňuje vytvárať rôzne variácie objektu bez znečistenia konštruktora zbytočným kódom.
Príklad implementácieZačnime samotným hamburgerom:
Trieda Burger ( constructor(builder) ( this.size = builder.size this.cheeze = builder.cheeze || false this.pepperoni = builder.pepperoni || false this.lettuce = builder.lettuce || false this.tomato = builder .paradajka || nepravda ) )
A tu je Staviteľ:
Trieda BurgerBuilder ( constructor(size) ( this.size = size ) 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! Tu je náš burger:
Const burger = (new BurgerBuilder(14)) .addPepperoni() .addLettuce() .addTomato() .build()
Vzor Builder je potrebný, ak objekt môže existovať v rôznych variáciách alebo ak proces vytvárania inštancií pozostáva z niekoľkých krokov.
SingletonKrajina musí mať jediného prezidenta, inak bude chaos.
Tento vzor obalí objekt a dynamicky mení jeho správanie.
Príklad implementácieVezmime si napríklad kávu. Najjednoduchšia káva, ktorá implementuje príslušné rozhranie:
/* Rozhranie kávy: getCost() getDescription() */ class SimpleCoffee( getCost() ( return 10 ) getDescription() ( return "Simple coffee" ) )
Chceme mať možnosť pridávať do kávy rôzne prísady, preto vytvoríme niekoľko dekorácií:
Class MilkCoffee ( constructor(coffee) ( this.coffee = coffee ) getCost() ( return this.coffee.getCost() + 2 ) getDescription() ( return this.coffee.getDescription() + ", milk" ) ) class WhipCoffee ( constructor(coffee) ( this.coffee = coffee ) getCost() ( return this.coffee.getCost() + 5 ) getDescription() ( return this.coffee.getDescription() + ", whip" ) ) class VanillaCoffee ( konstruktor (káva) ( this.coffee = coffee ) getCost() ( return this.coffee.getCost() + 3 ) getDescription() ( return this.coffee.getDescription() + ", vanilla" ) )
Teraz si môžete pripraviť kávu podľa svojej chuti:
Nechajte nejakú kávu nejakú kávu = new SimpleCoffee() console.log(someCoffee.getCost())// 10 console.log(someCoffee.getDescription())// Simple Coffee someCoffee = new MilkCoffee(someCoffee) console.log(someCoffee.getCost( ))// 12 console.log(someCoffee.getDescription())// Obyčajná káva, mlieko someCoffee = new WhipCoffee(someCoffee) console.log(someCoffee.getCost())// 17 console.log(someCoffee.getDescription() )// Obyčajná káva, mlieko, smotana someCoffee = new VanillaCoffee(someCoffee) console.log(someCoffee.getCost())// 20 console.log(someCoffee.getDescription())// Obyčajná káva, mlieko, smotana, vanilka
FasádaAk chcete zapnúť počítač, stačí stlačiť tlačidlo. Je to veľmi jednoduché, ale v počítači, ktorý sa zapne, sa deje veľa zložitých vecí. Jednoduchým rozhraním ku komplexnému systému je fasáda.
Príklad implementácieVytvorme počítačovú triedu:
Class Computer ( getElectricShock() ( console.log("Au!") ) makeSound() ( console.log("Beep beep!") ) showLoadingScreen() ( console.log("Loading..") ) bam() ( console.log("Pripravené na použitie!") ) closeEverything() ( console.log("Bup bup buzzzz!") ) sooth() ( console.log("Zzzzz") ) pullCurrent() ( console. log("Haaah!")))
a jednoduchá fasáda pre jej komplexné funkcie:
Trieda ComputerFacade ( constructor(computer) ( this.computer = computer ) turnOn() ( this.computer.getElectricShock() this.computer.makeSound() this.computer.showLoadingScreen() this.computer.bam() ) turnOff() ( this.computer.closeEverything() this.computer.pullCurrent() this.computer.sooth() ) )
Vďaka tomu je práca s počítačom oveľa jednoduchšia:
Const computer = new ComputerFacade(new Computer()) computer.turnOn() // Ou! Píp píp! Načítava sa. Pripravené na použitie! computer.turnOff() // Bup buz buzzz! Haah! Zzzzz
OportunistaV diaľkových vlakoch sa voda na horúce nápoje varí vo veľkých nádobách – pre všetkých naraz. To vám umožní ušetriť elektrinu (alebo plyn).
Na stránkach s hľadaním práce sa môžete prihlásiť na odber pracovných ponúk, ktoré vás zaujímajú. Keď sa zobrazí vhodná ponuka, stránka vám pošle upozornenie.
Vzor Pozorovateľ vám umožňuje informovať všetky zainteresované objekty o zmenách, ktoré sa vyskytli.
Príklad implementácieUchádzači chcú dostávať upozornenia:
Const JobPost = title = (( title: title )) class JobSeker ( constructor(name) ( this._name = name ) notify(jobPost) ( console.log(this._name, "bol upozornený na nový príspevok:", jobPost.title) ))
Nástenka môže posielať tieto upozornenia:
Trieda JobBoard ( constructor() ( this._subscribers = ) subscribe(jobSeker) ( this._subscribers.push(jobSeker) ) addJob(jobPosting) ( this._subscribers.forEach(subscriber = (subscriber.notify(jobPosting) )) ) )
// vytvorenie odberateľov const jonDoe = new JobSeeker("John Doe") const janeDoe = new JobSeeker("Jane Doe") const kaneDoe = new JobSeeker("Kane Doe") // vytvorenie nástenky // registrácia uchádzačov const jobBoard = new JobBoard() jobBoard.subscribe(jonDoe) jobBoard.subscribe(janeDoe) // upozorniť predplatiteľov na nové voľné pracovné miesto jobBoard.addJob(JobPost("Software Engineer")) // John Doe bol upozornený na nový príspevok: Software Inžinier // Jane Doe bola upozornená na nový príspevok: Software Engineer
NávštevníkAk chcete cestovať do zahraničia, musíte získať povolenie (vízum). Akonáhle sa však ocitnete v krajine, môžete bezpečne navštíviť rôzne miesta bez toho, aby ste požiadali o ďalšie povolenie. Len o nich musíte vedieť.
Vzor Návštevník vám umožňuje pridávať ďalšie operácie do objektov bez zmeny ich zdrojového kódu.
Príklad implementáciePoďme simulovať zoologickú záhradu s odlišné typy zvieratá:
Class Monkey ( scream() ( console.log("Ooh oo aa aa!") ) accept(operation) ( operation.visitMonkey(this) ) class Lion ( rev() ( console.log("Roaaar!") ) accept (operácia) ( operation.visitLion(this) ) class Dolphin ( speak() ( console.log("Tuut tuttu tuutt!") ) accept(operation) ( operation.visitDolphin(this) ) )
Teraz chceme počúvať, aké zvuky vydávajú. Na tento účel vytvoríme návštevníka:
Const speak = ( visitMonkey(monkey)( monkey.shoout() ), visitLev(lev)( lion.rear() ), visitDolphin(delphin)( dolphin.speak() ) )
Jednoducho pristupuje ku každej triede a volá požadovanú metódu:
Const monkey = new Monkey() const lion = new Lion() const dolphin = new Dolphin() monkey.accept(speak) // Ooh oo aa aa! lion.accept(hovoriť) // Roaaar! dolphin.accept(hovoriť) // Tuut tutt tuutt!
Návštevník umožňuje, aby existujúce objekty neboli upravované. S jeho pomocou môžete napríklad všetkým týmto zvieratám pridať možnosť skákať bez vytvárania ďalších metód.
Const jump = ( visitMonkey(opica) ( console.log("Skočil 20 stôp vysoko! na strom!") ), visitLion(lev) ( console.log("Skočil 7 stôp! Späť na zem!") ) , visitDolphin(delphin) ( console.log("Trochu kráčal po vode a zmizol") ) )
Monkey.accept(speak) // Ooh oo aa aa! monkey.accept(skok) // Vyskočil 20 stôp vysoko! na strom! lion.accept(hovoriť) // Roaaar! lion.accept(skok) // Skočil 7 stôp! Späť na zem! dolphin.accept(hovoriť) // Tuut tutt tuutt! dolphin.accept(skok) // Kráčal po vode a zmizol
StratégiaAk chcete usporiadať určitú množinu údajov, použite algoritmus bublinového triedenia. Dobre si poradí s malými objemami, no s veľkými spomaľuje. Quicksort má opačný problém. Potom sa rozhodnete zmeniť algoritmus v závislosti od veľkosti súboru. Toto je vaša stratégia.
Šablóna stratégie vám umožňuje prepínať použitý algoritmus v závislosti od situácie.
Príklad implementáciePrvotriedne funkcie vám pomôžu implementovať Stratégiu v JavaScripte.
Const bubbleSort = dataset => ( console.log("Sorting with bubble sort") // ... // ... return dataset ) const quickSort = dataset => ( console.log("Sorting with quick sort") / / ... // ... return dataset )
A toto je klient, ktorý môže použiť akúkoľvek stratégiu:
Const sorter = dataset => ( if(dataset.length > 5)( return quickSort ) else ( return bubbleSort ) )
Teraz môžete usporiadať polia:
Const longDataSet = const shortDataSet = const sorter1 = sorter(longDataSet) const sorter2 = sorter(shortDataSet) sorter1(longDataSet) // Triedenie pomocou rýchleho triedenia sorter2(shortDataSet) // Triedenie pomocou bublinového triedenia
ŠtátKreslíte v programe Paint. V závislosti od vášho výberu štetec mení svoj stav: maľuje červenou, modrou alebo akoukoľvek inou farbou.
Vzor Stav vám umožňuje zmeniť správanie triedy pri zmene stavu.
Príklad implementáciePoďme tvoriť textový editor, v ktorom môžete zmeniť stav textu - tučné, kurzíva atď.
Toto sú konverzné funkcie:
Const veľké písmená = inputString => inputString.toUpperCase() const smallcase = inputString => inputString.toLowerCase() const defaultTransform = inputString => inputString
A tu je samotný redaktor:
Trieda TextEditor ( constructor(transform) ( this._transform = transform ) setTransform(transform) ( this._transform = transform ) type(words) ( console.log(this._transform(words)) ) )
Môžete pracovať:
Const editor = nový TextEditor(predvolené Transformácia) editor.type("Prvý riadok") editor.setTransform(veľké písmená) editor.type("Druhý riadok") editor.type("Tretí riadok") editor.setTransform(malé písmená) editor.type ("Štvrtý riadok") editor.type("Piaty riadok") // Prvý riadok // DRUHÝ RIADOK // TRETÍ RIADOK // štvrtý riadok // piaty riadok
Metóda šablónyPostavíte dom podľa konkrétneho plánu: najprv základy, potom steny a až potom strecha. Poradie týchto krokov nemožno zmeniť, ale ich implementácia sa môže líšiť.
Metóda šablóny definuje "kostru" algoritmu, ale deleguje implementáciu krokov na podradené triedy.
Príklad implementácieVytvorme nástroj na testovanie, zostavovanie a nasadzovanie aplikácie.
Základná trieda definuje kostru zostavovacieho algoritmu:
Class Builder ( // Template method build() ( this.test() this.lint() this.assemble() this.deploy() ) )
A detské triedy sú špecifickou implementáciou každého kroku:
Trieda AndroidBuilder rozširuje Builder ( test() ( console.log("Spustenie testov Androidu") ) lint() ( console.log("Linting the android code") ) assemble () ( console.log("Assembling the android build" ) ) deploy() ( console.log("Nasadenie zostavy Androidu na server") ) ) trieda IosBuilder rozširuje Builder ( test() ( console.log("Spustenie testov ios") ) lint() ( console.log("Linting kód ios") ) zostaviť () ( console.log ("Zostavenie zostavy ios") ) nasadiť () ( console.log ("Nasadenie zostavy ios na server")) )
Poďme zostaviť projekt:
Const androidBuilder = new AndroidBuilder() androidBuilder.build() // Spustenie testov systému Android // Prepojenie kódu systému Android // Zostavenie zostavy systému Android // Nasadenie zostavy systému Android na server const iosBuilder = nový IosBuilder() iosBuilder.build() // Spustenie testov ios // Prepojenie kódu ios // Zostavenie zostavy ios // Nasadenie zostavy ios na server
- Preklad
Poznámka prekladateľa: Téma dedenia v JavaScripte je pre začiatočníkov jednou z najťažších. Pridaním novej syntaxe s kľúčovým slovom class sa pochopenie dedičnosti zjavne nezjednodušilo, hoci sa neobjavilo nič radikálne nové. Tento článok sa nedotýka nuancií implementácie prototypovej dedičnosti v JavaScripte, takže ak má čitateľ nejaké otázky, odporúčam prečítať si nasledujúce články: Základy a mylné predstavy o JavaScripte a Pochopenie OOP v JavaScripte [1. časť]
V prípade akýchkoľvek pripomienok k prekladu nás prosím kontaktujte v osobnej správe.
JavaScript je veľmi výkonný jazyk. Tak silný, že v ňom koexistujú mnohí rôznymi spôsobmi dizajn a tvorba predmetov. Každá metóda má svoje pre a proti a rád by som pomohol začiatočníkom prísť na to. Toto je pokračovanie môjho predchádzajúceho príspevku, Stop "kategorizácii" JavaScriptu. Dostal som veľa otázok a pripomienok s prosbou o príklady a práve za týmto účelom som sa rozhodol napísať tento článok.
Polia vytvorené pomocou hranatých zátvoriek majú niekoľko prototypov, vrátane Objekt.prototyp A Pole.prototyp. To znamená, že všetky vlastnosti a metódy Objekt.prototyp A Pole.prototyp dostupné pre všetky polia. Napríklad vlastnosti a metódy s rovnakým názvom .hodnota A .Natiahnuť, sú volané z najbližšieho prototypu, v tomto prípade z Pole.prototyp.
Definície prototypov a vytváranie objektov Metóda 1: Vzor konštruktora JavaScript má špeciálny typ funkcie nazývané konštruktory, ktoré fungujú rovnakým spôsobom ako konštruktory v iných jazykoch. Funkcie konštruktora sa volajú iba pomocou kľúčového slova Nový a priradiť vytvorený objekt ku kontextu funkcie konštruktora prostredníctvom kľúčového slova toto. Typický konštruktor môže vyzerať takto:function Animal(type)( this.type = type; ) Animal.isAnimal = function(obj, type)( if(!Animal.prototype.isPrototypeOf(obj))( return false; ) return type ? obj.type === typ: pravda; ); function Pes(meno, plemeno)( Zviera.volanie(toto, "pes"); toto.meno = meno; toto.plemeno = plemeno; ) Object.setPrototypeOf(Pes.prototyp, Zviera.prototyp); Dog.prototype.bark = function())( console.log("ruff, ruff"); ); Dog.prototype.print = function())( console.log("Pes " + toto.meno + " je " + toto.plemeno); ); Pes.jePes = function(obj)( return Animal.isAnimal(obj, "pes"); );
Použitie tohto konštruktora vyzerá rovnako ako vytvorenie objektu v iných jazykoch:
var sparkie = nový pes("Sparkie", "Border kólia"); sparkie.name; // "Sparkie" sparkie.breed; // "Border Collie" sparkie.bark(); // konzola: "ruff, ruff" sparkie.print(); // konzola: "Pes Sparkie je Border Collie" Dog.isDog(sparkie); // pravda
štekať A vytlačiť prototypové metódy, ktoré sa aplikujú na všetky objekty vytvorené pomocou konštruktora pes. Vlastnosti názov A plemeno sú inicializované v konštruktore. Je bežnou praxou, že všetky metódy sú definované v prototype a vlastnosti inicializované konštruktorom Metóda 2: Definovanie triedy v ES2015 (ES6) Kľúčové slovo trieda bol od začiatku rezervovaný v JavaScripte a teraz je konečne čas ho použiť. Definície tried v JavaScripte sú podobné ako v iných jazykoch.
class Zviera ( konstruktor(typ)( this.type = typ; ) static isAnimal(obj, type)( if(!Animal.prototype.isPrototypeOf(obj))( return false; ) return type ? obj.type === type : true; ) ) trieda Pes rozširuje Zviera ( konštruktér(meno, plemeno)( super("pes"); this.meno = meno; toto.plemeno = plemeno; ) kôra())( console.log("hrbík, ruch" " ); ) print())( console.log("Pes " + toto.meno + " je " + toto.plemeno); ) static isDog(obj)( return Animal.isAnimal(obj, "pes") ;))
Mnoho ľudí považuje túto syntax za výhodnú, pretože kombinuje konštruktor a deklaráciu statických a prototypových metód v jednom bloku. Použitie je úplne rovnaké ako v predchádzajúcej metóde.
var sparkie = nový pes("Sparkie", "Border kólia"); Metóda 3: Explicitná deklarácia prototypu, Object.create, Factory metóda Táto metóda ukazuje, aká je v skutočnosti nová syntax kľúčového slova trieda používa prototypovú dedičnosť. Táto metóda vám tiež umožňuje vytvárať nový objekt bez použitia operátora Nový.
var Animal = ( create(type)( var animal = Object.create(Animal.prototype); animal.type = type; return animal; ), isAnimal(obj, type)( if(!Animal.prototype.isPrototypeOf(obj)) )( return false; ) return type ? obj.type === typ: true; ), prototyp: () ); var Pes = ( create(meno, plemeno)( var proto = Object.assign(Animal.create("pes"), Dog.prototype); var dog = Object.create(proto); dog.name = meno; pes. plemeno = plemeno; vrátiť psa; ), isPes(obj)( return Animal.isAnimal(obj, "pes"); ), prototyp: ( bark())( console.log("ruff, ruff"); ), tlač ( )( console.log("Pes " + toto.meno + " je " + toto.plemeno); ) ) );
Táto syntax je vhodná, pretože prototyp je deklarovaný explicitne. Je jasné, čo je definované v prototype a čo je definované v samotnom objekte. Metóda Objekt.vytvoriť je pohodlné, pretože vám umožňuje vytvoriť objekt zo zadaného prototypu. Kontrola s .isPrototypeOf stále funguje v oboch prípadoch. Využitie je rôzne, ale nie nadmerné:
var sparkie = Dog.create("Sparkie", "Border kólia"); sparkie.name; // "Sparkie" sparkie.breed; // "Border Collie" sparkie.bark(); // konzola: "ruff, ruff" sparkie.print(); // konzola: "Pes Sparkie je Border Collie" Dog.isDog(sparkie); // true Metóda 4: Object.create, továreň najvyššej úrovne, odložený prototyp Táto metóda je miernou modifikáciou metódy 3, kde samotná trieda je továreň, na rozdiel od prípadu, keď je trieda objektom s továrenskou metódou . Podobne ako v príklade konštruktora (metóda 1), ale používa továrenskú metódu a Objekt.vytvoriť.
function Zviera(typ)( var zviera = Objekt.vytvor(Zviera.prototyp); Typ zvieraťa = typ; vrátiť zviera; ) Zviera.isZviera = function(obj, typ)( if(!Zviera.prototyp.isPrototypOf(obj) )( return false; ) return type ? obj.type === type: true; ); Zviera.prototyp = (); function Dog(meno, plemeno)( var proto = Object.assign(Zviera("pes"), Pes.prototyp); var pes = Object.create(proto); dog.name = meno; pes.plemeno = plemeno; návrat pes; ) Pes.jePes = function(obj)( return Animal.isAnimal(obj, "pes"); ); Dog.prototype = ( bark())( console.log("ruff, ruff"); ), print())( console.log("Pes " + toto.meno + " je " + toto.plemeno) ;) );
Táto metóda je zaujímavá, pretože je podobná prvej metóde, ale nevyžaduje kľúčové slovo Nový a spolupracuje s operátorom instanceOf. Použitie je rovnaké ako v prvej metóde, ale bez použitia kľúčového slova Nový:
var sparkie = Pes("Sparkie", "Border kólia"); sparkie.name; // "Sparkie" sparkie.breed; // "Border Collie" sparkie.bark(); // konzola: "ruff, ruff" sparkie.print(); // konzola: "Pes Sparkie je Border Collie" Dog.isDog(sparkie); // true Porovnávacia metóda 1 vs. metóda 4 Existuje len veľmi málo dôvodov, prečo použiť metódu 1 namiesto metódy 4. Metóda 1 vyžaduje použitie kľúčového slova Nový, alebo pridaním nasledujúcej kontroly do konštruktora:
if(!(this instanceof Foo))( return new Foo(a, b, c); )
V tomto prípade je použitie jednoduchšie Objekt.vytvoriť továrenskou metódou. Tiež nemôžete používať funkcie Funkcia#hovor alebo Funkcia#použiť s funkciami konštruktora, pretože prepisujú kontext kľúčového slova toto. Vyššie uvedená kontrola môže tento problém vyriešiť, ale ak potrebujete vopred pracovať s neznámym počtom argumentov, mali by ste použiť továrenskú metódu Metóda 2 vs Metóda 3 Rovnaké úvahy o konštruktoroch a operátoroch Nový ktoré sú uvedené vyššie, platia aj v tomto prípade. Kontrola s instanceof vyžaduje sa, ak sa použije nová syntax trieda bez použitia operátora Nový alebo sa používajú Funkcia#hovor alebo Funkcia#použiť.Môj názor Programátor by sa mal snažiť o prehľadnosť vo svojom kóde. Syntax metódy 3 veľmi jasne ukazuje, čo sa vlastne deje. Tiež uľahčuje používanie viacnásobného dedenia a hromadenia. Keďže operátor Nový porušuje princíp otvorené/uzavreté z dôvodu nekompatibility s uplatniť alebo hovor, treba sa tomu vyhnúť. Kľúčové slovo trieda skrýva prototypovú povahu dedičnosti v JavaScripte za maskou systému tried.
„Jednoduché je lepšie ako sofistikované“ a používanie tried, pretože sa to považuje za „sofistikovanejšie“, je len zbytočná technická bolesť hlavy.
Použitie Objekt.vytvoriť je výraznejšie a jasnejšie ako použitie kopule Nový A toto. Okrem toho je prototyp uložený v objekte, ktorý môže byť mimo kontextu samotnej továrne, a preto ho možno jednoduchšie upravovať a rozširovať pridávaním metód. Rovnako ako triedy v ES6.
Kľúčové slovo trieda, môže byť najškodlivejšou vlastnosťou JavaScriptu. Nesmierne si vážim brilantných a veľmi pracovitých ľudí, ktorí boli zapojení do procesu písania štandardu, ale aj brilantní ľudia niekedy urobia nesprávne veci. - Eric Elliott
Pridávať niečo zbytočné a možno škodlivé, v rozpore so samotnou povahou jazyka, je nepremyslené a chybné.
Ak sa rozhodnete použiť trieda, úprimne dúfam, že nikdy nebudem musieť pracovať s vaším kódom. Podľa môjho názoru by sa vývojári mali vyhnúť používaniu konštruktérov, trieda A Nový a používať metódy, ktoré sú prirodzenejšie pre paradigmu a architektúru jazyka. Slovník pojmov Object.assign(a, b) skopíruje všetky vymenovateľné vlastnosti objektu b namietať a a potom vráti objekt a
Object.create(proto) vytvorí nový objekt zo zadaného prototypu preto
Object.setPrototypeOf(obj, proto) mení vnútorný majetok [] objekt obj na preto
Štítky: Pridajte štítky
WordPress používa šablóny všade a Javascript nie je výnimkou. V tomto príspevku budeme hovoriť o schopnosti zabudovanej do WordPress vytvárať šablóny HTML, ktoré potom možno použiť v JS. Tieto šablóny sa veľmi ľahko vytvárajú a používajú, rovnako ako mnoho iných vecí vo WordPress.
V Javascripte je možné vytvárať šablóny mnohými spôsobmi, dokonca pre ne existuje samostatná špecifikácia s názvom Moustache. Je implementovaný v mnohých jazykoch vrátane Javascriptu. Napríklad knižnica Handlebars túto špecifikáciu využíva a dokonca ju trochu rozširuje. Alebo populárna miniknižnica Underscore.
Od verzie 3.5 má WordPress už vo svojom jadre pohodlný šablónový engine pre JS. Používa sa napríklad v správcovskom paneli pri vytváraní blokov pre zavádzač médií. Na základe vyššie uvedenej knižnice Underscore bola syntax mierne upravená, aby bola viac v súlade so špecifikáciou Moustache.
Na vytváranie šablón vo WordPress existuje metóda wp.template
wp.template(id)Vytvorí objekt šablóny z kódu HTML. Ak chcete získať hotový kód HTML na použitie v JS, musíte do vytvoreného objektu odovzdať údaje na vyplnenie šablóny.
NávratyFunkcia. Funkcia na odovzdanie údajov na interpoláciu šablóny.
Použitie šablóny var = wp.template(id); var HTML = šablóna(údaje); id (riadok)ID prvku HTML, ktorý obsahuje kód HTML šablóny. Element HTML musí mať tu špecifikovaný atribút id s predponou tmpl-.
Napríklad, ak tu zadáte foo, prvok HTML musí mať id id="tmpl-foo" .
Údaje (objekt) Dátový objekt JS, ktorý sa použije na vyplnenie šablóny. Napríklad: ( text: "Dobrý deň") .
Výplň vzoru (interpolácia)- (((data.unescaped))) - nevyčistené dáta.
- ((data.escaped)) - vymazané dáta.
- - proces js (eval).
údaje v šablóne sú zdrojovým údajovým objektom. V šablóne musíte použiť dátový kľúč.
Aby sa zhodovala dátová štruktúra vrátená funkciami wp_send_json_success() a wp_send_json_error(), wp.template zabalí všetky prijaté dáta do dátovej premennej. Preto pred každým parametrom v šablóne musíte zadať údaje. , inak dostaneme chybu: (vlastnosť) nie je definovaná .
Správne (((data.name)))
Nesprávne (((názov)))
Príklad šablónyBude to jednoducho výstup.
Zobrazme hodnotu premennej escapedValue ((data.escapedValue)).
Ak údaje obsahujú značky, vytlačte ich bez escapovania:
(((data.unescapedValue)))Keď potrebujete vykonať nejakú logiku.
Vytlačí sa len vtedy, ak data.trueValue = true.
Vytvorenie a vytvorenie šablóny Vytvorenie šablónyAby sa šablóna žiadnym spôsobom neobjavila v strome DOM, je zvykom vytvoriť ju v značke skriptu s označením typu type="text/html" .
Dobrý deň (((data.name)))
Atribút id musí začínať tmpl- , čokoľvek za touto predponou sa potom použije vo funkcii wp.template("my-template").
Vytvorenie šablóny v značke skriptu je hack, ktorý je skvelý na vytváranie html prvok ale, ktoré prehliadač žiadnym spôsobom nepoužíva. Keď je zadaný typ, ktorý je pre prehliadač nezrozumiteľný, jednoducho ignoruje značku html, čo je to, čo potrebujeme.
Šablónu je možné vytvoriť aj v akomkoľvek inom HTML elemente (napríklad v , ktorý môže byť potom skrytý), jediné, čo musíte urobiť, je zadať atribút id.
Existuje aj špeciálny na vytváranie šablón HTML tag nie je však podporovaný v IE. Ale celkovo je to celkom relevantné.
Generovanie šablónywp.template() vracia funkciu, takže sa nepokúšajte odovzdať výsledok elementu html alebo vytlačiť výsledok do konzoly. Zvyčajne sa výsledok wp.template() odovzdá do premennej a potom sa táto premenná použije ako funkcia a odovzdá sa dáta, ktorými by mala byť šablóna naplnená.
Príklad (šablóna zobrazená vyššie)
// JS var template = wp.template("my-template"), data = ( meno: "Victor" ); jQuery(".môj-prvok").html(šablóna(údaje));
Výsledkom je, že v HTML dostaneme:
Ahoj Viktor
Príklad AJAX komentovania pomocou šablónyVytvorte šablónu a vložte skript do súboru functions.php témy: