您的位置：首页 > Web前端 > Node.js

（7）nodejs学习---之模板引擎jade&&ejs

2017-08-18 23:34 344 查看

引擎模版：用来生成页面；

jade：是破坏式，侵入式的，他和html不能共存，用jade就不能用html，该引擎是强依赖引擎，如果一个项目选用了jade，几乎就不可以更换了，更换会非常的麻烦。

ejs：温和的，非侵入式的，弱依赖。

针对jade的知识点：

1、先安装jade，cnpm install jade；

2、在js文件中引入jade；const jade=require(‘jade’);

jade.renderFile(‘jade文件’);

jade.render(‘html’);把字符串渲染成页面。

3、针对jade文件的一些要点：

1）jade是通过缩进来表示层级的。

html

head

title

body

div

input

2）针对属性的写法：

<script src='a.js'></script>

在jade中加入（）代表属性的写法。多个属性用逗号分隔。

如：script（src=”a.js”）

link(href=”a.css”,ref=”stylesheet”)

有两个属性有特殊写法：

a、style

style属性两种特殊写法：

1、普通写法：div(style=”width:100px;height:100px;”)

2、特殊写法：使用json方法

div(style= {width: ‘200px’, height: ‘200px’})

b、class

class属性有两种特殊写法：

1、普通写法

div(class=”left myLf right”)

2、特殊写法用数组方法

div(class=[‘left’,’myLf’,’right’])

3）针对内容的写法

<div>内容</div

>

jade写法： jade只是在后面空个格写入内容

div 内容

4）|代表原样输出东西。

<div>
aaaa
bbb
</div>

jade中：

div

|aaaa

|bbb

5）在script，style标签中写入大量的代码；

当我们的写入代码并不是很多时，就可以写在页面中，就不需要从外面引入，因为这会增加http的连接数，减低网站性能，就得不偿失了。

a、可以在大量代码中的前面都用|表示；

script

|window.onload=function (){

| var oBtn=document.getElementById(‘btn1’);

| oBtn.onclick=function (){

| alert(‘aaaa’);

| };

|};

b、在标签后加一个点，后面的大量内容就可以被正确引入

script.

window.onload=function (){

var oBtn=document.getElementById(‘btn1’);

oBtn.onclick=function (){

alert(‘aaaa’);

};

};

6）include 代表引入一个文件，正如5中所诉，当我们不想从外面引入代码，还想让页面看起来比较整洁的时候，就可以选择include；

只要出现include关键字，他后面代表的就是要引入的文件。这是不会影响性能的，因为这是在后台编译的。

script

include a.js

7）-代表是代码，jade很聪明，写一个-下面的代码不写-，它可以自动识别出来。

A、

-var a=19;

if(a%2==0)

div(style={background:’red’}) 偶数

else

div(style={background:’green’}) 奇数

B、jade中switch用case代替；case用when代替。

-var a=1;

case a

when 0

div aaa

when 1

div bbb

when 2

div ccc

default

|不靠谱

C、

-var a=0;

while a<12

if a%4==0 && a!=0

div.last=a++

else

div=a++

7）#{}的作用

{}中的变量，如果在后台定义，是可以直接渲染到页面上的，这样使得页面更加灵活。

如：6.jade中：

html

head

body

div 我的名字：#{name}

div 我的名字：#{a+b}

文件.js中

const jade=require(‘jade’);

console.log(jade.renderFile(‘./views/6.jade’, {pretty: true, name: ‘blue’，a:12,b:5}));

8）=表示的是按jade的想法渲染，他会把尖括号之类的，会造成xss攻击的符号自动进行转义；

！=就是告诉jade你不用给我转义了，按原样输出就可以。

12.jade中：

html

head

body

div!=content

文件.js中

const jade=require('jade');
console.log(jade.renderFile('./views/12.jade', {pretty: true,
content: "<h2>你好啊</h2><p>对方水电费色弱威尔士地方</p>"
}));

针对ejs知识点：

ejs相对于jade来说更加简单，他对原生的html基本是没有更改的，只是增加了一些方法，让页面构建更加动态。

1）、安装 cnpm install ejs

2）、const ejs = require（’ejs’）;

ejs.render();

ejs.renderFile(‘文件’，{}，function(){});

3）、动态生成变量，类似于jade中的#{变量}

例子一：

1.ejs中：

<body>
<div>
<%=name%>
</div>
</body>

文件.js中：

const ejs=require('ejs');
ejs.renderFile('./views/1.ejs', {name: 'blue'}, function (err, data){
console.log(data);
});

例子二：

2.ejs

<body>
<div>
<%=json.arr[0].user%>
</div>
</body>

文件.js中：

const ejs=require('ejs');
ejs.renderFile('./views/2.ejs', {json: {arr: [
{user: 'blue', pass: '123456'},
{user: 'zhangsan', pass: '654321'},
{user: 'xiaoming', pass: '999999'},
]}}, function (err, data){
console.log(data);
});

4）ejs中for语句的使用和js中一样

<body>
<% for(var i=0;i<json.arr.length;i++){ %>
<div>用户名：<%=json.arr[i].user%> 密码：<%=json.arr[i].pass%></div>
<% } %>
</body>

5）ejs中的=是出于安全考虑，按转义输出。

而-是按原样输出

<body>
<%
var str="<div></div>";
%>
<%- str %>
</body>

6）include 也同样适用可以，引入文件

<body>
<% for(var i=0;i<5;i++){ %>
<% include ../a.txt %>
<% } %>
</body>

注意:

错误写法：include默认就是寻找文件，变量放这里是不合规矩的。

<body>
<% include css_path %>
</body>

7）ejs中的if语句和js中一样；其实while也是一样的。js中用的语句，都可以移动到ejs中。

<body>
<% if(type=='admin'){ %>
<% include ../style/admin.css %>
<%}else{%>
<% include ../style/user.css %>
<% } %>
</body>

以上就是我今天学习的引擎模板中的一些知识点，后续会就补充。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 模板引擎 nodejs

相关文章推荐

新的分享

章节导航