ejs模板html,Ejs 模板引擎的有限使用

Ejs，Effective js 是也。所谓，写的更少，做的更多。

流浪器端的语法大概是长这样的：

首先得引入ejs嘛

然后使用JavaScript脚步调用，以下两种调用方式是等价的：

方式1——

var template = ejs.compile(str, options);

template(data);

方式2——

ejs.render(str, data, options);

options对象可以包括以下属性：

cache:true, //解析结果进行缓存

filename:"path", //用于引入文件或指定cache的键名

scope:"this", //指定函数执行的上下文对象

compileDebug:false, //当此项为false时，debug指令不会被编译

client:"", //返回独立的编译后的函数

delimiter:"a tag", //指定标签的开闭符号，默认为 % ,可以指定例如 ? 或$

open:"

close:"%>", //指定闭标签

debug:true, //输出生成的函数体

_with:false //指定模板是否使用with(){}函数结构

标签含义：

%> //普通的结束标签

-%> //剪除模式，移除随后的换行符

渲染数组：

var people = ['geddy', 'neil', 'alex'],

html = ejs.render('', {people: people});

渲染对象：

关于引入模式和自定义标签，嗯，写的太多了...

看起来好复杂啊，怎么用呢？？？这个值得探讨探讨...以下代码默认以jQuery库形式进行操作

如果模板不需要复用

一、HTML结构与js代码混用

a.html文件

a.js

$(function(){

var str = "

var obj = {

txt:'HelloWorld',

time:'2016-11-29'

};

var html = ejs.render(str,{data:obj});

$("#show").html(html);

}

结果如下：

这种方式非常不好，因为这完全不符合前端的分离原则，建议使用接下来的这种。

二、ejs模板保留在HTML文本中，与js分离

b.html

b.js

$(function(){

var obj = {

txt:'HelloWorld',

time:'2016-11-29'

};

var html = ejs.render($("#model").html(),{data:obj});

$("#show").html(html);

}

你会得到一样的结果，但是，js代码里面没有了HTML标签，符合了内容结构与业务逻辑的分离，你应当这么使用。

如果模板需要复用

三、模板通过script标签保留在HTML结构中

c.html

' %>

' %>

' %>

' %>

c.js

$(function(){

var hello = {

earth:"Good morning?",

world:"Who are you!"

}

var html = ejs.render($('#what').html(),{hello:hello});

$("#show").html(html);

});

最终，你会把

那么，你就得到了两个可用模板

和

你的js代码就可以继续利用这些模板做你想做的事情啦！

但是！在单页面程序不要这样子用， ' %> 这种代码使人愕然，在script中嵌套script是非常不利于理解的。为了团队中的其他人能理解你的代码，你最好使用下一种方式！

四、模板抽取出来成为一个单独的文件(这种模式下要求使用gulp、grunt等构建工具，否则无法使用)

d.html

how.html

why.html

d.js

$(function(){

var hello = {

earth:"Good morning?",

world:"Who are you!"

}

var html = ejs.render($('#tpl_how').html(),{hello:hello});

html += ejs.render($('#tpl_why').html(),{hello:hello});

$("#show").html(html);

});

以上，就是一些小经验的分享。欢迎拍砖。