手寫JavaScript模板引擎

2021-08-04 14:39:46 字數 1963 閱讀 9665

這次的模板是類似下面這樣的

var str = "今天是},天氣}, 我今天的計畫是, }";

var reg = /}/g;

console.log(str.match(reg));

[「}」, 「}」, 「}」]

上面的是通過正則進行匹配到的,很明顯匹配到了}這樣子的,\w是匹配單詞,但是下面的模板就沒辦法都匹配了

var str = "今天是},天氣}, 我今天的計畫是, }";

var reg = /}/g;

console.log(str.match(reg));

[「}」]

只匹配到了weather,所以需要重新寫正規表示式了,因為變數是以字母數字下劃線或者$開頭的,還要注意這個點的存在,重寫的如下面所示:

var reg = /}/g;
[「}」, 「}」, 「}」]

可以看到結果,是我們想讓它匹配到的,那麼接下來只要將進行乙個替換操作就行,比如replace

那麼現在就該想如何完成替換這個問題了?

var s = "今天是},天氣}, 我今天的計畫是, }";

var reg = /}/g;

var str = s.replace(reg, function

(raw, key, offset, string) )

可以發現,raw這個引數是帶有}的,要匹配資料中的鍵,就需要去掉}

var s = "今天是},天氣}, 我今天的計畫是, }";

var reg = /}/g;

var str = s.replace(reg, function

(raw, key, offset, string) )

輸出結果如下:

可以看到通過給正則上加了乙個(),就達到了目的

var s = "今天是},天氣}, 我今天的計畫是, }";

var reg = /}/g;

var data = ,

weather: '晴'

}var str = s.replace(reg, function

(raw, key, offset, string) );

console.log(str);

結果如下,帶有點的沒有正確替換

「今天是},天氣晴, 我今天的計畫是, }」

封裝為乙個函式:

function

template

(str, data) }/g;

return str.replace(reg, function

(raw, key, offset, string)

return paths || raw;

});}

使用:

var s = "今天是},天氣}, 我今天的計畫是, }";

var data = ,

weather: '晴'

}console.log(template(s, data));

「今天是週六,天氣晴, 我今天的計畫是, 學習」

今天的任務是學習,哈哈,學習去了,希望這篇部落格對你有幫助 ^_^

javascript基礎 手寫bind

function.prototype.bind function that var args slice.call arguments,1 呼叫bind傳遞進來的引數,除去第乙個引數obj test.bind obj,pram var ftobind this var fnop function 用...

JavaScript之Object型別(引用型別)

建立object例項的方式可以說有三種,第一種是通過關鍵字new後跟建構函式object來定義 var obj1 new object obj1.name tom 為物件新增name屬性並賦值tom obj1.age 21 為物件新增age屬性並賦值21 第二種方式是通過物件字面量表示法建立物件,屬...

JavaScript 模板引擎

做的乙個模板引擎繫結json資料的乙個模板引擎,小巧便捷,簡單易懂,適合json小資料 編號 星期次數 營銷型別 操作 function temp json,id g innerhtmls innerhtmls.replace replace,value html innerhtmls doc.in...