index.ejs与index.html

EJS是一个高效的嵌入式JavaScript模板引擎。

HTML是什么？

HTML(超文本标记语言)用于设计网页的结构及其内容。从技术上讲，HTML 实际上不是 C++、JAVA 或 python 等编程语言。它是一种标记语言，它最终向浏览器提供声明性指令。加载网页时，浏览器首先读取 HTML 并从中构造 DOM(文档对象模型)树。 HTML 由一系列元素组成。

EJS是什么？

EJS 仅代表嵌入式 JavaScript。它是一种简单的模板语言或引擎。 EJS 有自己定义的语法和标签。它提供了一种更简单的动态生成 HTML 的方法。

为什么需要使用模板引擎？

如果服务器以静态HTML+JS渲染的方式将页面发送至客户端，那么加载、渲染的时间会让用户体验大打折扣。模板引擎将HTML文档与业务数据分离，通过特定语法动态渲染出HTML，再将渲染后的页面相应给客户端，浏览器加载完立即展示，减少在客户端渲染的时间。

为什么用EJS？

EJS可以在不破坏HTML文档结构的情况下直接在标签内书写JS代码，可以保持明确的、维护性良好的HTML代码结构。在用法上更简单，直接像写HTML代码一样去写就好了，只是文件的后缀不再是.html，而是.ejs。这样的.ejs文件就是模板文件了。将模板字符串和数据作为参数传给EJS文件，HTML就出来了。

吐槽：EJS官方文档写的跟shit一样，对小白很不友好，有基础的除外。

参考一下原生JS渲染的写法（古早）

<div id="scan"></div>
<script>
    //原生JS渲染HTML字符串
    var names = ['炭之郎', '祢豆子', '义勇', '无惨']
    var html = "<h1>Names</h1>"
    html += "<ul>"
    for (var i = 0; i < names.length; i++) {
        html += "<li>" + names[i] + "</li>"
    }
    html += "</ul>"
    document.getElementById("scan").innerHTML = html
</script>

效果

以上代码确实实现了功能，但JS和HTML交杂在一起，看起来不太美观，如果代码长一点更加难看。

在web项目中使用EJS

names.js

var express = require("express");
var app = express();
//指定模板
app.set("virew engine", "ejs");
const names = ['炭之郎', '祢豆子', '义勇', '无惨']

app.get('/names', (req, res) => {
    res.render('names.ejs', { names, names });
})

app.listen(3000, function (req, res) {
    console.log("Connected on port:3000")
})

view/names.ejs

<!DOCTYPE html>
<html>

<head>
    <title>names</title>
</head>

<body>
    <div>
        <h1>Names</h1>
        <ul>
            <% names.forEach(item=>{ %>
                <li>
                    <%= item %>
                </li>
                <% }); %>
        </ul>
    </div>
</body>

</html>