ejs笔记

ejs:。。无javascript等html杠原样

 EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。

1．。你能够在 <%...%> 块中安排JavaScript 代码，利用最传统的方式 <%=输出变量%>

（另外 <%-输出变量是不会对& 等符号进行转义的）。

安装 EJS 命令如下：npm install ejs

2．。“<%= xxx =%>”一个等号：内是 js 逻辑代码，

“<%== xxx =%>” 两个等号：内是直接输出的变量，类似 php的 echo 的作用。

3.。EJS 模板<%- 变量%> 与<%=变量%>的区别

在 EJS (Embedded JavaScript) 模板系统中, 字符串输出时默认是经过escape转义编码的.

 

// 用=号输出,就会被escape转义编码（//在JavaScript中，escape(s)是一个全局函数，其对字符串s某些字符-------替换成了十六进制的转义序列。在escape(s)返回的新字符串中，除了ASCII字母、数字、标点符号*+-./@_外，所有字符都转义成%xx或%uxxxx（x是十六进制数）形式，其中，从%u0000到%u00ff的Unicode字符转义成%xx形式。）

<%= VARIABLE_NAME %>

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

 

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

<%- VARIABLE_NAME %>

 

4，，ejs的特性：  无javascript等html杠原样

    1、缓存功能，能够缓存已经解析好的html模版；

    2、<% code%>用于执行其中javascript代码；    无为javascript执行

    3、<%= code%>会对code进行html转义；      等为html转义

    4、<%- code%>将不会进行转义；               杠为原样输出

    5、支持自定义标签，比如'<%'可以使用'{{'两花括号，对应的：'%>'用'}}'代替；

    6、提供一些辅助函数，用于模版中使用

    7、利用<%-include filename %>加载其他页面模版；

   

    使用示例

    1、ejs.compile(str,options); 将返回内部解析好的Function函数

    2、ejs.render(str,options); 返回经过解析的字符串

 

    其中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代码，使得更加方便的操纵数据。

    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格式字符串

=====================

不过，我感觉js代码和html代码混在一块的情况并不是特别友好。

模板示例：

Html代码  收藏代码

<!-- templates/supplies.ejs -->  注释

 

<h1>Supplies</h1> 

<ul> 

<% for(var i=0; i<supplies.length; i++) {%> 

  <li><%=supplies[i] %></li> 

<% } %> 

</ul> 

******************************************************************************

ejs首选是<%语句%>和<%=取值%>

******************************************************************************