ejs入门

    科技2022-07-11  93

    一、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标签开启-%>换行截断的更加安全的模式。(它不会在一行之中去除标签的换行)。

    Processed: 0.023, SQL: 8