Vrhunskih 5 motora za predloške za JavaScript

Kada gradite JavaScript aplikaciju, gotovo ćete sigurno koristiti neke JavaScript predloške. Umjesto da koristite knjižnicu poput jQuery (ili vanilin JavaScript) za ažuriranje HTML-a kada se vrijednosti ažuriraju, možete koristiti predloške, što izuzetno čisti vaš kôd. U ovom ćemo članku pogledati neke popularne knjižnice predložaka.

01. Brkovi

JavaScript predlošci

Brkovi se često smatraju osnovom za JavaScript predloške

Brkovi često se smatra osnovom za JavaScript predloške. Još jedno popularno rješenje, Handlebars, zapravo se gradi na vrhu Mustachea, ali to ne znači da to nije baš dobro rješenje za predloške. Evo primjera:



Mustache.render ('Pozdrav, {{name}}', {name: 'Jack'});
// vraća se: Zdravo, Jack

Jednom kada su brkovi uključeni na vašu stranicu, imat ćete pristup globalnom objektu 'brkovi'. Glavna metoda koju ćete koristiti je 'render', koja uzima dva argumenta. Prvi je stvarni predložak, a drugi su svi argumenti koje mu treba proslijediti.

U gornjem primjeru možete vidjeti da sam se pozvao na '{{name}}'. Dvije zagrade oko nečega sintaksa je Mustache da bi se pokazalo da je rezervirano mjesto. Kad ga Mustache prevede, tražit će svojstvo 'name' u objektu koji prosljeđujemo i u ovom slučaju zamijeniti '{{name}}' vrijednošću koja je 'Jack'.

Ovdje sam predložak predao kao niz, ali ako ste imali složeniji predložak, možda to ne biste željeli učiniti na ovaj način. Umjesto toga, uobičajeno rješenje je postavljanje predloška unutar oznaka 'script':


Pozdrav, {{name}}


Tada možemo pristupiti sadržaju te oznake skripte. Na primjer, s jQuery je jednostavno kao:

var temp = $ ('# predložak'). html ();
Mustache.render (temp {name: 'Jack'});
// vraća:

Zdravo, Jack

Davanjem oznake 'script' atributu 'type' nečega što preglednik ne razumije, on će zanemariti sadržaj, pa ga neće pokušati izvršiti kao JavaScript.

U predlošcima možete koristiti i petlje. Uzimanje ovog predloška:

