当前位置： 移动技术网 > IT编程>网页制作>CSS > EJS模板分享

EJS模板分享

2018年10月03日  | 移动技术网IT编程  | 我要评论

手工半成品加工,冲田杏梨17部作品,mtmit

ejs 模板

在ejs模板中，通常会用下面四种方式在html中输出服务端的变量或表达式的值：

1. 直接在<%%>中写表达式或变量。这种情况通常只是用来进行表达式计算或给变量赋值，不会有任何输出，被称作无缓冲的代码。

<% code %>

2. 在<%%>中通过=号输出变量或表达式的值。默认输出到页面中的内容会进行html转义。如

hello

输出后会变成<p>hello</p> 
<%= code %>

3. 在<%%>中通过-号输出变量或表达式的值。内容不经任何转义直接输出到页面上。

<%- code %>

4. 在结束标记%>之前添加-号，这样输出的内容会自动带有html标记的缩进。如：

<% code -%> 或 <% -%> 或 <%= code -%> 或 <%- code -%>

使用ejs(模板引擎)动态绑定页面中的数据

javascript

序

作为一名工程师，我们经常会使用ajax/jsonp等技术，从服务器端获取到我们所需要的数据，然后把数据动态的展示在对应页面中。这里列举一下目前市场上常用的绑定方式：

1、不依托js，而是使用php/ruby/python/等技术实现数据的绑定

目前市场上还有很多项目是这样处理的，数据获取绑定的操作都不是由js完成，而是由其它的语言来完成；这样做的主要原因(个人分析哈)：使用js获取数据然后进行动态数据绑定，当把页面加载完成后，你去查看页面的源代码，会发现在源代码中并没有绑定的内容，这样搜索引擎的小蜘蛛过来收录的时候，也同样找不到对应的文章或者文字内容，不利于网站的和seo优化。目前传统的门户网站，例如腾讯新闻，他们的数据绑定是由其它语言来完成的。

小伙伴们如果你的公司数据绑定也是由其它的语言来完成，bing go，那么恭喜你中奖了，友情提示：你需要在闲暇的时间去自学一些php、ruby、jsp等，只有这样你才能看懂项目的源代码哈；而且你要做好心理准备，很有可能后台人员把数据绑定完成了，你的页面布局结构也乱了，你还要苦苦的去改；总之，这种前后端没有彻底分离的模式，不管是对于前端还是后台开发人员都有不小的挑战，加油吧骚年~~

2、js代码中进行字符串拼接

这种方式属于完全的前后端分离，在js中获取到服务器端返回的数据后，把之前在html页面中写好的标签，一句句的复制到js中，用字符串拼接的方式，把标签和数据拼接在一起，最后在把拼接完成的字符串插入到页面中指定的位置。使用这种方式处理简单的字符串拼接还可以，处理复杂的，非常的恶心，我们接下来看一下：

var str = ''; if (jsondata) { var data = jsondata["data"]; $.each(data, function (key, curary) { str += '

'; str += '

' + key.myformattime("{1}月{2}日") + '

'; str += '
  • '; $.each(curary, function (index, curdata) { var linkurl; str += '
  • '; str += '

    '; str += '' + curdata["starttime"].myformattime("{3}:{4}") + ''; str += '' + curdata["matchdesc"] + ''; str += '

    '; str += '

    '; str += '

  • '; }); str += '
'; str += '

'; }); } $match.children("p").eq(0).html(str); $myscroll.refresh();

o my god! 这是啥！不仅拼接字符串的时候浪费时间，后期改动的话也不好改，而且js代码会非常的混乱...；此外我看了一些项目中，还有使用动态创建元素节点来实现的，这样做和字符串拼接一样，js中的代码混乱，不易于后期的维护，此外使用动态创建元素节点的方式，还会引发多次的dom回流，影响页面的性能。(数据绑定和dom回流讲解视频，可以点击查看哈~~)

3、使用模板引擎绑定和渲染数据

模板引擎的原理其实也是字符串拼接，但是和第二种不同的是，它不是把字符串在js代码中拼接，而是先在html页面中，按照模板提供的规则把数据内容嵌入到html标签中。最后由模板解析成需要的字符串，在js中把解析出来的字符串放入到页面中的指定位置进行渲染。

目前市面上流行的模板很多很多，例如：ktemplate、jade、dot、angular中也提供模板、以及我们今天需要讲解的ejs等...，当初jquery的作者写了一个50行代码左右的模板，有兴趣的可以自己分析一下其它模板的，然后写出一个属于自己的模板。

ejs

ejs(embedded javascript)也是众多模板中的一种，它主要是node开源的模板，在node环境下实现绑定和渲染的。但是它也可以单独的在客户端调取使用，我们接下来就介绍独立在客户端的使用，在node中如何的使用请关注“珠峰node培训课程”。

在客户端使用ejs主要是分四步:

1、导入ejs

ejs的源码大家可以去它的官网进行下载：http://www.embeddedjs.com/

<script charset="utf-8" type="text/javascript" src="js/ejs.min.js"></script>

2、准备需要绑定的数据

在真实的项目中，这一步需要使用ajax或者jsonp等技术从服务器获取，然后把获取回来的数据进行解析重构(一般情况下也不需要二次重构数据结构)。

//->使用jquery的ajax获取数据 $.ajax({ url:'/getmenu', type:'get', datatype:'json', success:function(data){ //->data:就是我们从服务器获取的数据,然后执行第四步的bindhtml方法 bindhtml(data); } }); //->假设我们获取的数据格式如下 [ { "name": "nba", "tag": "nba", "columnid": 100000 }, { "name": "欧洲杯", "tag": "ec", "columnid": 3 }, { "name": "中超", "tag": "csl", "columnid": 208 } ... ]

3、在html页面中设定模板和嵌入数据

模板有自己的渲染规则，我们把需要写的js循环判断放在<%%>中，如果需要输出用<%=%>；其实非常的简单就是把之前字符串拼接方式中的js写在了html中，这样ejs负责把模板中的内容获取到，然后按照规则把数据和html标签拼接在一起...

//->这个是最终显示html和数据的区域

 

//->这个是制定的模板

4、在js中为ejs模板提需要绑定的供数据

function bindhtml(data){ //->首先把页面中模板的innerhtml获取到 var str=$("#menutemplate").html(); //->然后把str和data交给ejs解析处理，得到我们最终想要的字符串 var result=ejs.render(str, {data: data}); //->最后把获取的html放入到menu中 $(".menu").html(result); }

以上就是ejs独立在客户端的使用，其它的模板引擎和其类似，区别在于模板中的嵌入数据和编写js的语法不一样，例如：ejs是<%%>操作，而dot是{{}}这样操作，angular也有自己的操作规则...珠峰培训的node课程中将会为大家继续讲解ejs深入以及更多的模板引擎，欢迎大家来学习。

在 ejs (embedded javascript) 模板中, 字符串输出时默认是经过escape转义编码的.

// 用=号输出,就会被escapge转义编码 
<%= variable_name %>

这种默认转义编码可能会带来麻烦, 比如我要输出一个 json 对象供客户端 javascirpt 使用, 或者想输出一些动态生成的 html 标签, 幸运的是ejs提供另一种输出方式:

// 用“-”输出原始内容, 不会被escape,
<%- variable_name %>

\

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网