一种在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来做的话，读取模板文件内容并做模板变量替换就可以了。其它服务器端脚本技术实现这一点应该也很容易。如果不用服务器端脚本来实现这个功能，就得再想别的办法了，比如对页面文件做预处理，在预处理的过程中加载模板文件的内容。

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

js代码中实现页面跳转的几种方式
js代码中实现页面跳转的几种方式注:jquery的$.get(),$.post(),$.ajax()都不会使页面发送跳转,因为其本质都是ajax请求. 第一种: <script languag ...
[js] 代码中如果遇到未定义的变量，会抛出异常吗？程序还会不会继续往下走？
[js] 代码中如果遇到未定义的变量,会抛出异常吗?程序还会不会继续往下走? 在浏览器环境下JS 解析器解析到未定义变量时,会抛出 Uncaught ReferenceError 错误,JS 引擎会停 ...
java keypress事件_javaweb开发-js代码中keypress事件调用判断，取得keyCode值
在js代码中的一段代码,keypress事件调用的函数中的代码. var keyCode = event.keyCode ? event.keyCode : event.which ? event.w ...
23种设计模式，今天来聊聊模板模式，工厂方法模式，单例模式。
23种设计模式,今天来聊聊模板模式,工厂方法模式,单例模式. 1. 随处可见的模板模式 2. 暗含讲究的工厂方法模式 3. 单例模式隐含的坑你能看到第几层? 视频讲解如下,点击观看: [干货篇]23种 ...
肘方法确定聚类数k_一种自动识别肘部法则中最优K值的方法与流程
本发明涉及一种自动识别肘部法则中最优K值的方法,特别涉及一种结合利用机器学习中无监督学习中常用的K-Means聚类算法.肘部法则以及通过0-10的规则化对平均畸变程度进行规则化.将0-10规则化后的平 ...
linux关闭无响应文件夹,4种强制关闭Ubuntu中无响应应用程序的方法
4种强制关闭Ubuntu中无响应应用程序的方法在使用Ubuntu时,我们的一个或多个进程和应用程序可能会经常挂起.重新启动我们的系统并不总是最佳解决方案,我们发现自己在寻找能够快速.轻松和安全地摆脱 ...
Java 模板变量替换——字符串替换器
Java 模板变量替换--字符串替换器说明可选方法 org.apache.commons.text java.text.MessageFormat java.lang.String 说明这里分享 ...
linux环境配置以后生效,Linux中修改环境变量及生效方法
Linux中修改环境变量及生效方法在/etc/profile文件中添加变量[对所有用户生效(永久的)] 用VI在文件/etc/profile文件中增加变量,该变量将会对Linux下所有用户有效,并且 ...
python中的class怎么用_对python 中class与变量的使用方法详解
python中的变量定义是很灵活的,很容易搞混淆,特别是对于class的变量的定义,如何定义使用类里的变量是我们维护代码和保证代码稳定性的关键. #!/usr/bin/python #encoding ...
python中class变量_对python 中class与变量的使用方法详解
python中的变量定义是很灵活的,很容易搞混淆,特别是对于class的变量的定义,如何定义使用类里的变量是我们维护代码和保证代码稳定性的关键. #!/usr/bin/python #encoding ...

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

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

最新文章

热门文章