时间:2021-05-26
这是源于两年前,当我在做人生中第一个真正意义上的网站时遇到的一个问题
该网站采用前后端分离的方式,由后端的 REST 接口返回 JSON 数据,再由前端渲染到页面上。
同许多初学 Javascript 的菜鸟一样,起初,我也是采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中。开始时代码量较少,暂时还可以接受。但当页面结构复杂起来后,其弱点开始变得无法忍受起来:
这TMD是在逗我吗
为了解决这个问题,我暂时放下了手上的项目,花了半个小时实现一个极简易的字符串模板。
需求描述
实现一个 render(template, context) 方法,将 template 中的占位符用 context 填充。要求:
不需要有控制流成分(如 循环、条件 等等),只要有变量替换功能即可
级联的变量也可以展开
被转义的的分隔符 { 和 } 不应该被渲染,分隔符与变量之间允许有空白字符
例子:
实现
先写下函数的框架:
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('.'); // 切割 tokenvar currentObject = context;var i, length, variable;// 逐级查找 contextfor (i = 0, length = variables.length, variable = variables[i]; i < length; ++i) currentObject = currentObject[variable];return currentObject;不过,有可能 token 指定的变量并不存在,这时上面的代码便会报错。为了更好的体验,代码最好有一定的容错能力:
var variables = token.replace(/\s/g, '').split('.'); // 切割 tokenvar currentObject = context;var i, length, variable;for (i = 0, length = variables.length, variable = variables[i]; i < length; ++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, variable = variables[i]; i < length; ++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.声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
模板字符串(templatestrings)ES6中引进的一种新型的字符串字面量语法-模板字符串。书面上来解释,模板字符串是一种能在字符串文本中内嵌表示式的字符
1、HTML模板和字符串模板HTML模板:直接在HTML页面挂载的模板。(即非字符串模板)非字符串模板:在单文件里用指定的模板,换句话说,写在html中的就是非
python字符串替换是python操作字符串的时候经常会碰到的问题,这里简单介绍下字符串替换方法。python字符串替换可以用2种方法实现:1是用字符串本身的
本文实例讲述了JavaScript中字符串与Unicode编码互相转换的实现方法。分享给大家供大家参考,具体如下:这段代码演示了JavaScript中字符串与U
在ES6中引入了一种新的字符串字面量—模板字符串,除了使用反引号(`)表示,它们看上去和普通的字符串没有什么区别。在最简单的情况下,他们就是普通的字符串:con