[EJS] 單獨使用 EJS 渲染前端畫面

發表於 2021-06-15 分類於學習筆記閱讀次數：

網路上有許多 EJS 使用範例，通常是以 Node.js 與 Express 搭配的教學，而這裡紀錄如何單獨使用 EJS 來渲染前端畫面。

前言

網路上有許多 EJS 使用範例，通常是以 Node.js 與 Express 搭配的教學，而這裡紀錄如何單獨使用 EJS 來渲染前端畫面。

使用步驟

建立一個目錄用來放置相關檔案，並下載 EJS 內的 ejs.min.js 放至此目錄中。再新增 index.html 且程式碼如下

<!DOCTYPE html>
<html>
    <head>
        <script src='./ejs.min.js'></script>
        <script>
            var html = ejs.render('fieldA:<%= fieldA %><br />fieldB:<%= fieldB %>',
                {fieldA : 'Hello world!', fieldB : 'Hellow Taiwan!'});
            window.onload = function() {
                document.getElementById('divContent').innerHTML = html;
            }
        </script>
    </head>
    <body>
        <div id="divContent"></div>
    </body>
</html>

此時的目錄檔案結構為

1
2
3

.
├── ejs.min.js
└── index.html

直接雙擊 index.html，用瀏灠器就可以看到結果囉！

1 2	fieldA:Hello world! fieldB:Hellow Taiwan!

參考原始碼：GitHub