基于JS正則表達式實現(xiàn)模板數(shù)據(jù)動態(tài)渲染(實現(xiàn)思路詳解)
最近業(yè)務(wù)上需要動態(tài)渲染模板數(shù)據(jù),好久沒寫前端代碼了,有點生疏,將思路簡單寫下來,防老:
一、業(yè)務(wù)需求:
1.前端后端定義好模板以及變量名,保存數(shù)據(jù)庫
2.訂單數(shù)據(jù)是前端根據(jù)支付結(jié)果獲取的,最終渲染完的數(shù)據(jù)模板需要調(diào)用打印機打印出來
3.模板相對商家來說比較固定,但是每個商家需要的模板都有可能不一樣,所以需要每次登錄后,查詢一次模板緩存前端,后續(xù)每次支付后,動態(tài)渲染數(shù)據(jù)即可
二、考點:
1.正則表達式
2.精簡代碼量,盡量減少前端的工作量
三、實現(xiàn)思路:
1.需要渲染數(shù)據(jù)的模板,以${變量名}區(qū)分:
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.組裝訂單數(shù)據(jù),注意變量屬性名與模板里的變量名要保持一致
var order={ 'bankName': '工行', 'merchantName': '小賣部', '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.有人會說,直接拼接字符串不是更快?比如:
var t=`銀行:${order.bankName},商家名稱:${order.merchantName},訂單號:${order.orderNum}`;
這種方式在模板固定且數(shù)據(jù)量少的時候是挺好用的,但是業(yè)務(wù)上,雖然模板和數(shù)據(jù)對于商家來說相對固定,但是系統(tǒng)里面很多商家,每個商家的小票模板可能都不一樣,需要渲染的變量也挺多,前端不可能根據(jù)每個商家都改一套模板的,總而言之,適合才是最好的!
到此這篇關(guān)于基于JS正則表達式實現(xiàn)模板數(shù)據(jù)動態(tài)渲染的文章就介紹到這了,更多相關(guān)js 正則模板數(shù)據(jù)內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. XML入門的常見問題(三)2. XML基本概念XPath、XSLT與XQuery函數(shù)介紹3. WML的簡單例子及編輯、測試方法第1/2頁4. el-input無法輸入的問題和表單驗證失敗問題解決5. 關(guān)于html嵌入xml數(shù)據(jù)島如何穿過樹形結(jié)構(gòu)關(guān)系的問題6. CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)7. 不要在HTML中濫用div8. vue實現(xiàn)復(fù)制文字復(fù)制圖片實例詳解9. XML入門的常見問題(四)10. 前端html+css實現(xiàn)動態(tài)生日快樂代碼
