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 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 }

实现

先写下函数的框架:

function render(template, context) {

}

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

匹配占位符

匹配的事,肯定是交给正则表达式来完成。那么,这个正则表达式应该长什么样呢?

根据 需求 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('\\', ''); // 如果 分隔符被转义,则不渲染
    }

    // ...
  })
}

占位符替换

嗯,正则表达式确定了,接下来要做的便是替换工作。

根据 需求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 行。

将函数挂到 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.
(0)

相关推荐

  • JS模板实现方法

    概述 我们在使用JS渲染DOM时,一般使用字符串创建DOM然后附加到父元素上,如果附加的DOM是动态易变的,那需要在函数中写大量逻辑.如果在控件实现过程中,这带来的问题更为严重. 解决这个问题的常见解决方案是是使用模板,作为配置项传入控件,实现数据和渲染的分离.具体的实现方法有以下方法: 字符串替换,使用正则匹配将数据替换进字符串中. 渲染函数,函数返回字符串. 模板引擎,可以将执行字符串中的函数(内置或者自定义的) 替换(Substitute) 字符串替换是最简单的实现模板的方式,看一下具体的

  • Javascript模板技术

    /***Template.class.js***/ function Template() { this.classname="Template"; this.debug=false; this.file=new HashMap(); this.root=""; this.varkeys=new  HashMap(); this.varvals=new  HashMap(); this.unknowns="remove"; this.halt_o

  • JavaScript 动态添加表格行 使用模板、标记

    对于复杂的操作情况,比如:添加一行之后,在这一行上还要进行相关的操作会显得有些吃力:本人比较喜欢表现层使用模板.标记填充数据的做法,于是自己做手做了个小组件,与大家一起分享. 组件运行截图: 设计思路: 在Table的thead中加入一行隐藏的行,当要添加一行时,复制一次隐藏的行,再将实例数据填充到这一行中相应的位置,填充完毕之后,再将这一行加到表格中去,整个操作完成. 模板:隐藏的行即相当于模板,当需要时复制一次模板. 标记:将模板行复制出来后,该如何填充数据? 网上比较多的组件的做法是,传递

  • 探究Javascript模板引擎mustache.js使用方法

    我们将为大家详解Mustache.js轻量级JavaScript模版引擎使用方法. 简单示例 function show(t) { $("#content").html(t); } var view = { title: 'YZF', cacl: function () { return 6 + 4; } }; $("#content").html(Mustache.render("{{title}} spends {{cacl}}", view

  • AngularJS入门教程(二):AngularJS模板

    是时候给这些网页来点动态特性了--用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: 复制代码 代码如下: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.你可以到GitHub去

  • 详解Javascript模板引擎mustache.js

    本文总结它的使用方法和一些使用心得,内容不算很高深,纯粹是入门内容,看看即可.不过要是你还没有用过此类的javascript引擎库,那么本文还是值得你一读的,相信在你了解完它强大的功能和简单用法之后,一定会迫不及待地将之用于你的工作当中. 1. 从一个简单真实的需求讲起 目前公司做了一个统一的开发平台,后台封装了MVC的接口和数据增删改查的接口,前端我自己用bootstrap+手写各类组件的方式弄了一套开发框架:集成了CAS,在CAS的基础上,首先做了一套统一权限管理系统,这个系统是我们开发平台

  • Javascript 字符串模板的简单实现

    这是源于两年前,当我在做人生中第一个真正意义上的网站时遇到的一个问题 该网站采用前后端分离的方式,由后端的 REST 接口返回 JSON 数据,再由前端渲染到页面上. 同许多初学 Javascript 的菜鸟一样,起初,我也是采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中.开始时代码量较少,暂时还可以接受.但当页面结构复杂起来后,其弱点开始变得无法忍受起来: 书写不连贯.每写一个变量就要断一下,插入一个 + 和 ".十分容易出错. 无法重用.HTML 片段都是离散化的数据,难以对其中

  • JavaScript String(字符串)对象的简单实例(推荐)

    返回字符串的长度: <html> <body> <script type="text/javascript"> var txt="Hello World!" document.write(txt.length) </script> </body> </html> 为字符串添加样式: <html> <body> <script type="text/java

  • JavaScript字符串转数字的简单实现方法

    由于输入框或对话框返回的类型是字符串,但当我们想使用数字类型时进行一些数学的计算时我们就需要转换为数字类型,使用parseInt.parseFloat即可. 用法:↓ parseInt(想要转换的字符串) //转为 int类型 parseFloat(想要转换的字符串) //转为 float类型 parseInt 样例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <s

  • ES6字符串模板,剩余参数,默认参数功能与用法示例

    本文实例讲述了ES6字符串模板,剩余参数,默认参数功能与用法.分享给大家供大家参考,具体如下: 这里介绍一下字符串模板以及剩余参数,默认参数的概念以及使用. 先来说说字符串模板. 字符串模板 ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${varible}.如果你使用过像C#等后端强类型语言的话,对此功能应该不会陌生. //产生一个随机数 var num=Math.random(); //将这个数字输出到console console.l

  • JavaScript字符串操作的四个实用技巧

    目录 前言 1. 拆分字符串 2. JSON格式化和解析 3. 多行字符串和嵌入式表达式 4. 验证字符串数组中是否存在子字符串 总结 前言 字符串是编程世界最基本最重要的数据类型之一,JavaScript 也不例外.JavaScript 字符串是不可变的,对于存储可以由字符.数字和 Unicode 组成的文本很便捷.JavaScript 提供了许多内置函数,允许以不同的方式创建和操作字符串.在本文将分享一些优雅的操作 JavaScript 字符串的技巧. 1. 拆分字符串 JavaScript

  • Javascript字符串拼接小技巧(推荐)

    在Javascript中经常会遇到字符串的问题,但是如果要拼接的字符串过长就比较麻烦了. 如果是在一行的,可读性差不说,如果要换行的,会直接报错. 在此介绍几种Javascript拼接字符串的技巧. 字符串相加(+) var items = '<li class="details">' + '<span>Hello world</span>' + '</li>'; 利用反斜线拼接字符串 var items = '<li class=

  • Java用正则表达式实现${name}形式的字符串模板实例

    前言 相信大家可能曾遇到过这种情况,在开发中类似站内信的需求时,我们经常要使用字符串模板,比如 尊敬的用户${name}.... 里面的${name}就可以替换为用户的用户名. 下面使用正则表达式简单实现一下这个功能: /** * 根据键值对填充字符串,如("hello ${name}",{name:"xiaoming"}) * 输出: * @param content * @param map * @return */ public static String r

  • JavaScript字符串_动力节点Java学院整理

    JavaScript的字符串就是用''或""括起来的字符表示. 如果'本身也是一个字符,那就可以用""括起来,比如"I'm OK"包含的字符是I,',m,空格,O,K这6个字符. 如果字符串内部既包含'又包含"怎么办?可以用转义字符\来标识,比如: 'I\'m \"OK\"!'; 表示的字符串内容是:I'm "OK"! 转义字符\可以转义很多字符,比如\n表示换行,\t表示制表符,字符\本身也要转

  • javascript文本模板用法实例

    本文实例讲述了javascript文本模板用法.分享给大家供大家参考.具体如下: 这是我参考Prism.js算法写的一个小功能,没什么可说的,作为程序猿看例子应该秒懂. 字符串模板引擎类: /*class*/StringTemplate = function ( /* Optional {patt: RegExp, clPatt: RegExp}*/pattern) { if (!!pattern) { this.patt = pattern.patt; this.clPatt = patter

  • JavaScript进阶练习及简单实例分析

    当用户点击"统计"按钮时,在窗口中弹出文本框中出现次数最多的字符并显示其出现的次数 点击统计按钮时效果如图所示: 实现代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

随机推荐