EJS模板语法

什么是模板引擎?

用于Web开发的模板引擎是为了使用户界面与业务数据(内容)分离而产生的,使用模板语法编写的模板代码通常放在具有特定格式的文档中,经过模板引擎编译之后就会生成一个标准的HTML文档。

目前市面上比较流行的模板引擎有以下几种:

  • EJS – 国内站点:https://ejs.bootcss.com/,官方站点:http://ejs.co
  • Pug – 官方站点:https://pugjs.org/
  • Mustache – 官方站点:http://mustache.github.io/
  • jade – 官方站点:http://jade-lang.com/

为什么要学习EJS?

EJS是一套简单的模板语言,帮我们利用普通的JavaScript代码生成HTML页面。EJS没有复杂的语法规则,也没有再造一套迭代和控制语法,有的只是普通的JavaScript代码而已。

在浏览器环境中使用

下载浏览器版本的EJS,然后引入HTML页面即可。

下载地址:https://github.com/mde/ejs/releases/latest

<script src="ejs.js"></script>
<script>
  var people = ['geddy', 'neil', 'alex'],
      html = ejs.render('<%= people.join(", "); %>', {people: people});
</script>

在Node环境中使用

使用npm将EJS安装到当前项目中

npm install ejs --save-prod

将使用EJS模板语法写模板带和一些要展示到页面的数据作为参数传递给EJS提供的编译方法,最后输出HTML。

const ejs = require('ejs');
// 要展示到页面中数据
const colors = ['red', 'green', 'blue'];

// 使用 EJS 语法编写的模板
const template = `
    <ul>

        <% colors.forEach((value, index) => { %>
            <li><%= value %></li>
        <% }) %>
    </ul>
`

// HTML代码 = EJS模板 + 数据
const html = ejs.render(template, {colors});

EJS模板标签

<% 脚本标签,用于书写流程控制语句,不输出任何内容。
<%= 将数据输出到模板(如果输出的数据是HTML,则会被转义)
<%- 将数据输出到模板(数据不会被转义)
<%# EJS模板提供的注释方式,不会被作为模板内容编译输出

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值