express 中間件之「模版引擎」

時間 2019-12-15

標籤 express 中間件模版引擎简体版

原文原文鏈接

在express裏幫咱們集成了ejs模版引擎,引入他以後能夠直接用ejs,第一步安裝javascript

模版引擎的應用

ejs.jscss

let express = require('express');
let app = express();
let path =  require('path');
app.engine('html' , require('ejs').__express);//讓html以ejs形式渲染
app.set('view engine', 'html')
//設置試圖查找路徑
app.set('views' , path.resolve(__dirname))
app.get('/',function(req,res){ //類型默認jade && ejs
    res.render('1',{title:'hello', arr:[1,2,3,4]})
})
app.listen(3000)
複製代碼

1.htmlhtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>
    <%=title%>
    <%arr.forEach(item=>{%>
        <li><%=item%></li>
    <%})%>
</body>
</html>
複製代碼

模版引擎的實現

解析簡單對象

<body>
    <li><%=name%></li>
    <li><%=age%></li>
</body>
複製代碼

let fs = require('fs');

let result = fs.readFileSync(__dirname+'/case1.html','utf8');

let school = {name:'zdl',age:9};

function render(str,obj) {
  return str.replace(/<%=([\s\S]*?)%>/g,function () {
    return obj[arguments[1]]  //查找並替換
  })
}
console.log(render(result, school));
複製代碼

解析if-else

<body>
<%if(title === 'hello'){%>
    hello world
<%}else{%>
    world
<%}%>
</body>
複製代碼

let fs = require('fs');
let result = fs.readFileSync(__dirname +'/1.html','utf8');
let json  = {title:'hello'}

function render(obj){
    let content;
    let head = "let templ = '';\n";
    head += "with(obj){\ntempl+=`" ;//將obj做爲做用域，執行函數
    content = obj.replace(/<%([\s\S]*?)%>/g,function(){
        return "`\n" + arguments[1] + "\ntempl+=`"
    })
    let end = "`}\n return templ;"
    return head + content + end;
}
let r = render(result);

let fn = new Function("obj",r)  //經過fn將拼接好的r字符串執行
let str = fn(json)
console.log(str);

複製代碼

拼接出的rjava

let templ = '';
with(obj){
    templ+=`<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> </head> <body>`
        if(title === 'hello'){
            templ +=`hello world`
        }else{
            templ+=`world`
        }
    templ+=` </body> </html>`
}
return templ;
複製代碼

將r用函數包起來，實例化執行，獲得的templ就是所獲得的r裏函數執行後的值express

Function("obj",r){
    let templ = '';
    with(obj){
        templ += ...
    }
    return templ;
}
複製代碼

with的做用生將當前javascritpt的內容，以obj做爲做用域（上下文）執行，一樣道理當咱們遇到以下json

解析forEach

<body>
<%arr.forEach(item=>{%>
    <li>item</li>
<%})%></body>
複製代碼

結合上述兩種方法咱們簡單的模版引擎就完成了app

let fs = require('fs');

let result = fs.readFileSync(__dirname +'/1.html','utf8');
let json  = {title:'hello', arr:[1,2,3,4]}

function render(obj){
    let content;
    // content = obj.replace(/<%=([\s\S]*?)%>/g,function(){
    // return obj[arguments[1]]
    // })
    //執行 eval new function
    let head = "let templ = '';\n";
    head += "with(obj){\ntempl+=`" ;//將obj做爲做用域，執行函數
    content = obj.replace(/<%=([\s\S]+?)%>/g,function () {
        return '${'+arguments[1]+'}';
    });
    content = content.replace(/<%([\s\S]*?)%>/g,function(){
        return "`\n" + arguments[1] + "\ntempl+=`"
    })
    let end = "`}\n return templ;"
    return head + content + end;
}
let r = render(result);
let fn = new Function("obj",r)
let str = fn(json)
console.log(str);

複製代碼

將js以中間件的形式存在ejs.js文件中

ejs.js函數

let express = require('express');
let app = express();
let path =  require('path');
app.engine('html' , require('ejs').__express);//讓html以ejs形式渲染
app.set('view engine', 'html')
//設置試圖查找路徑
app.set('views' , path.resolve(__dirname));

app.use(function(res,req,next){
    function render(obj){
        let content;
        let head = "let templ = '';\n";
        head += "with(obj){\ntempl+=`" ;//將obj做爲做用域，執行函數
        content = obj.replace(/<%=([\s\S]+?)%>/g,function () {
            return '${'+arguments[1]+'}';
        });
        content = content.replace(/<%([\s\S]*?)%>/g,function(){
            return "`\n" + arguments[1] + "\ntempl+=`"
        })
        let end = "`}\n return templ;"
        return head + content + end;
    }
    res.render = function(filename,data){
        let p = app.get('views');
        let file = filename + '.' + app.get('view engine');
        let filepath = path.join(p,file);
        require('fs').readFileSync(filepath,'utf8');
        let fn = new Function('data',render(result))
        res.end(fn(data));
    }
    next();
})
app.get('/',function(req,res){ //類型默認jade && ejs
    res.render('1',{title:'hello', arr:[1,2,3,4]})
})
app.listen(3000)
複製代碼