EJS學習總結

時間 2019-11-13

標籤 ejs 學習總結简体版

原文原文鏈接

一、什麼是EJSjavascript

EJS是一個JavaScript模板庫，用來從JSON數據中生成HTML字符串。html

二、爲何要使用EJSjava

與最初的JavaScript相比較，一些不太瞭解你的代碼的人能夠更容易地經過EJS模板代碼看得懂你的代碼。讓咱們放鬆一下，一塊兒來享受下使人激動的乾淨簡潔的感受。node

總之可讓代碼更加乾淨整潔，讓人易懂。express

能夠看以下的例子：json

這是用javascript實現的代碼api

var html = "<h1>"+data.title+"</h1>"
html += "<ul>"
for(var i=0; i<data.supplies.length; i++) {
    html += "<li><a href='supplies/"+data.supplies[i]+"'>"
    html += data.supplies[i]+"</a></li>"
}
html += "</ul>"

最終要實現的效果以下：數組

可是上面的代碼看起來很亂，雖然實現了功能，可是不容易讓人弄懂。不只代碼醜陋，並且你的HTML結構徹底在JavaScript代碼中丟失。瀏覽器

下面學習EJS一樣實現上面的功效，它的工做原理以下：
緩存

使用EJS來找回你的明確、維護性良好的HTML代碼結構。

注:data是json對象，不能使json字符串。

在HTML中引入EJS,以使javascript可以使用它，引入EJS的語句以下：

<script type="text/javascript" src="/js/ejs.js"></script>

建立一個EJS模板,命名爲cleaning.ejs文件，內容以下：

<h1><%=title %></h1>
<ul>
    <% for(var i=0; i<supplies.length; i++) { %>
        <li>
            <a href='supplies/<%=supplies[i] %>'>
                <%= supplies[i] %>
            </a>
        </li>
    <% } %>
</ul>

個人HTML文檔以下，引入EJS,並更加咱們的提供EJS模板建立EJS對象，而後調用EJS對象成員函數解析JSON對象到模板中。

<html>
<head>
<script type="text/javascript" src="/js/ejs.js"></script>
<script type="text/javascript">

function myfunction(){
var data='{"title":"cleaning","supplies":["mop","broom","duster"]}'
	var html = new EJS({url: '/js/tmpl/cleaning.ejs'}).render(JSON.parse(data));
	//JSON.parse(data) 把JSON字符串解析爲原生的javascript值。
	alert(html);
	document.getElementById("div1").innerHTML=html;
}
</script>
</head>
<body>
<button onclick="myfunction()">點擊</button>
<div id="div1"></div>
</body>
<html>

從上面這個例子咱們能夠看到EJS模板的基本用法。

三、下面介紹下EJS的語法和功能：

一、緩存功能，可以緩存已經解析好的html模版；

二、<% code %>用於執行其中javascript代碼。

<% alert('hello world') %>

三、<%= code %>會對code進行html轉義；

<h1><%=title %></h1>                    注：會把title裏面存的值給顯示出來在h1中。
<p><%= 'hello world' %></p>             注：會把hello world顯示在h1中。
<h1><%= '<b>hello world</b>' %></h1>    注：會把hello world變粗，而後顯示在h1中。

四、<%- code %>將不會進行轉義；，這一行代碼不會執行，像是被註釋了同樣，而後顯示原來的html。也不會影響整個頁面的執行。

<h1><%-title %>asd</h1>          最後顯示asd，及顯示原網頁
<p><%# 'hello world' %>asd</p>   最後顯示asd，及顯示原網頁

五、支持自定義標籤，好比'<%'可使用'{{'，'%>'用'}}'代替；

ejs 裏，默認的閉合標記是 <% .. %>，咱們也能夠定義本身的標籤。例如：

app.set("view options",{                                                                                  
   "open":"{{",                                                                                  
   "close":"}}"
});

六、提供一些輔助函數，用於模版中使用
     1)、first，返回數組的第一個元素；
