亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

基于JS正則表達式如何實現模板數據動態渲染

發布時間:2021-05-23 14:01:34 來源:億速云 閱讀:247 作者:小新 欄目:web開發

這篇文章主要介紹基于JS正則表達式如何實現模板數據動態渲染,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

一、業務需求:

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}`;

這種方式在模板固定且數據量少的時候是挺好用的,但是業務上,雖然模板和數據對于商家來說相對固定,但是系統里面很多商家,每個商家的小票模板可能都不一樣,需要渲染的變量也挺多,前端不可能根據每個商家都改一套模板的,總而言之,適合才是最好的!

JavaScript是什么

JavaScript是一種直譯式的腳本語言,其解釋器被稱為JavaScript引擎,是瀏覽器的一部分,JavaScript是被廣泛用于客戶端的腳本語言,最早是在HTML網頁上使用,用來給HTML網頁增加動態功能。

以上是“基于JS正則表達式如何實現模板數據動態渲染”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

体育| 西乌珠穆沁旗| 德惠市| 正阳县| 安顺市| 汉沽区| 青河县| 尉氏县| 镇平县| 兖州市| 盘锦市| 金川县| 宜兰县| 德州市| 股票| 中江县| 阿尔山市| 延津县| 临桂县| 台州市| 海阳市| 镇平县| 濮阳市| 哈巴河县| 环江| 宜君县| 汝城县| 雷州市| 东海县| 白山市| 溧水县| 逊克县| 青河县| 宜城市| 磴口县| 南投市| 桐柏县| 青铜峡市| 西充县| 鄂尔多斯市| 金昌市|