AJAX之模板引擎&&字符串模板x-template

前言

在js裏面，經常需要使用js往頁面中插入html內容
寫過一點前端的都會碰到需要使用JS字符串拼接HTML元素然後append到頁面DOM樹上的情況。一般的寫法都是使用+號以字符串的形式拼接，如果html很短還好說，但是遇到描述裏面的這麼大段，直接用字符串存儲會很困難，因爲不光要處理單引號，還需要很多「+」號把字符串一個個連接起來，十分的不方便。
比如有的時候需要使用彈出框的時候手動使用字符串拼接起來各種數據再渲染出來… …
因爲上面的這種寫法太噁心人了，但是在前端渲染數據又是一個剛需，這個時候怎麼辦，想一個辦法將JS和HTML分離開來。

JS模板引擎

當下前端性能越來越重要，使用ajax模板引擎，提高渲染速度，這也成了前端開發必須備技能。
下面介紹幾款 JavaScript 模板引擎
1、Mustache
基於javascript 實現的模板引擎,類似於 Microsoft’s jQuery template plugin,但更簡單易用
2、doT.js
doT.js 包含爲瀏覽器和Node.js 準備的 JavaScript 模板引擎
3、jSmart
著名的 PHP 模板引擎 Smarty 的 JavaScript 移植版本
4、dom.js

一款可用在客戶端和服務器端的 JavaScript 模板引擎
5、jade
受Haml的影響以JavaScript實現用於node的高性能模板引擎
6、Hogan.js
來自 Twitter 的 JavaScript 模板引擎
7、Handlebars
Handlebars 是一個 JavaScript 的頁面模板庫
8、artTemplate
artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能極限，在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與 micro tmpl 的 25 、 32 倍。引擎支持調試。若渲染中遇到錯誤，調試器可精確定位到產生異常的模板語句，解決前端模板難以調試的問題。

場景案例

舉個簡單例子，頁面加載完畢後HTML初始模板如下所示
要求：點擊按鈕時，將新元素添加至id爲showArea元素下。顯示到頁面裏，點擊按鈕後HTML模板如下
字符串模板
實現方案：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="button" id="btn" value="點擊顯示" />
		<div id='showArea'></div>
		<script type="text/template" id="showContent">
			<div class="prompt">    
				<div class="promptHeader">內容頭</div>           
				<div class="promptbody">內容主體</div>         
				<div class="promptfooter">內容底部</div>     
			</div> 
		</script>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#btn").click(function() {
					$("#showArea").html($("#showContent").html());
				});
			});
		</script>
	</body>
</html>

解決方案：
<script type=”text/x-template”>就是在一定程度上解決這種問題的，放在type=”text/x-template”中的內容將不會被瀏覽器解析，不被執行，不被顯示，它只是默默地隱藏到頁面裏，也不會進行編譯顯示。
但是可以在另一個script裏面通過獲取插入到頁面中。這樣就把大段的HTML操作從js裏面分離開了
作用：
從邏輯上而言，放到text/x-template中的內容不是給瀏覽器解析的，是用來在頁面加載完成後，主要是二次捕獲渲染用的。這個渲染的過程通常是使用各種模板引擎來完成的。
場景小結：
（1）script標籤如果不寫type屬性，瀏覽器會默認爲text/javascript，如果寫了不同的類型，瀏覽器就不會再按照解析JS的規則去解析了，發現是不識別的類型可能就會忽略它。
（2）script不寫type默認是text/javascript，如果寫了不被識別的type將被瀏覽器忽略
（3）script的type爲各種template的時候，可能就是使用了模板引擎

vue之x-template

在Vue中，組件註冊時填寫模板內容需要添加很多HTML元素，此時便需要用到字符串模板，常見寫法如下
除了上述寫法外，也可以使用JS的字符串模板即type=“text/x-template”，寫法如下所示
解析：
< script>”中type是x-template是一種比較有用的功能。如果在聲明一個組件時，在template中定義模板，如果要換行的話，要加上一個“\”，如果是比較簡單的模板還好，如果比較多的話，就會感覺眼花繚亂的，因此我們有一個看起來舒服的方式：x-template。
只要寫出< script type="text/x-template" id="x-template" >< /script>
在其中間就可以愉快的寫HTML代碼了。不用考慮換行等問題。這裏注意，要加一個id名稱，並將其賦給template，然後在聲明的組件中加一個
vue字符串模板single單個根元素限制：
限制：
<script type="text/x-template" id="my-component"></script>中根元素必須只能有一個
原因：
因爲template定義的模板，一定要用一個根元素包裹起來，每個組件必須只有一個根元素，比如上例中，如果去掉<div>標籤，那麼就相當於有多個根元素。

字符串模板小結

小結：
（1）type="text/template"相當於定義一個模板，如果沒有使用html()方法的話，是顯示不出來的

JS模板引擎

