資訊專欄INFORMATION COLUMN
摘要：要求不需要有控制流成分如循環(huán)條件等等，只要有變量替換功能即可級聯(lián)的變量也可以展開被轉(zhuǎn)義的的分隔符和不應(yīng)該被渲染，分隔符與變量之間允許有空白字符例子，實現(xiàn)先寫下函數(shù)的框架顯然，要做的第一件事便是匹配模板中的占位符。
首發(fā)于我的博客 轉(zhuǎn)載請注明出處
這是源于兩年前，當(dāng)我在做人生中第一個真正意義上的網(wǎng)站時遇到的一個問題
該網(wǎng)站采用前后端分離的方式，由后端的 REST 接口返回 JSON 數(shù)據(jù)，再由前端渲染到頁面上。
同許多初學(xué) Javascript 的菜鳥一樣，起初，我也是采用拼接字符串的形式，將 JSON 數(shù)據(jù)嵌入 HTML 中。開始時代碼量較少，暫時還可以接受。但當(dāng)頁面結(jié)構(gòu)復(fù)雜起來后，其弱點(diǎn)開始變得無法忍受起來：
書寫不連貫。每寫一個變量就要斷一下，插入一個 + 和 "。十分容易出錯。
無法重用。HTML 片段都是離散化的數(shù)據(jù)，難以對其中重復(fù)的部分進(jìn)行提取。
無法很好地利用 標(biāo)簽。這是 HTML5 中新增的一個標(biāo)簽，標(biāo)準(zhǔn)極力推薦將 HTML 模板放入 標(biāo)簽中，使代碼更簡潔。
當(dāng)時我的心情就是這樣的：
為了解決這個問題，我暫時放下了手上的項目，花了半個小時實現(xiàn)一個極簡易的字符串模板。
需求描述實現(xiàn)一個 render(template, context) 方法，將 template 中的占位符用 context 填充。要求：
不需要有控制流成分（如 循環(huán)、條件 等等），只要有變量替換功能即可
級聯(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 }
實現(xiàn)
先寫下函數(shù)的框架：
function render(template, context) {
}
顯然，要做的第一件事便是 匹配模板中的占位符。
匹配占位符匹配的事，肯定是交給正則表達(dá)式來完成。那么，這個正則表達(dá)式應(yīng)該長什么樣呢？
根據(jù) 需求 1、2 的描述，我們可以寫出：
var reg = /{([^{}]+)}/g;
至于需求 3，我第一個想到的概念是 前向匹配，可惜 Javascript 并不支持，只好用一個折衷的辦法：
var reg = /()?{([^{}]+)()?}/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，模板引擎不僅要能渲染一級變量，更要渲染多級變量。這該怎么做呢？
其實很簡單：將 token 按 . 分隔開，逐級查找即可：
var variables = token.replace(/s/g, "").split("."); // 切割 token
var currentObject = context;
var i, length, variable;
// 逐級查找 context
for (i = 0, length = variables.length, variable = variables[i]; i < length; ++i)
currentObject = currentObject[variable];
return currentObject;
不過，有可能 token 指定的變量并不存在，這時上面的代碼便會報錯。為了更好的體驗，代碼最好有一定的容錯能力：
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)前索引的對象不存在，則直接返回空字符串。
}
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 的原型鏈甚至，我們可以通過修改原型鏈，實現(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/78648.html
摘要：寫在前面模板的誕生是為了將顯示與數(shù)據(jù)分離，模板技術(shù)多種多樣，但其本質(zhì)是將模板文件和數(shù)據(jù)通過模板引擎生成最終的代碼。目前有著很多這種模板引擎，諸如的，，的。當(dāng)然在用過這么多的模板引擎后，也有著自己實現(xiàn)一個簡易模板引擎的沖動。 寫在前面 模板的誕生是為了將顯示與數(shù)據(jù)分離，模板技術(shù)多種多樣，但其本質(zhì)是將模板文件和數(shù)據(jù)通過模板引擎生成最終的HTML代碼。目前有著很多這種模板引擎，諸如Node的...
摘要：模板通常用來定義顯示的形式，能夠使得數(shù)據(jù)展現(xiàn)更為豐富，而且容易維護(hù)。從模板引擎的實現(xiàn)上看，需要依賴編程語言的動態(tài)編譯或者動態(tài)解釋的特性，以簡化實現(xiàn)和提高性能。本文就來實現(xiàn)一個簡易的模板引擎，以展現(xiàn)的強(qiáng)大之處。 模板簡介 模板通常是指嵌入了某種動態(tài)編程語言代碼的文本，數(shù)據(jù)和模板通過某種形式的結(jié)合，可以變化出不同的結(jié)果。模板通常用來定義顯示的形式，能夠使得數(shù)據(jù)展現(xiàn)更為豐富，而且容易維護(hù)。...
摘要：第三部分介紹一種模板引擎，之所以介紹他是因為。。。。三簡介模板引擎是數(shù)據(jù)與界面分離工作中最重要一環(huán)。是新一代模板引擎，它采用預(yù)編譯方式讓性能有了質(zhì)的飛躍，并且充分利用引擎特性，使得其性能無論在前端還是后端都有極其出色的表現(xiàn)。 嗯，這也是一個學(xué)習(xí)筆記，材料均來自網(wǎng)絡(luò)，有改動。。文章主要分為三部分，第一部分通過實現(xiàn)一個簡易的ERB模板引擎來介紹其原理，參考javascript模板引擎和實現(xiàn)...
摘要：官網(wǎng)全新的靜態(tài)包管理器。官網(wǎng)一個整合和官網(wǎng)的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。官網(wǎng)小巧的兼容的所見即所得的富文本編輯器。官網(wǎng)富文本編輯器。官網(wǎng)由制作，適用于每天寫作的富文本編輯器。 1. 包管理器 管理著 javascript 庫，并提供讀取和打包它們的工具。 npm：npm 是 javascript 的包管理器。官網(wǎng) cnpm：cnpm 是 由于國...
閱讀 2276·2023-04-25 21:11
閱讀 3055·2021-09-30 09:47
閱讀 2328·2021-09-24 09:48
閱讀 4518·2021-08-23 09:43
閱讀 962·2019-08-30 15:54
閱讀 629·2019-08-28 18:01
閱讀 1484·2019-08-27 10:55
閱讀 649·2019-08-27 10:55
