EJS的CommonJs规范版本
ejs分为两个版本一个是CommonJs版本,另外一个是AMD规范的版本.
基础：html页面
安装：<script type="text/javascript" src="./node_modules/ejs/ejs.js"></script>
检查：ejs会将自身挂载到window对象上,所以你只要console.log(ejs)控制台有输出就说明安装成功了.
调试：在浏览器中
注意：和AMD规范版本不同，EJS的CommonJs版本要写在html中
查看是否成功引入ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./ejs.min.js"></script>
<script>
window.onload = function() {
console.log(ejs);
}
</script>
</head>
<body>
</body>
</html>
渲染单个数据
方法一：ejs.render(str，data，options)
实例一：
// 14.html内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./ejs.min.js"></script>
<script>
window.onload = function() {
var string = ejs.render('<h2><%= title %></h2>',{title:'hello'});
document.getElementsByTagName('body')[0].innerHTML = string;
}
</script>
</head>
<body>
</body>
</html>
// 在浏览器中打开页面输出 hello
实例二：
// 实际应该展示在页面上的Dom <div id="interpolation"></div> // 模版 <script id="interpolationtmpl" type="text/x-dot-template"> <!-- 新增用户弹窗 --> <div id="addSourcePopup" class="modal fade q-popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-child-node-id="q-popup" style="margin-top: 10px;"> <div class="q-popup-modal modal-dialog" style=" 900px;background-color: #ffffff;"> <div class="popup-header modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> {{? it.data && it.data.id}} 更新计划 {{??}} 新增计划 {{?}} </div> </div> </div> </script> // 编译和渲染 jQuery.ajax({ type: "get", url: "http://", dataType: "json", success: function (result) { if (result && "0" == result.code && result.json) { var str = ejs.render($("#interpolationtmpl").text(),result.json); // 取到模版并使用数据渲染 $("#interpolation").html(str); // 添加进之前准备好的Dom } } });
方法二：ejs.compile(str，options)(data)
// 实际应该展示在页面上的Dom <div id="interpolation"></div> // 模版 <script id="interpolationtmpl" type="text/x-dot-template"> <!-- 新增用户弹窗 --> <div id="addSourcePopup" class="modal fade q-popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-child-node-id="q-popup" style="margin-top: 10px;"> <div class="q-popup-modal modal-dialog" style=" 900px;background-color: #ffffff;"> <div class="popup-header modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> {{? it.data && it.data.id}} 更新计划 {{??}} 新增计划 {{?}} </div> </div> </div> </script> // 编译和渲染 jQuery.ajax({ type: "get", url: "http://", dataType: "json", success: function (result) { if (result && "0" == result.code && result.json) { var template = ejs.compile($("#interpolationtmpl").text()); // 取到模版 var rs = template(result.json); // 使用数据渲染 $("#interpolation").html(rs); // 添加进之前准备好的Dom } } });
其他用法和AMD规范的版本相同