<html><head><scripttype="text/javascript"src="/js/ejs.js">script><scripttype="text/javascript">function myfunction(){var data='{"title":"cleaning","supplies":["mop","broom","duster"]}'var html = new EJS({url: '/js/tmpl/cleaning.ejs'}).render(JSON.parse(data));//JSON.parse(data) 把JSON字符串解析为原生的javascript值。alert(html);document.getElementById("div1")[removed]=html;}script>head><body><buttononclick="myfunction()">点击button><divid="div1">div>body><html>
SSR就是一台服务器,可以利用 SSR 在远程的服务器上配置 SSR,使其能够成为 SSR 节点,这样本地电脑或者其它设备利用 SSR 节点实现 VPN 或者远程上网及游戏加速等方面。ShadowsocksR(简称 SSR)是 Shadowsocks 分支,在 Shadowsocks 的基础上增加了一些数据...
一、Visual Studio Code下载地址:https://code.visualstudio.com/微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。Visual Stud...
ejs可以让代码更加干净整洁,让人易懂。ejs的常用语法:
用<%...%>包含js代码
用<%=...%>输出变量 变量若包含 '<' '>' '&'等字符 会被转义
用<%-...%>输出变量 不转义
用<%- include('user/show') %>引入其他模板 包含 ./user/show.ejs
用<%# some comments %>来注释,不执行不输出
<%% 转义为 '<%'
<% ... -%>删除新的空白行模式
<%_ ... _%>删除空白符模式
用JavaScript创建HTML字符串 正如我们在新手教程中所讨论的,在JavaScript中拼字符串的缺点是可维护性不好。当你在JavaScript中将这些字符串拼到一起时,很难看出你正在写的HTML是什么\---|一个你页面展现的结构。而使用模板可以让你通过代码的空行和缩进来清楚地展现出你的HTML。
基于WebService的AJAX网站开发 EJS可以接收WebService异步传送过来的JSON格式的数据,将这种数据直接传入你的模板里,然后将结果插入到你的页面中。你所需要做的只是通过以下代码:
new EJS({url: 'comments.ejs'}).update('element_id', '/comments.json')
程序换肤功能
如果你想给用户自制页面显示的功能,EJS提供了非常适合的机制。EJS的模板只在浏览器里执行,因此对你的服务器没有任何安全风险。你可以允许你的用户上传EJS模板以及其关联的样式表,从而实现定制你的网站页面的功能
一、什么是EJS
EJS是一个JavaScript模板库,用来从JSON数据中生成HTML字符串。
二、为什么要使用EJS
与最初的JavaScript相比较,一些不太了解你的代码的人可以更容易地通过EJS模板代码看得懂你的代码。 让我们放松一下,一起来享受下令人激动的干净简洁的感觉。
总之可以让代码更加干净整洁,让人易懂。
可以看如下的例子:
这是用javascript实现的代码
var html = "
"+data.title+"
"html += "
"
"for(var i=0; i- "
html += "
html += data.supplies[i]+""
}
html += "
最终要实现的效果如下
但是上面的代码看起来很乱,虽然实现了功能,但是不容易让人弄懂。不仅代码丑陋,而且你的HTML结构完全在JavaScript代码中丢失。
下面学习EJS同样实现上面的功效,它的工作原理如下:
使用EJS来找回你的明确、维护性良好的HTML代码结构。
注:data是json对象,不能使json字符串。
在HTML中引入EJS,以使javascript能够使用它,引入EJS的语句如下:
<
script
type
=
"text/javascript"
src
=
"/js/ejs.js"
>
script
>
创建一个EJS模板,命名为cleaning.ejs文件,内容如下:
<%=title %>
<%
for
(
var
i=0; i
'supplies/<%=supplies[i] %>'
>
<%= supplies[i] %>
<% } %>
我的HTML文档如下,引入EJS,并更加我们的提供EJS模板创建EJS对象,然后调用EJS对象成员函数解析JSON对象到模板中。
<
html
>
<
head
>
<
script
type
=
"text/javascript"
src
=
"/js/ejs.js"
>
script
>
<
script
type
=
"text/javascript"
>
function myfunction(){
var data='{"title":"cleaning","supplies":["mop","broom","duster"]}'
var html = new EJS({url: '/js/tmpl/cleaning.ejs'}).render(JSON.parse(data));
//JSON.parse(data) 把JSON字符串解析为原生的javascript值。
alert(html);
document.getElementById("div1")[removed]=html;
}
script
>
head
>
<
body
>
<
button
onclick
=
"myfunction()"
>点击
button
>
<
div
id
=
"div1"
>
div
>
body
>
<
html
>
从上面这个例子我们可以看到EJS模板的基本用法。
三、下面介绍下EJS的语法和功能:
1、缓存功能,能够缓存已经解析好的html模版;
2、<% code %>用于执行其中javascript代码。
<% alert('hello world') %>
3、<%= code %>会对code进行html转义;
注:会把hello world显示在h1中。<%=title %>
注:会把title里面存的值给显示出来在h1中。<%=
'hello world'
%>
<%=
'hello world'
%> 注:会把hello world变粗,然后显示在h1中。
<%=title %>
注:会把title里面存的值给显示出来在h1中。<%=
'hello world'
%> 注:会把hello world显示在h1中。
<%=
'hello world'
%> 注:会把hello world变粗,然后显示在h1中。
4、<%- code %>将不会进行转义;,这一行代码不会执行,像是被注释了一样,然后显示原来的html。也不会影响整个页面的执行。
最后显示asd,及显示原网页<%-title %>asd
最后显示asd,及显示原网页<%
# 'hello world' %>asd
5、支持自定义标签,比如'<%'可以使用'{{','%>'用'}}'代替;
ejs 里,默认的闭合标记是 <% .. %>,我们也可以定义自己的标签。例如:
6、提供一些辅助函数,用于模版中使用
1)、first,返回数组的第一个元素;
2)、last,返回数组的最后一个元素;
3)、capitalize,返回首字母大写的字符串;
4)、downcase,返回字符串的小写;
5)、upcase,返回字符串的大写;
6)、sort,排序(Object.create(obj).sort()?);
7)、sort_by:'prop',按照指定的prop属性进行升序排序;
8)、size,返回长度,即length属性,不一定非是数组才行;
9)、plus:n,加上n,将转化为Number进行运算;
10)、minus:n,减去n,将转化为Number进行运算;
11)、times:n,乘以n,将转化为Number进行运算;
12)、divided_by:n,除以n,将转化为Number进行运算;
13)、join:'val',将数组用'val'最为分隔符,进行合并成一个字符串;
14)、truncate:n,截取前n个字符,超过长度时,将返回一个副本
15)、truncate_words:n,取得字符串中的前n个word,word以空格进行分割;
16)、replace:pattern,substitution,字符串替换,substitution不提供将删除匹配的子串;
17)、prepend:val,如果操作数为数组,则进行合并;为字符串则添加val在前面;
18)、append:val,如果操作数为数组,则进行合并;为字符串则添加val在后面;
19)、map:'prop',返回对象数组中属性为prop的值组成的数组;
20)、reverse,翻转数组或字符串;
21)、get:'prop',取得属性为'prop'的值;
22)、json,转化为json格式字符串
7、利用<%- include filename %>加载其他页面模版;
四、使用创建好的EJS模板
基于我们之前写的模拟生成一个EJS对象
new EJS({url: '/js/tmpl/cleaning.ejs'})
对象有下面两个成员函数
1、ejs.compile(str, options); 将返回内部解析好的Function函数
2、ejs.render(str, options); 返回经过解析的字符串
ejs的render函数有两个参数 第一个是字符串,第二个是可选的对象,和其他javascript模版一样需要渲染的数据也是包含在option对象中的。
ejs.render(str,option);
// 渲染字符串 str 一般是通过nodejs文件系统的readfile方法读取
ejs.render(str,{
data : user_data
// 需要渲染的数据
});
其中options的一些参数为:
1、cache:是否缓存解析后的模版,需要filename作为key;
2、filename:模版文件名;
3、scope:complile后的Function执行所在的上下文环境;
4、debug:标识是否是debeg状态,debug为true则会输出生成的Function内容;
5、compileDebug:标识是否是编译debug,为true则会生成解析过程中的跟踪信息,用于调试;
6、client,标识是否用于浏览器客户端运行,为true则返回解析后的可以单独运行的Function函数;
7、open,代码开头标记,默认为'<%';
8、close,代码结束标记,默认为'%>';
9、其他的一些用于解析模版时提供的变量。
在express中使用时,options参数将由response.render进行传入,其中包含了一些express中的设置,以及用户提供的变量值。
五、最后总结一下EJS的应用场所
用JavaScript创建HTML字符串 正如我们在新手教程中所讨论的,在JavaScript中拼字符串的缺点是可维护性不好。当你在JavaScript中将这些字符串拼到一起时,很难看出你正在写的HTML是什么\---|一个你页面展现的结构。而使用模板可以让你通过代码的空行和缩进来清楚地展现出你的HTML。
基于WebService的AJAX网站开发 EJS可以接收WebService异步传送过来的JSON格式的数据,将这种数据直接传入你的模板里,然后将结果插入到你的页面中。你所需要做的只是通过以下代码:
3. new
EJS({url:
'comments.ejs'
}).update(
'element_id'
,
'/comments.json'
)
4.
程序换肤功能如果你想给用户自制页面显示的功能,EJS提供了非常适合的机制。EJS的模板只在浏览器里执行,因此对你的服务器没有任何安全风险。你可以允许你的用户上传EJS模板以及其关联的样式表,从而实现定制你的网站页面的功能
EJS是一个JavaScript模板库,用来从JSON数据中生成HTML字符串。
与最初的JavaScript相比较,一些不太了解你的代码的人可以更容易地通过EJS模板代码看得懂你的代码。 让我们放松一下,一起来享受下令人激动的干净简洁的感觉。 总之可以让代码更加干净整洁,让人易懂。
1、缓存功能,能够缓存已经解析好的html模版;
2、<% code %>用于执行其中javascript代码。
3、<%= code %>会对code进行html转义;
4、<%- code %>将不会进行转义;
5、支持自定义标签,比如'<%'可以使用'{{','%>'用'}}'代替;
6、提供一些辅助函数,用于模版中使用
1)、first,返回数组的第一个元素;
2)、last,返回数组的最后一个元素;
3)、capitalize,返回首字母大写的字符串;
4)、downcase,返回字符串的小写;
5)、upcase,返回字符串的大写;
6)、sort,排序(Object.create(obj).sort()?);
7)、sort_by:'prop',按照指定的prop属性进行升序排序;
8)、size,返回长度,即length属性,不一定非是数组才行;
9)、plus:n,加上n,将转化为Number进行运算;
10)、minus:n,减去n,将转化为Number进行运算;
11)、times:n,乘以n,将转化为Number进行运算;
12)、divided_by:n,除以n,将转化为Number进行运算;
13)、join:'val',将数组用'val'最为分隔符,进行合并成一个字符串;
14)、truncate:n,截取前n个字符,超过长度时,将返回一个副本
15)、truncate_words:n,取得字符串中的前n个word,word以空格进行分割;
16)、replace:pattern,substitution,字符串替换,substitution不提供将删除匹配的子串;
17)、prepend:val,如果操作数为数组,则进行合并;为字符串则添加val在前面;
18)、append:val,如果操作数为数组,则进行合并;为字符串则添加val在后面;
19)、map:'prop',返回对象数组中属性为prop的值组成的数组;
20)、reverse,翻转数组或字符串;
21)、get:'prop',取得属性为'prop'的值;
22)、json,转化为json格式字符串
相关问题推荐
相对前几年来说,要高上不少了,毕竟入行的人也是越来越多了,基础的工作对应想要参与的人群基数越来越大,但是对于高端人才的需求还是很多,人才还是相对稀缺性的。所以,想要学web或者其他技术也一样,别等,别观望。web前端就业方向特别多包括web前端开发...
相对定位和绝对定位是定位的两种表现形式,区别如下:一、主体不同1、相对定位:是设置为相对定位的元素框会偏移某个距离。2、绝对定位:absolute 脱离文档流,通过 top,bottom,left,right 定位。二、特点不同1、相对定位:在使用相对定位时,无论是否进行移...
抓包(packet capture)就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作,也用来检查网络安全。抓包也经常被用来进行数据截取等。抓包可以通过抓包工具来查看网络数据包内容。通过对抓获的数据包进行分析,可以得到有用的信息。目前流行的...
常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架、Foundation框架等等
前端是目的就业前景非常不错的一个计算机技术,但是自学的话还是有一定难度的,网络上自学是碎片化的,同时互联网技术跟新换代快,自己的话比较吃力也学习不到最新的技术。
SSR就是一台服务器,可以利用 SSR 在远程的服务器上配置 SSR,使其能够成为 SSR 节点,这样本地电脑或者其它设备利用 SSR 节点实现 VPN 或者远程上网及游戏加速等方面。ShadowsocksR(简称 SSR)是 Shadowsocks 分支,在 Shadowsocks 的基础上增加了一些数据...
计算机培训方向比较多,建议找适合自己的方向选择培训编程类:JAVA、WEB、Python、C/C++、C#等测试类:软件测试运维类:云计算、网络安全设计类:UI设计、3D建模等
1、代码判断xAxis: {type: 'time',splitLine: {show: false},interval: 3600, // 设置x轴时间间隔axisLabel: {formatter: function(value, index) {return liangTools.unix2hm(value)}}},首先要把xAxis 显示类型设置成time,然后设置对应X轴......
HTML5 + CSS + JavaScript 开发 跨平台重用代码
采用rem单位自动响应,并提供独有栅格化系统快速定义宽高、边距节省css代码量,同时总结各大型移动端网页,提供一套ui颜色搭配规范,尺寸规范,字体规范等。
iView UI、ioni、SUI
jQTouch
如果只是普通的移动端用vue react 或者dva 如果是要编译成小程序什么的或者混生 就用uni-app(对应vue语法)taro(对应react) 或者纯原生 这个没有限制的,自己怎么舒服怎么来
因为可以运用在网页和小程序的开饭中,而且开源,用着便宜,企业都很喜欢
一、Visual Studio Code下载地址:https://code.visualstudio.com/微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。Visual Stud...
jQuery自带淡入淡出效果 https://www.w3school.com.cn/jquery/jquery_fade.asp 看看这个