EJS學習（三）之語法規則中

本文轉載自查看原文 2019-09-05 16:19 671 模版引擎/ EJS

⚠️實例均結合node，也就是AMD規范版本

ejs中使用render()表示渲染文本

接收三個參數：模版字符串、data、options，返回一個字符串

const ejs = require('ejs');

ejs.delimiter = '$';

var html = ejs.render(`
    <$ for(var i=0; i<num; i++ ) { -$>
        <h2><$= user.name $>
        </h2><h2><$= user.age $></h2>
    <$ } -$>`
    ,{
    user:{
        name:"wangkun",
        age:22,
    },
    num:2
},{rmWhitespace:true});

console.log(html);

// 輸出：
<h2>wangkun
</h2><h2>22</h2>
<h2>wangkun
</h2><h2>22</h2>

ejs中使用renderFile()表示渲染文件

接收四個參數：模版字符串、data、options、callback，沒有返回值

const ejs = require('ejs');
ejs.renderFile("./work/lesson12/view/1.ejs",{name:'wangkun'},function(err,data){ // err是錯誤，data是渲染完的數據
    if(err){
        console.log("出錯了");
    }else{
        console.log(data);
    }
});

ejs中使用<% %>輸出腳本

實例一：ejs中的for循環

// 3.ejs內容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <% for(var i=0; i<json.arr.length; i++) {%>
        <div>
            用戶名：<%= json.arr[i].user %>
            年齡：<%= json.arr[i].age %>
        </div>
    <% } %>
</body>
</html>


// 3.js內容：
const ejs = require('ejs');

ejs.renderFile('./work/lesson14/view/3.ejs',{
    json:{
        arr:[
            {user:"pear",age:"12"},
            {user:"apple",age:"13"},
            {user:"banana",age:"14"},
            {user:"orange",age:"15"}
        ]
    }
},function(err,data){
    console.log(data);
});


// 輸出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
        <div>
            用戶名：pear
            年齡：12
        </div>
    
        <div>
            用戶名：apple
            年齡：13
        </div>
    
        <div>
            用戶名：banana
            年齡：14
        </div>
    
        <div>
            用戶名：orange
            年齡：15
        </div>
    
</body>
</html>

⚠️ 所有使用 <% %> 括起來的內容都會被編譯成 Javascript，你可以在模版文件中像寫 js 一樣 Coding，也允許你聲明變量，作用域就是當前模版，因為一個模版會被編譯成一個 Javascript 函數

ejs中使用<%= %>轉義輸出

實例一：

// 1.ejs內容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    我的名字:<%= name %> // 表示賦值
　　<%= 12+5 %>
　　<%= 'asdfasdf' %>

</body>
</html>

// ejs1.js內容：
const ejs = require('ejs');
ejs.renderFile("./work/lesson12/view/1.ejs",{name:'wangkun'},function(err,data){ // err是錯誤，data是渲染完的數據
    if(err){
        console.log("出錯了");
    }else{
        console.log(data);
    }
});


// 輸出：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    我的名字:wangkun
　　 17
　　 asdfasdf

</body>
</html>

實例二：

// 2.ejs內容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <%= json.arr[0].user %>
        <%= json.arr[0].age %>
        <%= json.arr[2].user %>
        <%= json.arr[2].age %>
    </div>
</body>
</html>

// 2.js內容：
const ejs = require('ejs');

ejs.renderFile('./work/lesson14/view/2.ejs',{
    json:{
        arr:[
            {user:"pear",age:"12"},
            {user:"apple",age:"13"},
            {user:"banana",age:"14"},
            {user:"orange",age:"15"}
        ]
    }
},function(err,data){
    console.log(data);
});


// 輸出：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        pear
        12
        banana
        14
    </div>
</body>
</html>

實例三：

// 4.ejs內容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <%
        var str = "<div></div>"
    %>

    <%= str %>
</body>
</html>

// 4.js內容：
const ejs = require('ejs');

ejs.renderFile('./work/lesson14/view/4.ejs',{},function(err,data){
    console.log(data);
});


// 輸出：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    

    &lt;div&gt;&lt;/div&gt; // ❗️發現是轉義的
</body>
</html>

ejs中使用<%- %>非轉義輸出

// 4.ejs內容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <%
        var str = "<div></div>"
    %>

    <%- str %>
</body>
</html>

// 輸出：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    

    <div></div>
</body>
</html>

ejs中使用<%% %>輸出模版字符串

// 7.ejs內容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <%% if(user.name) { %>
        <%%= user.name %>
    <%% } %>
</body>
</html>

// 7.js內容：
const ejs = require('ejs');

ejs.renderFile('./work/lesson14/view/7.ejs',{
    user:{
        name:"wangkun",
        age:22
    }
},(err,data)=>{
    if(err) {
        console.error(err);
    }else {
        console.log(data);
    }
});

// 輸出：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <% if(user.name) { %>
        <%= user.name %>
    <% } %>
</body>
</html>

ejs中使用<%_ _%>刪除標簽前后的空格

情況一：<%_ 和 _%>一起使用

// 9.ejs內容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <%_ if(user.name) { _%> 
        <h2><%= user.name _%></h2>
    <%_ }else{ _%>
        <h2><%= user.age _%></h2>
    <%_ } _%>
</body>
</html>

// 9.js內容：
const ejs = require('ejs');

ejs.renderFile('./work/lesson14/view/9.ejs',{
    user:{
        name:"wangkun",
        age:22
    }
},(err,data)=>{
    if(err) {
        console.error(err);
    }else {
        console.log(data);
    }
});

