JS模板编译的实现详情

更新时间：2022年07月19日 16:54:46 作者：阿海丶

这篇文章主要介绍了JS模板编译的实现详情，编译是一种格式变成另一种格式的过程。编译会导致好的结果，比如书写简单的代码，编译出来复杂的代码；或者提高代码的使用性能

前言

编译是一种格式变成另一种格式的过程。编译会导致好的结果，比如书写简单的代码，编译出来复杂的代码；或者提高代码的使用性能。

这里只聊聊模板编译。

模板编译的简单实现

写一个最简单的模板

<p>Hello, {{name}}!</p>

这个模板用数据{name: "world"}渲染后的结果是：

<p>Hello, world!</p>

解决方法：最简单的方案，正则替换就行了

const compile = function(template, data) {
  return template.replace(/{{(.+?)}}/g, (match, key) => data[key])
}

const template = "<p>Hello, I'm {{name}}! {{age}} years old!</p>"
const data = {
  name: "hayes",
  age: 18
}
const result = compile(template, data)
console.log(result); // <p>Hello, I'm hayes! 18 years old!</p>

缺点很明显，除了正则替换字段，其他啥都干不了，

来看看简单的嵌套需求：

模板:

<p>Hello, I'm {{user.name}}! {{user.age}} years old!</p>

渲染数据;

const data = {
  user: {
    name: "hayes",
    age: 18
  }
}

现在再使用上面的方法，就失效了。还用正则的话，会很难做。因为需要做语法/词法分析，来看看大括号内写的是什么了。

模板编译

其实对于上述的模板，也可以使用如下方式来写：

const compile = function(data) {
  return `<p>Hello, I'm ${data.name}! ${data.age} years old!</p>`
}

好处：只需一次编译，之后再使用就只需要直接填充数据即可。而且也方便支持data.user.name这种形式。

工具：使用new Function生成函数

生成一个函数，传入x和 y，执行return x + y来获得求和的功能

const fn = new Function("x", "y", "return x + y");

打印fn，可以看到输出的内容如下：

ƒ anonymous(x,y) {
return x + y
}

1、构建模板生成函数

传入模板字符串，通过new Function方式返回一个新函数。新函数接收一个obj对象

const compile = function(template) {
  // 模板字符串
  let result = "";
  // ...
  return new Function("obj", result);
}

2、正则替换

把{{xxx}}找出来，替换为obj.xxx

const compile2 = function(template) {
  // 模板字符串
  let result = template.replace(/{{(.+?)}}/g, (match, key) => {
    return `obj.${key}`
  });
  result = `return "${result}"`;
  return new Function("obj", result);
}
const template2 = "<p>Hello, I'm {{user.name}}! {{user.age}} years old!</p>"
const render2 = compile2(template2)
console.log(render2);

此时，函数打印如下：

ƒ anonymous(obj
) {
return "<p>Hello, I'm obj.user.name! obj.user.age years old!</p>"
}

我们需要把字符串中的obj.user.name和obj.user.age变成动态的。

修改一下正则

const compile2 = function(template) {
  // 模板字符串
  let result = template.replace(/{{(.+?)}}/g, (match, key) => {
    return `" + obj.${key} + "`  // 前后添上加号
  });
  result = `return "${result}"`;
  return new Function("obj", result);
}
const template2 = "<p>Hello, I'm {{user.name}}! {{user.age}} years old!</p>"
const render2 = compile2(template2)
console.log(render2);

再来看看函数的打印：

ƒ anonymous(obj
) {
return "<p>Hello, I'm " + obj.user.name + "! " + obj.user.age + " years old!</p>"
}

最终代码：

const compile = function(template) {
  // 模板字符串
  let result = template.replace(/{{(.+?)}}/g, (match, key) => {
    return `" + obj.${key} + "`
  });
  result = `return "${result}"`;
  return new Function("obj", result);
}
const template = "<p>Hello, I'm {{user.name}}! {{user.age}} years old!</p>"
const render = compile(template)

const data = {
  user: {
    name: "hayes",
    age: 18
  }
}
const result = render(data)
console.log(result); // <p>Hello, I'm hayes! 18 years old!</p>

渲染结果：

"<p>Hello, I'm hayes! 18 years old!</p>"

到此这篇关于JS模板编译的实现详情的文章就介绍到这了,更多相关JS模板编译内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS实现骰子3D旋转效果
这篇文章主要为大家详细介绍了JS实现骰子3D旋转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
Echarts自定义图形的方法参考
在使用ECharts绘制折线图时,为了丰富图表的视觉表达,设计师们常常会为视图搭配上不同的图标,下面这篇文章主要给大家介绍了关于Echarts自定义图形的方法参考,需要的朋友可以参考下
2023-02-02
Web3.js查询以太币和代币余额及转账
这篇文章主要介绍了Web3.js查询以太币和代币余额以及转账,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09
如何用javascript去掉字符串里的所有空格
如何用javascript去掉字符串里的所有空格...
2007-02-02
JavaScript localStorage使用教程详解
JavaScriptlocalStorage基本上是浏览器Window对象中的存储，您可以在中存储任何内容localStorage，localStorage及其相关的sessionStorage是 Web Storage API的一部分，我们将在本文详细了解这些,需要的朋友可以参考下
2023-06-06
深入浅出webpack之externals的使用
这篇文章主要介绍了深入浅出webpack之externals的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
在JS数组特定索引处指定位置插入元素的技巧
这篇文章主要介绍了如何在JS数组特定索引处指定位置插入元素？将一个元素插入到现有数组的特定索引处，需要的朋友可以参考下
2014-08-08
前端本地数据存储的几种常见方式总结
在前端开发中,本地数据存储是实现客户端数据持久化的关键技术,以下是几种常见的前端本地数据存储方式,通过代码示例讲解的非常详细,需要的朋友可以参考下
2025-01-01
JavaScript 中 avalon绑定属性总结
avalon是前端MVVM框架，在js中经常会用到。这篇文章主要介绍了JavaScript 中 avalon绑定属性总结的相关资料,需要的朋友可以参考下
2016-10-10
关于javaScript注册click事件传递参数的不成功问题
在javaScript中给一个html元素注册click事件处理函数时，比如给该处理函数传3个参数。可是不管是使用下面那种方式都不能给事件处理函数传递参数
2014-07-07