渲染模板render_(内容管理系统总结2)_render对象只能是ejs吗-CSDN博客

本文链接：https://blog.csdn.net/nceliy/article/details/51434306

1、 render渲染

首先了解ejs是什么：EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。
我现在对它的了解就是知道如何去使用这个东西，真正高大上个的东西还是让度娘交给我们吧。
参考文档有：render的简单介绍

于是我就写了简单的小例子进行了验证：
首先粘贴能跑起来的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="ejs.js"></script>
    <style type="text/css">
        .test{
            display:table;
            height:400px;
            width:400px;
            background:#99cc99;
            border-radius:5px;
            border:1px solid #f70;

        }
        .test > span{
            display:table-cell;
            vertical-align:middle;
            text-align:center;
        }
        .test > span > img{
            height:200px;
            width:200px;
            border-radius:50%;
            box-shadow:1px 1px 3px rgba(0,0,0,.5);
            display: inline-block!important;
        }
        .hide{
            display: none!important;
        }
    </style>
    <script id="testName" type="text/html">
        <div class="name">
            <ul class="<%= nameType%>">
                <% for(var i= 0;i<data.info.list.name.length;i++) { %>
                    <li class="list"><%= data.info.list.name[i] %></li>
                <% } %>
            </ul>
        </div>
    </script>
</head>
<body>
    <div class="test">
        <span><img class="hide" src="http://d.hiphotos.baidu.com/image/h%3D200/sign=8663264274f082023292963f7bfbfb8a/f3d3572c11dfa9eca13b947665d0f703918fc1be.jpg" alt=""></span>
        <a href="www.baidu.com">点我喽！</a>
    </div>

    <script>
        function render(id, data, isJQuery) {
            var html = new EJS({
                element: id
            }).render(data);

            return isJQuery ? $(html) : html;
        }

        $(".test").click(function(){
            alert("test测试");
        });
        $(".test img").click(function(){
            alert("img测试");

            return false;
        });
        $(".test a").click(function(){
            alert("哈哈，我就是来阻止你的~");

            return false;
        });

        var data = {
            info : {
                list:{
                    name:["hello","nihao","xining"]
                }
            }
        }

        var $nameHtml =render(testName,{data:data,nameType:"nameul"});
        // var $nameHtml =new EJS({element:testName}).render({data:data,nameType:"nameul"});
        $("body").append($nameHtml);
    </script>
</body>
</html>

分析我的基础使用：head中要引用ejs.js这个js文件

然后我们要使用它，我们通过script设置ID，type=”text/html” ,并且结合ejs的表达方式来协助<% %>中间写入逻辑语句，<%= %>直接写入等式的值，这样通过渲染的方式，将script对应的ID里边的内容给渲染出来，变成我们的html。看起来是简明易懂的。

将上面所说的script里边的代码转变成html语言，中间媒介就是ejs.首先我们要实例化一个ejs对象，我们就要new出来它。因为很多时候都要使用这个render方法，我们就不是每一次都New出来一个实例对象了，我们就直接把它定义成一个公用的方法。就是我们这段代码：

function render(id, data, isJQuery) {
            var html = new EJS({
                element: id
            }).render(data);

            return isJQuery ? $(html) : html;
        }

当然我们也可以每一次ejs都重新的实例化一次，例如：

var $nameHtml =new EJS({element:testName}).render({data:data,nameType:"nameul"});

当然ejs还有其他的使用方法，但这是我在项目使用最多最多的一种方法，所以拿来总结一下。其他的方法可以再看看上面我粘贴的那个链接，找到更多的方法。