當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時(shí)間：2024/9/27 HTML 35 豆豆

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

... ...
（續(xù)上篇）
四、模板引擎的基本概念
- 1.定義
- 2. 優(yōu)點(diǎn)
五、art-template模板引擎
- 1.art-template模板引擎介紹
- 2. art-template的安裝
- 3. art-template模板引擎的基本使用
- - 3.1 使用傳統(tǒng)方式渲染UI結(jié)構(gòu)
  - 3.2 art-template的使用步驟
- 4. art-template語法
- - 4.1 輸出
  - 4.2 原文輸出
  - 4.3 條件輸出
  - 4.4 循環(huán)輸出
  - 4.5 定義變量
  - 4.6 過濾器
  - 4.7 調(diào)試
  - 4.8 模板變量
  - - 4.8.1 導(dǎo)入變量
    - 4.8.2 內(nèi)置變量
- 5 案例 - 新聞列表
- - 5.1 實(shí)現(xiàn)步驟
  - 5.2 實(shí)現(xiàn)過程
  - - 5.2.1 獲取新聞數(shù)據(jù)
    - 5.2.2 定義 template 模板
    - 5.2.3 編譯模板
  - 5.3 新聞列表案例完整`js`代碼
- 6. 模板引擎的實(shí)現(xiàn)原理

… …

（續(xù)上篇）

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

四、模板引擎的基本概念

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

1.定義

模板引擎，顧名思義，它可以根據(jù)程序員指定的 模板結(jié)構(gòu) 和 數(shù)據(jù)，自動(dòng)生成一個(gè)完整的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: ;}數(shù) 據(jù)模板結(jié)構(gòu)模板引擎HTML頁面

2. 優(yōu)點(diǎn)

減少了字符串的拼接操作

使代碼結(jié)構(gòu)更清晰

使代碼更易于閱讀與維護(hù)

五、art-template模板引擎

1.art-template模板引擎介紹

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

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

常用模板引擎執(zhí)行效率圖示：

2. art-template的安裝

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

示圖：

安裝方法：

通過 < script> 標(biāo)簽加載到網(wǎng)頁上進(jìn)行使用

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 使用傳統(tǒng)方式渲染UI結(jié)構(gòu)

效果圖_使用傳統(tǒng)方式渲染UI結(jié)構(gòu)

傳統(tǒng)方式渲染的完整代碼：

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、定義需要渲染的數(shù)據(jù)var data = {name: '張三瘋',age: 200}// 4、調(diào)用template函數(shù)var htmlstr = template('tpl-user', data)// 渲染HTML結(jié)構(gòu)$('#container').html(htmlstr)</script> </body>

導(dǎo)入art-template；

定義數(shù)據(jù)；

定義模板；

調(diào)用template函數(shù)；

渲染HTML結(jié)構(gòu)。

4. art-template語法

art-template 支持標(biāo)準(zhǔn)語法 和 原始語法。標(biāo)準(zhǔn)語法可以讓模板易讀寫，而原始語法擁有強(qiáng)大的邏輯表達(dá)能力。

標(biāo)準(zhǔn)語法支持基本模板語法以及基本 JavaScript 表達(dá)式；原始語法支持任意 JavaScript 語句。

art-template 提供了 {{ }} 這種語法格式，在 {{ }} 內(nèi)可以進(jìn)行變量輸出，或循環(huán)數(shù)組等操作，這種 {{ }} 語法在 art-template 中被稱為標(biāo)準(zhǔn)語法。

原理：如果想要把數(shù)據(jù)填充到模板里，先通過雙花括號(hào)來放一個(gè)占位符，將來只要調(diào)用template函數(shù)，雙花括號(hào)所在的位置就會(huì)自動(dòng)替換為真實(shí)的數(shù)據(jù)。這種雙花括號(hào){{}}，在art-tmplate中叫做 標(biāo)準(zhǔn)語法

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

4.1 輸出

1）標(biāo)準(zhǔn)語法 - 輸出：

2）原始語法 - 輸出：

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

4.2 原文輸出

1）標(biāo)準(zhǔn)語法 - 原文輸出：

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

標(biāo)準(zhǔn)語法-原文輸出示例：

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

（注：@與表達(dá)式之間有個(gè)空格不要漏掉）

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

<%- value %>

4.3 條件輸出

