上一期科普了Router，我们可以为每一张页面配置一个路由，但是我们不可能每个router.get(path,(ctx,next)=>{ctx.body=...})都直接写html，这样代码也太难维护了。于是出现了模版这个东西，模版主要是用来管理页面的。每一个html都放入一个单独的文件中，这样无论是调用还是复用都很方便。这里我用了ejs的语法，来写这个模版引擎的中间件。
那么，我们从最简单的静态页面开始吧～
STEP 1 静态页面调用调用文件不是一件难事，只需要读取，然后赋值给ctx.body即可：
const fs=require("fs") const path=require("path") let indexTPL=fs.readFileSync(path.join(__dirname,"/pages/template.ejs"),"utf-8") ctx.body=indexTPL;这里我先以逻辑为主，所以我用了readFileSync这个同步方法，而没有用异步读取的方法。
STEP 2 封装一个中间件View这里，我们新创建一个名为View中间件，专门用于模板嵌套。
const fs=require("fs") const path=require("path") function View(path){ let tpl=""; return async (ctx,next)=>{ tpl = fs.readFileSync(path.join(__dirname,path),"utf-8") ctx.body= tpl await next(); } }然后我们就可以直接在项目中应用这个中间件了。
let view=require("./Views") let router=new Router() router.get("http://www.likecs.com/",view("/pages/template.ejs"))或者
app.use(view("/pages/template.ejs"))都是可行的，因为我创建的是标准的中间件啊~
STEP 3 提取模板标签我们为什么要用模板！当然是为了动态页啊！所以我们需要替换模板标签<%=参数名%>为我们需要值。同时模板也需要支持一些函数，比如数组循环填充列表。
那么第一步，我们需要的就是将这个标签提取出来，然后替换成我们特有的标签<!--operator 1-->这个可以自定义一个特别的标签用于占位符。
大家没听错，提取，替换！所以正则表达式是躲不过了，他已经在虐我的路上了……
因为单纯的赋值和执行函数差别比较大，所以我把他们分开识别。如果大家有更好的方法，记得推荐给我。（正则渣渣瑟瑟发抖）
let allTags=[]; function getTags(){ //先取出需要执行的函数，也就是不带"="的一对标签，放入数组，并且，将执行函数这一块替换成占位符。 let operators = tpl.match(/<%(?!=)([\s\S]*?)%>([\s\S]*?)<%(?!=)([\s\S]*?)%>/ig)||[] operators.forEach((element,index )=> { tpl=tpl.replace(element,`<!--operator ${index}-->`) }); //再取出含有“=”的专门的赋值标签，怕和执行函数中的赋值标签搞混，所以这边我分开执行了 let tags=tpl.match(/<%=([\s\S]*?)%>/ig)||[] tags.forEach((element,index) => { tpl=tpl.replace(element,`<!--operator ${index+operators.length}-->`) }); //给我一个整套的待替换数组 allTags=[...operators,...tags]; } STEP 4 替换模板标签重头戏来了，现在我们要进行模板替换了，要换成我们传入的值。这里需要注意的就是我们将allTags逐个替换成可执行的js文本，然后执行js，生成的字符串暂存于数组之中。等执行完毕，再将之前的<!--operator 1-->占位符替换掉。
这里需要注意的是，我们先把赋值的标签<%=%>去除，变成${}，就像下方这样：
let str="let tmpl=`<p>字符串模板:${test}</p> <ul> <li>for循环</li> <% for(let user of users){ %> <li>${user}</li> <% } %> </ul>` return tmpl"然后我们再把可执行的函数的<%%>去除，首尾加上闭合字符串，就像下方这样：
let str="let tmpl=<p>字符串模板:${test}</p> <ul>
<li>for循环</li>
for(let user of users){
tmpl+=<li>${user}</li>
}
</ul>
return tmpl"
let data={
test:"admin",
users:[1,2,3]
}
new Function(...Object.keys(data),方法字符串)
也就等同于new Function(test,users,方法字符串)
我们合并下上方的字符串，这个可执行的模板js就是这样的，怎么样是不是好理解了？function xxx(test,users){
let tmpl=<p>字符串模板:${test}</p>
<ul>
<li>for循环</li>
for(let user of users){
tmpl+=<li>${user}</li>
}
</ul>
return tmpl;
}