大道至简，tj 教你如何用 400 行代码写一个模板语言

Github：https://github.com/tj/ejs
类型：模板

这次看的源码是 tj 写的 V1 版本，V2 版本可以前往 mde/ejs 查看。

结构

下面是源码项目的目录结构，核心的 ejs 代码在 lib/ejs.js 中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.
├── History.md
├── Makefile
├── Readme.md
├── benchmark.js // 性能测试
├── ejs.js 
├── ejs.min.js 
├── examples // 案例
├── index.js
├── lib // 源码目录
│   ├── ejs.js // 核心代码
│   ├── filters.js // 通用工具方法
│   └── utils.js // 提供 escape 方法
├── package.json
├── support // 用于 Makefile
│   └── compile.js
└── test // 测试目录
    ├── ejs.js
    └── fixtures

图

总结

ejs 实现的逻辑如下

  • parse 方法实现了简易的词法分析，实现了模板语法
  • parse 方法遍历模板，最终处理为一段函数字符串
  • compile 方法将 parse 处理得到的函数串构造为函数实例
  • 通过 with 方法，将数据写进函数 context 中，执行函数的结果，即得模板 + 数据渲染后的 HTML 代码

思考

在看源码的过程中，可以思考

  • eval 和 new Function 的区别、优劣
  • 通用方法的可扩展性，ejs 给了使用者极大的扩展权限，大量可配置条件，这一点让我印象深刻，与此类似的还有 koa-session 的扩展选项，我认为这一点非常值得学习，并且应用在实际开发中