目前國內常見的模板引擎
百度開發(BaiduTemplate)
騰訊開發(ArtTemplate)
淘寶開發(velocity.js)
個人開發的老版模版引擎Handlebars 等
選取：
artTemplate在 v8 中的渲染效率可接近 javascript 性能極限，在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與 micro tmpl 的 25 、 32 倍。所以接下來用artTemplate做下測試介紹。

JS模板引擎template.js

簡介：
template.js，這是一個模板引擎，簡單來說就是構建一個模板，讓其生成html的js代碼。
提供一套模板語法，用戶可以寫一個模板區塊，每次根據傳入的數據，生成對應數據產生的HTML片段，渲染不同的效果
使用步驟：
簡要步驟就是：
1.製作模板；2、獲取數據
3.將數據插入模板中；4.將模板插入html代碼中

基礎步驟案例

開發案例步驟
1.引入template-web.js文件（自己去網上下載）

<script src="../js/vue-2.6.9.min.js"></script>

2.編寫製作HTML模板

<script id="test" type="text/html">
	<h3>原生語法：<%= title %></h3>
	<h3>標準語法：{{title}}</h3>
</script>

3.向模板插入數據，並輸出到頁面

<script type="text/javascript">
	var data = {
		title: '案例'
	}
	var html = template('test', data);
	document.getElementById('content').innerHTML = html;
</script>

4.輸出到HTML，渲染結果如下

注：全部代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/template-web.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-2.6.9.min.js"></script>
	</head>
	<body>
		<div id="content"></div>
		<script id="test" type="text/html">
			<h3>原生語法：<%= title %></h3>
			<h3>標準語法：{{title}}</h3>
		</script>
		<script type="text/javascript">
			var data = {
				title: '案例'
			}
			var html = template('test', data);
			document.getElementById('content').innerHTML = html;
		</script>
	</body>
</html>

art-template語法

-標準語法與原始語法:

1、art-template 支持標準語法與原始語法。標準語法可以讓模板易讀寫，而原始語法擁有強大的邏輯表達能力。（例如再使用循環時，標準語法只能使用each循環遍歷，而原始語法還可以使用for，while等循環）
2、標準語法支持基本模板語法以及基本 JavaScript 表達式；原始語法支持任意 JavaScript 語句，這和 EJS 一樣。
標準語法

表達式

原始語法
注意：<% %>與<%= %>這個的區別需要注意<% %>這個跟語句，若要跟表達式，則使用<%= %>。

原生VS標準語法

接下來介紹下原生語法和標準語法
首先，將數據修改如下

        <script>
			var data = {
				person: {
					name: '二狗'
				},
				title: '案例',
				status: true,
				list: ['火影', '龍珠', '柯南', '犬夜叉']
			};
			var html = template('test', data);
			document.getElementById('content').innerHTML = html;
		</script>

語法對比：(^_−)☆
1、對象

		<!-- 對象 -->
    <h4>原生語法：<%= person.name %></h4>
    <h4>標準語法：{{person.name}}</h4>

2、普通元素

       <!-- 普通元素 -->
    <h4>原生語法：<%= title %></h4>
    <h4>標準語法：{{title}}</h4>

3、條件判斷

				 <!-- 條件判斷 -->
            <% if(status) { %>
                <h4>原生語法：條件爲真時展示</h4>
            <% } %>
            {{if status}}
                <h4>標準語法：條件爲真時展示</h4>
            {{/if}}

4、循環遍歷

                 <!-- 循環遍歷 -->
            <ul>
                <% for (var i = 0; i < list.length; i ++) { %>
                    <li>原生語法：<%= list[i] %></li>
                <% } %>
            </ul>
            <ul>
                {{each list value index}}
                    <li>標準語法：{{value}}</li>
                {{/each}}
            </ul>

全部代碼如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>basic-demo</title>
		<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/template-web.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="content"></div>
		<script id="test" type="text/html">
			<!-- 對象 -->
            <h4>原生語法：<%= person.name %></h4>
            <h4>標準語法：{{person.name}}</h4>
            <!-- 普通元素 -->
            <h4>原生語法：<%= title %></h4>
            <h4>標準語法：{{title}}</h4>
            <!-- 條件判斷 -->
            <% if(status) { %>
                <h4>原生語法：條件爲真時展示</h4>
            <% } %>
            {{if status}}
                <h4>標準語法：條件爲真時展示</h4>
            {{/if}}
            <!-- 循環遍歷 -->
            <ul>
                <% for (var i = 0; i < list.length; i ++) { %>
                    <li>原生語法：<%= list[i] %></li>
                <% } %>
            </ul>
            <ul>
                {{each list value index}}
                    <li>標準語法：{{value}}</li>
                {{/each}}
            </ul>
        </script>

		<script>
			var data = {
				person: {
					name: '二狗'
				},
				title: '案例',
				status: true,
				list: ['火影', '龍珠', '柯南', '犬夜叉']
			};
			var html = template('test', data);
			document.getElementById('content').innerHTML = html;
		</script>
	</body>
