Innen webutvikling er det mange verktøy tilgjengelig for utviklere å velge mellom. Å velge de riktige verktøyene og teknologiene kan ha en betydelig innvirkning på effektiviteten og funksjonaliteten til prosjekter. Et av de populære verktøyene innen webutvikling er EJS, som står for Embedded JavaScript . EJS er et enkelt JavaScript-malspråk som genererer HTML med vanlig JavaScript. I denne artikkelen vil vi dekke hva EJS er, hvorfor det er nødvendig, dets funksjoner, hvordan du installerer det, og gi et eksempel med utdata.
Hva er EJS
EJS eller Embedded JavaScript er en malmotor for JavaScript som brukes til webutvikling som lar brukere generere dynamisk HTML-oppmerking ved hjelp av JavaScript-kode i HTML-maler. Den er designet for å forenkle prosessen med å gjengi dynamisk innhold i nettapplikasjoner. Den inneholder en blanding av HTML og JavaScript som gjør det enkelt å generere dynamisk innhold basert på data fra applikasjonen din.
Egenskaper til EJS
- Enkel syntaks: EJS tilbyr en enkel syntaks som kombinerer HTML og JavaScript, noe som gjør det enkelt å lære og bruke.
- Dynamisk innhold: EJS muliggjør generering av HTML- og JavaScript-innhold dynamisk innenfor HTML-tagger, noe som øker fleksibiliteten i innholdsskaping.
- Layout og deler: EJS støtter oppsett og deler, slik at brukere kan dele opp maler i gjenbrukbare komponenter, redusere kodeduplisering og forbedre vedlikeholdsevnen.
- Feilhåndtering: EJS gir feilmeldinger som hjelper utviklere med feilsøking, og forbedrer den generelle utviklingsopplevelsen.
Hvorfor trenger du EJS?
- Dynamisk HTML-generering: EJS lar deg generere dynamisk HTML-innhold basert på variabler, betingelser, løkker og annen JavaScript-logikk. Dette er spesielt nyttig for å gjengi dynamiske data hentet fra databaser eller APIer.
- Gjenbrukbarhet av kode: Ved å bruke EJS-maler kan du lage gjenbrukbare komponenter eller deler som kan inkluderes på flere sider. Dette fremmer kodemodularitet og reduserer duplisering i webapplikasjonene dine.
- Gjengivelse på tjenersiden: Med EJS kan du utføre server-side rendering (SSR) av nettsider. SSR er gunstig for SEO (Search Engine Optimization) ettersom det lar søkemotorer gjennomsøke og indeksere innholdet ditt mer effektivt sammenlignet med klientsidegjengivelse (CSR) utført av rammeverk som React eller Angular.
- Enkel integrasjon med Node.js og Express.js: EJS integreres sømløst med Node.js og Express.js, noe som gjør det til et populært valg for utviklere som jobber med JavaScript-applikasjoner på serversiden. Det er enkelt å sette opp og bruke i et Express.js-prosjekt.
- Kjent syntaks: Hvis du allerede er kjent med HTML og JavaScript, er det enkelt å lære og bruke EJS. Syntaksen ligner HTML med innebygd JavaScript-kode omsluttet av
>koder, noe som gjør det tilgjengelig for utviklere med varierende ferdighetsnivåer. - Malarv og oppsett: EJS støtter malarv og oppsett, slik at du kan lage konsistente oppsett for nettsidene dine. Du kan definere et basisoppsett og utvide det i andre maler, noe som gjør det enklere å opprettholde et konsistent utseende og følelse på tvers av applikasjonen.
Hvordan bruke EJS?
Trinn 1: Installer EJS som en avhengighet i prosjektet ditt
npm install ejs>
Steg 2: Opprett en 'visnings'-mappe i prosjektkatalogen din hvis den ikke allerede eksisterer. Inne i visningsmappen oppretter du en ny fil med filtypen .ejs, for eksempel index.ejs
Trinn 3: For å integrere EJS med Express i en Express.js-applikasjon, sett EJS som visningsmotor i Express-appkonfigurasjonen. Denne konfigurasjonen lar Express bruke EJS for å gjengi visninger.
app.set('view engine', 'ejs');>Trinn 4: Gjengi EJS-mal, I dine Express-rutebehandlere gjengir vi EJS-malen ved hjelp av 'res.render()' og gi nødvendige data som skal sendes til malen.
res.render('hello', { name: 'Geeks' });>Prosjektstruktur:
De oppdaterte avhengighetene i package.json filen vil se slik ut:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' }>Eksempel: Implementering for å vise frem bruken av ejs med et eksempel.
sortere en arraylistHTML
EJS Eksempeltittel> hode> <body> <h1>Hallo,<%= name %>!h1> body> html>></pre> </code>JavaScript<code class='hljs'> <pre class='hljs'>// index.js const express = require('express'); const app = express(); const port = 3000; app.set('view engine', 'ejs'); app.get('/', (req, res) =>{ res.render('hei', { navn: 'Geeks' }); }); app.listen(port, () => { console.log(`Server kjører på http://localhost:${port}`); });></pre> </code> <p dir='ltr'> <b> <strong>Trinn for å kjøre applikasjon:</strong> </b> <span>Kjør programmet ved å bruke følgende kommando fra rotkatalogen til prosjektet</span></p> <pre class='hljs'>node index.js></pre><p dir='ltr'> <b> <strong>Produksjon:</strong> </b> <span>Prosjektet ditt vil bli vist i URLen 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="produksjon"></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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/blogathon-2021-cat/">Blogathon-2021</a> </li><li> <a href="/automata-tutorial/">Automatisk Opplæring</a> </li><li> <a href="/data-mining/">Datautvinning</a> </li><li> <a href="/vba-tutorial/">Vba Opplæring</a> </li><li> <a href="/spark-tutorial/">Spark Tutorial</a> </li><li> <a href="/excel-charts/">Excel-Diagrammer</a> </li><li> <a href="/jsp-tutorial/">Jsp-Veiledning</a> </li><li> <a href="/uncategorized/">Ukategorisert</a> </li><li> <a href="/operating-system/">Operativsystem</a> </li><li> <a href="/jpa-tutorial/">Jpa Veiledning</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">Hva er den fullstendige formen for LBS</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> LBS full form, LBS står for, betydning, hva er LBS, beskrivelse, eksempel, forklaring, akronym for, forkortelse, definisjoner, fullt navn</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-full-form-lbs"> <i class="fa fa-external-link"></i> Les Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikler</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/odd-numbers-1-100">Oddetall 1 til 100</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/countries-that-start-with-b">Land som begynner med B</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/data-mining/">Datautvinning</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-selenium-exercises/">Python Selen-Øvelser</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/amazon/">Amazon</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">Populære Innlegg</h2>
<div class="content">
<ul class="list"> <li><a href="/bharti-jha">bharti jha</a>
</li><li><a href="/java-convert-string-int">hvordan konvertere streng til int i java</a>
</li><li><a href="/java-convert-string-int">hvordan konvertere fra streng til int</a>
</li><li><a href="/git-head">inurl:.git/head</a>
</li><li><a href="/list-cities-usa">navn på byer i USA</a>
</li><li><a href="/rekha">rekha indisk</a>
</li><li><a href="/javascript-setinterval-method">setinterval javascript</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 Alle Rettigheter Reservert | <a href="//sl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfraskrivelse</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Personvernerklæring</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>