使用JavaScript构建轻量级页面模板引擎

"这篇文章主要介绍了如何使用JavaScript编写一个简单的页面模板引擎，借鉴了JohnResig的思路，并且适用于浏览器环境。作者首先提到了AbsurdJS，这是一个既能处理CSS也能处理HTML的JavaScript预处理器，可以作为模板引擎使用。由于大部分现有模板引擎在Node.js环境下运行，作者想要创建一个能在浏览器中直接运行的小型JavaScript模板引擎。" 在JavaScript编程中，模板引擎是一种常见的工具，用于动态生成HTML内容，将数据和逻辑与视图分离开来。在本教程中，作者展示了如何构建这样一个简单的模板引擎。首先，我们定义一个名为`TemplateEngine`的函数，该函数接受两个参数：一个模板字符串和一个包含数据的对象。 ```javascript var TemplateEngine = function(tpl, data) { // 魔法发生的地方 }; ``` 模板引擎的核心功能是将模板中的占位符替换为实际的数据。在这个例子中，模板使用`<% %>`包裹变量，如`<%name%>`和`<%age%>`。为了找到这些占位符，我们可以使用正则表达式进行匹配： ```javascript var re = /<%([^%>]+)?%>/g; ``` 这个正则表达式会找出所有以`<%`开始，以`%>`结束的子串，其中`([^%>]+)`捕获了变量名，`g`标志表示全局搜索，确保找到所有的匹配项。接下来，我们需要遍历这些匹配项，将它们替换为实际的数据值。 ```javascript var template = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>'; var output = template.replace(re, function(match, p1) { return data[p1] || match; }); console.log(output); ``` `replace()`方法在这里被用来替换模板中的占位符。回调函数接收两个参数：匹配的整个子串（`match`）和第一个括号内捕获的子串（`p1`，即变量名）。如果`data`对象中有对应的属性，我们就返回属性值，否则返回原始的占位符。 例如，给定以下数据： ```javascript var data = { name: "Krasimir", age: 29 }; ``` 输出将会是： ```html <p>Hello, my name is Krasimir. I'm 29 years old.</p> ``` 通过这种方式，我们实现了简单的模板引擎，它可以将JavaScript对象中的数据动态插入到HTML模板中。这个实现虽然基础，但足以展示模板引擎的基本原理，同时也具备一定的灵活性，可以与其他JavaScript库和框架配合使用。通过扩展这个基础，可以添加更多的功能，如条件语句、循环结构等，以满足更复杂的场景需求。