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

最新推荐文章于 2024-04-10 08:40:57 发布

·Mr.zuo

最新推荐文章于 2024-04-10 08:40:57 发布

阅读量167

点赞数

分类专栏： vue计算属性 vue HTML 文章标签： template

本文链接：https://blog.csdn.net/zuomengjia/article/details/102961492

版权

本文介绍了在JavaScript中处理HTML内容的困境，引出了字符串模板和x-template的概念。详细阐述了字符串模板如何帮助分离JS和HTML，并在Vue中应用x-template的情况。同时，文章讨论了template.js模板引擎的使用、优势以及与其他模板引擎如Handlebars和Mustache的区别，强调了模板引擎在前端渲染数据中的重要性。

摘要由CSDN通过智能技术生成

前言

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

场景案例

举个简单例子，页面加载完毕后HTML初始模板如下所示
要求：点击按钮时，将新元素添加至id为showArea元素下。显示到页面里，点击按钮后HTML模板如下

字符串模板

实现方案：

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