</html>

語法對比，渲染結果如下：

JS模板引擎template.js

案例：
1、製作模板

  <!-- 1、製作模板 -->
    <div id="wp"></div>
    <script id="tpl" type="text/html">
        <ul>
            <%for(var i in items){%>   
                <li>name:<%=items[i].name%>    val:<%=items[i].val%></li>
            <%}%>
        </ul>
    </script>

2、獲取數據

   /* 2、獲取數據 */
    var data={
        items:[
            {'name':'名字一','val':'數據一'},
            {'name':'名字二','val':'數據二'},
            {'name':'名字三','val':'數據三'},
            {'name':'名字四','val':'數據四'}
        ]
    }

3.將數據插入模板中

 /* 3.將數據插入模板中  */
    var tplInnerHTML = document.getElementById('tpl').innerHTML;
    var html = template(tplInnerHTML,data);

4.將模板插入html代碼中

  /* 4、將模板插入html代碼中 */
    document.getElementById('wp').innerHTML = html;

案例完整代碼：

JS模板引擎template.js優勢

優勢：
1、性能卓越，執行速度通常是== Mustache 與 tmpl== 的 20 多倍（性能測試）
2、支持運行時調試，可精確定位異常模板所在語句
3、對 NodeJS Express 友好支持
4、支持預編譯，可將模板轉換成爲非常精簡的 js 文件
5、支持所有流行的瀏覽器

其他JS模板引擎

拓展：

除了本節所講template-web.js外，前端開發常用的模版引擎還包含Handlebars和Mustache
其實就是模板化，這是以前就開始推崇的面向數據編程的一個方式。比如jquery template
Handlebars是一款很高效的模版引擎,提供語意化的模版語句,最大的兼容Mustache模版引擎,
提供最大的Mustache模版引擎兼容, 無需學習新語法即可使用，性能問題現在逐漸被替代，瞭解即可，面試常問。

JS模板引擎template.js

（1）artTemplate模板引擎
artTemplate是新一代JS模板引擎，它在v8中的渲染效率可接近JS性能極限,在chrome下渲染效率測試中分別是知名引擎Mustache與micro tmpl的25/32倍(性能測試)，artTemplate的模板還支持使用自動化工具預編譯。
（2）分類
artTemplate的庫分爲兩種，一個是template.js(採用"{{ }}")，另外一個是template-native.js(採用"<%= %>")；第一個是簡潔語法版，第二個是原生語法(感覺像JSP)版，兩個庫的語法不可混用，否則會報錯。
（3）原理
提前將Html代碼放進一箇中，當需要用到時，在js裏這樣調用:var htmlstr = template(“test”,放Json數據或其他)，然後$("#*").html(htmlstr)，最後放進去就好
（4）功能概述
提供一套模板語法,用戶可以寫一個模板區塊,每次根據傳入的數據,生成對應數據產生的HTML片段,渲染不同的效果
（5）代碼包限制
template.js包不支持簡化寫法；只能用<% %> ,template-web.js簡潔和原始語法都可以。

AJAX應用

接下來結合jQuery的AJAX，對之前手機查詢案例做下優化處理
編譯後的文件是template.js，通過在HTML中引用template.js，即可實現前端引擎解析json數據，從而實現前後端分離
如下所示
詳情參見9.AJAX之模板引擎&&字符串模板x-template.html

AJAX應用

最後分享下art-template模板引擎中文文檔官網

https://aui.github.io/art-template/zh-cn/docs/index.html#%E7%89%B9%E6%80%A7

小結： art-template同時支持兩種模板語法，標準語法和原始語法。標準語法可以讓模板更容易讀寫；原始語法具有強大的邏輯處理能力。

完畢，有問題留言小編…

AJAX之模板引擎&&字符串模板x-template

前言

JS模板引擎

場景案例

vue之x-template

字符串模板小結

JS模板引擎

JS模板引擎template.js

基礎步驟案例

art-template語法

原生VS標準語法

JS模板引擎template.js

JS模板引擎template.js優勢

其他JS模板引擎

JS模板引擎template.js

AJAX應用

AJAX應用

[轉帖]使用NMT和pmap解決JVM資源泄漏問題原創

Python實現大麥網搶票的四大關鍵技術點解析

Python 安裝庫指令大全

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

一款開源的.NET程序集反編譯、編輯和調試神器

關於接口協議，你必須要知道這些！

基於 Milvus + LlamaIndex 實現高級 RAG

【2024-05-21】以茶會友

數據驅動滑動門

小程序自制第三方組件（全局返回）

原生：倒計時(請仔細閱讀許可協議)

移動端判斷用戶手指滑動的方向

uni-app數據驅動滑動門

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結