當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端_网页编程 Form表单与模板引擎（中）

發布時間：2024/9/27 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了前端_网页编程 Form表单与模板引擎（中）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

... ...
（續上篇）
四、模板引擎的基本概念
- 1.定義
- 2. 優點
五、art-template模板引擎
- 1.art-template模板引擎介紹
- 2. art-template的安裝
- 3. art-template模板引擎的基本使用
- - 3.1 使用傳統方式渲染UI結構
  - 3.2 art-template的使用步驟
- 4. art-template語法
- - 4.1 輸出
  - 4.2 原文輸出
  - 4.3 條件輸出
  - 4.4 循環輸出
  - 4.5 定義變量
  - 4.6 過濾器
  - 4.7 調試
  - 4.8 模板變量
  - - 4.8.1 導入變量
    - 4.8.2 內置變量
- 5 案例 - 新聞列表
- - 5.1 實現步驟
  - 5.2 實現過程
  - - 5.2.1 獲取新聞數據
    - 5.2.2 定義 template 模板
    - 5.2.3 編譯模板
  - 5.3 新聞列表案例完整`js`代碼
- 6. 模板引擎的實現原理

… …

（續上篇）

上一篇：前端_網頁編程 Form表單與模板引擎（上）

四、模板引擎的基本概念

在上一篇中，引申出了模板引擎的概念，這一篇在繼續介紹模板引擎的相關知識和使用前，再次理清它的概念或定義。

1.定義

模板引擎，顧名思義，它可以根據程序員指定的 模板結構 和數據，自動生成一個完整的HTML頁面。

