Node06 - jade、ejs模板库
1、jade - 破坏式、侵入式、强依赖
（01）、引用jade => const jade = require('jade');
（02）、使用方法： jade.render('html');
返回结果：返回标签
<html></html>
（03）、 可以是标签名也可以是文件：jade.renderFile(“文件路径”，{pretty：true})；//默认是不会行，pretty美化代码
返回HTML代码。*注意 根据缩进，规定层级
（04）、属性：标签后面加括号加属性 => script(src='a.js'), 多个属性用逗号分隔
普通属性添加：div（title="aaa", id="div1"），但是不能像style那样用json，
如果一定要用的话，在标签后面加&attribute，这说明用json的形式添加属性，div&attribute（{title="aaa", id="div1"}）；
*注意：个人不推荐
（05）、内容：标签后空一格直接写入
（06）、内嵌属性，可以当做普通属性处理 (只有属性是style的时候才可以)
方法一：style="width:200px;height:100px;" 方法二 json 形式：style = {width:'200px', height: '100px'})
（07）、原样输出：原样输出，可以用于写js代码
方法二：script后面加一个点，点代表原样输出：代表下一级原样输出，不会做任何识别
html
title
head
script(src="a.js")
link(href='a.css', style='stylesheet')
//点：代表下一级原样输出
script.
window.onload = function(){
alert("aaa");
}
//输出结果
//<script>
//window.onload = function(){
// alert("aaa");
//}
//</script>
body
（08）、include：引入外部文件，包含在一定的局部
script include a.js //文件 //输出结果 //<script> //window.onload = function(){ // alert("aaa"); //} //</script>
//nodejs代码
const jade = require('jade');//引入jade var str = jade.render('div'); var strFile = jade.renderFile('./views/1.jade',{pretty: true}); console.log(strFile);
//jade 代码，*注意层级 html title head script(src="a.js") link(href='a.css', style='stylesheet') body //内嵌属性，可以当做普通属性处理 (只有属性是style的时候才可以) //方法一：style="width:200px;height:100px;" //方法二 json 形式：style = {width:'200px', height: '100px'}) div(style = "width:200px; height:100px;") div(style = {width:'200px', height: '100px'}) //class也可以像普通属性添加，也可以数组形式添加 div(class= "aaa left-wrap action") div(class= ['aaa', 'left-wrap', 'action']) ul li
//原样输出，可以用于写js代码
//方法二：script后面加一个点，点代表原样输出：代表下一级原样输出，不会做任何识别
|abc //子标签 li span
<!-- 返回数据 -->
<!--jade 代码，*注意层级--> <html> <title></title> <head> <script src="a.js"></script> <link href="a.css" style="stylesheet"/> </head> <body> <!--内嵌属性，可以当做普通属性处理 (只有属性是style的时候才可以)--> <!--方法一：style="width:200px;height:100px;"--> <!--方法二 json 形式：style = {width:'200px', height: '100px'})--> <div style="width:200px; height:100px;"></div> <div style="width:200px;height:100px"></div> <!--class也可以像普通属性添加，也可以数组形式添加--> <div class="aaa left-wrap action"></div> <div class="aaa left-wrap action"> <ul> <li></li> <!--子标签--> <li>span</li> </ul> </div> </body> </html>
（10）、jade定义变量 => #{a+b}；
例如：var strFile = jade.renderFile('./views/1.jade',{pretty: true, a='1', b='2'});
方法二：
div=a 和 #{} 一样
（11）、循环生成标签 =>
//nodejs 代码 const jade = require('jade'); //文件形式引入，arr是循环添加参数 var strFile = jade.renderFile('./views/2.jade',{pretty: true, arr:['adas', 'sdasfsd', '23234', 'fasdas']}); console.log(strFile);
html head meta title 标题 body div //循环加入标签，arr传入的数组 -for(var i=0; i<arr.length; i++) div=arr[i]
2、ejs - 温和、非侵入式、弱依赖
（01）、引用jade => const jade = require('ejs');、
（02）、基本用法 =>
//nodejs 代码
const ejs = require('ejs'); //文件形式引入 var strFile = jade.renderFile('./views/1.jade',{pretty: true}); //参数1：文件地址；2：给 ejs 传入的参数，对象形式拼接；3、返回数据（data） var strEjsFile = ejs.renderFile('./views/1.ejs', {name: 'bule'}, function(err, data){ if (err){ console.log('编译失败'); }else{ console.log(data); } });<!doctype html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- ejs 代码 --> <!--name传入的参数--> my name is: <%= name %> </body> </html>
（03）、（ = ）等号是转译输出，（ - ）减号是不转译输出。
<!-- ejs 代码 --> <% var str = "<div></div>"; %> <!--等号结果：<div></div>--> <!--减号结果：<div></div>--> <!--（ = ）等号是转译输出，（ - ）减号是不转译输出--> <%- str %>
（04）、for循环使用方法 =>
//nodejs 代码 const ejs = require('ejs'); ejs.renderFile('./views/2.ejs', {json:{ arr:[ {user: 'bule', pass: '1234'}, {user: 'zhangsan', pass: '1234'}, {user: 'lisi', pass: '1234'} ] }}, function(err, data){ console.log(data); });
<!--ejs代码--> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!--*注意：for循环开始结尾 <%%>不加等号--> <% for(var i=0; i<json.arr.length; i++){ %> <div>用户名：<%= json.arr[i].user %> 密码: <%= json.arr[i].pass %></div> <% } %> </body>
//输出结果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div>用户名：bule 密码: 1234</div> <div>用户名：zhangsan 密码: 1234</div> <div>用户名：lisi 密码: 1234</div> </body> </html>
（04）、include 使用方法 =>
//nodejs 代码 const ejs = require('ejs'); ejs.renderFile('./views/ejs-include.ejs', {type: 'admin'}, function(err, data){ console.log(data); });
<!--ejs代码--> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <% if (type == 'admin') {%> <% include ../css/admin.css %> <% }else{ %> <% include ../css/user.css %> <% } %> </body> </html>
