加入社区

订阅:www.yunweipai.com/feed

QQ群:
1群:201777608 - 运维综合
2群:526871767 - 运维综合
3群:1689067 - Linux Shell脚本

微博:weibo.com/tektea

微信:yunweipai(或扫描以下二维码)

合作伙伴

小猪动图 - GIF动图素材库_GIF在线工具

ejs以及替代的include实现方式

EJS(Embeded Javascript),是类似JSP,eRuby之类的,将代码嵌入到HTML页面中,并动态执行的一种机制。

在说EJS之前,我们要区分两个EJS,一个是基于nodeJS平台运行的EJS,另外一个是在浏览器执行的EJS。当然,基于NodeJS的EJS也提供了client方式运行,但是用了一下,很别扭。

1. NodeJS平台上的EJS
NodeJS平台中的EJS,其原理是与JSP,eRuby相同的:包含代码的HTML页面在服务器端被编译并执行得到最终的HTML,然后返回给客户端显示。
这种方式,对服务器的性能(计算、IO)要求相对比较高,因为所有的页面转换都是在服务器端执行的,客户端只负责展现。

NodeJS平台中的EJS,提供了模版包含(include)的功能,类似PHP页面,可以include不同的页面部件,组合在一起。其语法为: <% include foot.ejs %>。这个功能对于模块化编程和代码共享非常有用。

2. 浏览器端的EJS
这里说的EJS是后一种,在浏览器中执行的EJS
浏览器中执行的EJS,其原理与服务器端的EJS有些差异:浏览器端的EJS,其JS代码,是在客户端(浏览器中)完成执行并转成HTML的。这种方式,一定程度上可以减轻服务器的负载。对于我这种没有服务器资源的人来说,就比较偏好这种方式。

但是这种EJS库,不支持 include 功能。这个曾让我苦恼了一阵子,不过前两天,我发现了一个方法,可以等价 include:
1)用jquery。

2)定义一个框架的EJS页面。
我的HTML页面:

<div class="container-fluid" id="contentContainer">

我的框架EJS页面:
product.ejs

<div class="span9">
<div class="hero-unit">
<div id="images">
<!--image will insert separately-->
</div>
</div>
</div>
...

3)将框架EJS页面中会复用的元素抽取为单独的EJS页面。
images

<%
for ( var i = 0; i < images.length; i++){ %>
<p>
<%=images[i].imagedesc%>
<image class="img-polaroid" width="100%" src="<%=images[i].imagesrc%>"/>
</p>

<% }
%>

4)使用jquery将这些ejs页面组合起来。
var html = new EJS({url : "/product/product.ejs"}).render(data);
$("#contentContainer").append(html);
var html = new EJS({url : "/product/product_image.ejs"}).render(data);
$("#contentContainer #images").append(html);

搞定!

转载请注明:运维派 » ejs以及替代的include实现方式

0
4.6k
1