Inden for webudvikling er der mange værktøjer tilgængelige for udviklere at vælge imellem. Valg af de rigtige værktøjer og teknologier kan have en betydelig indflydelse på effektiviteten og funktionaliteten af projekter. Et af de populære værktøjer inden for webudvikling er EJS, som står for Embedded JavaScript . EJS er et simpelt JavaScript-skabelonsprog, der genererer HTML med almindelig JavaScript. I denne artikel vil vi dække, hvad EJS er, hvorfor det er nødvendigt, dets funktioner, hvordan man installerer det, og give et eksempel med output.
Hvad er EJS
EJS eller Embedded JavaScript er en skabelonmotor til JavaScript, der bruges til webudvikling, som giver brugerne mulighed for at generere dynamisk HTML-markering ved hjælp af JavaScript-kode i HTML-skabeloner. Det er designet til at forenkle processen med at gengive dynamisk indhold i webapplikationer. Den indeholder en blanding af HTML og JavaScript, som gør det nemt at generere dynamisk indhold baseret på data fra din applikation.
Egenskaber ved EJS
- Simpel syntaks: EJS tilbyder en ligetil syntaks, der kombinerer HTML og JavaScript, hvilket gør det nemt at lære og bruge.
- Dynamisk indhold: EJS muliggør generering af HTML- og JavaScript-indhold dynamisk i HTML-tags, hvilket øger fleksibiliteten i oprettelse af indhold.
- Layout og partialer: EJS understøtter layouts og partialer, hvilket giver brugerne mulighed for at opdele skabeloner i genanvendelige komponenter, hvilket reducerer kodeduplikering og forbedrer vedligeholdelsen.
- Fejlhåndtering: EJS leverer fejlmeddelelser, der hjælper udviklere med at fejlfinde, hvilket forbedrer den overordnede udviklingsoplevelse.
Hvorfor har du brug for EJS?
- Dynamisk HTML-generering: EJS giver dig mulighed for at generere dynamisk HTML-indhold baseret på variabler, betingelser, loops og anden JavaScript-logik. Dette er især nyttigt til at gengive dynamiske data hentet fra databaser eller API'er.
- Genanvendelighed af kode: Ved at bruge EJS-skabeloner kan du oprette genanvendelige komponenter eller dele, der kan inkluderes på flere sider. Dette fremmer kodemodularitet og reducerer dobbeltarbejde i dine webapplikationer.
- Rendering på serversiden: Med EJS kan du udføre server-side rendering (SSR) af websider. SSR er gavnligt for SEO (Search Engine Optimization), da det giver søgemaskiner mulighed for at crawle og indeksere dit indhold mere effektivt sammenlignet med client-side rendering (CSR) udført af frameworks som React eller Angular.
- Nem integration med Node.js og Express.js: EJS integreres problemfrit med Node.js og Express.js, hvilket gør det til et populært valg for udviklere, der arbejder med JavaScript-applikationer på serversiden. Det er nemt at konfigurere og bruge i et Express.js-projekt.
- Velkendt syntaks: Hvis du allerede er fortrolig med HTML og JavaScript, er det ligetil at lære og bruge EJS. Syntaksen ligner HTML med indlejret JavaScript-kode indesluttet i
>tags, hvilket gør det tilgængeligt for udviklere med forskellige færdighedsniveauer. - Skabelonarv og layout: EJS understøtter skabelonarv og layout, så du kan skabe ensartede layouts til dine websider. Du kan definere et basislayout og udvide det i andre skabeloner, hvilket gør det nemmere at opretholde et ensartet udseende på tværs af din applikation.
Hvordan bruger man EJS?
Trin 1: Installer EJS som en afhængighed i dit projekt
npm install ejs>
Trin 2: Opret en 'views'-mappe i din projektmappe, hvis den ikke allerede eksisterer. Inde i visningsmappen skal du oprette en ny fil med filtypenavnet .ejs, f.eks. index.ejs
Trin 3: For at integrere EJS med Express i en Express.js-applikation skal du indstille EJS som visningsmotor i din Express-appkonfiguration. Denne konfiguration tillader Express at bruge EJS til gengivelse af visninger.
app.set('view engine', 'ejs');>Trin 4: Render EJS-skabelon, I dine Express-rutehandlere gengiver vi EJS-skabelonen vha 'res.render()' og give nødvendige data, der skal videregives til skabelonen.
res.render('hello', { name: 'Geeks' });>Projektets struktur:
De opdaterede afhængigheder i package.json filen vil se sådan ud:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' }>Eksempel: Implementering for at vise brugen af ejs med et eksempel.
anmærkninger i springstøvleHTML
EJS Eksempeltitel> hoved> <body> <h1>Hej,<%= 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('hej', { navn: 'Nørder' }); }); app.listen(port, () => { console.log(`Serveren kører på http://localhost:${port}`); });></pre> </code> <p dir='ltr'> <b> <strong>Trin til at køre applikation:</strong> </b> <span>Kør programmet ved at bruge følgende kommando fra projektets rodbibliotek</span></p> <pre class='hljs'>node index.js></pre><p dir='ltr'> <b> <strong>Produktion:</strong> </b> <span>Dit projekt vil blive vist i URL'en 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="produktion"></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="/apache-ant-tutorial/">Tutorial Til Apache-Myre</a> </li><li> <a href="/python-string/">Python-Streng</a> </li><li> <a href="/git/">Git</a> </li><li> <a href="/google-docs/">Google Docs</a> </li><li> <a href="/arithmetic-maq/">Aritmetik - Maq</a> </li><li> <a href="/html-dom/">Html-Dom</a> </li><li> <a href="/microprocessor-tutorial/">Tutorial Til Mikroprocessor</a> </li><li> <a href="/cpp-map/">Cpp-Kort</a> </li><li> <a href="/physics-questions/">Fysik-Spørgsmål</a> </li><li> <a href="/java-mail-tutorial/">Java Mail Tutorial</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">Fordele og ulemper ved kloning</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Fordele og ulemper ved kloning med blog, hvad er quora, hvad er yandex, kontaktside, duckduckgo søgemaskine, søgemaskine journal, facebook, google chrome, firefox osv.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/advantages-disadvantages-cloning"> <i class="fa fa-external-link"></i> Læs Mere</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="/community-cloud">Community Cloud</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/different-ways-concatenate-two-strings-golang">Forskellige måder at sammenkæde to strenge i Golang</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/json-csv-converter">JSON til CSV-konverter</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-list-sublist-method">Java List sublist() Metode</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/tripti-dimri">Triptykon vinter</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 Indlæg</h2>
<div class="content">
<ul class="list"> <li><a href="/binary-search-java">binær søgning i java</a>
</li><li><a href="/tenure-formula-excel">beregning af ansættelse i excel</a>
</li><li><a href="/rakhi-sawant">rakhi sawant</a>
</li><li><a href="/sed-command-linux-unix-with-examples">sed kommando</a>
</li><li><a href="/what-is-insert-key-laptop">nøgle til bærbar indsættelse</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 Rettigheder Forbeholdes | <a href="//de.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 Os</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatlivspolitik</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>