یک سیستم تمپلیت گذاری نمونه در جاوااسکریپت
در این مقاله می خواهیم نگاهی داشته باشیم به مبحث JavaScript Templating یا همان مدیریت و ایجاد تمپلیت در وبسایت توسط جاوااسکریپت. در وحله ی اول بهتر است ببینیم تمپلیت های جاوااسکریپت چه معنایی دارند، چه زمانی باید از آنها استفاده کنیم و اینکه چگونه می توان آنها را پیاده سازی نمود.
خوب است بدانید که موتورهای Templating بسیاری وجود دارند که ما در این مقاله سه تا از بهترین های آنها را بررسی خواهیم کرد:
معنا و مفهوم تمپلت های جاوااسکریپت چیست؟
به طور مختصر :
“JavaScript Templating” روشی است برای جدا کردن ساختار HTML از محتوایی که قرار است به طور داینامیک در آن قرار داده شود.
اگر با زبان PHP کد نوشته باشید می دانید که برای قراردادن محتوای داینامیک از کاراکترهای ?php و ? در بین کدهای HTML استفاده می کنید، و خیالتان راحت است که هر زمان که صفحه رندر شد و کاربر آن را دید، محتوای داینامیک و درستی میبیند. این روش هم اکنون توسط زبان جاوااسکریپت هم قابل پیاده سازی است و خوشبختانه در این رابطه استاندارهای خوب و محکمی هم بنا نهاده شده است.
به عنوان مثال فریم ورک های قوی و قدرتمندی مثل Angular JS، Mustache و Handlebars از کاراکترهای {{your variable}} برای پردازش محتوای داینامیک استفاده می کنند.
بنابراین هر جای کد HTML که در نظر دارید محتوای داینامیک یا همان محتوای متغیرتان را نشان دهید، کافیست آن متغیر را بین علامت های کروشه بگذارید و خیالتان هم راحت باشد که به جای نام متغیر محتوای آن در متن قرار خواهد گرفت.
چه زمانی باید از از این روش استفاده کنیم؟
همانطور که احتمالا خودتان هم حدس زدید، جدا شدن کد از ساختار HTML و داینامیک ساختن محتوا آنهم در سمت کلاینت دو اثر مهم استفاده از این روش می باشد. یک از بهترین مثال هایی که برای این روش می توان زد بحث Localization است. به این ترتیب که شما می توانید وبسایتتان را به راحتی چند زبانه کنید. بدین ترتیب که آن قسمت از متونی را که می خواهید برای هر کاربر به زبان خاصی نمایش داده شود ترجمه و در متغیرهای مخصوص خودش بریزید. هر بار که مقدار متغیر ها را در برنامه عوض کنید، آن قسمت از متن هم عوض می شود.
تجربه ی عملی
خود من در یک پروژه ای که ماهیت بین المللی و چند زبانه داشت همین رفتار را با استفاده از فریم ورک Angular JS انجام دادم. به این شکل که یک منوی راست کلیک (Context menu) در صفحه ساختم که زیر مجموعه هایش لیست زبان های مختلف بود.
برای هر زبان هم یک فایل ترجمه ساخته بودم. با کلیک روی منو و زبان مورد نظر یک تابع در پشت صحنه اجرا میشد که مقدار متغیرها را از آن فایل می خواند و عوض می کرد و نوشته های وبسایت مثلا از انگلیسی به فارسی یا آلمانی عوض میشد. نتیجه ی کار بسیار دلپذیر بود.
چگونه تمپلت های جاوااسکریپت را پیاده سازی کنیم؟
در پاسخ به این سوال باید گفت که ابتدا باید ببینیم از چه فریم ورکی برای این کار استفاده می کنیم. هر چند اغلب فریم ورک ها، این روش را با استانداردهای یکسان اجرا می کنند.
ما نحوه ی استفاده از این روش را برای چهار فریم ورک معتبر و کاربردی در این زمینه توضیح خواهیم داد:
کتابخانه ی mustache.js
کتابخانه ی تمپلیت جاوااسکریپت js mustache
شاید ساده ترین ابزار برای استفاده، همین ابزار mustache.js باشد. در واقع این ابزار جاوااسکریپتی هیچ کار دیگری جز تمپلیت گذاری برای شما انجام نمیدهد!
خصوصیات مختلف mustache.js به صورت تیتر وار بدین ترتیب است:
- تنها ۹ کیلوبایت حجم دارد
- بسیار بسیار ساده است
- نیاز به هیچ dependency ندارد
- منطق خاصی جهت استفاده از آن نیست
مثال :
See the Pen Mustache.js example by SitePoint (@SitePoint) on CodePen.
همانطور که در این مثال می بینید، تابع Mustache.render دو پارامتر می گیرد: یکی رفرنس المانی است که می خواهیم در آن تغییر ایجاد کنیم و دومی هم مقادیری است که می خواهیم از آنها در تمپلتمان استفاده کنیم. به همین سادگی! کتابخانه ی mustache.js ابزاری بسیار کاربردی است برای استفاده در پروژه های کوچک و یا پروژه هایی که منطق تمپلیت گذاری در آنها ساده است. نکته ی جالب توجه در این قسمت این است که شما می توانید پروژه اتان را با mustache.js شروع کنید و اگر دیدید که کمی منطق تمپلت پروژه اتان رو به پیچیدگی رفت به راحتی به Handlebars.js سوییچ کنید و از آن استفاده کنید.
کتابخانه ی Handlebars.js
کتابخانه ی تمپلیت handlebars
خود این ابزار بر اساس کتابخانه ی mustache.js ساخته شده است. به طور مختصر، هر کاری که mustache.js انجام میدهد، Handlebars.js هم انجام می دهد. به علاوه اینکه از تمپلیت های از قبل رندر شده (Precompiled template) و بلاک های کد جاوااسکریپت (block expressions) هم پشتیبانی می کند!! به نظرم این جمله ی آخری کمی مبهم بود: Precompiled template یا تمپلیت از قبل رندر شده گزینه ی خوبی است برای افزایش کارایی (Performance) در برنامه. همچنین block expressions هم به شما اجازه می دهد که منطق بیشتری را در حین کدنویسی برای تمپلیت خودتان وارد کنید. خصوصیات مختلف Handlebars.js به صورت تیتر وار بدین ترتیب است:
- ۸۶ کیلوبایت حجم دارد
- پشتیبانی از Block expressions
- پشتیبانی از Precompiled templates
- بدون نیاز به وارد کردن dependency
مثال:
See the Pen Handlebars.js Example by SitePoint (@SitePoint) on CodePen.
کتابخانه jQuery Template
کتابخانه ی تمپلیت jquery
jQuery Template به اندازه ی سایر کتابخانه های Templating عمومی نیست اما این دلیل نمی شود که از آن چشم پوشی کنیم.
گرامر این سیستم کمی متفاوت تر از سایر ابزارهایی است که تا الان معرفی کردیم. تمپلیت های مورد استفاده در این سیستم باید HTML خالص باشند. خصوصیات مختلف jQuery Template به صورت تیتر وار بدین ترتیب است:
- تنها ۷ کیلوبایت حجم دارد
- نیازمند وارد کردن کتابخانه ی jQuery می باشد(+۸۲kb)
- ساده برای یادگیری، اما با گرامری متفاوت از آنچه در کتابخانه های بالا معرفی کردیم
- از مفهوم precompiled templates استفاده نمی کند
مثال:
See the Pen jQuery Template example by SitePoint (@SitePoint) on CodePen.
jQuery Template بسیار مناسب پروژه هایی است که در آن از jQuery استفاده می کنید.
گزینه های دیگر
قطعا گزینه های دیگری هم برای استفاده در مسئله ی javascript templating وجود دارد که ما در این مقاله به برجسته ترین هایش پرداختیم :
-
Underscore.js
-
Embedded JS Templates
-
Ember js