#mermaid-svg-KUQImt47fJjKZCGg .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-KUQImt47fJjKZCGg .label text{fill:#333}#mermaid-svg-KUQImt47fJjKZCGg .node rect,#mermaid-svg-KUQImt47fJjKZCGg .node circle,#mermaid-svg-KUQImt47fJjKZCGg .node ellipse,#mermaid-svg-KUQImt47fJjKZCGg .node polygon,#mermaid-svg-KUQImt47fJjKZCGg .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-KUQImt47fJjKZCGg .node .label{text-align:center;fill:#333}#mermaid-svg-KUQImt47fJjKZCGg .node.clickable{cursor:pointer}#mermaid-svg-KUQImt47fJjKZCGg .arrowheadPath{fill:#333}#mermaid-svg-KUQImt47fJjKZCGg .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-KUQImt47fJjKZCGg .flowchart-link{stroke:#333;fill:none}#mermaid-svg-KUQImt47fJjKZCGg .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-KUQImt47fJjKZCGg .edgeLabel rect{opacity:0.9}#mermaid-svg-KUQImt47fJjKZCGg .edgeLabel span{color:#333}#mermaid-svg-KUQImt47fJjKZCGg .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-KUQImt47fJjKZCGg .cluster text{fill:#333}#mermaid-svg-KUQImt47fJjKZCGg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-KUQImt47fJjKZCGg .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-KUQImt47fJjKZCGg text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-KUQImt47fJjKZCGg .actor-line{stroke:grey}#mermaid-svg-KUQImt47fJjKZCGg .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-KUQImt47fJjKZCGg .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-KUQImt47fJjKZCGg #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-KUQImt47fJjKZCGg .sequenceNumber{fill:#fff}#mermaid-svg-KUQImt47fJjKZCGg #sequencenumber{fill:#333}#mermaid-svg-KUQImt47fJjKZCGg #crosshead path{fill:#333;stroke:#333}#mermaid-svg-KUQImt47fJjKZCGg .messageText{fill:#333;stroke:#333}#mermaid-svg-KUQImt47fJjKZCGg .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-KUQImt47fJjKZCGg .labelText,#mermaid-svg-KUQImt47fJjKZCGg .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-KUQImt47fJjKZCGg .loopText,#mermaid-svg-KUQImt47fJjKZCGg .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-KUQImt47fJjKZCGg .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-KUQImt47fJjKZCGg .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-KUQImt47fJjKZCGg .noteText,#mermaid-svg-KUQImt47fJjKZCGg .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-KUQImt47fJjKZCGg .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-KUQImt47fJjKZCGg .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-KUQImt47fJjKZCGg .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-KUQImt47fJjKZCGg .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-KUQImt47fJjKZCGg .section{stroke:none;opacity:0.2}#mermaid-svg-KUQImt47fJjKZCGg .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-KUQImt47fJjKZCGg .section2{fill:#fff400}#mermaid-svg-KUQImt47fJjKZCGg .section1,#mermaid-svg-KUQImt47fJjKZCGg .section3{fill:#fff;opacity:0.2}#mermaid-svg-KUQImt47fJjKZCGg .sectionTitle0{fill:#333}#mermaid-svg-KUQImt47fJjKZCGg .sectionTitle1{fill:#333}#mermaid-svg-KUQImt47fJjKZCGg .sectionTitle2{fill:#333}#mermaid-svg-KUQImt47fJjKZCGg .sectionTitle3{fill:#333}#mermaid-svg-KUQImt47fJjKZCGg .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-KUQImt47fJjKZCGg .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-KUQImt47fJjKZCGg .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-KUQImt47fJjKZCGg .grid path{stroke-width:0}#mermaid-svg-KUQImt47fJjKZCGg .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-KUQImt47fJjKZCGg .task{stroke-width:2}#mermaid-svg-KUQImt47fJjKZCGg .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-KUQImt47fJjKZCGg .taskText:not([font-size]){font-size:11px}#mermaid-svg-KUQImt47fJjKZCGg .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-KUQImt47fJjKZCGg .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-KUQImt47fJjKZCGg .task.clickable{cursor:pointer}#mermaid-svg-KUQImt47fJjKZCGg .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-KUQImt47fJjKZCGg .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-KUQImt47fJjKZCGg .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-KUQImt47fJjKZCGg .taskText0,#mermaid-svg-KUQImt47fJjKZCGg .taskText1,#mermaid-svg-KUQImt47fJjKZCGg .taskText2,#mermaid-svg-KUQImt47fJjKZCGg .taskText3{fill:#fff}#mermaid-svg-KUQImt47fJjKZCGg .task0,#mermaid-svg-KUQImt47fJjKZCGg .task1,#mermaid-svg-KUQImt47fJjKZCGg .task2,#mermaid-svg-KUQImt47fJjKZCGg .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-KUQImt47fJjKZCGg .taskTextOutside0,#mermaid-svg-KUQImt47fJjKZCGg .taskTextOutside2{fill:#000}#mermaid-svg-KUQImt47fJjKZCGg .taskTextOutside1,#mermaid-svg-KUQImt47fJjKZCGg .taskTextOutside3{fill:#000}#mermaid-svg-KUQImt47fJjKZCGg .active0,#mermaid-svg-KUQImt47fJjKZCGg .active1,#mermaid-svg-KUQImt47fJjKZCGg .active2,#mermaid-svg-KUQImt47fJjKZCGg .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-KUQImt47fJjKZCGg .activeText0,#mermaid-svg-KUQImt47fJjKZCGg .activeText1,#mermaid-svg-KUQImt47fJjKZCGg .activeText2,#mermaid-svg-KUQImt47fJjKZCGg .activeText3{fill:#000 !important}#mermaid-svg-KUQImt47fJjKZCGg .done0,#mermaid-svg-KUQImt47fJjKZCGg .done1,#mermaid-svg-KUQImt47fJjKZCGg .done2,#mermaid-svg-KUQImt47fJjKZCGg .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-KUQImt47fJjKZCGg .doneText0,#mermaid-svg-KUQImt47fJjKZCGg .doneText1,#mermaid-svg-KUQImt47fJjKZCGg .doneText2,#mermaid-svg-KUQImt47fJjKZCGg .doneText3{fill:#000 !important}#mermaid-svg-KUQImt47fJjKZCGg .crit0,#mermaid-svg-KUQImt47fJjKZCGg .crit1,#mermaid-svg-KUQImt47fJjKZCGg .crit2,#mermaid-svg-KUQImt47fJjKZCGg .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-KUQImt47fJjKZCGg .activeCrit0,#mermaid-svg-KUQImt47fJjKZCGg .activeCrit1,#mermaid-svg-KUQImt47fJjKZCGg .activeCrit2,#mermaid-svg-KUQImt47fJjKZCGg .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-KUQImt47fJjKZCGg .doneCrit0,#mermaid-svg-KUQImt47fJjKZCGg .doneCrit1,#mermaid-svg-KUQImt47fJjKZCGg .doneCrit2,#mermaid-svg-KUQImt47fJjKZCGg .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-KUQImt47fJjKZCGg .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-KUQImt47fJjKZCGg .milestoneText{font-style:italic}#mermaid-svg-KUQImt47fJjKZCGg .doneCritText0,#mermaid-svg-KUQImt47fJjKZCGg .doneCritText1,#mermaid-svg-KUQImt47fJjKZCGg .doneCritText2,#mermaid-svg-KUQImt47fJjKZCGg .doneCritText3{fill:#000 !important}#mermaid-svg-KUQImt47fJjKZCGg .activeCritText0,#mermaid-svg-KUQImt47fJjKZCGg .activeCritText1,#mermaid-svg-KUQImt47fJjKZCGg .activeCritText2,#mermaid-svg-KUQImt47fJjKZCGg .activeCritText3{fill:#000 !important}#mermaid-svg-KUQImt47fJjKZCGg .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-KUQImt47fJjKZCGg g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-KUQImt47fJjKZCGg g.classGroup text .title{font-weight:bolder}#mermaid-svg-KUQImt47fJjKZCGg g.clickable{cursor:pointer}#mermaid-svg-KUQImt47fJjKZCGg g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-KUQImt47fJjKZCGg g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-KUQImt47fJjKZCGg .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-KUQImt47fJjKZCGg .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-KUQImt47fJjKZCGg .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-KUQImt47fJjKZCGg .dashed-line{stroke-dasharray:3}#mermaid-svg-KUQImt47fJjKZCGg #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-KUQImt47fJjKZCGg #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-KUQImt47fJjKZCGg #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-KUQImt47fJjKZCGg #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-KUQImt47fJjKZCGg #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-KUQImt47fJjKZCGg #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-KUQImt47fJjKZCGg #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-KUQImt47fJjKZCGg #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-KUQImt47fJjKZCGg .commit-id,#mermaid-svg-KUQImt47fJjKZCGg .commit-msg,#mermaid-svg-KUQImt47fJjKZCGg .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-KUQImt47fJjKZCGg .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-KUQImt47fJjKZCGg .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-KUQImt47fJjKZCGg g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-KUQImt47fJjKZCGg g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-KUQImt47fJjKZCGg g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-KUQImt47fJjKZCGg g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-KUQImt47fJjKZCGg g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-KUQImt47fJjKZCGg g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-KUQImt47fJjKZCGg .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-KUQImt47fJjKZCGg .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-KUQImt47fJjKZCGg .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-KUQImt47fJjKZCGg .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-KUQImt47fJjKZCGg .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-KUQImt47fJjKZCGg .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-KUQImt47fJjKZCGg .edgeLabel text{fill:#333}#mermaid-svg-KUQImt47fJjKZCGg .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-KUQImt47fJjKZCGg .node circle.state-start{fill:black;stroke:black}#mermaid-svg-KUQImt47fJjKZCGg .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-KUQImt47fJjKZCGg #statediagram-barbEnd{fill:#9370db}#mermaid-svg-KUQImt47fJjKZCGg .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-KUQImt47fJjKZCGg .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-KUQImt47fJjKZCGg .statediagram-state .divider{stroke:#9370db}#mermaid-svg-KUQImt47fJjKZCGg .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-KUQImt47fJjKZCGg .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-KUQImt47fJjKZCGg .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-KUQImt47fJjKZCGg .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-KUQImt47fJjKZCGg .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-KUQImt47fJjKZCGg .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-KUQImt47fJjKZCGg .note-edge{stroke-dasharray:5}#mermaid-svg-KUQImt47fJjKZCGg .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-KUQImt47fJjKZCGg .error-icon{fill:#522}#mermaid-svg-KUQImt47fJjKZCGg .error-text{fill:#522;stroke:#522}#mermaid-svg-KUQImt47fJjKZCGg .edge-thickness-normal{stroke-width:2px}#mermaid-svg-KUQImt47fJjKZCGg .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-KUQImt47fJjKZCGg .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-KUQImt47fJjKZCGg .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-KUQImt47fJjKZCGg .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-KUQImt47fJjKZCGg .marker{fill:#333}#mermaid-svg-KUQImt47fJjKZCGg .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-KUQImt47fJjKZCGg {color: rgba(0, 0, 0, 0.75);font: ;}數據模板結構模板引擎HTML頁面

