Verkkokehityksessä on tarjolla monia työkaluja, joista kehittäjät voivat valita. Oikeiden työkalujen ja teknologioiden valinnalla voi olla merkittävä vaikutus projektien tehokkuuteen ja toimivuuteen. Yksi web-kehityksen suosituimmista työkaluista on EJS, joka tarkoittaa Embeddediä JavaScript . EJS on yksinkertainen JavaScript-mallikieli, joka luo HTML tavallisella JavaScriptillä. Tässä artikkelissa käsittelemme mitä EJS on, miksi sitä tarvitaan, sen ominaisuuksia, kuinka se asennetaan, ja annamme esimerkin tulosteesta.
Mikä on EJS
EJS tai Embedded JavaScript on web-kehitykseen käytettävä JavaScript-mallimoottori, jonka avulla käyttäjät voivat luoda dynaamisia HTML-merkintöjä JavaScript-koodilla HTML-malleissa. Se on suunniteltu yksinkertaistamaan dynaamisen sisällön renderöintiprosessia verkkosovelluksissa. Se sisältää sekoituksen HTML:ää ja JavaScriptiä, mikä tekee dynaamisen sisällön luomisesta helppoa sovelluksesi tietojen perusteella.
EJS:n ominaisuudet
- Yksinkertainen syntaksi: EJS tarjoaa suoraviivaisen syntaksin, joka yhdistää HTML:n ja JavaScriptin, mikä tekee siitä helpon oppimisen ja käytön.
- Dynaaminen sisältö: EJS mahdollistaa HTML- ja JavaScript-sisällön luomisen dynaamisesti HTML-tunnisteiden sisällä, mikä lisää sisällöntuotannon joustavuutta.
- Asettelu ja osat: EJS tukee asetteluja ja osia, jolloin käyttäjät voivat jakaa malleja uudelleenkäytettäviksi komponenteiksi, mikä vähentää koodin päällekkäisyyttä ja parantaa ylläpidettävyyttä.
- Virheiden käsittely: EJS tarjoaa virheilmoituksia, jotka auttavat kehittäjiä virheenkorjauksessa ja parantavat yleistä kehityskokemusta.
Miksi tarvitset EJS:ää?
- Dynaamisen HTML:n luominen: EJS:n avulla voit luoda dynaamista HTML-sisältöä muuttujien, ehtojen, silmukoiden ja muun JavaScript-logiikan perusteella. Tämä on erityisen hyödyllinen tietokannoista tai API:ista haetun dynaamisen tiedon renderöinnissa.
- Koodin uudelleenkäyttö: Käyttämällä EJS-malleja voit luoda uudelleenkäytettäviä komponentteja tai osia, jotka voidaan sisällyttää useille sivuille. Tämä edistää koodin modulaarisuutta ja vähentää päällekkäisyyksiä verkkosovelluksissasi.
- Palvelinpuolen renderöinti: EJS:n avulla voit suorittaa web-sivujen palvelinpuolen renderöinnin (SSR). SSR on hyödyllinen SEO:lle (Search Engine Optimization), koska sen avulla hakukoneet voivat indeksoida sisältösi tehokkaammin verrattuna Reactin tai Angularin kaltaisten kehysten suorittamaan asiakaspuolen renderöintiin (CSR).
- Helppo integrointi Node.js:n ja Express.js:n kanssa: EJS integroituu saumattomasti Node.js:n ja Express.js:n kanssa, joten se on suosittu valinta palvelinpuolen JavaScript-sovelluksia työskenteleville kehittäjille. Se on helppo asentaa ja käyttää Express.js-projektissa.
- Tuttu syntaksi: Jos olet jo perehtynyt HTML:ään ja JavaScriptiin, EJS:n oppiminen ja käyttö on yksinkertaista. Syntaksi on samanlainen kuin HTML, ja siihen on upotettu JavaScript-koodi
>tunnisteita, jolloin se on eritasoisten kehittäjien käytettävissä. - Mallin periytyminen ja asettelut: EJS tukee mallipohjan periytymistä ja asetteluja, joiden avulla voit luoda yhtenäisiä asetteluja verkkosivuillesi. Voit määrittää perusasettelun ja laajentaa sitä muihin malleihin, mikä helpottaa yhtenäisen ulkoasun ja tuntuman säilyttämistä sovelluksessasi.
Kuinka käyttää EJS:ää?
Vaihe 1: Asenna EJS riippuvuutena projektiisi
npm install ejs>
Vaihe 2: Luo 'views'-kansio projektihakemistoosi, jos sitä ei vielä ole. Luo näkymät-kansioon uusi tiedosto, jonka tunniste on .ejs, esimerkiksi index.ejs
Vaihe 3: Integroidaksesi EJS:n Expressin kanssa Express.js-sovelluksessa, aseta EJS Express-sovelluksen kokoonpanon näkymämoottoriksi. Tämän kokoonpanon avulla Express voi käyttää EJS:ää näkymien renderöimiseen.
app.set('view engine', 'ejs');>Vaihe 4: Renderöi EJS-malli, Express-reitinkäsittelijöissäsi renderöimme EJS-mallin käyttämällä 'res.render()' ja anna tarvittavat tiedot välitettäväksi malliin.
res.render('hello', { name: 'Geeks' });>Hankkeen rakenne:
Päivitetyt riippuvuudet sisään package.json tiedosto näyttää tältä:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' }>Esimerkki: Toteutus ejs:n käytön esittelemiseksi esimerkin avulla.
HTML EJS Esimerkkiotsikko> head> <body> <h1>Hei,<%= name %>!h1> body> html>>></tag>JavaScript<tag data-text-1='// index.js const express = require('express'); const app = express(); const port = 3000; app.set('view engine', 'ejs'); app.get('/', (req, res) =>{ res.render('hei', { nimi: 'Geeks' }); }); app.listen(port, () => { console.log(`Palvelin toimii osoitteessa http://localhost:${port}`); });>></tag> <p dir='ltr'> <b> <strong>Sovelluksen suorittamisen vaihe:</strong> </b> <span>Suorita sovellus seuraavalla komennolla projektin juurihakemistosta</span></p> <tag data-text-3='node index.js></pre> </code><p dir='ltr'> <b> <strong>Lähtö:</strong> </b> <span>Projektisi näkyy URL-osoitteessa http://localhost:3000/</span></p> <p dir='ltr'> <img src='//techcodeview.com/img/ejs-templating-language/39/what-is-ejs-why-do-i-need-it-2.webp' alt="ulostulo"></p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Luokka</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/java-jdbc/">Java Jdbc</a> </li><li> <a href="/laws-motion/">Liikkeen Lait</a> </li><li> <a href="/2d-shapes/">2D-Muodot</a> </li><li> <a href="/genetics/">Genetiikka</a> </li><li> <a href="/linux-basic-commands/">Linux-Basic-Komennot</a> </li><li> <a href="/coordinate-geometry/">Koordinaattigeometria</a> </li><li> <a href="/math-concepts/">Math-Käsitteet</a> </li><li> <a href="/java-8-date-time/">Java 8 Date Time</a> </li><li> <a href="/html-basics/">Html-Perusteet</a> </li><li> <a href="/business/">Liiketoimintaa</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">RxJS Havainnot</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> RxJS-havainnot ja mikä on RxJS, RxJS:n ominaisuudet, RxJS-asennus, miksi RxJS:ää käyttää, edut ja haitat, ensimmäinen esimerkki, uusimmat päivitykset, operaattorit, RxJS-havainnot jne.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/rxjs-observables"> <i class="fa fa-external-link"></i> Lue Lisää</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Mielenkiintoisia Artikkeleita</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-many-countries-are-there-world">Kuinka monta maata maailmassa on? (Päivitetty 2024)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/mst/">Mst</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/gautami-patil">Gautami Patil</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/apply-lapply-sapply">apply(), lapply(), sapply() ja tapply() R:ssä</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-comes-after-trillion-13144">Mitä tulee triljoonan jälkeen? Suurten numeroiden nimet</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Suosittu Viestiä</h2>
<div class="content">
<ul class="list"> <li><a href="/volatile-keyword-java">java haihtuva avainsana</a>
</li><li><a href="/java-convert-int-string">java kokonaisluku merkkijonoksi</a>
</li><li><a href="/what-is-1-1000">1/1000</a>
</li><li><a href="/python-operators">operaattorit python-ohjelmoinnissa</a>
</li><li><a href="/how-convert-string-json-object-java">merkkijono jsonobjectiin</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Kaikki Oikeudet Pidätetään | <a href="//lv.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vastuuvapauslauseke</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Meistä</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Tietosuojakäytäntö</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>