亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Javascript 字符串模板的簡單實現(xiàn)

 更新時間：2016年02月13日 09:44:16   投稿：hebedich  
這篇文章給大家描述的是如何一步步簡單的實現(xiàn)Javascript 字符串模板，對于初學javascript的菜鳥們來說應該是篇不錯的文章，希望對大家能夠有所幫助。

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

該網(wǎng)站采用前后端分離的方式，由后端的 REST 接口返回 JSON 數(shù)據(jù)，再由前端渲染到頁面上。

同許多初學 Javascript 的菜鳥一樣，起初，我也是采用拼接字符串的形式，將 JSON 數(shù)據(jù)嵌入 HTML 中。開始時代碼量較少，暫時還可以接受。但當頁面結(jié)構(gòu)復雜起來后，其弱點開始變得無法忍受起來：

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

這TMD是在逗我嗎

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

需求描述

實現(xiàn)一個 render(template, context) 方法，將 template 中的占位符用 context 填充。要求：

不需要有控制流成分（如 循環(huán)、條件 等等），只要有變量替換功能即可
級聯(lián)的變量也可以展開
被轉(zhuǎn)義的的分隔符 { 和 } 不應該被渲染，分隔符與變量之間允許有空白字符
例子：

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) {

}

顯然，要做的第一件事便是 匹配模板中的占位符。

匹配占位符

匹配的事，肯定是交給正則表達式來完成。那么，這個正則表達式應該長什么樣呢？

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

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

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

var reg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;
// 若是第一個或第三個分組值不為空，則不渲染
現(xiàn)在，代碼應該是這樣：

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)義，則不渲染
    }

    // ...
  })
}

占位符替換

嗯，正則表達式確定了，接下來要做的便是替換工作。

根據(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, variable = variables[i]; i < length; ++i) {
  currentObject = currentObject[variable];
  if (currentObject === undefined || currentObject === null) return ''; // 如果當前索引的對象不存在，則直接返回空字符串。
}

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 的原型鏈

甚至，我們可以通過修改原型鏈，實現(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.

相關文章

  • 原生js實現(xiàn)鼠標跟隨效果

    原生js實現(xiàn)鼠標跟隨效果

    本文主要分享了原生js實現(xiàn)鼠標跟隨效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧
    2017-02-02
  • javascript的tab切換原理與效果實現(xiàn)方法

    javascript的tab切換原理與效果實現(xiàn)方法

    這篇文章主要介紹了javascript的tab切換原理與效果實現(xiàn)方法,實例分析了簡單的tab切換實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下
    2015-01-01
  • js傳各種類型參數(shù)到Controller層的整理方式

    js傳各種類型參數(shù)到Controller層的整理方式

    這篇文章主要介紹了js傳各種類型參數(shù)到Controller層的整理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-02-02
  • JS如何生成動態(tài)列表

    JS如何生成動態(tài)列表

    這篇文章主要為大家詳細介紹了JS如何生成動態(tài)列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-09-09
  • 淺談tudou土豆網(wǎng)首頁圖片延遲加載的效果

    淺談tudou土豆網(wǎng)首頁圖片延遲加載的效果

    經(jīng)常上tudou網(wǎng)，發(fā)現(xiàn)tudou首頁加載圖片的功能很有意思，tudou首頁從"娛樂"這個板塊往下的所有視頻的縮略圖并不是在頁面打開后就加載的，而是當用戶拖動滾動條到了"娛樂"這個板塊，才開始加載圖片的。
    2010-06-06
  • JS實現(xiàn)點擊button按鈕切換圖片

    JS實現(xiàn)點擊button按鈕切換圖片

    這篇文章主要為大家詳細介紹了JS實現(xiàn)點擊button按鈕切換圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • JavaScript等比例縮放圖片控制超出范圍的圖片

    JavaScript等比例縮放圖片控制超出范圍的圖片

    當網(wǎng)頁加載一個尺寸比較大的圖片時，往往會把一個網(wǎng)頁撐的變形，頁面變得很難看，于是我們就想到了用JS去控制超出一定范圍的圖片
    2013-08-08
  • 微信小程序使用map組件實現(xiàn)解析經(jīng)緯度功能示例

    微信小程序使用map組件實現(xiàn)解析經(jīng)緯度功能示例

    這篇文章主要介紹了微信小程序使用map組件實現(xiàn)解析經(jīng)緯度功能,涉及微信小程序map組件結(jié)合高德地圖進行經(jīng)緯度獲取相關操作技巧,需要的朋友可以參考下
    2019-01-01
  • JavaScript中reduce方法的用法及使用場景

    JavaScript中reduce方法的用法及使用場景

    reduce()方法對數(shù)組中的每個元素按序執(zhí)行一個提供的reducer函數(shù),每一次運行 reducer會將先前元素的計算結(jié)果作為參數(shù)傳入,最后將其結(jié)果匯總為單個返回值,今天我們就介紹一下reduce的幾種簡單使用場景,需要的朋友可以參考下
    2023-08-08
  • JavaScript 學習小結(jié)(適合新手參考)

    JavaScript 學習小結(jié)(適合新手參考)

    JavaScript常量又稱字面常量，是固化在程序代碼中的信息。變量的主要作用是存取數(shù)據(jù)，提供一個存取信息的容器。
    2009-07-07

最新評論