// 輸出：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <h2>wangkun</h2> // 注意標簽前后沒有空格
</body>
</html>

// 不使用<%_ _%>輸出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

        <h2>wangkun</h2> // 注意標簽有空格

</body>
</html>

情況二：單獨使用<%_

// 9.ejs內容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <%_ if(user.name) { %> 
        <h2><%= user.name %></h2>
    <%_ }else{ %>
        <h2><%= user.age %></h2>
    <%_ } %>
</body>
</html>

// 輸出：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
 
        <h2>wangkun</h2> // 注意標簽前后空格沒有被刪除

</body>
</html>

情況三：單獨使用_%>

// 9.ejs內容；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <% if(user.name) { _%> 
        <h2><%= user.name _%></h2>
    <% }else{ _%>
        <h2><%= user.age _%></h2>
    <% } _%>
</body>
</html>

// 輸出：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
            <h2>wangkun</h2> // 標簽前后沒有空格，但是樣式亂了
    </body>
</html>

綜合以上三種情況，強烈推薦<%_和_%>一起使用，可以有效刪除標簽前后空格並且樣式不會亂☺️

ejs中使用<% -%>刪除換行符

情況一：

// 10.ejs內容；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <% for(var i=0; i<num; i++ ) { -%>
        <h2><%= user.name %></h2>
        <h2><%= user.age %></h2>
    <% } -%>
</body>
</html>

// 輸出
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
            <h2>wangkun</h2>
        <h2>22</h2>
            <h2>wangkun</h2> // 雖然標簽前后空格刪除了，但樣式亂掉了
        <h2>22</h2>
    </body>
</html>

// 不使用-%>輸出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

        <h2>wangkun</h2>
        <h2>22</h2>

        <h2>wangkun</h2> // 標簽前后有空格
        <h2>22</h2>

</body>
</html>

情況二：傳配置參數rmWhitespace，這樣格式就不會亂掉

// 10.ejs內容：
const ejs = require('ejs');

ejs.renderFile('./work/lesson14/view/10.ejs',{
    user:{
        name:"wangkun",
        age:22,
    },
    num:2
},{rmWhitespace:true},(err,data)=>{
    if(err) {
        console.error(err);
    }else {
        console.log(data);
    }
});

// 輸出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>wangkun</h2>
<h2>22</h2>
<h2>wangkun</h2>
<h2>22</h2>
</body>
</html>

ejs中使用<%# %>進行注釋沒有任何輸出

// 8.ejs內容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <%# if(user.name) { %>
        <%= user.name %>
    <%# } %>
</body>
</html>

// 8.js內容：
const ejs = require('ejs');

ejs.renderFile('./work/lesson14/view/8.ejs',{
    user:{
        name:"wangkun",
        age:22
    }
},(err,data)=>{
    if(err) {
        console.error(err);
    }else {
        console.log(data);
    }
});

// 輸出：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
        wangkun
    
</body>
</html>

ejs中使用include引入內容

通過 include 指令將相對於模板路徑中的模板片段包含進來。(需要提供 'filename' 參數。) 例如，如果存在 "./views/users.ejs" 和 "./views/user/show.ejs" 兩個模板文件，你可以通過 <%-

include('user/show'); %> 代碼包含后者。你可能需要能夠輸出原始內容的標簽 (<%-) 用於 include 指令，避免對輸出的 HTML 代碼做轉義處理。

<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}); %>
  <% }); %>
</ul>

情況一：基礎，引入文本文件

// 5.ejs內容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <% include a.txt %>
</body>
</html>

// a.txt內容：
jidhhdka
kidutyui
iiiiisnhakjdhgagd


// 5.js內容：
const ejs = require('ejs');

ejs.renderFile('./work/lesson14/view/5.ejs',{},function(err,data){
    console.log(data);
});


// 輸出：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    jidhhdka
    kidutyui
    iiiiisnhakjdhgagd
</body>
</html>

情況二：配合循環一起使用

// 6.ejs內容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <% for(var i=0; i<5; i++) { %>
        <% include a.txt %>
    <% } %>
</body>
</html>

// 輸出
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
        jidhhdka
kidutyui
iiiiisnhakjdhgagd
    
        jidhhdka
kidutyui
iiiiisnhakjdhgagd
    
        jidhhdka
kidutyui
iiiiisnhakjdhgagd
    
        jidhhdka
kidutyui
iiiiisnhakjdhgagd
    
        jidhhdka
kidutyui
iiiiisnhakjdhgagd
    
</body>
</html>

情況三：引入css文件

// 7.ejs內容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 通過type判斷引入誰 -->
     <% if(type == 'admin') { %>
        <% include admin.css %>
    <% }else {%>
        <% include user.css %>
    <% } %>
</body>
</html>

// admin.css內容：
div{
    width: 800px;
}

// user.css內容：
div{
    width: 800px;
}

注意：

1、include因為不是js中的語法，所以要單獨占據一行

2、include后面不能是變量

3、Include 可以引用相對路徑的模版文件，例如有 html/index.html 和 html/_block/head.html這兩個文件，你就可以在 index.html 這么用 <% include _block/head.html %>。

4、如果我們引入的是一個文本那么可以使用<% %>，但是如果是ejs或html為了防止將引入的html轉義，我們要使用<%- %>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 mockjs 的語法規則（二） Python語法規則 json語法規則 Emmet語法規則 Python的語法規則 xpath語法規則 dockerfile語法規則 CSS - 語法規則 [C/C++] C++中new的語法規則 CMake: (四) CMake語法規則