EJS چیه ؟ و چه کاربردی داره ؟!

تکنولوژی , خواندنی

یک نگاه اجمالی به موتور قالب‌گذاری فرانت‌اند EJS (Embedded JavaScript):
EJS چیست؟
- چرا از EJS استفاده کنیم؟
- نصب و استفاده از EJS
جمع‌بندی

یک نگاه اجمالی به موتور قالب‌گذاری فرانت‌اند EJS (Embedded JavaScript):

در دنیای توسعه وب، فرانت‌اند و بک‌اند دو قسمت اصلی یک سایت هستند که به طور همزمان کار می‌کنند. فرانت‌اند مسئول نمایش و رابط کاربری سایت است، در حالی که بک‌اند مسئول پردازش داده‌ها و ارتباط با پایگاه داده و دیگر سرویس‌ها می‌باشد.

EJS چیست؟

EJS یک موتور قالب‌گذاری جاوا اسکریپت است. یعنی می‌تونیم کدهای جاوااسکریپت رو به صورت تعبیه‌شده در کدهای HTML استفاده کنیم. این ابزار به ما این امکان رو می‌ده که داده‌های داینامیک رو به راحتی به صفحات وب اضافه کنیم.

EJS چیه ؟ و چه کاربردی داره ؟!

چرا از EJS استفاده کنیم؟

1. سادگی: یکی از اصلی‌ترین دلایل استفاده از EJS، سادگی آن است. این ابزار به ما این امکان رو می‌ده که با استفاده از تگ‌های ساده HTML و کدهای جاوااسکریپت، صفحات وب پویا و قالب‌بندی شده بسازیم.

2. تعامل با داده: EJS به ما اجازه می‌ده تا به راحتی با داده‌های داینامیک از منابع مختلف مثل پایگاه داده‌ها یا فایل‌های JSON تعامل کنیم و آنها رو در صفحات نمایش بدیم.

3. کاربردهای متعدد: EJS به عنوان یک موتور قالب‌گذاری چندمنظوره عمل می‌کنه و به ما این امکان رو می‌ده تا در توسعه وب، سیستم‌های مدیریت محتوا (CMS)، و حتی برنامه‌های Node.js از آن استفاده کنیم.

نصب و استفاده از EJS

برای استفاده از EJS، ابتدا باید آن رو نصب کنیم. از طریق دستور زیر می‌تونیم EJS رو با استفاده از npm نصب کنیم:

npm install ejs

سپس می‌تونیم آن رو به کد خودمون اضافه کنیم و از آن به صورت زیر استفاده کنیم:

const express = require('express');
const app = express();
const port = 3000;
app.set('view engine', 'ejs'); // set ejs
app.get('/', (req, res) => {
    const data = {
        pageTitle: ' aylero',
        message: 'we use ejs'
    };
    res.render('index', data);
});
app.listen(port, () => {
    console.log(`server run in port : ${port}`);
});

در این کد، ما ابتدا EJS را با استفاده از npm نصب می‌کنیم. سپس، آن را به کد خودمان اضافه می‌کنیم و از آن برای ایجاد یک صفحه وب ساده با عنوان “EJB” استفاده می‌کنیم.

در کد بالا، ما یک شیء داده به نام data ایجاد می‌کنیم که حاوی دو مقدار است: pageTitle و message. سپس، این شیء داده را به تابع render() می‌دهیم. تابع render() از EJS برای render کردن قالب استفاده می‌کند.

EJS یک انتخاب عالی برای توسعه‌دهندگانی است که به دنبال یک موتور قالب‌بندی ساده، قدرتمند و انعطاف‌پذیر برای ایجاد صفحات وب پویا هستند. برای استفاده از EJS، توسعه‌دهندگان باید ابتدا یک فایل قالب‌بندی EJS ایجاد کنند. این فایل‌ها معمولاً با پسوند .ejs گسترش می‌یابند.

یک فایل قالب‌بندی EJS از دو بخش اصلی تشکیل شده است:

بخش HTML: این بخش حاوی محتوای HTML است که باید در صفحه وب نمایش داده شود.
بخش JavaScript: این بخش حاوی کد JavaScript است که برای کنترل محتوای HTML استفاده می‌شود.

نمونه‌ای از یک فایل قالب‌بندی EJS را در زیر مشاهده می‌کنید:

<!doctype html>
<html lang="en">
<head>
  <title>My page</title>
</head>
<body>
  <h1>Hello, world!</h1>

  <script>
    // دهدیم رییغت ار h1 یاوتحم دک نیا تپیرکسا اواج
    document.querySelector("h1").textContent = "مالس!";
  </script>

</body>
</html>

این فایل قالب‌بندی حاوی یک بخش HTML و یک بخش JavaScript است. بخش HTML حاوی یک عنوان و یک عنصر h1 است. بخش JavaScript محتوای عنصر h1 را به “سلام!” تغییر می‌دهد.

در اینجا برخی از دستورات EJS رایج آورده شده است:

{{ var }}: این دستور برای نمایش مقدار یک متغیر استفاده می‌شود.
{{ if (condition) { }} ... {{ /if }}: این دستور برای ایجاد یک شرط استفاده می‌شود.
**`{{ for (var i = 0; i < items.length; i++) { }} …

جمع‌بندی

EJS یک ابزار قدرتمند و ساده برای قالب‌بندی صفحات وب در جاوااسکریپت است. با استفاده از تگ‌های ساده و تعبیه کد جاوااسکریپت در صفحات HTML، می‌تونیم به راحتی صفحات وب پویا و با داده‌های داینامیک ایجاد کنیم. اگر به دنبال ابزاری برای توسعه وب پویا در محیط Node.js هستید، EJS یک گزینه عالی است که می‌تونید از آن بهره‌برید.

با استفاده از EJS، می‌توانیم به راحتی صفحات وب خود را با زبان فارسی و با استفاده از آیلرو سفارشی‌سازی کنیم و تجربه کاربری بهتری برای بازدیدکنندگان سایت خود ایجاد کنیم. آیلرو.