引擎模版：用来生成页面；
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.οnlοad=function (){
| var oBtn=document.getElementById(‘btn1’);
| oBtn.οnclick=function (){
| alert(‘aaaa’);
| };
|};
b、在标签后加一个点，后面的大量内容就可以被正确引入
script.
window.οnlοad=function (){
var oBtn=document.getElementById(‘btn1’);
oBtn.οnclick=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>以上就是我今天学习的引擎模板中的一些知识点，后续会就补充。
扫一扫
686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
