摘要：要求不需要有控制流成分如循环条件等等，只要有变量替换功能即可级联的变量也可以展开被转义的的分隔符和不应该被渲染，分隔符与变量之间允许有空白字符例子，实现先写下函数的框架显然，要做的第一件事便是匹配模板中的占位符。
首发于我的博客 转载请注明出处
这是源于两年前，当我在做人生中第一个真正意义上的网站时遇到的一个问题
该网站采用前后端分离的方式，由后端的 REST 接口返回 JSON 数据，再由前端渲染到页面上。
同许多初学 Javascript 的菜鸟一样，起初，我也是采用拼接字符串的形式，将 JSON 数据嵌入 HTML 中。开始时代码量较少，暂时还可以接受。但当页面结构复杂起来后，其弱点开始变得无法忍受起来：
书写不连贯。每写一个变量就要断一下，插入一个 + 和 "。十分容易出错。
无法重用。HTML 片段都是离散化的数据，难以对其中重复的部分进行提取。
无法很好地利用 标签。这是 HTML5 中新增的一个标签，标准极力推荐将 HTML 模板放入 标签中，使代码更简洁。
当时我的心情就是这样的：
为了解决这个问题，我暂时放下了手上的项目，花了半个小时实现一个极简易的字符串模板。
需求描述实现一个 render(template, context) 方法，将 template 中的占位符用 context 填充。要求：
不需要有控制流成分（如 循环、条件 等等），只要有变量替换功能即可
级联的变量也可以展开
被转义的的分隔符 { 和 } 不应该被渲染，分隔符与变量之间允许有空白字符
例子：
render("My name is {name}"， {
name: "hsfzxjy"
}); // My name is hsfzxjy
render("I am in {profile.location}", {
name: "hsfzxjy",
profile: {
location: "Guangzhou"
}
}); // I am in Guangzhou
render("{ greeting }. { This block will not be rendered }", {
greeting: "Hi"
}); // Hi. { This block will not be rendered }
实现
先写下函数的框架：
function render(template, context) {
}
显然，要做的第一件事便是 匹配模板中的占位符。
匹配占位符匹配的事，肯定是交给正则表达式来完成。那么，这个正则表达式应该长什么样呢？
根据 需求 1、2 的描述，我们可以写出：
var reg = /{([^{}]+)}/g;
至于需求 3，我第一个想到的概念是 前向匹配，可惜 Javascript 并不支持，只好用一个折衷的办法：
var reg = /()?{([^{}]+)()?}/g;
// 若是第一个或第三个分组值不为空，则不渲染
现在，代码应该是这样：
function render(template, context) {
var tokenReg = /()?{([^{}]+)()?}/g;
return template.replace(tokenReg, function (word, slash1, token, slash2) {
if (slash1 || slash2) { // 匹配到转义字符
return word.replace("", ""); // 如果 分隔符被转义，则不渲染
}
// ...
})
}
占位符替换
嗯，正则表达式确定了，接下来要做的便是替换工作。
根据 需求2，模板引擎不仅要能渲染一级变量，更要渲染多级变量。这该怎么做呢？
其实很简单：将 token 按 . 分隔开，逐级查找即可：
var variables = token.replace(/s/g, "").split("."); // 切割 token
var currentObject = context;
var i, length, variable;
// 逐级查找 context
for (i = 0, length = variables.length, variable = variables[i]; i < length; ++i)
currentObject = currentObject[variable];
return currentObject;
不过，有可能 token 指定的变量并不存在，这时上面的代码便会报错。为了更好的体验，代码最好有一定的容错能力：
var variables = token.replace(/s/g, "").split("."); // 切割 token
var currentObject = context;
var i, length, variable;
for (i = 0, length = variables.length; i < length; ++i) {
variable = variables[i];
currentObject = currentObject[variable];
if (currentObject === undefined || currentObject === null) return ""; // 如果当前索引的对象不存在，则直接返回空字符串。
}
return currentObject;
把所有的代码组合在一起，便得到了最终的版本：
function render(template, context) {
var tokenReg = /()?{([^{}]+)()?}/g;
return template.replace(tokenReg, function (word, slash1, token, slash2) {
if (slash1 || slash2) {
return word.replace("", "");
}
var variables = token.replace(/s/g, "").split(".");
var currentObject = context;
var i, length, variable;
for (i = 0, length = variables.length; i < length; ++i) {
variable = variables[i];
currentObject = currentObject[variable];
if (currentObject === undefined || currentObject === null) return "";
}
return currentObject;
})
}
除去空白行，一共 17 行。
将函数挂到 String 的原型链甚至，我们可以通过修改原型链，实现一些很酷的效果：
String.prototype.render = function (context) {
return render(this, context);
};
之后，我们便可以这样调用啦：
"{greeting}! My name is { author.name }.".render({
greeting: "Hi",
author: {
name: "hsfzxjy"
}
});
// Hi! My name is hsfzxjy.
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/78648.html
摘要：写在前面模板的诞生是为了将显示与数据分离，模板技术多种多样，但其本质是将模板文件和数据通过模板引擎生成最终的代码。目前有着很多这种模板引擎，诸如的，，的。当然在用过这么多的模板引擎后，也有着自己实现一个简易模板引擎的冲动。 写在前面 模板的诞生是为了将显示与数据分离，模板技术多种多样，但其本质是将模板文件和数据通过模板引擎生成最终的HTML代码。目前有着很多这种模板引擎，诸如Node的...
摘要：模板通常用来定义显示的形式，能够使得数据展现更为丰富，而且容易维护。从模板引擎的实现上看，需要依赖编程语言的动态编译或者动态解释的特性，以简化实现和提高性能。本文就来实现一个简易的模板引擎，以展现的强大之处。 模板简介 模板通常是指嵌入了某种动态编程语言代码的文本，数据和模板通过某种形式的结合，可以变化出不同的结果。模板通常用来定义显示的形式，能够使得数据展现更为丰富，而且容易维护。...
摘要：第三部分介绍一种模板引擎，之所以介绍他是因为。。。。三简介模板引擎是数据与界面分离工作中最重要一环。是新一代模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。 嗯，这也是一个学习笔记，材料均来自网络，有改动。。文章主要分为三部分，第一部分通过实现一个简易的ERB模板引擎来介绍其原理，参考javascript模板引擎和实现...
摘要：官网全新的静态包管理器。官网一个整合和官网的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。官网小巧的兼容的所见即所得的富文本编辑器。官网富文本编辑器。官网由制作，适用于每天写作的富文本编辑器。 1. 包管理器 管理着 javascript 库，并提供读取和打包它们的工具。 npm：npm 是 javascript 的包管理器。官网 cnpm：cnpm 是 由于国...
阅读 1719·2023-04-25 21:11
阅读 2403·2021-09-30 09:47
阅读 2080·2021-09-24 09:48
阅读 4131·2021-08-23 09:43
阅读 742·2019-08-30 15:54
阅读 444·2019-08-28 18:01
阅读 1243·2019-08-27 10:55
阅读 467·2019-08-27 10:55
