Potřebujeme ještě nástroje pro vytváření šablon, jako je ejs , jade , handlebars nebo nunchucks ? V javascriptu milujeme psaní asynchronního kódu. Splňují tyto šablonovací nástroje stále potřeby moderního javascriptu?
Celou cestu zpět, když jsme přecházeli z php nebo ruby na node.js, mnozí z nás se naučili, jak vytvořit aplikaci s express.js.
Implementace obslužných rutin směrování, které nakonec volají response.render() metoda. Předáním části dat a konfigurovaným šablonovým modulem by se vytvořil řetězec html, který je vrácen klientovi. Následovalo vše mocný vzor MVC. Tedy v podstatě všechny použité frameworky. V dnešních aplikacích bylo zobrazení nahrazeno react nebo vue . A v poslední době se pomocí next.js a nuxt.js mohou vykreslit na serversite #ssr.
Templating Engines je dobré psát značky strukturovaným způsobem. Chcete-li vykreslit data, která jsou předána dovnitř. A vytvářet šablony zahrnutím nebo rozšířením dalších souborů šablon.
Dnes se situace trochu změnila a máme silnou alternativu. Máme šablonové řetězcové literály v Javascriptu. A věřím, že pomocí malé pomocné funkce, kterou vám ukážu níže, lze některé velmi důležité body zlepšit.
Problémem šablon šablon je, že se jedná o čistě synchronizační funkce. Náš kód node.js musí připravit všechna data, která šablona potřebuje pro své argumenty. To může vést ke zbytečnému přetěžování. Ne přetěžování dat klientovi, ale načítání více dat z databáze, než je potřeba v šabloně.
Dále vám ukážu malého pomocníka, který umožní vykreslovat šablony asynchronně.
async function t(strings, ...data) {
const resolvedData = await Promise.all(data.map((d)=> {
if (typeof d === 'function') {
return d();
} else {
return d;
}
});
resolvedData.push('');
return strings.map(
(s, i) => s + resolvedData[i]
).join('')
}
Vidíte, je to funkce, kterou lze použít jako značky šablony. Všechny parametry, které jsou předány, se převedou na řetězec.
Příklady
Dále uvidíme, jak můžeme použít tohoto pomocníka pro šablony k zahrnutí a rozšíření šablon a také uvidíme, jak se přesně potřebná data načítají z databáze.
- Rozšiřitelná stránka nebo rozvržení
Tyto funkce šablony obvykle berou nějaké argumenty a umísťují je na místo.
function page ({title, meta, headers, content}) {
return t`<!DOCTYPE html>
<html>
<head>
<title>${title}</title>
${metatags(meta)}
${headers}
</head>
<body>${content}</body>
</html>
`;
}
- Zahrnuté
Často se jedná o opakovaně použitelné běžné součásti, jako jsou tlačítka, karty nebo jako v tomto případě seznam meta tagů. Použil jsem slovo comonents zde velmi záměrně.
function metatags(metaData) {
return Object.keys(metaDats || {}).map(
key => `<meta name="${key}" content="${metaData[key]}" />`
).join('')
}
- šablona pro stránku s celým článkem
Načte nějaká data a vyplní je na stránku. Články jsou dotazovány pomocí id, pomocí SQL, mongo nebo jakékoli rest nebo jiné služby, je to na vás.
async function article(id) {
const article = await Articles.getById(id);
return page({
title: article.title,
meta: {
keywords: artitle.keywords,
description: article.description
},
content: article.text,
});
}
- vytvořte aplikaci
Zde je zobrazena aplikace express js, ale může to být jakýkoli server. Koa, zrychli, co si jen vzpomenete. Zvládá http. Nenačte data, stačí vrátit odpověď.
const express = require('express');
const app = express();
app.listen(process.env.PORT || 3000);
app.get('/artitle/:id', async ({params})=>{
res.header('Content-Type', 'text/html');
res.send(await artitle(params.id));
});
aha, vynechal jsem ovladač? Potřebujete více logiky? Umístěte to, kamkoli uznáte za vhodné. Chceš nějakou injekci závislosti? Šabloně článku můžeme předat objekt kontextu, například objekt požadavku. To může mít všechny doplňky z middlewaru.
Tento vzor můžeme pojmenovat MV pattern . Protože jsme udělali ovladače volitelné. Není to velmi jednoduché vybrat šablonu pro API a vrátit se k uživateli?
Závěr
Všechny tipy v tomto článku nejsou příliš vážné. Ale doufám, že se vám malé ukázky líbily. A pro malé víkendové projekty, proč nezkusit něco nového? bavte se 😉