摘要:要求不需要有控制流成分如循環(huán)條件等等,只要有變量替換功能即可級(jí)聯(lián)的變量也可以展開被轉(zhuǎn)義的的分隔符和不應(yīng)該被渲染,分隔符與變量之間允許有空白字符例子,實(shí)現(xiàn)先寫下函數(shù)的框架顯然,要做的第一件事便是匹配模板中的占位符。
首發(fā)于我的博客 轉(zhuǎn)載請(qǐng)注明出處
這是源于兩年前,當(dāng)我在做人生中第一個(gè)真正意義上的網(wǎng)站時(shí)遇到的一個(gè)問題
該網(wǎng)站采用前后端分離的方式,由后端的 REST 接口返回 JSON 數(shù)據(jù),再由前端渲染到頁面上。
同許多初學(xué) Javascript 的菜鳥一樣,起初,我也是采用拼接字符串的形式,將 JSON 數(shù)據(jù)嵌入 HTML 中。開始時(shí)代碼量較少,暫時(shí)還可以接受。但當(dāng)頁面結(jié)構(gòu)復(fù)雜起來后,其弱點(diǎn)開始變得無法忍受起來:
書寫不連貫。每寫一個(gè)變量就要斷一下,插入一個(gè) + 和 "。十分容易出錯(cuò)。
無法重用。HTML 片段都是離散化的數(shù)據(jù),難以對(duì)其中重復(fù)的部分進(jìn)行提取。
無法很好地利用 標(biāo)簽。這是 HTML5 中新增的一個(gè)標(biāo)簽,標(biāo)準(zhǔn)極力推薦將 HTML 模板放入 標(biāo)簽中,使代碼更簡(jiǎn)潔。
當(dāng)時(shí)我的心情就是這樣的:
為了解決這個(gè)問題,我暫時(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)的變量也可以展開
被轉(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á)式來完成。那么,這個(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á)式確定了,接下來要做的便是替換工作。
根據(jù) 需求2,模板引擎不僅要能渲染一級(jí)變量,更要渲染多級(jí)變量。這該怎么做呢?
其實(shí)很簡(jiǎn)單:將 token 按 . 分隔開,逐級(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;
不過,有可能 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; i < length; ++i) { variable = variables[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; i < length; ++i) { variable = variables[i]; currentObject = currentObject[variable]; if (currentObject === undefined || currentObject === null) return ""; } return currentObject; }) }
除去空白行,一共 17 行。
將函數(shù)掛到 String 的原型鏈甚至,我們可以通過修改原型鏈,實(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.
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/78648.html
摘要:寫在前面模板的誕生是為了將顯示與數(shù)據(jù)分離,模板技術(shù)多種多樣,但其本質(zhì)是將模板文件和數(shù)據(jù)通過模板引擎生成最終的代碼。目前有著很多這種模板引擎,諸如的,,的。當(dāng)然在用過這么多的模板引擎后,也有著自己實(shí)現(xiàn)一個(gè)簡(jiǎn)易模板引擎的沖動(dòng)。 寫在前面 模板的誕生是為了將顯示與數(shù)據(jù)分離,模板技術(shù)多種多樣,但其本質(zhì)是將模板文件和數(shù)據(jù)通過模板引擎生成最終的HTML代碼。目前有著很多這種模板引擎,諸如Node的...
摘要:模板通常用來定義顯示的形式,能夠使得數(shù)據(jù)展現(xiàn)更為豐富,而且容易維護(hù)。從模板引擎的實(shí)現(xiàn)上看,需要依賴編程語言的動(dòng)態(tài)編譯或者動(dòng)態(tài)解釋的特性,以簡(jiǎn)化實(shí)現(xiàn)和提高性能。本文就來實(shí)現(xiàn)一個(gè)簡(jiǎn)易的模板引擎,以展現(xiàn)的強(qiáng)大之處。 模板簡(jiǎn)介 模板通常是指嵌入了某種動(dòng)態(tài)編程語言代碼的文本,數(shù)據(jù)和模板通過某種形式的結(jié)合,可以變化出不同的結(jié)果。模板通常用來定義顯示的形式,能夠使得數(shù)據(jù)展現(xiàn)更為豐富,而且容易維護(hù)。...
摘要:第三部分介紹一種模板引擎,之所以介紹他是因?yàn)椤!!!H?jiǎn)介模板引擎是數(shù)據(jù)與界面分離工作中最重要一環(huán)。是新一代模板引擎,它采用預(yù)編譯方式讓性能有了質(zhì)的飛躍,并且充分利用引擎特性,使得其性能無論在前端還是后端都有極其出色的表現(xiàn)。 嗯,這也是一個(gè)學(xué)習(xí)筆記,材料均來自網(wǎng)絡(luò),有改動(dòng)。。文章主要分為三部分,第一部分通過實(shí)現(xiàn)一個(gè)簡(jiǎn)易的ERB模板引擎來介紹其原理,參考javascript模板引擎和實(shí)現(xiàn)...
摘要:官網(wǎng)全新的靜態(tài)包管理器。官網(wǎng)一個(gè)整合和官網(wǎng)的最佳思想,使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。官網(wǎng)小巧的兼容的所見即所得的富文本編輯器。官網(wǎng)富文本編輯器。官網(wǎng)由制作,適用于每天寫作的富文本編輯器。 1. 包管理器 管理著 javascript 庫,并提供讀取和打包它們的工具。 npm:npm 是 javascript 的包管理器。官網(wǎng) cnpm:cnpm 是 由于國...
摘要:總結(jié)以上就是一個(gè)簡(jiǎn)單腳手架的實(shí)現(xiàn)方式,后期也會(huì)一直去更新和維護(hù)這個(gè)腳手架,公司現(xiàn)在新的項(xiàng)目就是基于這個(gè)腳手架去搭建的,因?yàn)楣粳F(xiàn)在的項(xiàng)目都是寫的,所以的功能暫時(shí)不支持,后期也會(huì)慢慢支持 寫在最前面 隨著公司業(yè)務(wù)的發(fā)展,獨(dú)立的系統(tǒng)也慢慢多了起來,腳手架的必要性也日趨明顯。 基于此,便開始搭起了腳手架,主要解決兩個(gè)問題: 1.項(xiàng)目的反復(fù)配置 2.公共組件的自動(dòng)更新 代碼地址點(diǎn)這里,可以...
閱讀 2062·2023-04-25 21:11
閱讀 2963·2021-09-30 09:47
閱讀 2272·2021-09-24 09:48
閱讀 4428·2021-08-23 09:43
閱讀 895·2019-08-30 15:54
閱讀 559·2019-08-28 18:01
閱讀 1397·2019-08-27 10:55
閱讀 588·2019-08-27 10:55