闭包用于缓存编译后的正则表达式以提升模板引擎渲染性能。通过将正则定义在外部作用域，内部渲染函数复用同一实例，避免重复创建开销；典型实现为compile函数返回闭包，进阶可用Map缓存多模式正则，需注意全局正则lastIndex及内存泄漏风险。
在模板引擎中，闭包常被用来缓存编译后的正则表达式，避免重复创建开销，提升渲染性能。核心思路是：把正则表达式（或其编译函数）定义在外部作用域中，内部渲染函数通过闭包引用它，确保每次调用都复用同一实例。
为什么需要闭包缓存正则？
模板引擎常需多次匹配标签、插值语法（如 {{name}} 或 ），若每次渲染都 new RegExp(...)，会带来不必要的内存分配和编译耗时。闭包能将正则“固化”在函数作用域内，首次创建后长期复用。
典型实现方式（以简易模板引擎为例）
以下是一个使用闭包保存正则的常见结构：
function compile(template) {
// ✅ 闭包变量：正则只创建一次
const reInterpolate = /{{s*([sS]+?)s*}}/g;
const reEscape = /{{{([sS]+?)}}}/g;
return function(data) {
let html = template;
// ✅ 内部函数可直接访问外部正则，无需重复构造
html = html.replace(reEscape, (match, code) => {
return String(data[code.trim()]);
});
html = html.replace(reInterpolate, (match, code) => {
return String(data[code.trim()]).replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>');
});
return html;
};
}
// 使用
const render = compile('<div>Hello {{name}}</div>');
console.log(render({ name: 'Alice' })); // <div>Hello Alice</div>
进阶：支持动态 flags 或多模式缓存
若需支持不同 flags（如 i、u）或多种正则组合，可用对象缓存 + 工厂函数封装：
立即学习“Java免费学习笔记（深入）”；
function createRegexCache() {
const cache = new Map();
return function(pattern, flags = '') {
const key = `${pattern}|${flags}`;
if (!cache.has(key)) {
cache.set(key, new RegExp(pattern, flags));
}
return cache.get(key);
};
}
// 在编译函数中使用
function compileWithDynamicRegex(template) {
const getRegex = createRegexCache();
return function(data) {
const re = getRegex('\{\{\s*(.*?)\s*\}\}', 'g');
return template.replace(re, (m, key) => data[key.trim()] ?? '');
};
}
注意事项与避坑点
- 不要在循环中新建闭包函数来存正则——这会导致每个实例都持有一份副本，失去共享意义；应让所有渲染函数共享同一个外层闭包作用域。
-
全局正则（带
g标志）注意lastIndex：多次.exec()会改变其状态，建议用.replace()或重置lastIndex = 0，或改用非全局正则配合matchAll。 -
避免闭包持有大对象引用：仅缓存正则本身，勿意外捕获整个
data或模板字符串，防止内存泄漏。