2. 優點

減少了字符串的拼接操作

使代碼結構更清晰

使代碼更易于閱讀與維護

五、art-template模板引擎

1.art-template模板引擎介紹

art-template 是一個簡約、超快的模板引擎。中文官網首頁為 http://aui.github.io/art-template/zh-cn/docs/installation.html

art-template 采用作用域預聲明的技術來優化模板渲染速度，從而獲得接近 JavaScript 極限的運行性能，并且同時支持 NodeJS 和瀏覽器。

常用模板引擎執行效率圖示：

2. art-template的安裝

在瀏覽器訪問 http://aui.github.io/art-template/zh-cn/docs/installation.html 頁面，在【在瀏覽器中編譯】板塊中，找到下載鏈接并鼠標右鍵，選擇“鏈接另存為”，將 art-template 下載到本地，然后，通過 < script> 標簽加載到網頁上進行使用。

示圖：

安裝方法：

通過 < script> 標簽加載到網頁上進行使用

3. art-template模板引擎的基本使用

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./lib/template-web.js"></script> </head>

3.1 使用傳統方式渲染UI結構

效果圖_使用傳統方式渲染UI結構

傳統方式渲染的完整代碼：

HTML：

js代碼

3.2 art-template的使用步驟

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./lib/template-web.js"></script><script src="./lib/jquery.js"></script> </head> <body><div id="container"></div><script type="text/html" id="tpl-user"><h1>{{name}}-- {{age}}</h1></script><script>// 2、定義需要渲染的數據var data = {name: '張三瘋',age: 200}// 4、調用template函數var htmlstr = template('tpl-user', data)// 渲染HTML結構$('#container').html(htmlstr)</script> </body>

