ejs 源码详解——彻底搞懂模版动态渲染原理
ejs 执行流程
源码实现思路非常有趣,实现难度实现流程不如前几章源码复杂。但是思路完全不同,用了一套新的思路来实现 ejs 模版渲染。重要的是通过这种思路开阔自己的眼界。ejs 的思路在 vue 中也有用到。
核心点:掌握 compile 函数怎么生成的。
- new Template: 初始化 Template 对象
- compile: 编译 Template,并返回一个新的 Function,需要传入 data 参数完成渲染模版
ejs.compile 执行流程分析
深入讲解 ejs 编译原理
动态生成 Function+with 用法讲解
ejs compile 函数执行流程分析
const template = ejs.compile(html, options)
const compiledTemplate = template(data)
const compiledTemplate2 = template(data2)
第一步生成一个动态的函数,动态函数在内存中动态添加,不是之前通过代码写好的。之前写好的代码是静态的,动态函数是根据字符串动态生成。因为 function 里面的内容是不确定的,根据我们传递的字符串才能决定。运行时动态生成 function,这是 compile 方法最核心的步骤。
第二步拿到动态 function 后,调用这个 function 来实现用户注入 data。注入 data 是通过 with 方式。不停的生成 output,最后把 output 返回给用户生成 compiledTemplate。不同的 data,就会生成不同的 compiledTemplate 结果。
template 是固定函数,可以被理解缓存在内存当中。一旦结束运行之后,template 就会消失。
ejs.render 和 renderFile 原理讲解
ejs 最核心的方法是 compile 方法,不管是 render 还是 renderFile 只是在 compile 方法外层做了一层封装。封装了一个 handleCache 方法,然后在 handleCache 方法里面还是会调用 compile 方法。理解 ejs 关键是理解 compile。