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

骑猪看日落 2023-05-30 06:13 18阅读 0赞

## 前言 ##

*  在js里面，经常需要使用js往页面中插入html内容
 *  写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况。一般的写法都是使用+号以字符串的形式拼接，如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，因为不光要处理单引号，还需要很多「+」号把字符串一个个连接起来，十分的不方便。
 *  比如有的时候需要使用弹出框的时候手动使用字符串拼接起来各种数据再渲染出来… …
 *  因为上面的这种写法太恶心人了，但是在前端渲染数据又是一个刚需，这个时候怎么办，想一个办法将JS和HTML分离开来。

## 场景案例 ##

*  举个简单例子，页面加载完毕后HTML初始模板如下所示  
    ![在这里插入图片描述][20191107194031580.png]
 *  要求：点击按钮时，将新元素添加至id为showArea元素下。显示到页面里，点击按钮后HTML模板如下  
    ![在这里插入图片描述][20191107194102235.png]  
    ![在这里插入图片描述][20191107194118138.png]

## 字符串模板 ##

实现方案：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
    		<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<input type="button" id="btn" value="点击显示" />
    		<div id='showArea'></div>
    	</body>
    	<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">
    		$(document).ready(function() { 
    			$("#btn").click(function() { 
    				$("#showArea").html($("#showContent").html());
    			});
    		});
    	</script>
    </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]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]

## vue之x-template ##

*  除了上述写法外，也可以使用JS的字符串模板即type=“text/x-template”，写法如下所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]  
    使用JS的字符串模板即type="text/x-template"例如代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div class="app">
    			<my-component></my-component>
    			<my-component></my-component>
    			<my-component></my-component>
    			<my-component></my-component>
    			<my-component></my-component>
    		</div>
    	</body>
    	<script type="text/x-template" id="myid">
    		<div>
    			<button>666</button>
    			<button>777</button>
    			<button>888</button>
    			<button>999</button>
    		</div>
    	</script>
    	<script type="text/javascript">
    		Vue.component('my-component',{ 
    			template:'#myid'
    		})
    		var app = new Vue({ 
    			el:'.app'
    			
    		})
    	</script>
    </html>

*  **解析：**
    
     *  < script>”中type是x-template是一种比较有用的功能。如果在声明一个组件时，在template中定义模板，如果要换行的话，要加上一个“\\”，如果是比较简单的模板还好，如果比较多的话，就会感觉眼花缭乱的，因此我们有一个看起来舒服的方式：x-template。
     *  只要写出< script type=“text/x-template” id=“x-template” >< /script> 在其中间就可以愉快的写HTML代码了。不用考虑换行等问题。这里注意，要加一个id名称，并将其赋给template，然后在声明的组件中加一个  
        ![在这里插入图片描述][201911071949316.png]
 *  vue字符串模板single单个根元素限制：
 *  限制：  
    `<script type="text/x-template" id="my-component"></script>`中根元素必须只能有一个
 *  **原因：**  
    因为template定义的模板，一定要用一个根元素包裹起来，每个组件必须只有一个根元素，比如上例中，如果去掉< div>标签，那么就相当于有多个根元素。

## 字符串模板小结 ##

*  **小结：**  
    （1）type="text/template"相当于定义一个模板，如果没有使用html()方法的话，是显示不出来的

## JS模板引擎template.js ##

*  简介：
    
     *  template.js&&template-web.js，这是一个模板引擎，简单来说就是构建一个模板，让其生成html的js代码。
     *  提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果
 *  使用步骤：
    
     *  简要步骤就是：  
        1.制作模板；2、获取数据  
        3.将数据插入模板中 ；4.将模板插入html代码中
 *  **语法：**
    
     *  （1）使用  
        引用简洁语法的引擎版本，例如
     *  （2）表达式  
        \{ \{ 与 \}\} 符号包裹起来的语句则为模板的逻辑表达式
     *  （3）输出表达式  
        对内容编码输出： \{ \{content\}\}  
        不编码输出： \{ \{\#content\}\}  
        编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击
 *  案例：  
    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 4]  
    渲染结果下图：  
    ![在这里插入图片描述][20191107200611299.png]  
    具体代码为：

<!DOCTYPE html>
    <html lang="zh">
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    	</head>
    	<body>
    		<script id="tpl" type="text/html">
    			    
    		<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>
    		</script>
    		<script type="text/javascript">
    			/* 2、获取数据 */
    			var data = { 
    				items: [{ 
    					'name': '名字一',
    					'val': '数据一'
    				}, { 
    					'name': '名字二',
    					'val': '数据二'
    				}, { 
    					'name': '名字三',
    					'val': '数据三'
    				}, { 
    					'name': '名字四',
    					'val': '数据四'
    				}]
    			}
    			/* 3.将数据插入模板中 */
    			var tplInnerHTML = document.getElementById('tpl').innerHTML;
    			var html = template(tplInnerHTML, data);
    			/* 4、将模板插入html代码中 */
    			document.getElementById('wp').innerHTML = html;
    		</script>
    	</body>
    </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简洁和原始语法都可以。

[20191107194031580.png]: https://img-blog.csdnimg.cn/20191107194031580.png
[20191107194102235.png]: https://img-blog.csdnimg.cn/20191107194102235.png
[20191107194118138.png]: https://img-blog.csdnimg.cn/20191107194118138.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191107194511919.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/20191107194530689.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/20191107194617494.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 3]: https://img-blog.csdnimg.cn/20191107194631642.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[201911071949316.png]: https://img-blog.csdnimg.cn/201911071949316.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/201911072005473.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191107200611299.png]: https://img-blog.csdnimg.cn/20191107200611299.png