基于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 相关文章推荐
自动更新作用
Oct 08 Javascript
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
深入理解js中的加载事件
Feb 08 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
three.js中文文档学习之创建场景
Nov 20 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 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
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
js如何打印object对象
2015/10/16 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
JS重载实现方法分析
2016/12/16 Javascript
JS实现小星星特效
2019/12/24 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
python中的多重继承实例讲解
2014/09/28 Python
python的socket编程入门
2018/01/29 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
python 实现兔子生兔子示例
2019/11/21 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
学校节水倡议书
2015/04/29 职场文书
升学宴家长答谢词
2015/09/29 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
MySql新手入门的基本操作汇总
2021/05/13 MySQL
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python