new 了一个 Function

new Function 和 eval 的区别可以搜索到蛮多解释,但总觉得还不够具体,寻思着补补刀

一、从简易模板引擎说起

模板引擎可以怎样理解呢?
在一段 Html 文档里面有许多占位符,同时现在还有另一份 Data 数据,将 Data 注入到 Html 中填充占位符的方法,就是模板引擎了(简单得一批)

既然已经知道目标,那就来简单实现一个不带ifelse ifelsefor的(要不我说简易版嘛),模板定义如下:

<html>
  <head>
    <title>{{title}}</title>
  </head>
  <body>
     <p>{{hello + world}}</p>
  </body>
</html>

这里只有一个关键点,就是使用 {{}} 双花括号作为模板的占位符,其中可以读取 Data 中的变量,也可以进行一些简单合法的 Js 表达式,对应的,准备这样一份 Data:

{
  "title": "facemagic",
  "hello": "hello",
  "world": "world"
}

Now,发挥你的想象,如何才可以将 Data 注入到 Tpl 当中,输出目标 Html 字符串?注意到,模板占位符 {{}} 中的内容至少是一个合法的 Js 表达式,使用正则表达式找到所有占位符里的表达式,再通过 eval 来执行,完了把执行结果替换掉占位符,完美!!!来,走一个:

  // node 环境

  // data 解构到 global 下
  for (const key in data) {
    global[key] = data[key]
  }
  const regex = /{{([^}]*)}}/g;
  const source = source.replace(regex, (m, n) => {
    let result = m;
    try {
      result = eval(n)
    } catch (e) {
    }
    return result;
  });

Wait a minute !!!
为毛要将 data 中的元素全部赋值到 global 下?
注意模板表达式的写法是 {{title}} 而不是 {{data.title}},省略了根索引有木有,为了执行 eval 不报错,必须把 data 解构到 global 中。

这样就有瑕疵了,如果程序中不小心定义了一个变量刚好跟 data 的某个键重名了。那么可怕的事情将会发生

二、使用 new Function

在上述的情况中,eval 的方式会造成变量的全局污染,幸运的是,使用 new Function 可以有效的解决这个问题。奥妙就在于,虽然 new Function 跟 eval 的执行效果类似(前者应该封装了后者),但是 new Function 是可以传参的,是这样定义的

  new Function(arg1, arg2, ..., code)

其中,code 可以直接使用 arg1、arg2、...
例如:

  const func = new Function(a, b, 'return a+b');
  func(1, 2); // 3

基于此,我们只需要将 data 解构,作为参数传入构造好的 func,就不会有全局污染了:

function excute(keys, values, statement) {
  const caller = new Function(...keys, `return (${statement})`);
  return caller(...values);
}

function parse(source, data) {
  const keys = Object.keys(data);
  const values = [];
  for (let i = 0; i < keys.length; i++) {
    values.push(data[keys[i]])
  }
  const regex = /{{([^}]*)}}/g;
  source = source.replace(regex, (m, n) => {
    let result = m;
    try {
      result = excute(keys, values, n);
    } catch (e) {
    }
    return result;
  })
}

嗯嗯,可以收工了~~

三、总结

举了一个这么大的例子,其实想表达的不过是,new Function 相比于 eval 可以传入参数,可以有更好的作用域壁垒,是不是很无聊

推荐阅读更多精彩内容