導入art-template；

定義數據；

定義模板；

調用template函數；

渲染HTML結構。

4. art-template語法

art-template 支持標準語法 和 原始語法。標準語法可以讓模板易讀寫，而原始語法擁有強大的邏輯表達能力。

標準語法支持基本模板語法以及基本 JavaScript 表達式；原始語法支持任意 JavaScript 語句。

art-template 提供了 {{ }} 這種語法格式，在 {{ }} 內可以進行變量輸出，或循環數組等操作，這種 {{ }} 語法在 art-template 中被稱為標準語法。

原理：如果想要把數據填充到模板里，先通過雙花括號來放一個占位符，將來只要調用template函數，雙花括號所在的位置就會自動替換為真實的數據。這種雙花括號{{}}，在art-tmplate中叫做 標準語法

{{}}雙花括號除了代表占位符外，還可以做一些其它復雜的操作：

4.1 輸出

1）標準語法 - 輸出：

2）原始語法 - 輸出：

<%= value %> <%= data.key %> <%= data['key'] %> <%= a ? b : c %> <%= a || b %> <%= a + b %>

4.2 原文輸出

1）標準語法 - 原文輸出：

只要在表達式之前，加了“@”,就表示原文輸出。
如果要輸出的 value 值中，包含了 HTML 標簽結構，則需要使用原文輸出語法，才能保證 HTML 標簽被正常渲染。

標準語法-原文輸出示例：

// 定義需要渲染的數據var data = {name: '張三瘋',age: 20,text: '<h3> 測試原文輸出 </h3>'} <script type="text/html" id="tpl-user"><h1>{{name}}-- {{age}}</h1>{{@ text}}</script>

（注：@與表達式之間有個空格不要漏掉）

2）原始語法 - 原文輸出：

<%- value %>

4.3 條件輸出

1）標準語法 - 條件輸出：
如果要實現條件輸出，則可以在 {{ }} 中使用 if … else if … /if 的方式，進行按需輸出。

{{if value}} 按需輸出的內容 {{/if}}  {{if v1}} 按需輸出的內容 {{else if v2}} 按需輸出的內容 {{/if}}

第1個if代表條件輸出的開始，/if代表條件輸出的結束。

2）原始語法 - 條件輸出：

