Javascript 字串模板的簡單實現，javascript字串

Javascript 字串模板的簡單實現，javascript字串

這是源於兩年前，當我在做人生中第一個真正意義上的網站時遇到的一個問題

該網站採用前後端分離的方式，由後端的 REST 介面返回 JSON 資料，再由前端渲染到頁面上。

同許多初學 Javascript 的菜鳥一樣，起初，我也是採用拼接字串的形式，將 JSON 資料嵌入 HTML 中。開始時代碼量較少，暫時還可以接受。但當頁面結構複雜起來後，其弱點開始變得無法忍受起來：

1. 書寫不連貫。每寫一個變數就要斷一下，插入一個 + 和 "。十分容易出錯。
2. 無法重用。HTML 片段都是離散化的資料，難以對其中重複的部分進行提取。
3. 無法很好地利用 <template> 標籤。這是 HTML5 中新增的一個標籤，標準極力推薦將 HTML 範本放入 <template> 標籤中，使代碼更簡潔。
4. 當時我的心情就是這樣的：

這TMD是在逗我嗎

為瞭解決這個問題，我暫時放下了手上的項目，花了半個小時實現一個極簡易的字串模板。

需求描述

實現一個 render(template, context) 方法，將 template 中的預留位置用 context 填充。要求：

不需要有控制流程成分（如 迴圈、條件 等等），只要有變數替換功能即可
級聯的變數也可以展開
被轉義的的分隔字元 { 和 } 不應該被渲染，分隔字元與變數之間允許有空白字元
例子：

render('My name is {name}'， {  name: 'hsfzxjy'}); // My name is hsfzxjyrender('I am in {profile.location}', {  name: 'hsfzxjy',  profile: {    location: 'Guangzhou'  }}); // I am in Guangzhourender('{ greeting }. \\{ This block will not be rendered }', {  greeting: 'Hi'}); // Hi. { This block will not be rendered }

實現

先寫下函數的架構：

function render(template, context) {}

顯然，要做的第一件事便是 匹配模板中的預留位置。

匹配預留位置

匹配的事，肯定是交給Regex來完成。那麼，這個Regex應該長什麼樣呢？

根據 需求 1、2 的描述，我們可以寫出：

var reg = /\{([^\{\}]+)\}/g;

至於需求 3，我第一個想到的概念是 前向匹配，可惜 Javascript 並不支援，只好用一個折衷的辦法：

var reg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;// 若是第一個或第三個分組值不為空白，則不渲染現在，代碼應該是這樣：function render(template, context) {  var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;  return template.replace(tokenReg, function (word, slash1, token, slash2) {    if (slash1 || slash2) { // 匹配到逸出字元      return word.replace('\\', ''); // 如果 分隔字元被轉義，則不渲染    }    // ...  })}

預留位置替換

嗯，Regex確定了，接下來要做的便是替換工作。

根據 需求2，模板引擎不僅要能渲染一級變數，更要渲染多級變數。這該怎麼做呢？

其實很簡單：將 token 按 . 分隔開，逐級尋找即可：

var variables = token.replace(/\s/g, '').split('.'); // 切割 tokenvar currentObject = context;var i, length, variable;// 逐級尋找 contextfor (i = 0, length = variables.length, variable = variables[i]; i < length; ++i)  currentObject = currentObject[variable];return currentObject;

不過，有可能 token 指定的變數並不存在，這時上面的代碼便會報錯。為了更好的體驗，代碼最好有一定的容錯能力：

var variables = token.replace(/\s/g, '').split('.'); // 切割 tokenvar 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 ''; // 如果當前索引的對象不存在，則直接返回Null 字元串。}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 行。

將函數掛到 String 的原型鏈

甚至，我們可以通過修改原型鏈，實現一些很酷的效果：

String.prototype.render = function (context) {  return render(this, context);};

之後，我們便可以這樣調用啦：

"{greeting}! My name is { author.name }.".render({  greeting: "Hi",  author: {    name: "hsfzxjy"  }});// Hi! My name is hsfzxjy.

您可能感興趣的文章:

• Javascript模板技術
• JavaScript 動態添加表格行 使用模板、標記
• JS模板實現方法
• AngularJS入門教程（二）：AngularJS模板
• 詳解Javascript模板引擎mustache.js
• 探究Javascript模板引擎mustache.js使用方法