{{#narod}}
{{Ime}}
{{/narod}}

S tim podacima prosljeđenim:

{ljudi: [{name: 'Jack'}, {name: 'Fred'}]}

je li kitkat ikad imao crticu

Vratit će vam se niz 'JackFred'.

Brkovi su sposobni za puno više nego što je ovdje pokriveno, zato provjerite Github Pročitaj me za više.

02. Podcrtaj predloške

JavaScript predlošci

Underscore je cjelovita knjižnica pojasa za JavaScript

Underscore je cjelovita knjižnica pojasa za JavaScript koja pruža sve vrste korisnih metoda. Također pruža jednostavne predloške koje možemo koristiti. Koristi malo različitu sintaksu za Mustache. Evo jednostavnog primjera:

_.template ('Pozdrav,', {ime: 'Jack'});
// vraća se: Zdravo, Jack

Ako ste ikada koristili Embedded Ruby (ili ERB skraćeno), možda vam je poznatija ova sintaksa. Oznaka '' označava da se koja god vrijednost 'name' trebala ispisati umjesto ''. Podvlaka također može raditi stvari poput petlji i uvjetnih uvjeta, ali to čini malo drugačije od onog što čine Brkovi.

predložak var = '

  • '
    _.template (predložak, {people: ['Jack', 'Fred']});

    U predloške Underscore možete ugraditi proizvoljni JavaScript unutar oznaka ''. Imajte na umu da koristimo '' za izlaz na stranicu i 'da bismo sadržavali JavaScript. To znači da bilo koji oblik petlje ili uvjetni uvjet koji možete učiniti u JS-u možete koristiti u podvlaci.

    Možete saznati više o Underscoreu i njegovim mogućnostima ovdje .

    03. Ugrađeni JS predlošci

    JavaScript predlošci

    Ugrađeni JS (EJS) nadahnut je ERB predlošcima

    Ugrađeni JS (EJS) nadahnut je predlošcima ERB-a i djeluje približno isto. Koristi iste oznake kao i ERB (i doista, Podvlaka) i ima mnoge iste značajke. Također implementira nekoliko pomagača nadahnutih za Ruby on Rails, do kojih ćemo uskoro doći.

    EJS se razlikuje po tome što očekuje da se vaši predlošci nalaze u pojedinačnim datotekama, a zatim prosljeđujete naziv datoteke u EJS. Učitava datoteku i vraća vam HTML.

    // u predlošku.ejs
    Zdravo,

    // u JS datoteci
    novi EJS ({url: 'template.ejs'}). render ({name: 'Jack'});
    // vraća se: Zdravo, Jack

    Imajte na umu da možete učitati i u tekstualne predloške:

    novi EJS ({tekst: 'Zdravo,'}). render ({name: 'Jack'});

    Evo kako bismo prešli preko nekih ljudi i povezali do njihovih stranica profila na našoj web stranici:

    // predložak.ejs


      <% for(var i = 0; i


    // u JS datoteci
    novi EJS ({url: 'template.ejs'}). render ({people: ['Jack', 'Fred']})

    // Svaki prikazan

  • izgledat će kao:
  • Utičnica
  • To je vrlo slično onome kako Underscore to može učiniti, ali imajte na umu upotrebu `link_to`. To je pomoćnik kojeg EJS definira kako bi povezivanje bilo malo lakše. Provodi i mnoge druge, koji su dokumentirani ovdje . Da biste saznali više o EJS, predlažem Početna stranica EJS-a .

    04. UpravljačiJS

    JaveScript predlošci

    Volan je jedan od najpopularnijih mehanizama za templatiranje i gradi se na vrhu brkova

    Volan je jedan od najpopularnijih mehanizama za templatiranje i gradi se na vrhu brkova. Sve što je vrijedilo u predlošku Mustache vrijedi u predlošku Handlebars, tako da te osnove više neću pokrivati. Upravljači dodaju puno pomagača Brkovima. Jedno od njih je 'with', što je izvrsno za rad s dubokim objektima:

    // s ovim predloškom:
    var izvor = '{{# s autorom}}

    Napisao {{firstName}} {{lastName}}

    {{/s}}';
    predložak var = Handlebars.compile (izvor);
    var html = predložak ({autor: {firstName: 'Jack', lastName: 'Franklin'}});
    // vraća:

    Napisao Jack Franklin

    Primijetite da kompajler Handlebars radi malo različito. Prvo prosljeđujete predložak u 'Handlebars.compile', koji zatim vraća funkciju. To možete nazvati dodavanjem objekta koji sadrži podatke, a zatim ćete vratiti HTML. Pomoćnik '{{#with}}' uzima objekt, a zatim unutar njega omogućuje vam pozivanje na svojstva unutar tog objekta. To prije znači:

    {{author.firstName}} {{author.lastName}}

    Možemo napraviti:

    {{#with author}} {{firstName}} {{lastName}} {{/ with}}

    Što može uštedjeti na tipkanju, pogotovo ako to puno radite.

    Upravljač također nudi svakog pomoćnika:

    var source = '{{#each people}} {{name}} {{/ each}}';
    predložak var = Handlebars.compile (izvor);
    var html = predložak ({ljudi: [{ime: 'Jack'}, {ime: 'Fred'}]});

    // vraća: 'JackFred'

    kako postati umjetnički direktor

    Osobno više volim ručke i obično ih koristim za sve predloške na strani klijenta. Također je vrlo lako proširiti upravljač vlastitim metodama - ovo dokumentacija je dobro mjesto za početak.

    05. Šablon od žada

    JavaScript predlošci

    Predlošci od žada vrlo su različiti po tome što uvelike ovise o uvlakama i razmacima

    Završit ću s nečim malo drugačijim ovdje - predloškom na strani poslužitelja Žad . S popularnošću NodeJS-a i brojem web aplikacija koje se sada u njemu ugrađuju, postoji puno knjižnica za predloške koji su dizajnirani za upotrebu na poslužitelju. Predlošci od žada vrlo su različiti od svih koje smo do sada gledali, jer to uvelike ovisi o uvlakama i razmacima. Evo jednostavnog primjera:

    // predložak.jade
    str
    | Zdravo,
    = ime

    // JS
    jade.renderFile ('template.jade', {name: 'Jack'}, funkcija (pogreška, rezultat) {
    console.log (rezultat);
    // dnevnici: Zdravo, Jack
    });

    Jade se u početku malo nervira, ali naviknete se, iskreno! Uvlačimo dvije crte ispod 'p' kako bismo označili da postoje unutar njega. '|' koristi se da bi se Jade reklo da je ono što se nalazi u tom retku samo običan tekst za izlazak, a '=' govori Jade da traži varijablu koja se zove 'name'.

    Također možemo raditi petlje i u Jade:

    svaka osoba u ljudima
    li = osoba

    Pozvano s nizom imena: '{people: [' Jack ',' Fred ']}', ovo će dati:

  • Utičnica
  • Fred
  • Jade je sposoban za puno više - za razliku od ostalih mehanizama predložaka koje smo pogledali, ideja kod Jade je da u njega napišete cijeli svoj HTML. Može raditi kao što su oznake izlaznih skripti:

    skripta (type = 'text / javascript', src = 'myfile.js')

    Dobro mjesto za početak je Primjeri žada . Možete ih preuzeti i pokrenuti s Nodeom da biste vidjeli izlaz i kako Jade radi.

    I to završava naš pogled na pet najpopularnijih motora za izradu predložaka. Ima još puno toga, ali nadam se da bi vam ovo trebalo biti dobra polazna točka da odete i pronađete onu koja vam najviše odgovara.

    Jack Franklin je 20-godišnji programer koji živi u Londonu u Velikoj Britaniji. Vodi JavaScript blog na javascriptplayground.com a također piše PHP, Ruby i druge jezike. Tweeta kao @Jack_Franklin .

    Također pročitajte: