站长资源
中国站长网站

EJS模板引擎如何在客户端浏览器直接使用

优点:直接在标签内书写js代码,结构清晰明了。排错也很简单,所有错误都是普通的 JavaScript 异常。
缺点:js模板引擎是过渡期的产物,现在已经被时代抛弃。

为什么写下这篇文章,主要是最近有位伙计问我EJS怎么用,然后发了一个文档地址给我:

https://ejs.bootcss.com/

这个文档看了之后确实是比较头大,因为对新手实在是不友好,说的太过简洁。对客户端直接使用的介绍很少,因为我之前有使用其它模板引擎的经历,比如handlebarsjs、laytpl、art-template。所以按照文档的语法,再加上自己的理解还是很快就帮他写了一个demo出来。

先来看看我们平时在前端拼接模板字符串的方式

EJS模板引擎如何在客户端浏览器直接使用 -1

这个还是我随便截得一个图,在实际项目中比这个复杂的多了去了。

接下来看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的使用示例,效果如下:
EJS模板引擎如何在客户端浏览器直接使用 -2


在线演示  
×

站长资源极速下载通道: EJS模板引擎如何在客户端浏览器直接使用

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » EJS模板引擎如何在客户端浏览器直接使用

评论 抢沙发

评论前必须登录!