Javascript 字符串模板的簡(jiǎn)單實(shí)現(xiàn)
這是源于兩年前，當(dāng)我在做人生中第一個(gè)真正意義上的網(wǎng)站時(shí)遇到的一個(gè)問(wèn)題
該網(wǎng)站采用前后端分離的方式，由后端的 REST 接口返回 JSON 數(shù)據(jù)，再由前端渲染到頁(yè)面上。
同許多初學(xué) Javascript 的菜鳥一樣，起初，我也是采用拼接字符串的形式，將 JSON 數(shù)據(jù)嵌入 HTML 中。開(kāi)始時(shí)代碼量較少，暫時(shí)還可以接受。但當(dāng)頁(yè)面結(jié)構(gòu)復(fù)雜起來(lái)后，其弱點(diǎn)開(kāi)始變得無(wú)法忍受起來(lái)：
- 書寫不連貫。每寫一個(gè)變量就要斷一下，插入一個(gè) + 和 "。十分容易出錯(cuò)。
- 無(wú)法重用。HTML 片段都是離散化的數(shù)據(jù)，難以對(duì)其中重復(fù)的部分進(jìn)行提取。
- 無(wú)法很好地利用 <template> 標(biāo)簽。這是 HTML5 中新增的一個(gè)標(biāo)簽，標(biāo)準(zhǔn)極力推薦將 HTML 模板放入 <template> 標(biāo)簽中，使代碼更簡(jiǎn)潔。
- 當(dāng)時(shí)我的心情就是這樣的：
這TMD是在逗我嗎
為了解決這個(gè)問(wèn)題，我暫時(shí)放下了手上的項(xiàng)目，花了半個(gè)小時(shí)實(shí)現(xiàn)一個(gè)極簡(jiǎn)易的字符串模板。
需求描述
實(shí)現(xiàn)一個(gè) render(template, context) 方法，將 template 中的占位符用 context 填充。要求：
不需要有控制流成分（如 循環(huán)、條件 等等），只要有變量替換功能即可
級(jí)聯(lián)的變量也可以展開(kāi)
被轉(zhuǎn)義的的分隔符 { 和 } 不應(yīng)該被渲染，分隔符與變量之間允許有空白字符
例子：
render('My name is {name}'， {
name: 'hsfzxjy'
}); // My name is hsfzxjy
render('I am in {profile.location}', {
name: 'hsfzxjy',
profile: {
location: 'Guangzhou'
}
}); // I am in Guangzhou
render('{ greeting }. \\{ This block will not be rendered }', {
greeting: 'Hi'
}); // Hi. { This block will not be rendered }
實(shí)現(xiàn)
先寫下函數(shù)的框架：
function render(template, context) {
}
顯然，要做的第一件事便是 匹配模板中的占位符。
匹配占位符
匹配的事，肯定是交給正則表達(dá)式來(lái)完成。那么，這個(gè)正則表達(dá)式應(yīng)該長(zhǎng)什么樣呢？
根據(jù) 需求 1、2 的描述，我們可以寫出：
var reg = /\{([^\{\}]+)\}/g;
至于需求 3，我第一個(gè)想到的概念是 前向匹配，可惜 Javascript 并不支持，只好用一個(gè)折衷的辦法：
var reg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;
// 若是第一個(gè)或第三個(gè)分組值不為空，則不渲染
現(xiàn)在，代碼應(yīng)該是這樣：
function render(template, context) {
var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;
return template.replace(tokenReg, function (word, slash1, token, slash2) {
if (slash1 || slash2) { // 匹配到轉(zhuǎn)義字符
return word.replace('\\', ''); // 如果 分隔符被轉(zhuǎn)義，則不渲染
}
// ...
})
}
占位符替換
嗯，正則表達(dá)式確定了，接下來(lái)要做的便是替換工作。
根據(jù) 需求2，模板引擎不僅要能渲染一級(jí)變量，更要渲染多級(jí)變量。這該怎么做呢？
其實(shí)很簡(jiǎn)單：將 token 按 . 分隔開(kāi)，逐級(jí)查找即可：
var variables = token.replace(/\s/g, '').split('.'); // 切割 token
var currentObject = context;
var i, length, variable;
// 逐級(jí)查找 context
for (i = 0, length = variables.length, variable = variables[i]; i < length; ++i)
currentObject = currentObject[variable];
return currentObject;
不過(guò)，有可能 token 指定的變量并不存在，這時(shí)上面的代碼便會(huì)報(bào)錯(cuò)。為了更好的體驗(yàn)，代碼最好有一定的容錯(cuò)能力：
var variables = token.replace(/\s/g, '').split('.'); // 切割 token
var currentObject = context;
var i, length, variable;
for (i = 0, length = variables.length, variable = variables[i]; i < length; ++i) {
currentObject = currentObject[variable];
if (currentObject === undefined || currentObject === null) return ''; // 如果當(dāng)前索引的對(duì)象不存在，則直接返回空字符串。
}
return currentObject;
把所有的代碼組合在一起，便得到了最終的版本：
function render(template, context) {
var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;
return template.replace(tokenReg, function (word, slash1, token, slash2) {
if (slash1 || slash2) {
return word.replace('\\', '');
}
var variables = token.replace(/\s/g, '').split('.');
var currentObject = context;
var i, length, variable;
for (i = 0, length = variables.length, variable = variables[i]; i < length; ++i) {
currentObject = currentObject[variable];
if (currentObject === undefined || currentObject === null) return '';
}
return currentObject;
})
}
除去空白行，一共 17 行。
將函數(shù)掛到 String 的原型鏈
甚至，我們可以通過(guò)修改原型鏈，實(shí)現(xiàn)一些很酷的效果：
String.prototype.render = function (context) {
return render(this, context);
};
之后，我們便可以這樣調(diào)用啦：
"{greeting}! My name is { author.name }.".render({
greeting: "Hi",
author: {
name: "hsfzxjy"
}
});
// Hi! My name is hsfzxjy.
相關(guān)文章
微信小程序web-view無(wú)法打開(kāi)該頁(yè)面不支持打開(kāi)的解決方法
小程序現(xiàn)在日漸成熟,功能也越來(lái)越強(qiáng)大,我們今天來(lái)一起看看小程序跳轉(zhuǎn)的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于微信小程序web-view無(wú)法打開(kāi)該頁(yè)面不支持打開(kāi)的解決方法,需要的朋友可以參考下2023-01-01
如何解決webpack-dev-server代理常切換問(wèn)題
通常我們有一份webpack.dev.config.js使用webpack-dev-server的proxy，代理到開(kāi)發(fā)服務(wù)器，來(lái)解決本地跨域問(wèn)題。假如項(xiàng)目變大，可能需要proxy到不同環(huán)境，那么如何解決webpack-dev-server代理常切換問(wèn)題，下面就一起來(lái)了解一下2019-01-01
JavaScript?CSS解析B站的彈幕可以不擋人物原理及技巧
這篇文章主要為大家介紹了JavaScript?CSS解析B站的彈幕可以不擋人物原理及技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
JavaScript時(shí)間格式整理大全(附大量示例)
在JavaScript中時(shí)間格式轉(zhuǎn)換是一個(gè)常見(jiàn)的需求,可以通過(guò)多種方式實(shí)現(xiàn),這篇文章主要介紹了JavaScript時(shí)間格式的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
下面小編就為大家?guī)?lái)一篇JavaScript數(shù)組去重的兩種方法推薦。小編覺(jué)得聽(tīng)錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看2016-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章介紹了純文字版返回頂端的js代碼，有需要的朋友可以參考一下2013-08-08
.ts是一種高清視頻封裝格式文件，全稱為MPEG2-TS，TS表示TransportStream，這篇文章主要介紹了TS如何從目錄中提取所有指定擴(kuò)展名的文件,需要的朋友可以參考下2023-05-05
IE6下通過(guò)a標(biāo)簽點(diǎn)擊切換圖片的問(wèn)題
IE6已經(jīng)讓人惡心很久了, Google旗下Youtube決定在3月13日起停止對(duì)IE6的支持. 但愿能加速IE6更換的速度.2010-11-11
微信小程序后端(java)開(kāi)發(fā)流程的詳細(xì)步驟
這篇文章主要介紹了微信小程序后端開(kāi)發(fā)流程的詳細(xì)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11