Inom webbutveckling finns det många verktyg tillgängliga för utvecklare att välja mellan. Att välja rätt verktyg och teknik kan ha en betydande inverkan på projektens effektivitet och funktionalitet. Ett av de populära verktygen inom webbutveckling är EJS, som står för Embedded JavaScript . EJS är ett enkelt JavaScript-mallspråk som genererar HTML med vanlig JavaScript. I den här artikeln kommer vi att täcka vad EJS är, varför det behövs, dess funktioner, hur man installerar det och ge ett exempel med utdata.
Vad är EJS
EJS eller Embedded JavaScript är en mallmotor för JavaScript som används för webbutveckling som tillåter användare att generera dynamisk HTML-uppmärkning med hjälp av JavaScript-kod i HTML-mallar. Den är utformad för att förenkla processen att rendera dynamiskt innehåll i webbapplikationer. Den innehåller en blandning av HTML och JavaScript som gör det enkelt att generera dynamiskt innehåll baserat på data från din applikation.
Funktioner hos EJS
- Enkel syntax: EJS erbjuder en enkel syntax som kombinerar HTML och JavaScript, vilket gör det enkelt att lära sig och använda.
- Dynamiskt innehåll: EJS möjliggör generering av HTML- och JavaScript-innehåll dynamiskt inom HTML-taggar, vilket ökar flexibiliteten vid skapande av innehåll.
- Layout och delar: EJS stöder layouter och delar, vilket gör att användare kan dela upp mallar i återanvändbara komponenter, vilket minskar kodduplicering och förbättrar underhållsbarheten.
- Felhantering: EJS tillhandahåller felmeddelanden som hjälper utvecklare att felsöka, vilket förbättrar den övergripande utvecklingsupplevelsen.
Varför behöver du EJS?
- Dynamisk HTML-generering: EJS låter dig generera dynamiskt HTML-innehåll baserat på variabler, villkor, loopar och annan JavaScript-logik. Detta är särskilt användbart för att rendera dynamisk data som hämtas från databaser eller API:er.
- Kodåteranvändbarhet: Genom att använda EJS-mallar kan du skapa återanvändbara komponenter eller delar som kan inkluderas på flera sidor. Detta främjar kodmodularitet och minskar dubbelarbete i dina webbapplikationer.
- Rendering på serversidan: Med EJS kan du utföra server-side rendering (SSR) av webbsidor. SSR är fördelaktigt för SEO (Search Engine Optimization) eftersom det tillåter sökmotorer att genomsöka och indexera ditt innehåll mer effektivt jämfört med rendering på klientsidan (CSR) som görs av ramverk som React eller Angular.
- Enkel integration med Node.js och Express.js: EJS integreras sömlöst med Node.js och Express.js, vilket gör det till ett populärt val för utvecklare som arbetar med JavaScript-applikationer på serversidan. Det är lätt att ställa in och använda i ett Express.js-projekt.
- Bekant syntax: Om du redan är bekant med HTML och JavaScript är det enkelt att lära sig och använda EJS. Syntaxen liknar HTML med inbäddad JavaScript-kod innesluten i
>taggar, vilket gör det tillgängligt för utvecklare med olika kompetensnivåer. - Mallarv och layouter: EJS stöder mallarv och layouter, så att du kan skapa konsekventa layouter för dina webbsidor. Du kan definiera en baslayout och utöka den i andra mallar, vilket gör det lättare att upprätthålla ett konsekvent utseende och känsla i hela din applikation.
Hur använder man EJS?
Steg 1: Installera EJS som ett beroende i ditt projekt
min skärmstorlek
npm install ejs>
Steg 2: Skapa en 'vyer'-mapp i din projektkatalog om den inte redan finns. Skapa en ny fil med filtillägget .ejs i mappen vyer, till exempel index.ejs
Steg 3: För att integrera EJS med Express i en Express.js-applikation, ställ in EJS som visningsmotor i din Express-appkonfiguration. Denna konfiguration tillåter Express att använda EJS för att rendera vyer.
app.set('view engine', 'ejs');>Steg 4: Rendera EJS-mall, i dina Express-rutthanterare renderar vi EJS-mallen med hjälp av 'res.render()' och tillhandahålla nödvändiga data som ska skickas till mallen.
res.render('hello', { name: 'Geeks' });>Projektets struktur:
De uppdaterade beroendena i package.json filen kommer att se ut så här:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' }>Exempel: Implementering för att visa upp användningen av ejs med ett exempel.
rdbms normaliseringHTML
EJS Exempeltitel> huvud> <body> <h1>Hallå,<%= 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', { namn: 'Geeks' }); }); app.listen(port, () => { console.log(`Server körs på http://localhost:${port}`); });></pre> </code> <p dir='ltr'> <b> <strong>Steg för att köra applikation:</strong> </b> <span>Kör programmet med följande kommando från projektets rotkatalog</span></p> <pre class='hljs'>node index.js></pre><p dir='ltr'> <b> <strong>Produktion:</strong> </b> <span>Ditt projekt kommer att visas 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="/android-tutorial/">Handledning För Android</a> </li><li> <a href="/python-operators/">Python-Operatörer</a> </li><li> <a href="/physics-formulas/">Fysik-Formler</a> </li><li> <a href="/c-strings-programs/">C Strings Program</a> </li><li> <a href="/bootstrap-5-cat/">Bootstrap 5</a> </li><li> <a href="/culture-gk/">Kultur Gk</a> </li><li> <a href="/physical-quantities/">Fysiska Kvantiteter</a> </li><li> <a href="/combinatorial/">Kombinatorisk</a> </li><li> <a href="/python-matrix-program/">Python Matris-Program</a> </li><li> <a href="/aws-tutorial/">Handledning För Aws</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">Lista över de 10 längsta tunnlarna i USA</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> De längsta tunnlarna i USA är Delaware Aqueduct, Cascade Tunnel, Anton Anderson Tunnel, Brooklyn Battery Tunnel, Eisenhower Tunnel, Holland Tunnel, Ted Williams Tunnel, Lincoln Tunnel, Baltimore Harbor Tunnel och Hamptons Road Bridge Tunnel.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/list-top-10-longest-tunnels-usa"> <i class="fa fa-external-link"></i> Läs Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Intressanta Artiklar</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/starting-restarting-nginx">Starta och starta om NGINX</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/socket-programming-c-c">Sockelprogrammering i C/C++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-software-testing">Vad är mjukvarutestning?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/mysql-rename-column">MySQL Byt namn på kolumn</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/b-tree/">B-Träd</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ära Inlägg</h2>
<div class="content">
<ul class="list"> <li><a href="/alphabet-numbers">numrering av alfabetet</a>
</li><li><a href="/java-switch-statement">java switch uttalande</a>
</li><li><a href="/java-convert-int-string">konvertera heltal till sträng java</a>
</li><li><a href="/what-is-10-ml-ounces">10 ml till oz</a>
</li><li><a href="/burak-ozcivit">burak ozcivit</a>
</li><li><a href="/zeenat-aman">skådespelare zeenat aman</a>
</li><li><a href="/mkdir-command-linux-unix-with-examples">unix skapa katalog</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 Alla Rättigheter Förbehållna | <a href="//lt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfriskrivning</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Sekretesspolicy</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>