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

我不是女神ヾ 2023-06-16 01:53 17阅读 0赞

## 前言 ##

*  **在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初始模板如下所示  
    ![在这里插入图片描述][20191123153045640.png]
 *  要求：点击按钮时，将新元素添加至id为showArea元素下。显示到页面里，点击按钮后HTML模板如下  
    ![在这里插入图片描述][20191123153105518.png]
 *  **字符串模板**
 *  实现方案：

<!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元素，此时便需要用到字符串模板，常见写法如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]
 *  除了上述写法外，也可以使用JS的字符串模板即type=“text/x-template”，写法如下所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]
 *  **解析：**
 *  < script>”中type是x-template是一种比较有用的功能。如果在声明一个组件时，在template中定义模板，如果要换行的话，要加上一个“\\”，如果是比较简单的模板还好，如果比较多的话，就会感觉眼花缭乱的，因此我们有一个看起来舒服的方式：x-template。
 *  只要写出`< script type="text/x-template" id="x-template" >< /script>`  
    在其中间就可以愉快的写HTML代码了。不用考虑换行等问题。这里注意，要加一个id名称，并将其赋给template，然后在声明的组件中加一个  
    ![在这里插入图片描述][20191123153710138.png]
 *  **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文件（自己去网上下载）

2.编写制作HTML模板

3.向模板插入数据，并输出到页面

4.输出到HTML，渲染结果如下  
![在这里插入图片描述][20191123154639797.png]  
**注：全部代码如下：**

<!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 一样。  
    **标准语法**  
    ![在这里插入图片描述][20191123154853946.png]  
    **表达式**  
    ![在这里插入图片描述][20191123154904283.png]  
    **原始语法**  
    ![在这里插入图片描述][2019112315493975.png]
 *  **注意：<% %>与<%= %>这个的区别需要注意<% %>这个跟语句，若要跟表达式，则使用<%= %>。**

## 原生VS标准语法 ##

*  接下来介绍下原生语法和标准语法
 *  首先，将数据修改如下

*  **语法对比：(^\_−)☆**  
    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、制作模板

<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;

*  案例完整代码：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]

## 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数据，从而实现前后端分离
 *  **如下所示**  
    ![在这里插入图片描述][20191123161745936.png]
 *  详情参见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同时支持两种模板语法，标准语法和原始语法。 标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。  
    ![在这里插入图片描述][20191123162512268.png]  
    **完毕，有问题留言小编…**

[20191123153045640.png]: https://img-blog.csdnimg.cn/20191123153045640.png
[20191123153105518.png]: https://img-blog.csdnimg.cn/20191123153105518.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191123153457300.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191123153515272.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191123153710138.png]: https://img-blog.csdnimg.cn/20191123153710138.png
[20191123154639797.png]: https://img-blog.csdnimg.cn/20191123154639797.png
[20191123154853946.png]: https://img-blog.csdnimg.cn/20191123154853946.png
[20191123154904283.png]: https://img-blog.csdnimg.cn/20191123154904283.png
[2019112315493975.png]: https://img-blog.csdnimg.cn/2019112315493975.png
[-]: https://img-blog.csdnimg.cn/20191123155931475.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191123161231924.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191123161745936.png]: https://img-blog.csdnimg.cn/20191123161745936.png
[20191123162512268.png]: https://img-blog.csdnimg.cn/20191123162512268.png