基于JS正則表達(dá)式實(shí)現(xiàn)模板數(shù)據(jù)動(dòng)態(tài)渲染(實(shí)現(xiàn)思路詳解)
最近業(yè)務(wù)上需要?jiǎng)討B(tài)渲染模板數(shù)據(jù)，好久沒(méi)寫(xiě)前端代碼了，有點(diǎn)生疏，將思路簡(jiǎn)單寫(xiě)下來(lái)，防老：
一、業(yè)務(wù)需求：
1.前端后端定義好模板以及變量名，保存數(shù)據(jù)庫(kù)
2.訂單數(shù)據(jù)是前端根據(jù)支付結(jié)果獲取的，最終渲染完的數(shù)據(jù)模板需要調(diào)用打印機(jī)打印出來(lái)
3.模板相對(duì)商家來(lái)說(shuō)比較固定，但是每個(gè)商家需要的模板都有可能不一樣，所以需要每次登錄后，查詢一次模板緩存前端，后續(xù)每次支付后，動(dòng)態(tài)渲染數(shù)據(jù)即可
二、考點(diǎn)：
1.正則表達(dá)式
2.精簡(jiǎn)代碼量，盡量減少前端的工作量
三、實(shí)現(xiàn)思路：
1.需要渲染數(shù)據(jù)的模板，以${變量名}區(qū)分：
var t="銀行：${bankName}，商家名稱：${merchantName}，訂單號(hào)：${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.組裝訂單數(shù)據(jù)，注意變量屬性名與模板里的變量名要保持一致
var order={
"bankName": "工行",
"merchantName": "小賣(mài)部",
"orderNum": "123456"
};
4.渲染數(shù)據(jù)
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.有人會(huì)說(shuō)，直接拼接字符串不是更快？比如：
var t=`銀行：${order.bankName}，商家名稱：${order.merchantName}，訂單號(hào)：${order.orderNum}`;
這種方式在模板固定且數(shù)據(jù)量少的時(shí)候是挺好用的，但是業(yè)務(wù)上，雖然模板和數(shù)據(jù)對(duì)于商家來(lái)說(shuō)相對(duì)固定，但是系統(tǒng)里面很多商家，每個(gè)商家的小票模板可能都不一樣，需要渲染的變量也挺多，前端不可能根據(jù)每個(gè)商家都改一套模板的，總而言之，適合才是最好的！
到此這篇關(guān)于基于JS正則表達(dá)式實(shí)現(xiàn)模板數(shù)據(jù)動(dòng)態(tài)渲染的文章就介紹到這了,更多相關(guān)js 正則模板數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS獲得多個(gè)同name 的input輸入框的值的實(shí)現(xiàn)方法
這篇文章主要介紹了基于JS代碼實(shí)現(xiàn)input密碼輸入框輸入密碼變黑點(diǎn)密文以及JS獲得多個(gè)同name 的input輸入框的值的實(shí)現(xiàn)方法，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01
詳解JavaScript中Canvas的高級(jí)繪圖和動(dòng)畫(huà)技術(shù)
JavaScript中的Canvas 是一個(gè)強(qiáng)大的 HTML5 元素,允許你通過(guò)編程方式創(chuàng)建圖形、繪制圖像和實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)效果,在本文中,我們將深入探討 JavaScript Canvas 的高級(jí)繪圖和動(dòng)畫(huà)技術(shù),并提供一個(gè)復(fù)雜的案例,以展示其潛力,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了p5.js入門(mén)教程之圖片加載,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
js中如何把字符串轉(zhuǎn)化為對(duì)象、數(shù)組示例代碼
在本文為大家介紹下把字符串轉(zhuǎn)化為對(duì)象：把文本轉(zhuǎn)化為對(duì)象、把文本轉(zhuǎn)化為數(shù)組，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)表格隔行變色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
常用限制input的方法的js代碼...2007-03-03
20個(gè)拿來(lái)就能用的JavaScript技巧分享
這篇文章主要來(lái)和大家一起探討一下20?種?JavaScript?技巧和竅門(mén),每種技巧和竅門(mén)都有通俗易懂的示例,讓我們一起來(lái)提升你的?JavaScript?技能吧2023-10-10
js+css實(shí)現(xiàn)有立體感的按鈕式文字豎排菜單效果
這篇文章主要介紹了js+css實(shí)現(xiàn)有立體感的按鈕式文字豎排菜單效果,通過(guò)javascript動(dòng)態(tài)調(diào)用頁(yè)面元素樣式實(shí)現(xiàn)豎排菜單的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
簡(jiǎn)易版本JSON.stringify的實(shí)現(xiàn)及其六大特性詳解
最近做項(xiàng)目發(fā)現(xiàn)JSON.stringify()使用場(chǎng)景真的挺多,我們都知道JSON.stringify()的作用是將JavaScript對(duì)象轉(zhuǎn)換為JSON字符串,下面這篇文章主要給大家介紹了JSON.stringify的實(shí)現(xiàn)及其六大特性的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細(xì)介紹了iscroll.js滾動(dòng)加載實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07