1）標(biāo)準(zhǔn)語法 - 條件輸出：
如果要實(shí)現(xiàn)條件輸出，則可以在 {{ }} 中使用 if … else if … /if 的方式，進(jìn)行按需輸出。

{{if value}} 按需輸出的內(nèi)容 {{/if}}  {{if v1}} 按需輸出的內(nèi)容 {{else if v2}} 按需輸出的內(nèi)容 {{/if}}

第1個(gè)if代表?xiàng)l件輸出的開始，/if代表?xiàng)l件輸出的結(jié)束。

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

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

4.4 循環(huán)輸出

1）標(biāo)準(zhǔn)語法 - 循環(huán)輸出：
如果要實(shí)現(xiàn)循環(huán)輸出，則可以在 {{}} 內(nèi)，通過 each 語法循環(huán)數(shù)組，當(dāng)前循環(huán)的索引使用 $index 進(jìn)行訪問，當(dāng)前的循環(huán)項(xiàng)使用 & value 進(jìn)行訪問。

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

標(biāo)準(zhǔn)語法-循環(huán)輸出示例：

<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、定義需要渲染的數(shù)據(jù)var data = {name: '張三瘋',age: 20,text: '<h3> 測(cè)試原文輸出 </h3>',hobby: ['吃飯', '睡覺', '寫代碼']}// 4、調(diào)用template函數(shù)var htmlstr = template('tpl-user', data)// 渲染HTML結(jié)構(gòu)$('#container').html(htmlstr)</script>

頁面渲染效果：

2）原始語法 - 循環(huán)輸出：

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

代碼中，arr是目標(biāo)數(shù)組，each是數(shù)組遍歷，$index 是數(shù)組下標(biāo)， $value是數(shù)組的值。

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

4.5 定義變量

1）標(biāo)準(zhǔn)語法：

2）原始語法：

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

4.6 過濾器

過濾器的本質(zhì)，就是一個(gè)function處理函數(shù)。

1）標(biāo)準(zhǔn)語法 - 過濾器：

【語法注解】：“|”代表調(diào)用某個(gè)函數(shù)（也叫管道符）。把value當(dāng)做參數(shù)，通過管道符，傳遞給后的函數(shù)filterName。

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

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

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

2）示例：

① 定義一個(gè)格式化時(shí)間的過濾器 dateFormat，如下：

② 定義一個(gè)給字符串加引號(hào)過濾器 addQuotationMarks，如下：

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

注：

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

3）渲染模板和數(shù)據(jù)：

// 調(diào)用 template 方法，渲染模板和數(shù)據(jù)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 一個(gè)值：// return `${y}-${m}-$ozvdkddzhkzd`; 或下面這種寫法return y + '-' + m + '-' + d} else {return '無效的日期！';}}// 定義給字符串加引號(hào)過濾器 addQuotationMarks 方法:template.defaults.imports.addQuotationMarks = function(str) {return `"${str}"`;}// 調(diào)用 template 方法，渲染模板和數(shù)據(jù)var html = template('filterTpl', data);document.querySelector('.container').innerHTML = html;</script> </body></html>

4.7 調(diào)試

template.defaults.debug

art-template 內(nèi)建調(diào)試器，能夠捕獲到語法與運(yùn)行錯(cuò)誤，并且支持自定義的語法。在 NodeJS 中調(diào)試模式會(huì)根據(jù)環(huán)境變量自動(dòng)開啟：process.env.NODE_ENV !== 'production'，設(shè)置 template.defaults.debug=true 后，等同于：

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

4.8 模板變量

template.defaults.imports

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

4.8.1 導(dǎo)入變量

1）標(biāo)準(zhǔn)語法：

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

2）原始語法：

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

3）示例代碼：

4.8.2 內(nèi)置變量

變量清單

變量名描述

$data	傳入模板的數(shù)據(jù)
print	字符串輸出函數(shù)
include	子模板載入函數(shù)
extend	模板繼承模板導(dǎo)入函數(shù)
block	模板塊生命函數(shù)

5 案例 - 新聞列表

5.1 實(shí)現(xiàn)步驟

獲取新聞數(shù)據(jù)；

定義 template 模板；

編譯模板；

定義時(shí)間過濾器；

定義補(bǔ)零函數(shù)。

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

