EJS学习（五）之EJS的CommonJs规范版本

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)