ejs入门

EJS是一种简单的JavaScript模板语言,用于生成HTML页面。它提供了缓存功能、内联JavaScript执行、HTML转义及自定义标签等功能,使得代码更易读、更整洁。EJS支持通过npm安装,并能通过res.render()在后台路由中传递数据。通过<%-include(filename)%>可以加载其他页面模板。使用EJS可以提升代码的可读性和维护性。
摘要由CSDN通过智能技术生成

一、EJS 是什么?

  “E” 代表什么?可以表示 “可嵌入(Embedded)”,也可以是“高效(Effective)”、“优雅(Elegant)”或者是“简单(Easy)”。EJS 是一套简单的模板语言,帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条;也没有再造一套迭代和控制流语法;有的只是普通的 JavaScript 代码而已。

二、为什么要使用EJS?

   与最初的JavaScript相比较,一些不太了解你的代码的人可以更容易地通过EJS模板代码看得懂你的代码。 让我们放松一下,一起来享受下令人激动的干净简洁的感觉。
   总之可以让代码更加干净整洁,让人易懂。

三、ejs的使用

1、使用npm安装ejs

$ npm install ejs

2、引入ejs模块

const ejs = require('ejs');

四、下面介绍下EJS的语法和功能:

1、缓存功能,能够缓存已经解析好的html模版;

2、<% code %>用于执行其中javascript代码。(文件后缀由.js变为.ejs)

<% alert('hello world') %>

3、<%= code %>会对code进行html转义;

<h1><%=title %></h1>                    注:会把title里面存的值给显示出来在h1中。
<p><%= 'hello world' %></p>             注:会把hello world显示在p中。
<h1><%= '<b>hello world</b>' %></h1>    注:会把<b>hello world</b>显示在h1中。

4、支持自定义标签,比如’<%‘可以使用’{{’,’%>‘用’}}'代替;
   ejs 里,默认的闭合标记是 <% … %>,我们也可以定义自己的标签。例如:

if, else 条件语句的使用

    < div class="login"> 

           <% if (user.uid.length > 0) { %>

           <a href="#"><%= user.uid%></a><a href="#"><i class="caret down icon"></i></a>

           <% } else { %>

           <a href="#">Login</a>

           <% } %>

        </div>

         后台路由中要把数据传递进来,即:res.render('list',{user: {uid:'xxx'}});


5、利用<%- include filename %>加载其他页面模版;

五、参数

1. cache 编译过的函数会被缓存,需要filename

2. filename 被cache用做缓存的键,用于包含

3. context 函数执行的上下文

4. compileDebug 如果为false,不会编译调试用的工具

5. client 返回独立的编译后的函数

6. delimiter 开启或者闭合尖括号所用的字符

7. debug 输出生成的函数体

8. _with 是否使用 with() {} 结构。如果为 false 则局部数据会储存在 locals 对象中。

9. rmWhitespace 移除所有可以安全移除的空白字符,包含前导和尾后的空白字符。同时会为所有scriptlet标签开启-%>换行截断的更加安全的模式。(它不会在一行之中去除标签的换行)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值