1.为什么需要用到模板引擎

1.为什么需要用到模板引擎

我们在做前端开发的时候,有时候经常需要根据后端返回的json数据,然后来生成html,再显示到页面中去。

例如这样子:

复制代码
var data = [
    {text: "测试一"},
    {text: "测试二"},
    {text: "测试三"},
    {text: "测试四"}
];
function generateList(data) {
    var listHtml = "";
    listHtml += "<ul>";
    for (var i = 0, len = data.length; i < len; i++) {
        listHtml += "<li>";
        listHtml += data.text;
        listHtml += "</li>";
    }
    listHtml += "</ul>";
    return listHtml;
}
复制代码

但是,这种通过字符串拼接的方式,比较简单的还好,如果结构比较复杂,拼接的时候还需要注意引号之间的嵌套,这样的代码维护起来比较困难。

一旦需求发生变化,这里修改起来也是很麻烦。所以我们需要模板引擎来改善这种情况。

例如上面的例子,如果使用模板引擎则可以是这样子:

复制代码
var data = {
    list:[
        {text: "测试一"},
        {text: "测试二"},
        {text: "测试三"},
        {text: "测试四"}
    ]
};
<script id="test" type="text/html">
    <ul>
        <% for (var i = 0; i < list.length; i ++) { %>
        <li><%= list[i].text %></li>
        <% } %>
    </ul>
</script>
复制代码

不知道你有没有感觉简单一点呢,反正我是感觉更清晰明了一点。

2.artTemplate的介绍

artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现。在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。

除了性能优势外,调试功能也值得一提。模板调试器可以精确定位到引发渲染错误的模板语句,解决了编写模板过程中无法调试的痛苦,让开发变得高效,也避免了因为单个模板出错导致整个应用崩溃的情况发生。

artTemplate 这一切都在 1.7kb(gzip) 中实现!

这是artTemplate的官网,使用方法相信有一定js基础的,看了文档之后都能够使用。这里就不详细介绍了。官网

 

3.artTemplate 模板引擎的基本原理

   模板引擎其实做的就是两件事。

  1. 根据一定的规则,解析我们所定义的模板
    这里,我们将模板定义在script标签中,然后,当我们使用到某个模板的时候,引擎会根据我们提供的ID,解析相应的模板,此时会返回一个渲染函数。(为了性能,还会将这个渲染函数缓存起来)
    复制代码
    (function($data,$filename) {
        'use strict';
        var i=$data.i,list=$data.list,$out='';$out+='<ul>\n';
        for (var i = 0; i < list.length; i ++) {
            $out+='\n        <li>';
            $out+= list[i].text;
            $out+='</li>\n';
        }
        $out+='\n</ul>';
        return new String($out);
    })
    复制代码

     上述代码,我已经删除了一些不必要的信息,解析模板之后,会返回一个这样的渲染函数。也就是说,其实模板引擎就是将我们平时用的字符串拼接的事情给做了。
    至于,引擎是如何解析的,在下一篇我会详细介绍

  2. 根据数据以及模板生成html(其实背后也是用的字符串拼接)
    这里,会根据用户所传的数据,然后调用上一步返回的渲染函数。得到我们想要的结果。

这是第一篇,先简单的介绍到这里,接下来会写另外几篇对artTemplate的源码进行讲解。

小弟才疏学浅,难免会对一些知识点以及一些细节讲的有些偏颇或者不够全面,望各位多多提出意见。

 

一艘船如果没有目标,那无论海面上哪个方向的风,都是逆风! 个人主页: http://chenblog.sinaapp.com/
分类:  前端
模板引擎是用来生成动态内容的工具,可以将页面模板与数据结合起来,生成最终的页面内容。在使用模板引擎时,我们需要编写页面模板并定义表达式来表示动态的值,然后将模板和数据交给模板引擎进行解析并生成最终的页面内容。不同的模板引擎可能有不同的语法和功能。引用 Thymeleaf是一个高级语言的模板引擎,可以用来代替jsp页面。它的语法简单,功能强大。与其他模板引擎相比,Thymeleaf具有更加灵活的语法和更强大的功能。引用 Vue.js是一个用于构建用户界面的渐进式框架。它采用了组件化的开发方式,可以轻松地构建复杂的单页应用。与Thymeleaf模板引擎相比,Vue.js更加注重前端开发,提供了更多的前端功能和交互特性。Vue.js可以与后端的任何模板引擎配合使用,包括Thymeleaf。Vue.js通常用于前后端分离的开发模式中,通过API与后端进行数据交互。引用 因此,在使用Thymeleaf模板引擎时,可以将Vue.js作为前端框架与之配合使用,利用Vue.js的强大功能来构建复杂的用户界面和交互效果。同时,Thymeleaf模板引擎可以提供动态数据的支持,将Vue.js生成的数据动态填充到页面模板中。这样,可以实现前后端的协同开发,提高开发效率。引用<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [自动配置和 thymeleaf模板引擎](https://blog.csdn.net/m0_67394006/article/details/126066858)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [【模板引擎】什么会用到模板引擎?页面渲染选择thymeleaf模板引擎还是Vue?](https://blog.csdn.net/weixin_42319496/article/details/119372416)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值