ejs 模板引擎基本使用

ejs 模板引擎

1. 单独下载ejs文件引入到HTML 页面中使用
2. 结合框架进行使用

ejs 的常用语法

1. 插值语法

<%= keywords %>

2. 流程控制语句

<% if() {
    
    %>
// 自己的HTML解构
<%}%>

3. 使用循环 forEach()

<% if(flag) {
    
     %>
    <h1><%= word %></h1>
<% }else{
    
    %>
    <ul>
        <% list.forEach(function(item){
    
    %>
            <li><%= item %>  </li>
        <% }) %>
    </ul>
<% } %>

单独使用

ejs: js 的模板引擎 解析 js 代码 生成 html 解构

1. 第一步 ： 创建模板 ; 创建ejs 的模板：创建一个 script 标签作为ejs的模板； 给该标签添加一个id属性，作为为一个的模板名

<script id="temp" type="text/template">
    <% if(flag) {
    
     %>
        <h1><%= word %></h1>
    <% }else{
    
    %>
        <ul>
            <% list.forEach(function(item){
    
    %>
                <li><%= item %>  </li>
            <% }) %>
        </ul>
    <% } %>
</script>

2. 第二步： 引入ejs源文件

<div class="wrap"></div>
<script src="./js/ejs.js"></script>

3. 第三步： 获取模板字符串渲染数据

//  第一步： 创建模板
//  第二步： 查找模板文件 获取模板的HTML结构  
var temp = document.querySelector('#temp').innerHTML;
console.log(temp);

// 第三步： 使用ejs 的方法 render() 渲染模板 得到渲染后（数据结构已经完成）的模板(渲染后得到的是HTML解构)  ejs.render(template, {key:value})
var res =  ejs.render(temp, {
    
    word:'ejs单独使用', flag:false, list:['张三', '李四', '王五', '王二麻子', '尤永成']})

// 第四步： 把渲染后的模板 添加到页面中
document.querySelector('.wrap').innerHTML = res;