ejs服務端渲染從入門到放棄
最開始的Web基本上都是一個後端來搞定的，負責寫html模板，然後負責後臺的業務操作，後來出現了前後端分離，現在前端又得開始掌握一些服務端渲染的知識了，真是永遠在努力跟上時代的腳步。
這篇文章主要講解了一些筆者關於學習ejs從入門到放棄的一些感悟。
什麼是ejs？
EJS是一個JavaScript模板庫，用來從JSON資料中生成HTML字串。
為什麼又迴歸到服務端渲染？
優點：
1.SEO，讓搜尋引擎更容易讀取頁面內容
2.首屏渲染速度更快（重點），無需等待js檔案下載執行的過程
3.更易於維護，服務端和客戶端可以共享某些程式碼
在推崇前後端分離的情況下又迴歸服務端渲染主要是專案中初次渲染比較慢或者說需要SEO的原因。
ejs渲染模板看起來是什麼樣子的？
//這種寫法和php,C#的寫法非常類似
<h1><%=title %></h1>
<ul>
<% for (var i=0; i<supplies.length; i++) { %>
<li> <a href= 'supplies/<%=supplies[i] %>' >
<%= supplies[i] %></a>
</li>
<% } %>
</ul>
//前端頁面
<html 語法和功能
- <% %> 用於控制流，簡單的來說就是類似php程式碼的
<?php ?>,表示的是這是一段程式碼片段，裡面可以書寫js程式碼。 <%= %> 用於轉義的輸出,比如上述的
<h1><%=title %></h1>然後我們在資料中傳入了title，title就會被顯示在h1標籤中。那麼如何顯示字串呢？
<h1><%='title' %></h1>字元寫成字串就可以正常顯示字串。
<h1><%=<span style={{color:'red'}}>'title'</span> %></h1>裡面還可以書寫html元素。<%- 輸出非轉義的資料到模板，類似就是註釋了一樣，本身不會執行。
<h1><%-title %>asd</h1>最後的輸出就是asd。- <%# 註釋標籤，不執行、不輸出內容
<h2><%# aaa %></h2>不輸出任何內容。 - <%_ 刪除其前面的空格符，
<h2><%_ 123%></h2>輸出123。 - _%> 將結束標籤後面的空格符刪除。
支援自定義標籤，比如’<%’可以使用’{{‘，’%>’用’}}’代替；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’ 引數。
<%- include filename %>filename是需要引入的模板的檔名。如何自定義模板進行渲染？
之前我們直接呼叫一個寫好的檔案進行渲染模板
new EJS({url: '/js/tmpl/cleaning.ejs'})ejs物件有下面兩個成員函式：
1、ejs.compile(str, options); 將返回內部解析好的Function函式
2、ejs.render(str, options); 返回經過解析的字串
ejs.compile(str, options)，第一個引數str：需要解析的字串模板，第二個引數option：其他引數
const template = ejs.compile('<%=123 %>');
var result = template();
console.log(result);//123ejs.render(str, options); 第一個引數str：需要解析的字串模板，第二個引數option：其他引數
ejs.render(str,option);
// 渲染字串 str 一般是通過nodejs檔案系統的readfile方法讀取
ejs.render(str,{
data : user_data
// 需要渲染的資料
});兩個函式的公用options羅列如下：
cache是否快取解析後的模版(ejs.compile(..) ,需要 filename引數作為快取的keyfilename用於快取的key，和includecontext函式的執行上下文compileDebug輸出compile的資訊來跟蹤除錯client返回編譯後的函式delimiter<% .. %> 指這裡的%debug 輸出ejs.compile()得到函式的函式體strict ejs.compile()返回的函式是否執行在嚴格模式_with是否使用 with(){..} 來訪問本地變數localsName儲存本地變數的物件名，預設為localsrmWhitespace移除多餘空格
看到這裡，大概是基本上入門ejs語法和使用方法了，由於我的業務框架主要是react,現在我要放棄ejs而去擁抱next.js了，這裡附一個next.js學習文件，還是比較基出比較完善的入門文件。next.js快速入門