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

字符串模板

实现方案:

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

解决方案：
<script type=”text/x-template”>就是在一定程度上解决这种问题的，放在type=”text/x-template”中的内容将不会被浏览器解析，不被执行，不被显示，它只是默默地隐藏到页面里，也不会进行编译显示。
但是可以在另一个script里面通过获取插入到页面中。这样就把大段的HTML操作从js里面分离开了

作用：
从逻辑上而言，放到text/x-template中的内容不是给浏览器解析的，是用来在页面加载完成后，主要是二次捕获渲染用的。这个渲染的过程通常是使用各种模板引擎来完成的。
场景小结：
（1）script标签如果不写type属性，浏览器会默认为text/javascript，如果写了