20行精简实现：纯JS模板引擎实例

本文深入探讨了一个仅有20行的JavaScript模板引擎实例，旨在提供一个轻量级、纯JavaScript实现的解决方案。作者在开发名为AbsurdJS的预处理器时，面临在客户端使用的需求，现有的NodeJS依赖的模板引擎并不适用，因此他选择了自己编写一个简单模板引擎。 首先，模板引擎的基本结构如下： ```javascript var TemplateEngine = function(tpl, data) { // 魔法在这里发生 }; var template = '<p>Hello,my name is <% name %>. I\'m <% age %> years old.</p>'; console.log(TemplateEngine(template, { name: "Krasimir", age: 29 })); ``` 核心功能是通过`<% ... %>`语法来标识需要替换的数据片段。在这个例子中，`<% name %>`和`<% age %>`会被模板引擎中的相应数据值所替换。提取标识片段的关键在于正则表达式： ```javascript var re = /<%([^%>]+)?%>/g; ``` 这个正则表达式匹配任何以`<%`开始、以`%>`结束的代码块，并且带有全局搜索标志`g`，确保能替换所有匹配的片段。 接下来，模板引擎的工作流程包括： 1. **解析标识片段**：遍历模板字符串，使用正则表达式找到所有需要替换的标识。 2. **数据绑定**：根据传入的数据对象，将找到的标识片段替换为相应的值。这通常涉及到字符串的替换操作或者构建新的HTML字符串。 3. **返回渲染后的结果**：最后，返回处理过的模板字符串，即数据填充后的完整HTML。 虽然这个模板引擎只有20行代码，但它展示了JavaScript模板引擎的基本原理：识别标识、绑定数据和生成输出。然而，尽管代码简洁，实际项目中可能需要添加错误处理、循环、条件语句等功能，以适应更多复杂场景。对于初学者或追求极致简洁的开发者来说，这是一个极好的学习示例。同时，这也提示了在实际应用中选择模板引擎时，应考虑其在不同环境（如浏览器、服务器）下的兼容性和可扩展性。