V spletnem razvoju je razvijalcem na voljo veliko orodij, med katerimi lahko izbirajo. Izbira pravih orodij in tehnologij lahko pomembno vpliva na učinkovitost in funkcionalnost projektov. Eno izmed priljubljenih orodij v spletnem razvoju je EJS, kar pomeni Embedded JavaScript . EJS je preprost jezik za predloge JavaScript, ki generira HTML z navadnim JavaScriptom. V tem članku bomo opisali, kaj je EJS, zakaj je potreben, njegove funkcije, kako ga namestiti in podali primer z izhodom.
Kaj je EJS
EJS ali Embedded JavaScript je mehanizem predlog za JavaScript, ki se uporablja za spletni razvoj in uporabnikom omogoča ustvarjanje dinamičnih oznak HTML z uporabo kode JavaScript v predlogah HTML. Zasnovan je za poenostavitev postopka upodabljanja dinamične vsebine v spletnih aplikacijah. Vsebuje mešanico HTML in JavaScript, kar olajša ustvarjanje dinamične vsebine na podlagi podatkov iz vaše aplikacije.
Značilnosti EJS
- Enostavna sintaksa: EJS ponuja preprosto sintakso, ki združuje HTML in JavaScript, zaradi česar je preprost za učenje in uporabo.
- Dinamična vsebina: EJS omogoča dinamično generiranje vsebine HTML in JavaScript znotraj oznak HTML, kar povečuje prilagodljivost pri ustvarjanju vsebine.
- Postavitev in deli: EJS podpira postavitve in delce, kar uporabnikom omogoča, da razdelijo predloge na komponente, ki jih je mogoče ponovno uporabiti, kar zmanjša podvajanje kode in izboljša vzdržljivost.
- Obravnava napak: EJS ponuja sporočila o napakah, ki razvijalcem pomagajo pri odpravljanju napak in tako izboljšajo celotno razvojno izkušnjo.
Zakaj potrebujete EJS?
- Dinamično ustvarjanje HTML: EJS vam omogoča ustvarjanje dinamične vsebine HTML na podlagi spremenljivk, pogojev, zank in druge logike JavaScript. To je še posebej uporabno za upodabljanje dinamičnih podatkov, pridobljenih iz baz podatkov ali API-jev.
- Ponovna uporabnost kode: Z uporabo predlog EJS lahko ustvarite komponente ali dele za večkratno uporabo, ki jih je mogoče vključiti v več strani. To spodbuja modularnost kode in zmanjšuje podvajanje v vaših spletnih aplikacijah.
- Upodabljanje na strani strežnika: Z EJS lahko izvajate strežniško upodabljanje (SSR) spletnih strani. SSR je koristen za SEO (optimizacija iskalnikov), saj omogoča iskalnikom bolj učinkovito pajkanje in indeksiranje vaše vsebine v primerjavi z upodabljanjem na strani odjemalca (CSR), ki ga izvajajo ogrodja, kot sta React ali Angular.
- Enostavna integracija z Node.js in Express.js: EJS se brezhibno integrira z Node.js in Express.js, zaradi česar je priljubljena izbira za razvijalce, ki delajo na strežniških aplikacijah JavaScript. Enostavno ga je nastaviti in uporabljati znotraj projekta Express.js.
- Znana sintaksa: Če že poznate HTML in JavaScript, je učenje in uporaba EJS preprosta. Sintaksa je podobna HTML z vdelano kodo JavaScript
>oznake, zaradi česar je dostopen razvijalcem različnih ravni znanja. - Dedovanje predloge in postavitve: EJS podpira dedovanje in postavitve predlog, kar vam omogoča ustvarjanje doslednih postavitev za vaše spletne strani. Določite lahko osnovno postavitev in jo razširite v drugih predlogah, kar olajša vzdrževanje doslednega videza in občutka v vaši aplikaciji.
Kako uporabljati EJS?
Korak 1: Namestite EJS kot odvisnost v vašem projektu
npm install ejs>
2. korak: Ustvarite mapo »pogledi« v imeniku vašega projekta, če še ne obstaja. Znotraj mape pogledov ustvarite novo datoteko s pripono .ejs, na primer index.ejs
3. korak: Če želite integrirati EJS s Expressom v aplikaciji Express.js, nastavite EJS kot mehanizem pogleda v konfiguraciji aplikacije Express. Ta konfiguracija Expressu omogoča uporabo EJS za upodabljanje pogledov.
app.set('view engine', 'ejs');>4. korak: Upodobitev predloge EJS, v vaših obdelovalcih poti Express upodobimo predlogo EJS z uporabo 'res.render()' in zagotovi potrebne podatke, ki jih je treba posredovati v predlogo.
res.render('hello', { name: 'Geeks' });>Struktura projekta:
Posodobljene odvisnosti v package.json datoteka bo izgledala takole:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' }>primer: Izvedba za predstavitev uporabe ejs s primerom.
HTML Primer naslova EJS> glava> <body> <h1>Zdravo,<%= name %>!h1> telo> 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('zdravo', { ime: 'Geeks' }); }); app.listen(port, () => { console.log(`Strežnik deluje na http://localhost:${port}`); });></pre> </code> <p dir='ltr'> <b> <strong>Korak za zagon aplikacije:</strong> </b> <span>Zaženite aplikacijo z naslednjim ukazom iz korenskega imenika projekta</span></p> <pre class='hljs'>node index.js></pre><p dir='ltr'> <b> <strong>Izhod:</strong> </b> <span>Vaš projekt bo prikazan v URL-ju 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="izhod"></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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/calculus-maq/">Račun - Maq</a> </li><li> <a href="/commerce-difference-between/">Trgovina - Razlika Med</a> </li><li> <a href="/cpp-constructor/">Cpp-Konstruktor</a> </li><li> <a href="/static-keyword/">Statična Ključna Beseda</a> </li><li> <a href="/java-list-methods/">Metode Seznama Java</a> </li><li> <a href="/python-directory-program/">Imeniški Program Python</a> </li><li> <a href="/python-numpy-mathematical-function/">Python Numpy-Matematična Funkcija</a> </li><li> <a href="/socket-programming/">Programiranje Vtičnic</a> </li><li> <a href="/javascript-methods/">Javascript-Metode</a> </li><li> <a href="/rxjs-tutorial/">Vadnica Rxjs</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">Poiščite delovna mesta, vključena v tehtano razporejanje delovnih mest</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Podanih je N delovnih mest, kjer je vsako delovno mesto predstavljeno z naslednjimi tremi elementi.1. Začetni čas 2. Končni čas 3. Dobiček ali povezana vrednost Poiščite podmnožico opravil, povezanih z največjim dobičkom, tako da se nobena opravila v podnaboru ne prekrivata.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/find-jobs-involved-in-weighted-job-scheduling"> <i class="fa fa-external-link"></i> Preberi Več</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Zanimivi Članki</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/sql-server-isnull-function">Funkcija SQL Server ISNULL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/jasmine-davis">Jasmine Davis</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-methods">Java metode</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-good-asvab-score-1311070">Kaj je dober rezultat ASVAB?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-check-if-variable-is-not-null-javascript">Kako preveriti, ali spremenljivka ni NULL v JavaScriptu</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">Priljubljene Objave</h2>
<div class="content">
<ul class="list"> <li><a href="/latex-fonts-size-styles">velikosti pisave iz lateksa</a>
</li><li><a href="/rani-mukerji">indijska igralka rani mukerji</a>
</li><li><a href="/ubuntu-ipconfig">ipconfig v Ubuntuju</a>
</li><li><a href="/how-find-out-my-monitor-size">kakšna je velikost mojega monitorja</a>
</li><li><a href="/kat-timpf">višina kat timpf</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 Vse Pravice Pridržane | <a href="//iw.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zavrnitev Odgovornosti</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Podjetju</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politika Zasebnosti</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>