手写简易模板引擎

前言

大家想到的模板引擎有哪些？
template，handlebars, jade, ejs, underscore, nunjunks...
vue里面也有template的概念
ejs 通过<%%> 包起来用
vue通过{{}}来使用

我们今天也来整个玩玩~~

实现

我们先来理下思路：

模板里面的变量是如何替换的
模板里面的内容是如何传参的

我们这边以{% %}方式来做吧
我们先来写个简单的吧
template模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字符串模板</title>
</head>
<body>
{%if(true){%}
  hello
{%} else {%}
  world
{% } %}
</body>
</html>

js模块实现：

const fs = require('fs');
let template = fs.readFileSync('./template-simple.html','utf8');

const wrapperContent = [
  'let str = "";\r\nstr+=`',
  '`;\r\nreturn str;\r\n'
];
function render(templateStr, obj) {
  templateStr = templateStr.replace(/\{\%(.+?)\%\}/g,function(){
    return '`\r\n'+arguments[1]+'\r\nstr+=`'
  });
  let fnContent = wrapperContent[0]+templateStr+wrapperContent[1];
  let newFn = new Function(fnContent);
  return newFn(obj);
}

const r = render(template);
console.log(r);

运行结果看一波

上面的内容我们来总结下：

我们先把模板文件内容读取出来
列出固定头固定尾我们后续会使用字符串拼接
写一个render函数，学习ejs一把里面是具体的转换内容
render函数内部主要是通过正则去替换掉{% %}模板标识符
最重要的一点是new Function函数，去创造了一个函数，返回了转换好的字符串

那么有人会说了，模板字符串肯定要传参的呀
那我们来咯~
模板页面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字符串模板</title>
</head>
<body>
{%if(true){%}
  hello
{%} else {%}
  world
{% } %}
<ul>
  {% arr.forEach(item => { %}
    <li>{{item}}</li>
  {%})%}
</ul>
</body>
</html>

js模块：

const fs = require('fs');
let template = fs.readFileSync('./template.html','utf8');

// with是申明了一块作用域，可以通过传参给作用域里面使用
const wrapperContent = [
  'let str = "";\r\nwith(val){\r\nstr+=`',
  '`;}\r\nreturn str;\r\n'
];
function render(templateStr, obj) {
   // 替换模板标识符 
  templateStr = template.replace(/\{\{(.+?)\}\}/g, function(){
    return '${'+ arguments[1] +'}';
  });
  // 替换掉模板中的变量
  templateStr = templateStr.replace(/\{\%(.+?)\%\}/g,function(){
    return '`\r\n'+arguments[1]+'\r\nstr+=`'
  });
  let fnContent = wrapperContent[0]+templateStr+wrapperContent[1];
  let newFn = new Function('val',fnContent);
  return newFn(obj);
}

const r = render(template, {arr: [1,2,3]});
console.log(r);

with的使用可以参考看下效果

那么一个简单的模板引擎已经出来了
我们总结下：

我们在模板html里面采用ejs的写法来配置模板
new Function 这边添加传参，添加with创造作用域，支持替换变量使用
render函数将变量模块（本处使用{{}}包住）替换成模板字符串的${}方式，模板字符串会做处理