素材中，HTML結(jié)構(gòu)、CSS樣式代碼已具備，只需要寫js實(shí)現(xiàn)代碼。

5.2 實(shí)現(xiàn)過程

5.2.1 獲取新聞數(shù)據(jù)

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

書寫 news.js 代碼

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

console.log獲取到的數(shù)據(jù)如下：

5.2.2 定義 template 模板

1）定義模板的步驟：

要?jiǎng)?chuàng)建 < script>標(biāo)簽；

給這個(gè)標(biāo)簽指定type屬性（type="text/html"）；

在< script >標(biāo)簽內(nèi)部填充一些HTML的模板結(jié)構(gòu)。

2）定義模板
在HTML中的< /body>標(biāo)簽結(jié)束之前定義模板：

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

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

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

5.2.3 編譯模板

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

在news.js中，調(diào)用template函數(shù)并將返回的字符串，賦值給變量htmlstr。

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

然后將得到的數(shù)據(jù)填充到< div id="news-list"> < /div>的內(nèi)部。

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

運(yùn)行效果如圖：

由前面5.2.1中用console.log在控制臺(tái)輸出的數(shù)據(jù)可知，新聞?dòng)?條數(shù)據(jù)，而這里只渲染了1條。

原因：
因?yàn)殡m然把數(shù)據(jù)傳到模板里了,但是我們并沒有拿到數(shù)據(jù)去進(jìn)行循環(huán)渲染。所以接下來重點(diǎn)是放在模板內(nèi)部

思路：

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

用each循環(huán)創(chuàng)建新聞的item項(xiàng)。

將模板除< script>標(biāo)簽外,全部放到 each循環(huán)內(nèi)，并完善圖片img的src屬性：

完善前:

完善后 :

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

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

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

控制臺(tái)輸出結(jié)果如下，可見每項(xiàng)的tags都變成了長度為3的一個(gè)數(shù)組。

有了tags數(shù)組后，就可以在每一個(gè)新聞的item項(xiàng)里，再寫一個(gè)子循環(huán)，循環(huán)tags屬性。每循環(huán)一次就創(chuàng)建一個(gè)標(biāo)簽。
具體實(shí)現(xiàn)如下：

1) 改造HTML文件中的結(jié)構(gòu)代碼：

對(duì)HTML頁面中寫死的部分進(jìn)行改造。

改造前：

改造后：

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

注意： < span>標(biāo)簽中的$ value和each循環(huán)中的$ value不一樣，后者是表示當(dāng)前新聞的信息，循環(huán)的是當(dāng)前新聞的這個(gè)$value.tags數(shù)組；每循環(huán)一次，拿到的項(xiàng)，就是< 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>評(píng)論數(shù)：{{$value.cmtcount}}</span></div></div></div>{{/each}}</script>

至此，基本結(jié)構(gòu)已完成。剩下時(shí)間格式美化，定義時(shí)間過濾器和補(bǔ)零函數(shù)。

2）美化新聞列表中的時(shí)間格式

① 編寫時(shí)間過濾器 dateFormat：

// 定義格式化時(shí)間過濾器 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}

調(diào)用過濾器

<div class="footer"><div><span>{{$value.source}}</span>  <span>{{$value.time | dateFormat}}</span> // 調(diào)用過濾器</div><span>評(píng)論數(shù)：{{$value.cmtcount}}</span> </div>

渲染后的效果：

因此，我們是再次對(duì)時(shí)間進(jìn)行處理，即補(bǔ)零。

② 補(bǔ)零函數(shù)

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

然后再在時(shí)間過濾器當(dāng)中調(diào)用padZero函數(shù)：

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() {// 時(shí)間補(bǔ)零函數(shù)function padZero(n) {if (n < 10) {return '0' + n;} else {return n;}}// 定義格式化時(shí)間的過濾器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}// 發(fā)起請(qǐng)求獲取新聞列表數(shù)據(jù)的函數(shù)function getNewsList() {$.get('http://www.liulongbin.top:3006/api/news', function(res) {// res接收服務(wù)器響應(yīng)回來的結(jié)果if (res.status !== 200) return alert('新聞列表獲取失敗！');// 把每項(xiàng)的tags屬性，從字符串改為數(shù)組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. 模板引擎的實(shí)現(xiàn)原理

（轉(zhuǎn)下一篇）