アートテンプレートテンプレートエンジン
1.アートテンプレートテンプレートエンジンの基本コンセプト
1.1アートテンプレートテンプレートエンジン
アートテンプレートテンプレートエンジンはサードパーティのモジュールです。
開発者がよりわかりやすい方法で文字列をつなぎ合わせて、プロジェクトコードをより明確で保守しやすくします。
// 未使用模板引擎的写法
var ary = [{
name: '张三', age: 20 }];
var str = '<ul>';
for (var i = 0; i < ary.length; i++) {
str += '<li>\
<span>'+ ary[i].name +'</span>\
<span>'+ ary[i].age +'</span>\
</li>';
}
str += '</ul>';
<!-- 使用模板引擎的写法 -->
<ul>
{
{each ary}}
<li>{
{$value.name}}</li>
<li>{
{$value.age}}</li>
{
{/each}}
</ul>
1.2アートテンプレートテンプレートエンジン
コマンドラインツールで、npm installart-templateコマンドを
使用してダウンロードします。consttemplate= require（ 'art-template'）を使用してテンプレートエンジンを導入し、
スプライスするデータとテンプレートの場所をテンプレートエンジンに通知します。 const html = template（ 'template path'、Data）;
テンプレート構文を使用して、テンプレートとデータの接続方法をテンプレートエンジンに指示します
1.3アートテンプレートのコード例
// 导入模板引擎模块
const template = require('art-template');
// 将特定模板与特定数据进行拼接
const html = template('./views/index.art',{
data: {
name: '张三',
age: 20
}
});
<div>
<span>{
{data.name}}</span>
<span>{
{data.age}}</span>
</div>
2.テンプレートエンジンの構文
2.1テンプレート構文
art-templateは、標準構文と元の構文の2つのテンプレート構文を同時にサポートします。
標準構文を使用すると、テンプレートの読み取りと書き込みが簡単になり、元の構文には強力なロジック処理機能があります。
標準構文：{ {data}}
元の構文：<％= data％>
2.2出力
テンプレートに特定のデータ項目を出力するための標準構文と元の構文は次のとおりです。
標準構文：{ {data}}
元の構文：<％= data％>
<!-- 标准语法 -->
<h2>{
{value}}</h2>
<h2>{
{a ? b : c}}</h2>
<h2>{
{a + b}}</h2>
<!-- 原始语法 -->
<h2><%= value %></h2>
<h2><%= a ? b : c %></h2>
<h2><%= a + b %></h2>
2.3元の出力
データにHTMLタグが含まれている場合、デフォルトのテンプレートエンジンはタグを解析せず、エスケープされた後に出力します。
標準構文：{ {@ data}}
元の構文：<％-data％>
<!-- 标准语法 -->
<h2>{
{@ value }}</h2>
<!-- 原始语法 -->
<h2><%- value %></h2>
2.4条件付き判断
<!-- 标准语法 -->
{
{if 条件}} ... {
{/if}}
{
{if v1}} ... {
{else if v2}} ... {
{/if}}
<!-- 原始语法 -->
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
2.5ループ
標準構文：{ {各データ}} { {/ each}}
元の構文：<％for（）{％> <％}％>
<!-- 标准语法 -->
{
{each target}}
{
{$index}} {
{$value}}
{
{/each}}
<!-- 原始语法 -->
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
2.6サブテンプレート
サブテンプレートを使用して、Webサイトのパブリックブロック（頭、下）を個別のファイルに抽出します。
標準構文：{ {include'template '}}
元の構文：<％include（' template '）％>
<!-- 标准语法 -->
{
{include './header.art'}}
<!-- 原始语法 -->
<% include('./header.art') %>
2.7テンプレートの継承
テンプレート継承を使用すると、WebサイトのHTMLスケルトンを別のファイルに抽出でき、他のページテンプレートはスケルトンファイルを継承できます。
2.8テンプレート継承の例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML骨架模板</title>
{
{block 'head'}}{
{/block}}
</head>
<body>
{
{block 'content'}}{
{/block}}
</body>
</html>
<!--index.art 首页模板-->
{
{extend './layout.art'}}
{
{block 'head'}} <link rel="stylesheet" href="custom.css"> {
{/block}}
{
{block 'content'}} <p>This is just an awesome page.</p> {
{/block}}
2.9テンプレート構成
変数template.defaults.importsをテンプレートにインポートします。変数名=変数値;
テンプレートルートディレクトリを
設定しますtemplate.defaults.root =テンプレートディレクトリテンプレートのデフォルトサフィックスを設定しますtemplate.defaults.extname = '。art'