2)、last，返回數組的最後一個元素；
3)、capitalize，返回首字母大寫的字符串；
4)、downcase，返回字符串的小寫；
5)、upcase，返回字符串的大寫；
6)、sort，排序（Object.create(obj).sort()？）；
7)、sort_by:'prop'，按照指定的prop屬性進行升序排序；
8)、size，返回長度，即length屬性，不必定非是數組才行；
9)、plus:n，加上n，將轉化爲Number進行運算；
10)、minus:n，減去n，將轉化爲Number進行運算；
11)、times:n，乘以n，將轉化爲Number進行運算；
    12)、divided_by:n，除以n，將轉化爲Number進行運算；
    13)、join:'val'，將數組用'val'最爲分隔符，進行合併成一個字符串；
    14)、truncate:n，截取前n個字符，超過長度時，將返回一個副本
    15)、truncate_words:n，取得字符串中的前n個word，word以空格進行分割；
    16)、replace:pattern,substitution，字符串替換，substitution不提供將刪除匹配的子串；
    17)、prepend:val，若是操做數爲數組，則進行合併；爲字符串則添加val在前面；
    18)、append:val，若是操做數爲數組，則進行合併；爲字符串則添加val在後面；
    19)、map:'prop'，返回對象數組中屬性爲prop的值組成的數組；
    20)、reverse，翻轉數組或字符串；
    21)、get:'prop'，取得屬性爲'prop'的值；
    22)、json，轉化爲json格式字符串

七、利用<%- include filename %>加載其餘頁面模版；

四、使用建立好的EJS模板

基於咱們以前寫的模擬生成一個EJS對象

new EJS({url: '/js/tmpl/cleaning.ejs'})

對象有下面兩個成員函數

一、ejs.compile(str, options); 將返回內部解析好的Function函數
二、ejs.render(str, options); 返回通過解析的字符串

ejs的render函數有兩個參數第一個是字符串，第二個是可選的對象，和其餘javascript模版同樣須要渲染的數據也是包含在option對象中的。

ejs.render(str,option);  
// 渲染字符串 str 通常是經過nodejs文件系統的readfile方法讀取 
  
ejs.render(str,{  
    data : user_data  // 須要渲染的數據 
  
});

   其中options的一些參數爲：
    一、cache：是否緩存解析後的模版，須要filename做爲key；
    二、filename：模版文件名；
    三、scope：complile後的Function執行所在的上下文環境；
    四、debug：標識是不是debeg狀態，debug爲true則會輸出生成的Function內容；
    五、compileDebug：標識是不是編譯debug，爲true則會生成解析過程當中的跟蹤信息，用於調試；
    六、client，標識是否用於瀏覽器客戶端運行，爲true則返回解析後的能夠單獨運行的Function函數；
    七、open，代碼開頭標記，默認爲'<%'；
    八、close，代碼結束標記，默認爲'%>'；
    九、其餘的一些用於解析模版時提供的變量。
    在express中使用時，options參數將由response.render進行傳入，其中包含了一些express中的設置，以及用戶提供的變量值。

5、最後總結一下EJS的應用場所

用JavaScript建立HTML字符串正如咱們在新手教程中所討論的，在JavaScript中拼字符串的缺點是可維護性很差。當你在JavaScript中將這些字符串拼到一塊兒時，很難看出你正在寫的HTML是什麼\---|一個你頁面展示的結構。而使用模板可讓你經過代碼的空行和縮進來清楚地展示出你的HTML。
基於WebService的AJAX網站開發 EJS能夠接收WebService異步傳送過來的JSON格式的數據，將這種數據直接傳入你的模板裏，而後將結果插入到你的頁面中。你所須要作的只是經過如下代碼：

new EJS({url: 'comments.ejs'}).update('element_id', '/comments.json')

程序換膚功能

若是你想給用戶自制頁面顯示的功能，EJS提供了很是適合的機制。EJS的模板只在瀏覽器裏執行，所以對你的服務器沒有任何安全風險。你能夠容許你的用戶上傳EJS模板以及其關聯的樣式表，從而實現定製你的網站頁面的功能。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。