模板引擎的基本使用方式

鲲罹

已于 2023-10-29 11:37:41 修改

阅读量76

点赞数 1

文章标签：开发语言 javascript

于 2023-10-22 17:30:02 首次发布

本文链接：https://blog.csdn.net/2202_75675550/article/details/133969305

版权

模板引擎art-template对我来说并不是陌生的东西，学过两次的模板引擎在前两次的项目中我并没有用到，但到现在要写视频项目的个人中心页的时候发现，不用模板引擎的话代码的复用性太低，而且那Ctrl + C,Ctrl + v的复用代码实在丑陋，所以又重拾art-template，本篇文章就是一些关于模板引擎的基本使用，其中也不乏包含我在实际开发中出现的问题

模板引擎应该如何使用？

模板如何引入？

1.为什么要使用模板引擎？

抛开优势，谈精神价值，纯纯情怀

模板引擎可以很大程度上提升代码的复用性，和可维护性，如果只是单纯的使用cv来写代码的话在后面维护的时候就需要劳神费事，但使用模板引擎就可以减少很多工作量，在模板引擎中的模板页面中进行更改就可以达到牵一发而动全身的效果

此外，模板引擎art-template还贴心的提供了提供了模板继承和子模板，这样就可以将大量相同的代码进行继承和动态更改的，而且，模板引擎还拥有接近 JavaScript 渲染极限的的性能，提供了两套模板语法，可谓是优势多多

2.模板引擎的基本语法

1.标准语法

1) 输出变量

<!-- 输出变量 -->
<!-- 变量为 variable -->
{{ variable }}

2) 条件语句

<!-- if语句 -->
{{ if 条件 }}
  <!-- 条件成立时执行的代码 -->
{{ /if }}

<!-- if-else语句 -->
{{ if 条件 }}
  <!-- 条件成立时执行的代码 -->
{{ else }}
  <!-- 条件不成立时执行的代码 -->
{{ /if }}

<!-- if-else if-else语句 -->
{{ if 条件1 }}
  <!-- 条件1成立时执行的代码 -->
{{ else if 条件2 }}
  <!-- 条件2成立时执行的代码 -->
{{ else }}
  <!-- 所有条件都不成立时执行的代码 -->
{{ /if }}

3)循环语句

<!-- for语句 -->
{{ for(let i = 0; i < list.length; i++) }}
  <!-- 需要循环的代码 -->
  {{ list[i] }}
{{ /for }}

<!-- for-in语句 -->
{{ for(let key in object) }}
  <!-- 需要循环的代码 -->
  {{ key }}: {{ object[key] }}
{{ /for }}

<!-- each语句 -->
{{ each list }}
  <!-- 需要循环的代码 -->
  {{ $index }}: {{ $value }}
{{ /each }}

2. 原始语法

原始语法与标准语法上在形式上不同但在功能上相同，并且原始语法可以完成一些标准语法干不了的活。

1) 输出语句

<!-- 输出变量 -->
<%= variable %>

2) 条件语句

<!-- if语句 -->
<% if (condition) { %>
  <!-- 条件成立时执行的代码 -->
<% } %>

<!-- if-else语句 -->
<% if (condition) { %>
  <!-- 条件成立时执行的代码 -->
<% } else { %>
  <!-- 条件不成立时执行的代码 -->
<% } %>

3) 循环语句

<!-- for语句 -->
<% for (var i = 0; i < list.length; i++) { %>
  <!-- 需要循环的代码 -->
  <%= list[i] %>
<% } %>

<!-- for-in语句 -->
<% for (var key in object) { %>
  <!-- 需要循环的代码 -->
  <%= key %>: <%= object[key] %>
<% } %>

3. 如何将模板放到页面中并将它在浏览器上显示

这个问题其实是我重拾art-template的主要目的，太长时间没复习原来的知识，再加上一开始在学习的时候就模棱两可的糊弄自己，最终还是会苦了自己...

在这样的文件夹下，将文件的情态资源放到static文件下，而页面可以放到views文件下，如果模板页面较多可以新建一个common文件夹存放模板页面，在serve.js文件中写一些关于端口监听、引入模块等的一些代码。

如何模板引入（以标准语法为例）

公共头部页面

header.html

<div>
    <h1>我是公共的头部</h1>
    <h2>我叫<%= name %></h2>
</div>

新建模板页面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel='stylesheet' href="/node_modules/bootstrap/dist/css/bootstrap.css">
    {{block 'style'}}
    {{/block}}
</head>
<body>
    {{include './header.html'}}
    <--- 标准语法无法进行传参  --->
 <%- include('./header.html',{name:helloWorld}) %>
<--- 原始语法可以进行传参  --->
    {{block 'content'}}
      <h1>默认内容</h1>
    {{/block}}

 <script>
  // 公共JS内容
 </script>
  {{block 'script'}}
  {{/block}}
</body>
</html>

引入页面信息

show.html

<!-- extend继承 -->
{{extend './index.html'}}

{{block 'style'}}
  <style>
      body{background:skyblue}
  </style>
{{/block}}

{{block 'content'}}
 <dvi>
     <h1>单独的正文部分</h1>
 </dvi>
{{/block}}

{{block 'script'}}
<script>
   //单独的Js信息
</script>
{{/block}}

serve.js关键代码


app.engine('html',require('express-art-template'))//配置模板
app.set('views',path.join(__dirname,'./views'))//默认就是这个 ./views目录

app.get('/home',function(req,res){
    res.render('show.html')
})

显示效果

总结：

官网借鉴：介绍 - art-template

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

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

模板引擎好用的地方还有很多，还需要我在写项目中慢慢摸索，下一周要把更多的精力放到项目上了，要加油了

鲲罹

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
模板引擎的基本使用方式

介绍 - art-templateart-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。模板引擎好用的地方还有很多，还需要我在写项目中慢慢摸索，下一周要把更多的精力放到项目上了，要加油了。
复制链接

扫一扫