20行JavaScript实现浏览器模板引擎：从零到犀利

本文将详细介绍如何使用JavaScript编写一个简单的页面模板引擎，以满足在浏览器环境中运行的需求。原作者在寻求一个轻量级且纯JavaScript实现的解决方案时，发现了John Resig的一篇博客文章，启发了他的思路。该模板引擎的核心功能是通过正则表达式解析模板字符串中的占位符，并替换为实际数据。 首先，创建模板引擎的基本结构： ```javascript var TemplateEngine = function(tpl, data) { // 主要的魔法发生在这里 }; ``` 用户可以通过提供模板字符串和数据对象来调用这个函数，例如： ```javascript var template = '<p>Hello,my name is <%name%>. I'm <%age%> years old.</p>'; console.log(TemplateEngine(template, { name: "Krasimir", age: 29 })); ``` 模板引擎的关键步骤在于处理模板中的占位符。作者选择使用正则表达式 `<%([^%>]+)?%>` 来识别这些占位符。这里的正则表达式含义如下： - `<%` 表示开始标记 - `([^%>]+)?` 匹配任何非百分号和大于号的字符（即占位符内容），使用 `?` 表示这部分内容是可选的 - `%>` 结束标记 `g` 标志表示全局匹配，确保找到所有实例。接下来，通过 `re.exec(tpl)` 方法逐个查找并存储匹配结果： ```javascript var re = /<%([^%>]+)?%>/g; var match = re.exec(tpl); ``` 执行后，`match` 数组会包含找到的占位符及其相关信息，如 `<%name%>`、位置索引等。为了实现模板替换，需要循环遍历所有匹配项，用数据对象中的相应键值替换占位符。 整个过程可以分为以下步骤： 1. 定义正则表达式和匹配变量。 2. 使用 `exec` 函数查找模板中的占位符。 3. 对于每个匹配项，构建一个数据查找函数，使用 `data` 对象获取对应值。 4. 替换占位符为实际值，构建最终的渲染结果。 虽然这个模板引擎相对简陋，但它展示了利用JavaScript处理字符串模板的基本原理。通过这种方式，可以在不依赖专门库的情况下，在浏览器环境中动态生成HTML内容，为网页开发提供基础的模板功能。通过逐步实现，读者可以更好地理解这种技术的工作方式，并在此基础上扩展或改进自己的模板引擎。