阅读 4779

坚持造轮子第一天 - 模板引擎

坚持造轮子第一天 - 模板引擎

二话不说 轮子我都会造 还怕你面试问吗? 一天造一个轮子,干就完了。

看点

  • 针对大厂笔试、面试必考手写题目
  • TDD方式开发
  • 配合视频讲解

造轮子计划

(计划赶不上变化 随时迭代 欢迎留言 随时摸鱼)

  • 框架基础
  • JS基础
    • Promise.all/race
    • 路由
    • new
    • call/apply/bind
    • Object.create
    • 深拷贝、浅拷贝
  • 算法、设计模式
    • 二分查找
    • 快排
    • 二分查找
    • 冒泡排序
    • 选择排序
    • 订阅发布
    • 斐波那契算法
    • 去重

模板引擎

为了实现视图与业务逻辑的分离,无论MVP、MVVM、MVC那个V都会使用模板引擎。线面我们说说模板引擎的要求。

需求

{{ }} 表达式

其实就是 将{{ }}中的值根据替换为表达式的结果。

模板 结果
<b>{{ name }}</b> <b>tom</b>
<b>{{ name.toUpperCase() }}</b> <b>TOM</b>
<b>{{ '[' + name + ']' }}</b> <b>[tom]</b>

用测试用例表示就是这样

  it("{{}} 表达式", () => {
    const output = compile("<b>{{ name }}</b>")({ name: "tom" });
    expect(output).toBe(`<b>tom</b>`);
  });

  it("{{}} toUpperCase 表达式", () => {
    const output = compile("<b>{{ name.toUpperCase() }}</b>")({ name: "tom" });
    expect(output).toBe(`<b>TOM</b>`);
  });

  it("{{}} +连接", () => {
    const output = compile("<b>{{ '[' + name + ']' }}</b>")({ name: "tom" });
    expect(output).toBe(`<b>[tom]</b>`);
  });


复制代码

forEach遍历

{%arr.forEach(item => {%}
    <li>{{item}}</li>
{%})%}
复制代码

生成结果

    <li>aaa</li>
    <li>bbb</li>
复制代码

if判断

{% if(isShow) { %} <b>{{ name }}</b> {% } %}
复制代码

生成结果

     <b>tom</b> 
复制代码

功能实现

模板渲染的功能大概可以归纳为两步:

  1. 编译模板为Generate函数
  2. 执行渲染函数

比如最简单的模板

<b>{{ name }}</b>
复制代码

生成后的渲染函数

generate(obj){
  let str = '';
  with(obj){
  str+=`<b>${name}</b>`}
  return str;
}
复制代码

执行generate结果

const ret = generate({name : 'tom'})

// 运行结果: <b>tom</b>

复制代码

编译过程

我们把编译过程其实就是通过正则表达式的匹配

第一步 将{{ xxx }}表达式 转化为ES6模板字符串 ${ xxx }

  // 全局正则表达式替换
  template = template.replace(/\{\{([^}]+)\}\}/g, function () {
    let key = arguments[1].trim();
    return "${" + key + "}";
  });
复制代码

第二步 将{% %}表达式 转化为JS语句这样的就可以在模板中使用if、foreach了

比如if判断:

{% if(isShow) { %} <b>{{ name }}</b> {% } %}
// 转化的函数
let str = '';
   with(obj){
   str+=``
   if(isShow) {
    str+=`<b>${name}</b> `
   }
   return str;
复制代码

实现代码

  let head = `let str = '';\r\n with(obj){\r\n`;
  head += "str+=`";
  template = template.replace(/\{\%([^%]+)\%\}/g, function () {
    return "`\r\n" + arguments[1] + "\r\nstr+=`\r\n";
  });
  let tail = "`}\r\n return str;";

复制代码

构造Generate函数

这里面需要一个我们不太常用的语法 new Function()用于动态创建函数体 比如

new Function('arg', 'console.log(arg + 1);');
// 相当于创建了一个匿名函数
function (arg) {
    console.log(arg + 1);
}
复制代码

完整的代码实现

template = template.replace(/\{\{([^}]+)\}\}/g, function () {
    let key = arguments[1].trim();
    return "${" + key + "}";
  });

  let head = `let str = '';\r\n with(obj){\r\n`;
  head += "str+=`";
  template = template.replace(/\{\%([^%]+)\%\}/g, function () {
    return "`\r\n" + arguments[1] + "\r\nstr+=`\r\n";
  });

  let tail = "`}\r\n return str;";
  console.log(`==========render=========`)
  console.log(head + template + tail);
  return new Function("obj", head + template + tail);
复制代码

测试

OK 任务完成

关注全栈然叔 带你坚持天天造轮子 (周末休息 拒绝996)

  • 源码地址 https://github.com/su37josephxia/wheel-awesome

本文使用 mdnice 排版

文章分类
前端
文章标签