Javascript 字符串模板的简单实现
这是源于两年前,当我在做人生中第一个真正意义上的网站时遇到的一个问题
该网站采用前后端分离的方式,由后端的REST接口返回JSON数据,再由前端渲染到页面上。
同许多初学Javascript的菜鸟一样,起初,我也是采用拼接字符串的形式,将JSON数据嵌入HTML中。开始时代码量较少,暂时还可以接受。但当页面结构复杂起来后,其弱点开始变得无法忍受起来:
- 书写不连贯。每写一个变量就要断一下,插入一个+和"。十分容易出错。
- 无法重用。HTML片段都是离散化的数据,难以对其中重复的部分进行提取。
- 无法很好地利用<template>标签。这是HTML5中新增的一个标签,标准极力推荐将HTML模板放入<template>标签中,使代码更简洁。
- 当时我的心情就是这样的:
这TMD是在逗我吗
为了解决这个问题,我暂时放下了手上的项目,花了半个小时实现一个极简易的字符串模板。
需求描述
实现一个render(template,context)方法,将template中的占位符用context填充。要求:
不需要有控制流成分(如循环、条件等等),只要有变量替换功能即可
级联的变量也可以展开
被转义的的分隔符{和}不应该被渲染,分隔符与变量之间允许有空白字符
例子:
render('Mynameis{name}',{ name:'hsfzxjy' });//Mynameishsfzxjy render('Iamin{profile.location}',{ name:'hsfzxjy', profile:{ location:'Guangzhou' } });//IaminGuangzhou render('{greeting}.\\{Thisblockwillnotberendered}',{ greeting:'Hi' });//Hi.{Thisblockwillnotberendered}
实现
先写下函数的框架:
functionrender(template,context){ }
显然,要做的第一件事便是匹配模板中的占位符。
匹配占位符
匹配的事,肯定是交给正则表达式来完成。那么,这个正则表达式应该长什么样呢?
根据需求1、2的描述,我们可以写出:
varreg=/\{([^\{\}]+)\}/g;
至于需求3,我第一个想到的概念是前向匹配,可惜Javascript并不支持,只好用一个折衷的办法:
varreg=/(\\)?\{([^\{\}\\]+)(\\)?\}/g; //若是第一个或第三个分组值不为空,则不渲染 现在,代码应该是这样: functionrender(template,context){ vartokenReg=/(\\)?\{([^\{\}\\]+)(\\)?\}/g; returntemplate.replace(tokenReg,function(word,slash1,token,slash2){ if(slash1||slash2){//匹配到转义字符 returnword.replace('\\','');//如果分隔符被转义,则不渲染 } //... }) }
占位符替换
嗯,正则表达式确定了,接下来要做的便是替换工作。
根据需求2,模板引擎不仅要能渲染一级变量,更要渲染多级变量。这该怎么做呢?
其实很简单:将token按.分隔开,逐级查找即可:
varvariables=token.replace(/\s/g,'').split('.');//切割token varcurrentObject=context; vari,length,variable; //逐级查找context for(i=0,length=variables.length,variable=variables[i];i<length;++i) currentObject=currentObject[variable]; returncurrentObject;
不过,有可能token指定的变量并不存在,这时上面的代码便会报错。为了更好的体验,代码最好有一定的容错能力:
varvariables=token.replace(/\s/g,'').split('.');//切割token varcurrentObject=context; vari,length,variable; for(i=0,length=variables.length,variable=variables[i];i<length;++i){ currentObject=currentObject[variable]; if(currentObject===undefined||currentObject===null)return'';//如果当前索引的对象不存在,则直接返回空字符串。 } returncurrentObject;
把所有的代码组合在一起,便得到了最终的版本:
functionrender(template,context){ vartokenReg=/(\\)?\{([^\{\}\\]+)(\\)?\}/g; returntemplate.replace(tokenReg,function(word,slash1,token,slash2){ if(slash1||slash2){ returnword.replace('\\',''); } varvariables=token.replace(/\s/g,'').split('.'); varcurrentObject=context; vari,length,variable; for(i=0,length=variables.length,variable=variables[i];i<length;++i){ currentObject=currentObject[variable]; if(currentObject===undefined||currentObject===null)return''; } returncurrentObject; }) }
除去空白行,一共17行。
将函数挂到String的原型链
甚至,我们可以通过修改原型链,实现一些很酷的效果:
String.prototype.render=function(context){ returnrender(this,context); };
之后,我们便可以这样调用啦:
"{greeting}!Mynameis{author.name}.".render({ greeting:"Hi", author:{ name:"hsfzxjy" } }); //Hi!Mynameishsfzxjy.