<% if (value) { %>按需輸出的內容 <% } %>  <% if (v1) { %>按需輸出的內容 <% else if (v2) { %>按需輸出的內容 <% } %>

4.4 循環輸出

1）標準語法 - 循環輸出：
如果要實現循環輸出，則可以在 {{}} 內，通過 each 語法循環數組，當前循環的索引使用 $index 進行訪問，當前的循環項使用 & value 進行訪問。

在 {{ }} 語法中，可以進行變量的輸出、對象屬性的輸出、三元表達式輸出、邏輯或輸出、加減乘除等表達。

標準語法-循環輸出示例：

<div id="container"></div><script type="text/html" id="tpl-user"><h1>{{name}}-- {{age}}</h1>{{@ text}}<ul>{{each hobby}}<li>索引{{$index}}，item：{{$value}}</li>{{/each}}</ul></script> <script>// 2、定義需要渲染的數據var data = {name: '張三瘋',age: 20,text: '<h3> 測試原文輸出 </h3>',hobby: ['吃飯', '睡覺', '寫代碼']}// 4、調用template函數var htmlstr = template('tpl-user', data)// 渲染HTML結構$('#container').html(htmlstr)</script>

頁面渲染效果：

2）原始語法 - 循環輸出：

<% for (var i = 0; i < arr.length; i++) { %> <%= i %> <% = arr[i] %> <% } %>

代碼中，arr是目標數組，each是數組遍歷，$index 是數組下標， $value是數組的值。

注： arr 支持 array 與object 的迭代，其默認值為 $data。

4.5 定義變量

1）標準語法：

2）原始語法：

<% var temp = data.sub.content %>

4.6 過濾器

過濾器的本質，就是一個function處理函數。

1）標準語法 - 過濾器：

【語法注解】：“|”代表調用某個函數（也叫管道符）。把value當做參數，通過管道符，傳遞給后的函數filterName。

過濾器語法類似 管道操作符，它的上一個輸出作為下一個輸入。
定義過濾器的基本語法如下：

template.defaults.imports.filterName = function(value){/*return處理的結果*/}

注意：調用函數時，函數名要與這里實際的filterName名稱一致。最后必須return出去值，供后面的雙花括號{{}}渲染使用。

2）示例：

① 定義一個格式化時間的過濾器 dateFormat，如下：

② 定義一個給字符串加引號過濾器 addQuotationMarks，如下：

// 定義給字符串加引號過濾器 addQuotationMarks 方法:template.defaults.imports.addQuotationMarks = function (str) {return `"${str}"`;}

注：

date 默認為 format 過濾器(方法)的第一個參數， 'YYYy-mM-dd' 才是format 過濾器的第二個參數，date 經過 format 過濾器過濾后，得到的結果又作為 addQuotationMarks 過濾器的默認參數，如果有更多的過濾器，那么就把前一層過濾器過濾的結果，作為下一個過濾器的參數一層層過濾下去。

3）渲染模板和數據：

// 調用 template 方法，渲染模板和數據var html = template('filterTpl', data);document.querySelector('.container').innerHTML = html;

過濾器 - 完整案例代碼：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./lib/template-web.js"></script> </head><body><div class="container"></div><script type="text/html" id="filterTpl"><h3>{{date | dateformat 'YYYy-mM-dd' | addQuotationMarks}}</h3><h3><%= $imports.addQuotationMarks($imports.dateformat(date)) %></h3></script><script>var data = {date: Date.now(),}// 定義日期格式化過濾器 format 方法：template.defaults.imports.dateformat = function(date, format) {if (!format || format.toLowerCase() === 'yyyy-mm-dd') {var dt = new Date(date);var y = dt.getFullYear();var m = (dt.getMonth() + 1).toString().padStart(2, '0');var d = dt.getDate().toString().padStart(2, '0');// 注意，過濾器最后一定要 return 一個值：// return `${y}-${m}-$ozvdkddzhkzd`; 或下面這種寫法return y + '-' + m + '-' + d} else {return '無效的日期！';}}// 定義給字符串加引號過濾器 addQuotationMarks 方法:template.defaults.imports.addQuotationMarks = function(str) {return `"${str}"`;}// 調用 template 方法，渲染模板和數據var html = template('filterTpl', data);document.querySelector('.container').innerHTML = html;</script> </body></html>

4.7 調試

template.defaults.debug

art-template 內建調試器，能夠捕獲到語法與運行錯誤，并且支持自定義的語法。在 NodeJS 中調試模式會根據環境變量自動開啟：process.env.NODE_ENV !== 'production'，設置 template.defaults.debug=true 后，等同于：

{"cache": false,"minimize": false,"compileDebug": true }

4.8 模板變量

template.defaults.imports

模板通過 $imports 可以訪問到模板外部的全局變量和導入的變量。

4.8.1 導入變量

1）標準語法：

template.defaults.imports.log = console.log;

2）原始語法：

<% $imports.log('Hello, template.defaults.imports.log') %>;

3）示例代碼：

4.8.2 內置變量

變量清單

變量名描述

$data	傳入模板的數據
print	字符串輸出函數
include	子模板載入函數
extend	模板繼承模板導入函數
block	模板塊生命函數

5 案例 - 新聞列表

5.1 實現步驟

獲取新聞數據；

定義 template 模板；

編譯模板；

定義時間過濾器；

定義補零函數。

本案例素材：https://pan.baidu.com/s/1VDaCu6MgoLMLGucNy7Mqkw
提取碼：sm5a

素材中，HTML結構、CSS樣式代碼已具備，只需要寫js實現代碼。

5.2 實現過程

5.2.1 獲取新聞數據

在素材的 js 文件中，新建news.js并引入到HTML頁面中。

書寫 news.js 代碼

$(function() { // jQurey入口函數// 發起請求獲取新聞列表數據的函數function getNewsList() {$.get('http://www.liulongbin.top:3006/api/news', function(res) {// res接收服務器響應回來的結果if (res.status !== 200) return alert('新聞列表獲取失敗！');console.log(res.data); // 打印獲取到的數據});};// 調用請求函數getNewsList()})

console.log獲取到的數據如下：

5.2.2 定義 template 模板

1）定義模板的步驟：

要創建 < script>標簽；

給這個標簽指定type屬性（type="text/html"）；

在< script >標簽內部填充一些HTML的模板結構。

2）定義模板
在HTML中的< /body>標簽結束之前定義模板：

將 < div class="news-item"> ... < /div>這部分全部剪切，粘貼到上一步建好的模板< script type="text/html"> < /script>內。

<script type="text/html"><div class="news-item"><img class="thumb" src="" alt="" /><div class="right-box"><h1 class="title">5G商用在即，三大運營商營收持續下降</h1><div class="tags"><span>三大運營商</span><span>中國移動</span><span>5G商用</span></div><div class="footer"><div><span>胡潤百富</span>  <span>2019-10-28 10:14:38</span></div><span>評論數：66</span></div></div></div></script>

定義好模板，接下來要做的就是編譯模板。

5.2.3 編譯模板

給模板添加 id（值為"tpl-news"）。

在news.js中，調用template函數并將返回的字符串，賦值給變量htmlstr。

var htmlstr = template('tpl-news', res);

然后將得到的數據填充到< div id="news-list"> < /div>的內部。

$(function() {// 發起請求獲取新聞列表數據的函數function getNewsList() {$.get('http://www.liulongbin.top:3006/api/news', function(res) {// res接收服務器響應回來的結果if (res.status !== 200) return alert('新聞列表獲取失敗！');var htmlstr = template('tpl-news', res);// DOM操作$('#news-list').html(htmlstr)});};getNewsList() })

運行效果如圖：

由前面5.2.1中用console.log在控制臺輸出的數據可知，新聞有9條數據，而這里只渲染了1條。

原因：
因為雖然把數據傳到模板里了,但是我們并沒有拿到數據去進行循環渲染。所以接下來重點是放在模板內部

思路：

首先，要看下能否拿到傳過來的data數據；
驗證方法： 在模板內部寫上標準語法雙花括號{{data.length}}，運行后,在頁面正確的顯示data數組的長度為9。這就說明新聞列表數據能夠被訪問到。

用each循環創建新聞的item項。

將模板除< script>標簽外,全部放到 each循環內，并完善圖片img的src屬性：

完善前:

完善后 :

由接口文檔可知，data返回值中的img的地址示例"img": "/images/0.webp"是不完整的，因此模板中加上了它的根路徑。

標簽的處理
接口文檔中，標簽的返回結果，是一個字符串"tags": "三大運營商,中國移動,5G商用"，渲染每個標簽，是要拿到標簽的數組，因此，在渲染前需要將字符串改造成數組(split函數)：

// 把每項的tags屬性，從字符串改為數組for (var i = 0; i < res.data.length; i++) {res.data[i].tags = res.data[i].tags.split(',')}console.log(res);

控制臺輸出結果如下，可見每項的tags都變成了長度為3的一個數組。

有了tags數組后，就可以在每一個新聞的item項里，再寫一個子循環，循環tags屬性。每循環一次就創建一個標簽。
具體實現如下：

1) 改造HTML文件中的結構代碼：

對HTML頁面中寫死的部分進行改造。

改造前：

<div class="tags"><span>三大運營商</span><span>中國移動</span><span>5G商用</span></div>

改造后：

<div class="tags">{{each $value.tags}}<span>{{$value}}</span> {{/each}}</div>

注意： < span>標簽中的$ value和each循環中的$ value不一樣，后者是表示當前新聞的信息，循環的是當前新聞的這個$value.tags數組；每循環一次，拿到的項，就是< span> 中的$value。

再分別替換信息來源、日期，改造后的代碼如下：

<script type="text/html" id="tpl-news">{{each data}}<div class="news-item"><img class="thumb" src="{{'http://www.liulongbin.top:3006'+$value.img}}" alt="" /><div class="right-box"><h1 class="title">{{$value.title}}</h1><div class="tags">{{each $value.tags}}<span>{{$value}}</span>{{/each}}</div><div class="footer"><div><span>{{$value.source}}</span>  <span>{{$value.time}}</span></div><span>評論數：{{$value.cmtcount}}</span></div></div></div>{{/each}}</script>

至此，基本結構已完成。剩下時間格式美化，定義時間過濾器和補零函數。

2）美化新聞列表中的時間格式

① 編寫時間過濾器 dateFormat：

// 定義格式化時間過濾器 template.defaults.imports.dateFormat = function(dtstr) {var dt = new Date(dtstr);var y = dt.getFullYear();var m = dt.getMonth() + 1;var d = dt.getDate();var hh = dt.getHours();var mm = dt.getMinutes();var ss = dt.getSeconds();return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss}

調用過濾器

<div class="footer"><div><span>{{$value.source}}</span>  <span>{{$value.time | dateFormat}}</span> // 調用過濾器</div><span>評論數：{{$value.cmtcount}}</span> </div>

渲染后的效果：

因此，我們是再次對時間進行處理，即補零。

② 補零函數

// 時間補零函數function padZero(n) {if (n < 10) {return '0' + n;} else {return n;}}

然后再在時間過濾器當中調用padZero函數：

template.defaults.imports.dateFormat = function(dtstr) {var dt = new Date(dtstr);var y = dt.getFullYear();var m = padZero(dt.getMonth() + 1);var d = padZero(dt.getDate());var hh = padZero(dt.getHours());var mm = padZero(dt.getMinutes());var ss = padZero(dt.getSeconds());return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss}

5.3 新聞列表案例完整js代碼

$(function() {// 時間補零函數function padZero(n) {if (n < 10) {return '0' + n;} else {return n;}}// 定義格式化時間的過濾器template.defaults.imports.dateFormat = function(dtstr) {var dt = new Date(dtstr);var y = dt.getFullYear();var m = padZero(dt.getMonth() + 1);var d = padZero(dt.getDate());var hh = padZero(dt.getHours());var mm = padZero(dt.getMinutes());var ss = padZero(dt.getSeconds());return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss}// 發起請求獲取新聞列表數據的函數function getNewsList() {$.get('http://www.liulongbin.top:3006/api/news', function(res) {// res接收服務器響應回來的結果if (res.status !== 200) return alert('新聞列表獲取失敗！');// 把每項的tags屬性，從字符串改為數組for (var i = 0; i < res.data.length; i++) {res.data[i].tags = res.data[i].tags.split(',')}console.log(res);var htmlstr = template('tpl-news', res);// DOM操作$('#news-list').html(htmlstr)});};getNewsList() })

6. 模板引擎的實現原理

（轉下一篇）