基于JS正则表达式实现模板数据动态渲染(实现思路详解)


Posted in Javascript onMarch 07, 2020

最近业务上需要动态渲染模板数据,好久没写前端代码了,有点生疏,将思路简单写下来,防老:

一、业务需求:

1.前端后端定义好模板以及变量名,保存数据库

2.订单数据是前端根据支付结果获取的,最终渲染完的数据模板需要调用打印机打印出来

3.模板相对商家来说比较固定,但是每个商家需要的模板都有可能不一样,所以需要每次登录后,查询一次模板缓存前端,后续每次支付后,动态渲染数据即可

二、考点:

1.正则表达式

2.精简代码量,尽量减少前端的工作量​

三、实现思路:

1.需要渲染数据的模板,以${变量名}区分:

var t="银行:${bankName},商家名称:${merchantName},订单号:${orderNum}";

2.正则匹配获取所有变量名

var keys=[];
var arr = t.match(/\$\{(.*?)\}/g);
for(var key in arr){
  var s=arr[key].replace("${","").replace("}","");
  keys.push(s);
}
alert(keys);

3.组装订单数据,注意变量属性名与模板里的变量名要保持一致

var order={
 "bankName": "工行",
 "merchantName": "小卖部",
 "orderNum": "123456"
};

4.渲染数据

for(var i=0;i<keys.length;i++){
 var key=keys[i];
 var value=order[key];
 t= t.replace("${"+key+"}",value);
}
alert(t);

5.查看效果:

基于JS正则表达式实现模板数据动态渲染(实现思路详解)

6.有人会说,直接拼接字符串不是更快?比如:

var t=`银行:${order.bankName},商家名称:${order.merchantName},订单号:${order.orderNum}`;

这种方式在模板固定且数据量少的时候是挺好用的,但是业务上,虽然模板和数据对于商家来说相对固定,但是系统里面很多商家,每个商家的小票模板可能都不一样,需要渲染的变量也挺多,前端不可能根据每个商家都改一套模板的,总而言之,适合才是最好的!

到此这篇关于基于JS正则表达式实现模板数据动态渲染的文章就介绍到这了,更多相关js 正则模板数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js 中 document.createEvent的用法
Aug 29 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
js转换对象为xml
Feb 17 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
js实现简单放大镜效果
Mar 07 #Javascript
js实现文字头像的生成代码
Mar 07 #Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 #Javascript
原生JS实现萤火虫效果
Mar 07 #Javascript
JavaScript实现轮播图片完整代码
Mar 07 #Javascript
JS实现瀑布流效果
Mar 07 #Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 #Javascript
You might like
什么是短波收听SWL
2021/03/01 无线电
php页面缓存方法小结
2015/01/10 PHP
php导出生成word的方法
2015/12/25 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
利用js对象弹出一个层
2008/03/26 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
Js四则运算函数代码
2012/07/21 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
vue组件学习教程
2017/09/09 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
农贸市场管理制度
2014/01/31 职场文书
公司承诺书怎么写
2014/05/24 职场文书
就业导师推荐信范文
2015/03/27 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python