快捷導(dǎo)航

基于JS正則表達(dá)式實(shí)現(xiàn)模板數(shù)據(jù)動(dòng)態(tài)渲染(實(shí)現(xiàn)思路詳解)

更新時(shí)間：2020年03月07日 11:00:13 作者：碼農(nóng)小明

這篇文章主要介紹了基于JS正則表達(dá)式實(shí)現(xiàn)模板數(shù)據(jù)動(dòng)態(tài)渲染 ,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

最近業(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ún)一次模板緩存前端，后續(xù)每次支付后，動(dòng)態(tài)渲染數(shù)據(jù)即可

二、考點(diǎn)：

1.正則表達(dá)式

2.精簡(jiǎn)代碼量，盡量減少前端的工作量

三、實(shí)現(xiàn)思路：

1.需要渲染數(shù)據(jù)的模板，以${變量名}區(qū)分：

var t="銀行：${bankName}，商家名稱(chēng)：${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}，商家名稱(chēng)：${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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: