渲染模板render_(内容管理系统总结2)

来源：互联网发布：薛冰是怎么死的知乎编辑：程序博客网时间：2024/06/06 17:28

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还有其他的使用方法，但这是我在项目使用最多最多的一种方法，所以拿来总结一下。其他的方法可以再看看上面我粘贴的那个链接，找到更多的方法。

0 0