站长资源优点：直接在标签内书写js代码，结构清晰明了。排错也很简单，所有错误都是普通的 JavaScript 异常。
缺点：js模板引擎是过渡期的产物，现在已经被时代抛弃。
为什么写下这篇文章，主要是最近有位伙计问我EJS怎么用，然后发了一个文档地址给我：
https://ejs.bootcss.com/
这个文档看了之后确实是比较头大，因为对新手实在是不友好，说的太过简洁。对客户端直接使用的介绍很少，因为我之前有使用其它模板引擎的经历，比如handlebarsjs、laytpl、art-template。所以按照文档的语法，再加上自己的理解还是很快就帮他写了一个demo出来。
先来看看我们平时在前端拼接模板字符串的方式
这个还是我随便截得一个图，在实际项目中比这个复杂的多了去了。
接下来看EJS如何实现同样的效果(其实是个模板引擎都可以O(∩_∩)O哈哈~)
先引入EJS
<script src="ejs.min.js"></script>
简单的语法介绍
// js代码放在<% %>中 // 需要输出的代码加上=,如：<%=item.title%>
1，我们在body中添加一个盒子容器
<body>
<!-- 导航 -->
<div id="nav"></div>
</body>
2，添加一个对应的模板，模板中的内容就是盒子容器里面的内容
<script charset="UTF-8" type="text/template" id="template">
<ul>
<li><a href="">首页</a></li>
<li><a href="">关于</a></li>
<li><a href="">联系</a></li>
</ul>
</script>
3，用EJS解析模板和数据，然后进行渲染(关键步骤)
// 假设有如下数据(一般通过ajax从接口获取)
var nav = [
{
title: '首页',
url: '/'
},
{
title: '关于',
url: '/about'
},
{
title: '联系',
url: '/contact'
}
]
// 1、获取页面模板的innerHTML
var template = document.getElementById('template').innerHTML;
// 2、把获取到的模板template和要绑定的数据nav交给EJS解析处理，得到我们最终想要的字符串
var result = ejs.render(template, {data: nav});
// 2、把获取的结果放到页面的容器中，比如导航nav
document.getElementById('nav').innerHTML = result;
4，我们把之前的模板改为动态数据
<script charset="UTF-8" type="text/template" id="template">
<% if (data && data.length > 0) { %>
<ul>
<% data.forEach(function(item, index) { %>
<li><a href="<%= item.url %>"><%= item.title %></a></li>
<% }); %>
</ul>
<% } %>
</script>
5，再加上少许样式
<style>
*{margin: 0;padding: 0;list-style: none;}
#nav ul{display: flex;justify-content: center;}
#nav ul li{padding: 10px 25px;}
</style>
这样就完成了EJS的使用示例，效果如下：
评论前必须登录！
注册