@20002000
اگر به این موضوع نگاه می کنید احتمالاً از خود می پرسید که من کیستم.
سلام ، من هستم ، @ shadowtime2000 ، یکی از نگهدارنده های Eta ، یک موتور قالب سریع قابل جاسازی. در این آموزش ایجاد یک موتور قالب جاوا اسکریپت (شکل / مرورگر / گره) ناهمگن را نشان خواهم داد.
طراحی
طراحی اولیه موتور الگو بسیار ساده خواهد بود. این به سادگی مقادیر را از a
dataهدف – شی. استفاده خواهد کرد
{{valueName}}برای ارزش گذاری کردن
رندر ساده
ابتدا اجازه دهید یک تابع رندر ساده ایجاد کنیم که الگو و داده را بگیرد و مقدار را ارائه دهد.
var render = (template, data) = {
return template.replace(/{{(.*?)}}/g, (match) = {
return data[match.split(/{{|}}/).filter(Boolean)[0]]
})
}اساساً ، تمام آنچه انجام می دهد جستجوی هر چیزی است که توسط براکت احاطه شده است ، و نام داخل آن را جایگزین می کند
data. می توانید الگوهای خود را مانند این بنویسید و آن را از شی داده می گیرد.
render("Hi, my name is {{name}}!", {
name: "shadowtime2000"
});اما یک مشکل وجود دارد ، شما نمی توانید در استیضاح ها فاصله داشته باشید.
render("Hi, my name is {{ name }}!", {
name: "shadowtime2000"
})
/*
Hi, my name is undefined!
*/این مستلزم آن است که شما فضای موجود در آبجکت داده را داشته باشید ، که تمیز نیست. با اصلاح …