一种在JS代码中实现模板变量替换的方法

74 阅读 0 评论 49 点赞

我是靠谱客的博主激昂飞鸟，最近开发中收集的这篇文章主要介绍一种在JS代码中实现模板变量替换的方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

模板替换功能在php,jsp等服务器端脚本中很常见，功能也很强大。如果想在浏览器中运行的js代码中也实现模板替换功能该如何实现呢？

1，对字符串做模板替换，应用js中的正则表达式做正则替换就可以了。
这里有一个例子
//模板格式化（正则替换）
var formatModel = function(str,model){
for(var k in model){
var re = new RegExp("{"+k+"}","g");
str = str.replace(re,model[k]);
}
return str;
}

2.为了得到模板串，可以在js文件中定义变量，变量中存放模板串，但如果模板串是一个html块，这里面会包含许多单引号，双引号等，如果要通过转义符来拼接出一个复杂的模板串。这真是一个很麻烦，而且很容易出错的工作。因此一个简单的想法是将模板的内容放在一个单独的文件中，则编辑工作就跟编辑普通的html文件一样简单了。

接下来该如何把模板文件的内容写入到js的变量中去呢。这里介绍一个办法。

定义如下一个js函数
function heredoc(fn) {
return fn.toString().split('n').slice(1,-1).join('n') + 'n';
}

再在需要模板串变量的地方写如下代码
var itemTemplate = heredoc(function(){/*
<?=$模板文件的内容=?>
*/});

这里定义了一个匿名函数，这个函数的全部内容都是一个多行注释块。而在heredoc中通过调用这个匿名函数的 fn.toString()取得匿名函数的函数体，将这个函数体内容去掉前后的注释符字符就得到了模板串的内容。

剩下的事情就是如何把模板文件的内容放入这个匿名函数的注释块中。如果是用php来做的话，读取模板文件内容并做模板变量替换就可以了。其它服务器端脚本技术实现这一点应该也很容易。如果不用服务器端脚本来实现这个功能，就得再想别的办法了，比如对页面文件做预处理，在预处理的过程中加载模板文件的内容。