12. 前端基础--模板引擎art-template

最新推荐文章于 2023-08-09 11:02:46 发布

喵先生呢

最新推荐文章于 2023-08-09 11:02:46 发布

阅读量461

点赞数

分类专栏：前端基础文章标签： js 模板引擎 art-template

本文链接：https://blog.csdn.net/weixin_45267102/article/details/109603529

版权

前端基础专栏收录该内容

12 篇文章 3 订阅

订阅专栏

文章目录

模板引擎art-template

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
art-template是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。由腾讯公司研发的，市面上有很多类似的模板引擎技术，但是这个应用相对较多。
优点：执行效率高，兼容所有浏览器，使用方便。
有两种语法形式：
简洁语法结构。 类似 vue, angularjs, freemarker,valocity;
原生JavaScript语法结构。类似jsp;

art-template

1. 简洁语法结构

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>简洁语法结构</title>
    <style>
    </style>
    <script src="art-template/template.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            var data = {"name": "喵喵", "age": "17", "hobby": ["哈哈", "嘻嘻", "啦啦"]};
            var str = template("art1", data);
            $("#container").html(str);
        });
    </script>
</head>
<body>
<div id="container"></div>
<script type="text/html" id="art1">
    <h2>{{name}}</h2>
    <h2>{{age}}</h2>
    <ul>
        {{each hobby as value i}}
        <li>{{i+1}}{{value}}</li>
        {{/each}}
    </ul>
</script>
</body>
</html>

2. 原生JS语法结构

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>原生js语法结构</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul, li {
            list-style: none;
        }
    </style>
    <script src="art-template/template-native.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            var data={"name":"喵喵","age":"17","hobby":["哈哈","嘻嘻","啦啦"]};
            var str = template("art1",data);
            console.log(str);
            $("#container").html(str);
        });
    </script>


</head>
<body>
<div id="container"></div>
<script type="text/html" id="art1">
    <!--template 错误是因为喵喵少了"" 也就是模板错误，检查模板格式  调试代码方法：通过小范围复制源代码来查看代码出错的区域-->
    <% if(name=="喵喵"){ %>
        <h2><%=name%></h2>
        <h2><%=age%></h2>
        <ul>
            <% for(var i=0;i< hobby.length;i++){ %>
            <li><%=i+1%><%=hobby[i]%></li>
            <%}%>
        </ul>
    <%}%>
</script>
</body>
</html>

3. 核心方法

// 基于模板名渲染模板
template(filename, data);

// 将模板源代码编译成函数
template.compile(source, options);

// 将模板源代码编译成函数并立即执行
template.render(source, data, options);

官方文档：http://aui.github.io/art-template/docs/
了解一下即可，使用的时候再来学习。

☆

喵先生呢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12. 前端基础--模板引擎art-template

文章目录模板引擎art-template1. 简洁语法结构2. 原生JS语法结构3. 核心方法☆模板引擎art-template模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。art-template是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。由腾讯公司研发的，市
复制链接

扫一扫