初入模板引擎之art-template

最新推荐文章于 2024-08-10 07:07:58 发布

Floatwor青舟

最新推荐文章于 2024-08-10 07:07:58 发布

阅读量617

点赞数

分类专栏： nodejs 文章标签： nodejs

本文链接：https://blog.csdn.net/f944913628/article/details/109123895

版权

nodejs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文深入探讨了模板引擎的作用，特别是Web开发中的应用，如界面与数据分离、提升开发效率。重点介绍了art-template模板引擎，强调其高性能、调试友好和广泛支持。文章详细讲解了art-template的特性、语法、安装步骤以及三种核心渲染方法，并通过实例展示了如何渲染和使用模板。此外，还提供了一个展示成绩的小案例，进一步说明模板引擎在实际开发中的应用。

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

什么是模板引擎

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

模板引擎不属于特定技术领域，它是跨领域跨平台的概念。在Asp下有模板引擎，在PHP下也有模板引擎，在C#下也有，甚至JavaScript、WinForm开发都会用到模板引擎技术。

模板引擎的用途

模板引擎可以让（网站）程序实现界面与数据分离，业务代码与逻辑代码的分离，这就大大提升了开发效率，良好的设计也使得代码重用变得更加容易。

我们司空见惯的模板安装卸载等概念，基本上都和模板引擎有着千丝万缕的联系。模板引擎不只是可以让你实现代码分离（业务逻辑代码和用户界面代码），也可以实现数据分离（动态数据与静态数据），还可以实现代码单元共享（代码重用），甚至是多语言、动态页面与静态页面自动均衡（SDE）等等与用户界面可能没有关系的功能。

简单地说，模板引擎的作用就是取得数据并加以处理，最后显示出数据。

art-template介绍

art-template 是一个简约、超快的模板引擎。

它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。

特性

1、拥有接近 JavaScript 渲染极限的的性能
2、调试友好：语法、运行时错误日志精确到模板所在行；支3、持在模板文件上打断点（Webpack Loader）
4、支持 Express、Koa、Webpack
5、支持模板继承与子模板
6、浏览器版本仅 6KB 大小

语法

art-template 同时支持两种模板语法。标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。

标准语法

{{if user}}
  <h2>{{user.name}}</h2>
{{/if}}

原始语法

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

原始语法兼容 EJS、Underscore、LoDash 模板。

安装

前提是要联网：

npm install art-template --save

渲染模板

var template = require('art-template');
var html = template(__dirname + '/tpl.art', {
    user: {
        name: 'fzh'
    }
});

tpl.art文件：

{{if user}}
<h2>{{user.name}}</h2>
{{/if}}

引用模板引擎渲染模板的3种核心方法

一、

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

var template=require("art-template");
var html=template(__dirname+'/mytpl.art',{
    user:{
        name:'fzh'
    }
})
console.log(html);//<h2>fzh</h2>

mytpl.art文件：

{{if user}}
<h2>{{user.name}}</h2>
{{/if}}

二、

将模板源代码编译成函数（相当于中间的一个桥梁）
template.compile(source, options);

//each 模板引擎提供的循环
//循环一个list数组(集合)

//每次记得引入art-template模板
var template=require("art-template");
//定义一个模板
let tpl='<ul>{{each list as value}}<li>{{value}}</li>{{/each}}</ul>';
//编译成一个函数，返回的render是一个函数
let render=template.compile(tpl); //编译解析
let ret =render({ //render是一个方法
    //使用模板引擎中提供的方法 实现数据的填充
    list:['apple','pear','uglz']
})
console.log(ret);//<ul><li>apple</li><li>pear</li><li>uglz</li></ul>

三、

将模板源代码编译成函数并立刻执行(与compile的区别：没有中间商)
template.render(source, data, options);

var template=require('art-template');

let tpl='<ul>{{each list as value}}<li>{{value}}</li>{{/each}}</ul>';
let ret =template.render(tpl,{
    list:['banbana','orange','apple']
})

console.log(ret);//<ul><li>banbana</li><li>orange</li><li>apple</li></ul>

扩展

//as val相当于给$value  重新命名。注意: 命名之后就不能使用$value。 就必须使用别名。
var template=require('art-template');
let tpl='<ul>{{each list}}<li>{{$index}}--{{$value}}</li>{{/each}}</ul>';
let ret=template.render(tpl,{
    list:['banbana','orange','apple']
})

console.log(ret);//<ul><li>0--banbana</li><li>1--orange</li><li>2--apple</li></ul>

小案例

渲染查询出来的成绩

var template=require('art-template');
let html=template(__dirname+'/score.art',{ //打文件名切记不要忘记/
    chinese:'120',
    math:'130',
    english:'140',
    summary:'250'
})
console.log(html);

score.art文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <ul>
            <li>语文:{{chinese}}</li>
            <li>数学:{{math}}</li>
            <li>英语:{{english}}</li>
            <li>综合:{{summary}}</li>
        </ul>
    </div>
</body>
</html>

Floatwor青舟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初入模板引擎之art-template

目录什么是模板引擎模板引擎的用途art-template介绍特性语法安装渲染模板引用模板引擎渲染模板的3种核心方法小案例什么是模板引擎模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。模板引擎不属于特定技术领域，它是跨领域跨平台的概念。在Asp下有模板引擎，在PHP下也有模板引擎，在C#下也有，甚至JavaScript、WinForm开发都会用到模板引擎技术。模板引擎的用途模板引擎
复制链接

扫一扫

专栏目录