script标签里面嵌入html标签，是什么操作？

Question

偶然看到一个项目，script标签里面嵌入html标签，没接触过这样的，哪位老哥解释一下这种...

        <script type="text/itpl" id="tpl_readonly">
                <div class="field_line">
                    <div class="field_key"><%=data.key%>：</div>
                    <div class="field_content readonly test">
                        <%if(data.type == 'text' || data.type == 'textarea'){%>
                            <span class="editable" dbk="<%=data.dbk%>"><%=data.html%></span>
                        <%}else{%>
                            <%=data.html%>
                        <%}%>
                    </div>
                    <div class="clear"></div>
                </div>
        </script> 

Answer 1

当script标签写了type且不是JavaScript对应type的时候，就相当于一个自定义的不可见标签，内容不会展示，但是dom是存在的，这种特性经常用来作为字符串模板引擎，放置模板的地方。就跟在js里面定义一个

string = script.innerHTML //直接把字符串写在这里或者引入dom的innerHTML是一样的。

主要历史原因是：
以前的js中没有类似与字符串模板 `` 这样的多行字符串标识，你要在js里面定义多行字符串很麻烦，要么在每行结尾加转义符，要么用引号和 + 来拼接，而且有时候还会有一些特殊字符需要转移，可读性和可维护性都很差。 这样把这种需要频繁修改维护的字符串模板放在一个更合适的地方就有必要了。

Answer 2

用了类似template.js的JavaScript模板引擎？

Answer 3

前端模版引擎
art-template

Answer 4

这种模板是上古时期的产物了，具体应该是jQuery盛行时期的。现在都是vue的天下了。

逻辑很简单，就是把模板html文件放到一个不可见标签下，想来想去只有放<script>标签对里不会显示，其他基本都能显示，随便写个自定义标签也会显示，不过现在有了个<template>标签可以达到一样的效果。

至于为什么这样做呢，原因就是js拼接html字符串代码太麻烦了，还涉及到单引号双引号，简直头大。用这样“歪门邪道”的方法操作起来就会方便的多。