最近业务上需要动态渲染模板数据, 好久没写前端代码了, 有点生疏, 将思路简单写下来, 防老:
一, 业务需求:
前端后端定义好模板以及变量名, 保存数据库
订单数据是前端根据支付结果获取的, 最终渲染完的数据模板需要调用打印机打印出来
模板相对商家来说比较固定, 但是每个商家需要的模板都有可能不一样, 所以需要每次登录后, 查询一次模板缓存前端, 后续每次支付后, 动态渲染数据即可
二, 考点:
正则表达式
精简代码量, 尽量减少前端的工作量
三, 实现思路:
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. 查看效果:
6. 有人会说, 直接拼接字符串不是更快? 比如:
var t=` 银行:${order.bankName}, 商家名称:${order.merchantName}, 订单号:${order.orderNum}`;
这种方式在模板固定且数据量少的时候是挺好用的, 但是业务上, 虽然模板和数据对于商家来说相对固定, 但是系统里面很多商家, 每个商家的小票模板可能都不一样, 需要渲染的变量也挺多, 前端不可能根据每个商家都改一套模板的, 总而言之, 适合才是最好的!
来源: https://www.cnblogs.com/CodeKjm/p/12431849.html