Javascript 字符串模板的簡(jiǎn)單實(shí)現(xiàn)
這是源于兩年前,當(dāng)我在做人生中第一個(gè)真正意義上的網(wǎng)站時(shí)遇到的一個(gè)問(wèn)題
該網(wǎng)站采用前后端分離的方式,由后端的 REST 接口返回 JSON 數(shù)據(jù),再由前端渲染到頁(yè)面上。
同許多初學(xué) Javascript 的菜鳥(niǎo)一樣,起初,我也是采用拼接字符串的形式,將 JSON 數(shù)據(jù)嵌入 HTML 中。開(kāi)始時(shí)代碼量較少,暫時(shí)還可以接受。但當(dāng)頁(yè)面結(jié)構(gòu)復(fù)雜起來(lái)后,其弱點(diǎn)開(kāi)始變得無(wú)法忍受起來(lái):
- 書(shū)寫(xiě)不連貫。每寫(xiě)一個(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)
先寫(xiě)下函數(shù)的框架:
function render(template, context) { }
顯然,要做的第一件事便是 匹配模板中的占位符。
匹配占位符
匹配的事,肯定是交給正則表達(dá)式來(lái)完成。那么,這個(gè)正則表達(dá)式應(yīng)該長(zhǎng)什么樣呢?
根據(jù) 需求 1、2 的描述,我們可以寫(xiě)出:
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)文章
javascript的tab切換原理與效果實(shí)現(xiàn)方法
這篇文章主要介紹了javascript的tab切換原理與效果實(shí)現(xiàn)方法,實(shí)例分析了簡(jiǎn)單的tab切換實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01js傳各種類(lèi)型參數(shù)到Controller層的整理方式
這篇文章主要介紹了js傳各種類(lèi)型參數(shù)到Controller層的整理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02淺談tudou土豆網(wǎng)首頁(yè)圖片延遲加載的效果
經(jīng)常上tudou網(wǎng),發(fā)現(xiàn)tudou首頁(yè)加載圖片的功能很有意思,tudou首頁(yè)從"娛樂(lè)"這個(gè)板塊往下的所有視頻的縮略圖并不是在頁(yè)面打開(kāi)后就加載的,而是當(dāng)用戶拖動(dòng)滾動(dòng)條到了"娛樂(lè)"這個(gè)板塊,才開(kāi)始加載圖片的。2010-06-06JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07微信小程序使用map組件實(shí)現(xiàn)解析經(jīng)緯度功能示例
這篇文章主要介紹了微信小程序使用map組件實(shí)現(xiàn)解析經(jīng)緯度功能,涉及微信小程序map組件結(jié)合高德地圖進(jìn)行經(jīng)緯度獲取相關(guān)操作技巧,需要的朋友可以參考下2019-01-01JavaScript中reduce方法的用法及使用場(chǎng)景
reduce()方法對(duì)數(shù)組中的每個(gè)元素按序執(zhí)行一個(gè)提供的reducer函數(shù),每一次運(yùn)行 reducer會(huì)將先前元素的計(jì)算結(jié)果作為參數(shù)傳入,最后將其結(jié)果匯總為單個(gè)返回值,今天我們就介紹一下reduce的幾種簡(jiǎn)單使用場(chǎng)景,需要的朋友可以參考下2023-08-08JavaScript 學(xué)習(xí)小結(jié)(適合新手參考)
JavaScript常量又稱(chēng)字面常量,是固化在程序代碼中的信息。變量的主要作用是存取數(shù)據(jù),提供一個(gè)存取信息的容器。2009-07-07