Sve dok se razvijate jednostavne aplikacije u Javascriptu, nećete imati puno problema s prikazom podataka na web stranici.
No kada je u pitanju obrada velike količine podataka koji su pohranjeni u nizovima i objektima i koji se prema određenim pravilima moraju prikazati na stranici, tu mogu nastati poteškoće.
Na primjer, na stranici trebate prikazati popis korisnika web-mjesta sa svim njihovim parametrima (na primjer, ID, ime. Također može biti dob, spol itd.). Pretpostavimo da se ti podaci nalaze unutar objekta usersData
Var usersData = [ ( ime: "Dima", id: 1 ), ( ime: "Katy", id: 2 ), ( ime: "Lena", id: 3 ) ];
Da biste riješili ovaj problem, možete koristiti petlju, a rješenje bi moglo izgledati ovako:
For(var i=0; i" + userData.name[i] + ""; }
Složite se da samo programer koji zna pisati u Javascriptu može raditi s ovim oblikom notacije. Dajte takav kod dizajneru izgleda i on tu ništa neće razumjeti.
Ali bit će mnogo jasnije prikazati podatke u ovom obliku:
Čak i osoba koja poznaje samo HTML jezik za označavanje već može razumjeti ovaj oblik snimanja. Intuitivno, možete shvatiti da će odgovarajuće vrijednosti varijable biti zamijenjene u vitičastim zagradama.
Ovaj oblik snimanja postaje moguć korištenjem tzv. šablona.
Predložak je određeni predložak u HTML kodu, koji je napisan prema određenim pravilima. Kada Javascript kod počne komunicirati s takvim predloškom, kod predloška će se pretvoriti u HTML kod ili čvorove DOM stabla na stranici.
Sintaksa predložaka u Javascriptu može biti različita. Jedinstveni standard ne, i sve će ovisiti o tome koju biblioteku ili dodatak koristite.
Evo predloška koji stvara jelovnik na web mjestu:
Ovdje se umjesto vitičastih zagrada koristi ova oznaka:
Evo još jednog primjera predloška koji zamjenjuje odgovarajuće vrijednosti za CSS stilovi, ovisno o radnjama koje korisnik izvodi.
MyButton ( box-shadow: ; pozadina:-webkit-gradient(linearno, lijevo gore, lijevo dolje, color-stop(0.05, ), color-stop(1, )); background:linear-gradient(do dna, 5% , 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="", endColorstr="",GradientType=0);
Ukratko, pogledajmo koje će nam prednosti dati predlošci:
Intuitivni kod, čak i za neprogramere;
Skraćeniji oblik zapisa;
Podaci, javascript kod i izlaz na stranice odvojeni su jedni od drugih, što ih čini mnogo lakšim za upravljanje.
Općenito, hoćete li koristiti Javascript predloške na web stranicama ovisi o vama. Već sam donio odluku za sebe i već ih počinjem koristiti u nekim svojim razvojima.
Ponekad nije poželjno izravno instancirati klasu. Tada pribjegavamo generativnim obrascima, koji mogu odabrati optimalni mehanizam instanciranja.
Jednostavna tvornicaSami izraditi vrata pri gradnji kuće bilo bi prilično teško, pa ih u trgovini nabavite gotova.
Uzorak Jednostavna tvornica proizvodi potrebnu kopiju bez zamaranja klijenta zamršenostima ovog procesa.
Primjer implementacijeKreirajmo implicitno sučelje za sva vrata:
/* Door getWidth() getHeight() */ class WoodenDoor ( constructor(width, height)( this.width = width this.height = height ) getWidth() ( return this.width ) getHeight() ( return this.height ) )
Organizirati ćemo tvornicu koja će ih proizvoditi:
Const DoorFactory = ( makeDoor: (širina, visina) => nova DrvenaVrata(širina, visina) )
To je to, možete raditi:
Konst vrata = DoorFactory.makeDoor(100, 200) console.log("Širina:", door.getWidth()) console.log("Visina:", door.getHeight())
Uzorak je koristan ako stvaranje objekta zahtijeva neku logiku. Ima smisla premjestiti ponavljajući kod u zasebnu Simple Factory.
Tvornička metodaVoditelj regrutiranja radi s kandidatima za različita slobodna radna mjesta. Umjesto da ulazi u zamršenost svake pozicije, tehnički razgovor povjerava kolegama stručnjacima.
Ovaj uzorak omogućuje stvaranje različitih varijacija objekta bez zagađivanja konstruktora nepotrebnim kodom.
Primjer implementacijePočnimo sa samim hamburgerom:
Class Burger ( konstruktor(graditelj) ( this.size = builder.size this.cheeze = builder.cheeze || false this.feferoni = builder.fepperoni || false this.lettuce = builder.lettuce || false this.tomato = builder .rajčica || lažno ))
A evo i Graditelja:
Klasa BurgerBuilder ( konstruktor(veličina) ( this.size = veličina ) addPepperoni() ( this.pepperoni = true vrati ovo ) addLettuce() ( this.lettuce = true vrati ovo ) addCheeze() ( this.cheeze = true vrati ovo ) addTomato() ( this.tomato = true return this ) build() ( return new Burger(this) ) )
Voila! Evo našeg hamburgera:
Const burger = (novi BurgerBuilder(14)) .addPepperoni() .addLettuce() .addTomato() .build()
Uzorak Builder potreban je ako objekt može postojati u različitim varijacijama ili se proces instanciranja sastoji od nekoliko koraka.
SamacDržava mora imati jednog predsjednika, inače će biti kaos.
Ovaj uzorak omotava objekt i dinamički mijenja njegovo ponašanje.
Primjer implementacijeUzmimo za primjer kavu. Najjednostavnija kava koja implementira odgovarajuće sučelje:
/* Sučelje za kavu: getCost() getDescription() */ class SimpleCoffee( getCost() ( return 10 ) getDescription() ( return "Simple coffee") )
Želimo imati mogućnost dodavanja raznih aditiva u kavu, za to ćemo napraviti neke dekoratore:
Klasa MilkCoffee ( konstruktor(kava) ( this.coffee = kava ) getCost() ( return this.coffee.getCost() + 2 ) getDescription() ( return this.coffee.getDescription() + ", milk") ) klasa WhipCoffee ( konstruktor(kava) ( this.coffee = kava ) getCost() ( return this.coffee.getCost() + 5 ) getDescription() ( return this.coffee.getDescription() + ", whip" ) ) class VanillaCoffee ( konstruktor (kava) ( this.coffee = kava ) getCost() ( return this.coffee.getCost() + 3 ) getDescription() ( return this.coffee.getDescription() + ", vanilla" ) )
Sada možete napraviti kavu po svom ukusu:
Neka someCoffee someCoffee = 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())// Obična kava, mlijeko someCoffee = novi WhipCoffee(someCoffee) console.log(someCoffee.getCost())// 17 console.log(someCoffee.getDescription() )// Obična kava, mlijeko, vrhnje someCoffee = new VanillaCoffee(someCoffee) console.log(someCoffee.getCost())// 20 console.log(someCoffee.getDescription())// Obična kava, mlijeko, vrhnje, vanilija
FasadaDa biste uključili računalo, samo pritisnite gumb. Vrlo je jednostavno, ali postoji puno složenih stvari koje se događaju unutar računala koje se uključuje. Jednostavno sučelje složenog sustava je Fasada.
Primjer implementacijeKreirajmo računalni razred:
Class Computer ( getElectricShock() ( console.log("Ouch!") ) makeSound() ( console.log("Beep biep!") ) showLoadingScreen() ( console.log("Loading..") ) bam() ( console.log("Spremno za upotrebu!") ) closeEverything() ( console.log("Bup bup bup buzzzz!") ) sooth() ( console.log("Zzzzz") ) pullCurrent() ( konzola. zapisnik ("Haaah!") ) )
i jednostavna fasada zbog svojih složenih funkcija:
Klasa ComputerFacade ( konstruktor(računalo) ( ovo.računalo = računalo ) turnOn() ( this.computer.getElectricShock() this.computer.makeSound() this.computer.showLoadingScreen() this.computer.bam() ) turnOff() ( this.computer.closeEverything() this.computer.pullCurrent() this.computer.sooth() ) )
Ovo znatno olakšava rad s računalom:
Const računalo = novo ComputerFacade(novo računalo()) computer.turnOn() // Jao! Bip bip! Loading.. Spremno za korištenje! computer.turnOff() // Bup bup buzz! Haah! Zzzzz
OportunistaU međugradskim vlakovima voda za tople napitke kuha se u velikim posudama – za sve odjednom. To vam omogućuje uštedu električne energije (ili plina).
Na stranicama za traženje poslova možete se pretplatiti na opcije poslova koje vas zanimaju. Kada se pojavi odgovarajuća ponuda, stranica vam šalje obavijest.
Uzorak promatrača omogućuje vam da obavijestite sve zainteresirane objekte o promjenama koje su se dogodile.
Primjer implementacijePristupnici žele primati obavijesti:
Const JobPost = title = (( title: title )) class JobSeeker ( constructor(name) ( this._name = name ) notify(jobPost) ( console.log(this._name, "dobio je obavijest o novom oglasu:", jobPost.title) ) )
A oglasna ploča može slati ove obavijesti:
Klasa JobBoard ( constructor() ( this._subscribers = ) subscribe(jobSeeker) ( this._subscribers.push(jobSeeker) ) addJob(jobPosting) ( this._subscribers.forEach(subscriber = ( subscriber.notify(jobPosting) )) ) )
// kreiraj pretplatnike const jonDoe = new JobSeeker("John Doe") const janeDoe = new JobSeeker("Jane Doe") const kaneDoe = new JobSeeker("Kane Doe") // kreiraj oglasnu ploču // prijavi kandidate const jobBoard = new JobBoard() jobBoard.subscribe(jonDoe) jobBoard.subscribe(janeDoe) // obavještavanje pretplatnika o novom slobodnom radnom mjestu jobBoard.addJob(JobPost("Software Engineer")) // John Doe je obaviješten o novoj objavi: softver Inženjer // Jane Doe je obaviješten o novoj objavi: softverski inženjer
PosjetiteljZa putovanje u inozemstvo potrebno je ishoditi dozvolu (vizu). No jednom u zemlji možete sigurno posjetiti razna mjesta bez traženja dodatnog dopuštenja. Samo trebate znati o njima.
Uzorak posjetitelja omogućuje vam dodavanje dodatnih operacija objektima bez mijenjanja njihovog izvornog koda.
Primjer implementacijeSimulirajmo zoološki vrt s različiti tipoviživotinje:
Klasa Majmun ( shout() ( console.log("Ooh oo aa aa!") ) accept(operation) ( operation.visitMonkey(this) ) class Lion ( roar() ( console.log("Roaaar!")) accept (operation) ( operation.visitLion(this) ) ) class Dolphin ( speak() ( console.log("Tuut tuttu tuutt!") ) accept(operation) ( operation.visitDolphin(this) ) )
Sada želimo slušati kakve zvukove proizvode. Da bismo to učinili, stvorit ćemo Posjetitelja:
Const speak = ( visitMonkey(monkey)( monkey.shout()), visitLion(lion)( lion.roar()), visitDolphin(dolphin)( dolphin.speak() ) )
Jednostavno pristupa svakoj klasi i poziva željenu metodu:
Const monkey = new Monkey() const lion = new Lion() const dolphin = new Dolphin() monkey.accept(speak) // Ooh oo aa aa! lav.prihvati(govori) // Roaaar! dolphin.accept(speak) // Tuut tutt tuutt!
Posjetitelj dopušta da se postojeći objekti ne mijenjaju. Uz njegovu pomoć možete, na primjer, svim tim životinjama dodati mogućnost skakanja bez stvaranja dodatnih metoda.
Const jump = ( visitMonkey(monkey) ( console.log("Skočio 20 stopa visoko! na drvo!") ), visitLion(lion) ( console.log("Skočio 7 stopa! Ponovno na zemlju!") ) , visitDolphin(dupin) ( console.log("Hodao malo po vodi i nestao") ) )
Majmun.prihvati(govori) // Ooh oo aa aa! monkey.accept(jump) // Skočio 20 stopa visoko! na drvo! lav.prihvati(govori) // Roaaar! lion.accept(jump) // Skočio 7 stopa! Natrag na zemlju! dolphin.accept(speak) // Tuut tutt tuutt! dolphin.accept(jump) // Hodao malo po vodi i nestao
StrategijaDa biste organizirali neki skup podataka, koristite algoritam sortiranja u obliku mjehurića. Dobro se nosi s malim količinama, ali usporava s velikima. Quicksort ima suprotan problem. Zatim odlučite promijeniti algoritam ovisno o veličini skupa. Ovo je vaša strategija.
Predložak strategije omogućuje vam promjenu korištenog algoritma ovisno o situaciji.
Primjer implementacijePrvorazredne funkcije pomoći će vam implementirati strategiju u JavaScriptu.
Const bubbleSort = dataset => ( console.log("Sortiranje s bubble sortiranjem") // ... // ... return dataset ) const quickSort = dataset => ( console.log("Sorting with quick sort") / / ... // ... povratni skup podataka )
A ovo je klijent koji može koristiti bilo koju strategiju:
Const sorter = dataset => ( if(dataset.length > 5)( return quickSort ) else ( return bubbleSort ) )
Sada možete sortirati nizove:
Const longDataSet = const shortDataSet = const sorter1 = sorter(longDataSet) const sorter2 = sorter(shortDataSet) sorter1(longDataSet) // Sortiranje s brzim sortiranjem sorter2(shortDataSet) // Sortiranje s sortiranjem u obliku mjehurića
državaCrtate u Paintu. Ovisno o vašem izboru, kist mijenja stanje: boji crvenom, plavom ili bilo kojom drugom bojom.
Uzorak stanja omogućuje vam promjenu ponašanja klase kada se stanje promijeni.
Primjer implementacijeKreirajmo uređivač teksta, u kojem možete promijeniti stanje teksta - podebljano, kurziv itd.
Ovo su funkcije pretvorbe:
Const upperCase = inputString => inputString.toUpperCase() const lowerCase = inputString => inputString.toLowerCase() const defaultTransform = inputString => inputString
A evo i samog urednika:
Klasa TextEditor ( konstruktor(transform) ( this._transform = transform ) setTransform(transform) ( this._transform = transform ) type(words) ( console.log(this._transform(words)) ) )
Možete raditi:
Const editor = new TextEditor(defaultTransform) editor.type("Prvi red") editor.setTransform(upperCase) editor.type("Drugi red") editor.type("Treći red") editor.setTransform(lowerCase) editor.type ("Četvrti redak") editor.type("Peti redak") // Prvi redak // DRUGI REDAK // TREĆI REDAK // četvrti redak // peti redak
Metoda predloškaKuću gradite prema određenom planu: prvo temelj, zatim zidovi i tek onda krov. Redoslijed ovih koraka ne može se promijeniti, ali njihova provedba može varirati.
Metoda predloška definira "kostur" algoritma, ali delegira implementaciju koraka podređenim klasama.
Primjer implementacijeKreirajmo alat za testiranje, izgradnju i implementaciju aplikacije.
Osnovna klasa definira kostur algoritma za sklapanje:
Class Builder ( // Template method build() ( this.test() this.lint() this.assemble() this.deploy() ) )
A podređene klase su specifična implementacija svakog koraka:
Klasa AndroidBuilder proširuje Builder ( test() ( console.log("Pokretanje android testova")) lint() ( console.log("Linting android koda")) assemble() ( console.log("Sastavljanje android builda" ) ) deploy() ( console.log("Primjena android međuverzije na poslužitelj") ) ) klasa IosBuilder extends Builder ( test() ( console.log("Izvođenje ios testova") ) lint() ( console.log("Linting) ios kod") ) assemble() ( console.log("Sastavljanje ios međuverzije") ) deploy() ( console.log("Ispostavljanje ios međuverzije na poslužitelj") ) )
Sastavimo projekt:
Const androidBuilder = new AndroidBuilder() androidBuilder.build() // Izvođenje android testova // Linting android koda // Sastavljanje android builda // Implementacija android builda na poslužitelj const iosBuilder = new IosBuilder() iosBuilder.build() // Pokretanje ios testova // Linting ios koda // Sastavljanje ios builda // Implementacija ios builda na poslužitelj
- Prijevod
Napomena prevoditelja: Tema nasljeđivanja u JavaScriptu jedna je od najtežih za početnike. S dodatkom nove sintakse s ključnom riječi class, razumijevanje nasljeđivanja očito nije postalo lakše, iako se nije pojavilo ništa radikalno novo. Ovaj članak ne dotiče nijanse implementacije prototipskog nasljeđivanja u JavaScriptu, pa ako čitatelj ima bilo kakvih pitanja, preporučujem da pročita sljedeće članke: Osnove i zablude o JavaScriptu i Razumijevanje OOP-a u JavaScriptu [1. dio]
Za sve komentare vezane uz prijevod obratite nam se osobnom porukom.
JavaScript je vrlo moćan jezik. Toliko moćan da mnogi u njemu koegzistiraju na razne načine dizajn i izrada objekata. Svaka metoda ima svoje prednosti i mane i želio bih pomoći početnicima da to shvate. Ovo je nastavak mog prethodnog posta, Prestanite "kategorizirati" JavaScript. Primio sam mnoga pitanja i komentare koji traže primjere, i upravo u tu svrhu odlučio sam napisati ovaj članak.
Nizovi stvoreni uglatim zagradama imaju nekoliko prototipova, uključujući Objekt.prototip I Niz.prototip. To znači da sva svojstva i metode Objekt.prototip I Niz.prototip dostupno za sve nizove. Svojstva i metode istog imena, na primjer .vrijednost I .ToString, pozivaju se iz najbližeg prototipa, u ovom slučaju iz Niz.prototip.
Definicije prototipa i 1. metoda stvaranja objekta: Uzorak konstruktora JavaScript ima posebnu vrstu funkcije koja se zove konstruktori, a koja djeluje na isti način kao konstruktori u drugim jezicima. Funkcije konstruktora pozivaju se samo pomoću ključne riječi novi i povezati kreirani objekt s kontekstom funkcije konstruktora putem ključne riječi ovaj. Tipični konstruktor može izgledati ovako:funkcija Animal(type)( this.type = type; ) Animal.isAnimal = function(obj, type)( if(!Animal.prototype.isPrototypeOf(obj))( return false; ) return type ? obj.type === tip: istina; ); funkcija Pas(ime, pasmina)( Animal.call(ovo, "pas"); this.name = ime; this.breed = pasmina; ) Object.setPrototypeOf(Dog.prototype, Animal.prototype); Dog.prototype.bark = function())( console.log("ruff, ruff"); ); Dog.prototype.print = function())( console.log("Pas " + this.name + " je " + this.breed); ); Pas.isDog = function(obj)( return Animal.isAnimal(obj, "pas"); );
Korištenje ovog konstruktora izgleda isto kao stvaranje objekta na drugim jezicima:
var sparkie = new Dog("Sparkie", "Border Collie"); sparkie.name; // "Sparkie" sparkie.breed; // "Border Collie" sparkie.bark(); // konzola: "ruff, ruff" sparkie.print(); // konzola: "Pas Sparkie je Border Collie" Dog.isDog(sparkie); // istina
kora I ispisati metode prototipa koje se primjenjuju na sve objekte stvorene pomoću konstruktora Pas. Svojstva Ime I vrsta inicijaliziraju se u konstruktoru. Uobičajena je praksa da se sve metode definiraju u prototipu, a svojstva inicijalizira konstruktor. Metoda 2: Definiranje klase u ES2015 (ES6) Ključna riječ razreda je od samog početka rezerviran u JavaScriptu i sada je konačno došlo vrijeme da ga upotrijebite. Definicije klasa u JavaScriptu slične su drugim jezicima.
class Animal ( constructor(type)( this.type = type; ) static isAnimal(obj, type)( if(!Animal.prototype.isPrototypeOf(obj))( return false; ) return type ? obj.type === type : true; ) ) class Dog extends Animal ( constructor(name, breed)( super("dog"); this.name = name; this.breed = breed; ) bark())( console.log("ruff, ruff " ); ) print())( console.log("Pas " + this.name + " je " + this.breed); ) static isDog(obj)( return Animal.isAnimal(obj, "dog") ;))
Mnogi ljudi ovu sintaksu smatraju zgodnom jer kombinira konstruktor i deklaraciju statičkih i prototipskih metoda u jednom bloku. Upotreba je potpuno ista kao u prethodnoj metodi.
var sparkie = new Dog("Sparkie", "Border Collie"); Metoda 3: Eksplicitna deklaracija prototipa, Object.create, tvornička metoda Ova metoda pokazuje što je zapravo sintaksa nove ključne riječi razreda koristi prototipsko nasljeđivanje. Ova metoda također vam omogućuje stvaranje novi objekt bez korištenja operatera novi.
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 === type: true; ), prototype: () ); var Pas = ( create(name, breed)( var proto = Object.assign(Animal.create("dog"), Dog.prototype); var dog = Object.create(proto); dog.name = name; dog. pasmina = pasmina; vrati psa; ), isDog(obj)( return Animal.isAnimal(obj, "pas"); ), prototip: ( bark())( console.log("ruff, ruff"); ), ispis ( )( console.log("Pas " + this.name + " je " + this.breed); ) ) );
Ova sintaksa je prikladna jer je prototip deklariran eksplicitno. Jasno je što je definirano u prototipu, a što u samom objektu. metoda Objekt.stvoriti je zgodan jer vam omogućuje stvaranje objekta iz određenog prototipa. Provjera sa .isPrototypeOf i dalje radi u oba slučaja. Primjene su različite, ali ne pretjerane:
var sparkie = Dog.create("Sparkie", "Border Collie"); sparkie.name; // "Sparkie" sparkie.breed; // "Border Collie" sparkie.bark(); // konzola: "ruff, ruff" sparkie.print(); // konzola: "Pas Sparkie je Border Collie" Dog.isDog(sparkie); // istina Metoda 4: Object.create, tvornica najviše razine, odgođeni prototip Ova metoda je mala modifikacija metode 3, gdje je sama klasa tvornica, za razliku od slučaja gdje je klasa objekt s tvorničkom metodom . Slično primjeru konstruktora (metoda 1), ali koristi tvorničku metodu i Objekt.stvoriti.
function Animal(type)( var animal = Object.create(Animal.prototype); animal.type = type; return animal; ) Animal.isAnimal = function(obj, type)( if(!Animal.prototype.isPrototypeOf(obj) )( return false; ) return type ? obj.type === type: true; ); Animal.prototype = (); funkcija Pas(ime, pasmina)( var proto = Object.assign(Animal("pas"), Pas.prototip); var dog = Object.create(proto); dog.name = ime; dog.breed = pasmina; return pas; ) Pas.isDog = funkcija(obj)( return Animal.isAnimal(obj, "pas"); ); Dog.prototype = ( bark())( console.log("ruff, ruff"); ), print())( console.log("Pas " + this.name + " je " + this.breed) ;) );
Ova metoda je zanimljiva jer je slična prvoj metodi, ali ne zahtijeva ključnu riječ novi i radi s operaterom instanceOf. Upotreba je ista kao u prvoj metodi, ali bez korištenja ključne riječi novi:
var sparkie = Pas("Sparkie", "Border Collie"); sparkie.name; // "Sparkie" sparkie.breed; // "Border Collie" sparkie.bark(); // konzola: "ruff, ruff" sparkie.print(); // konzola: "Pas Sparkie je Border Collie" Dog.isDog(sparkie); // prava usporedba Metoda 1 nasuprot Metode 4 Postoji vrlo malo razloga za korištenje Metode 1 umjesto Metode 4. Metoda 1 zahtijeva upotrebu ključne riječi novi, ili dodavanje sljedeće provjere u konstruktor:
if(!(this instanceof Foo))( return new Foo(a, b, c); )
U ovom slučaju je lakše koristiti Objekt.stvoriti s tvorničkom metodom. Također ne možete koristiti funkcije Funkcija#poziv ili Funkcija#primjeni s funkcijama konstruktora jer nadjačavaju kontekst ključne riječi ovaj. Gornja provjera može riješiti ovaj problem, ali ako trebate raditi s unaprijed nepoznatim brojem argumenata, trebali biste upotrijebiti tvorničku metodu. Metoda 2 nasuprot Metoda 3 Isto razmišljanje o konstruktorima i operatoru novi koje su gore navedene također su primjenjive u ovom slučaju. Provjera sa instanceof potrebno ako se koristi nova sintaksa razreda bez korištenja operatera novi ili se koriste Funkcija#poziv ili Funkcija#primjeni.Moje mišljenje Programer bi trebao težiti jasnoći svog koda. Sintaksa metode 3 vrlo jasno pokazuje što se zapravo događa. Također olakšava korištenje višestrukog nasljeđivanja i nasljeđivanja stogova. Budući da operater novi narušava načelo otvoreno/zatvoreno zbog nekompatibilnosti s primijeniti ili poziv, treba ga izbjegavati. Ključna riječ razreda skriva prototipsku prirodu nasljeđivanja u JavaScriptu iza maske sustava klasa.
"Jednostavno je bolje od sofisticiranog", a korištenje klasa jer se smatra "sofisticiranijim" samo je nepotrebna tehnička glavobolja.
Korištenje Objekt.stvoriti je izražajniji i jasniji od korištenja kopule novi I ovaj. Dodatno, prototip je pohranjen u objektu koji može biti izvan konteksta same tvornice, te se stoga može lakše modificirati i proširiti dodavanjem metoda. Baš kao i klase u ES6.
Ključna riječ razreda, možda je najštetnija značajka JavaScripta. Imam ogromno poštovanje prema briljantnim i vrlo marljivim ljudima koji su bili uključeni u proces pisanja standarda, ali čak i briljantni ljudi ponekad čine pogrešnu stvar. -Eric Elliott
Dodati nešto nepotrebno i moguće štetno, protivno samoj prirodi jezika, nepromišljeno je i pogrešno.
Ako se odlučite koristiti razreda, iskreno se nadam da nikada neću morati raditi s vašim kodom. Po mom mišljenju, programeri bi trebali izbjegavati korištenje konstruktora, razreda I novi, i koristiti metode koje su prirodnije paradigmi i arhitekturi jezika. Glosar Object.assign(a, b) kopira sva nabrojiva svojstva objekta b prigovarati a a zatim vraća predmet a
Object.create(proto) stvara novi objekt iz navedenog prototipa proto
Object.setPrototypeOf(obj, proto) mijenja unutarnje svojstvo [] objekt obj na proto
Oznake: Dodajte oznake
WordPress svugdje koristi predloške i Javascript nije iznimka. U ovom ćemo postu govoriti o mogućnosti ugrađenoj u WordPress za izradu HTML predložaka, koji se zatim mogu koristiti u JS-u. Ovi predlošci su vrlo jednostavni za izradu i korištenje, baš kao i mnoge druge stvari u WordPressu.
Postoji mnogo načina za izradu predložaka u Javascriptu, čak postoji i zasebna specifikacija za njih pod nazivom Brkovi. Implementiran je na mnogim jezicima, uključujući Javascript. Na primjer, biblioteka Handlebars koristi ovu specifikaciju i čak je malo proširuje. Ili popularnu mini-biblioteku Underscore.
Od verzije 3.5, WordPress već ima prikladan predložak za JS u svojoj jezgri. Na primjer, koristi se u administratorskoj ploči pri izradi blokova za učitavač medija. Na temelju gore spomenute biblioteke Underscore, sintaksa je malo izmijenjena kako bi bila dosljednija specifikaciji Mustache.
Za izradu predložaka u WordPressu postoji metoda wp.template
wp.template(id)Stvara objekt predloška iz HTML koda. Da biste dobili gotov HTML kod za korištenje u JS-u, morate proslijediti podatke za ispunjavanje predloška u stvoreni objekt.
PovratakFunkcija. Funkcija za prosljeđivanje podataka za interpolaciju predloška.
Korištenje predloška var = wp.template(id); var HTML = predložak(podaci); iskaznica (crta)ID HTML elementa koji sadrži HTML kod predloška. HTML element mora imati ovdje naveden id atribut s prefiksom tmpl-.
Na primjer, ako ovdje navedete foo, tada HTML element mora imati id id="tmpl-foo" .
Podaci (objekt) JS podatkovni objekt koji će se koristiti za popunjavanje predloška. Na primjer: ( tekst: "Zdravo") .
Ispunjavanje uzorka (interpolacija)- (((data.unescaped))) - neočišćeni podaci.
- ((data.escaped)) - izbrisani podaci.
- - proces js (eval).
podatak u predlošku izvorni je podatkovni objekt. Morate koristiti podatkovni ključ u predlošku.
Kako bi odgovarala strukturi podataka koju vraćaju funkcije wp_send_json_success() i wp_send_json_error(), wp.template omotava sve primljene podatke u podatkovnu varijablu. Stoga prije svakog parametra u predlošku morate navesti podatke. , inače ćemo dobiti grešku: (svojstvo) nije definirano .
Točno (((data.name)))
Netočno (((ime)))
Primjer predloškaJednostavno će biti izlaz.
Prikažimo vrijednost varijable escapedValue ((data.escapedValue)).
Ako podaci sadrže oznake, ispišite ih bez bježanja:
(((data.unescapedValue)))Kada treba izvesti neku logiku.
Ispisat će se samo ako data.trueValue = true.
Izrada i generiranje predloška Izrada predloškaKako bi se osiguralo da se predložak ni na koji način ne pojavi u DOM stablu, uobičajeno ga je stvoriti u oznaci skripte s indikacijom tipa type="text/html" .
Pozdrav (((data.name)))
Id atribut mora započeti s tmpl-, sve nakon ovog prefiksa koristit će se u funkciji wp.template("moj-predložak").
Stvaranje predloška u oznaci skripte je hack koji je odličan za stvaranje html element ali, koji preglednik ni na koji način ne koristi. Kada je naveden tip koji je pregledniku nerazumljiv, on jednostavno ignorira html oznaku, što je ono što nam treba.
Predložak se također može kreirati u bilo kojem drugom HTML elementu (na primjer, u , koji se zatim može sakriti), jedino što trebate učiniti je navesti atribut id.
Postoji i poseban za izradu šablona HTML oznaka no nije podržan u IE. Ali općenito je prilično relevantan.
Generiranje predloškawp.template() vraća funkciju, stoga nemojte pokušavati proslijediti rezultat html elementu ili ispisati rezultat na konzoli. Tipično, rezultat wp.template() se prosljeđuje u varijablu, a zatim se ta varijabla koristi kao funkcija i prosljeđuje podatke s kojima treba ispuniti predložak.
Primjer (predložak prikazan gore)
// JS var template = wp.template("my-template"), data = ( name: "Victor" ); jQuery(".moj-element").html(predložak(podaci));
Kao rezultat toga, u HTML-u dobivamo:
Pozdrav Viktore
Primjer AJAX komentiranja pomoću predloškaNapravite predložak i uključite skriptu u datoteku functions.php teme: