JS如何运行JS代码段

马黑黑 · 发表于 2022-9-19 13:11

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-9-19 13:13 编辑

有时候，我们需要动态去运行实现不能确定的代码，就像 goldenpen 那样可以实时测试运行用户修改的代码，怎么办？

假如，我们有这么一个JS代码片段，我们要去运行它：

let jsStr = `
      a = 12;
      b = 7;
      c = a + b + 1.5;
      console.log(a,b,c);
`;

我们期待执行上述代码后，按 F12，切换到控制台（control），能看到这样的结果：12 7 20.5

首先可以使用定时器。没错，就是 setTimeout 或 setInterval，我们以前者为例（因为后者要额外关闭，有点麻烦）：

<script>

let jsStr = `
      a = 12;
      b = 7;
      c = a + b + 1.5;
      console.log(a,b,c);
`;

setTimeout(jsStr, 1);

</script>

完美！

其次，资深的JS开发者肯定能想到 eval，这是JS老掉牙的函数，它早期用于评估JS代码，所以可以运行JS代码片段。试看：

eval(jsStr);

运行完美！但，除非确实能确保安全性，否则不要使用 eval 函数。由于 eval 的全局性，它可以被轻易利用，临时运行具有危险性的代码，所以业界将 eval 称为 evil 函数，evil 是魔鬼的意思。并且，eval 的效能极其低下，它每次运行都要调用JS解释器。只建议自己运行或测试代码时可以使用 eval 函数。

第三，追加 script 元素。<script> ... </script> 是 HTML 引用JS代码的方式，它可以被视为是一个HTML标签，故此，可以追加它，但我们需要一个宿主元素来装载它，不建议直接加载到 <head> 头，我们可以写一个有 id 标识的HTML标签：

<div id="mama"></div>

然后，在JS代码里：

let script = document.createElement('script');
script.textContent = jsStr;
mama.appendChild(script);

也非常完美！

这个方法有个缺点：当要运行的代码片段拥有使用 var、let、const 等声明的变量存在时，只能正常运行一次，再次运行被报错（变量已经声明）、得不到预期结果。不过，上面的 jsStr 代码片段，可以随意运行任何多次。

第四、使用 new Function 实现。function 是JS声明函数的关键字，函数可以视为对象甚至变量，故此，new Function 享有同等于 new String 的待遇。试看：

let func = new Function(jsStr);
func();

我们先声明一个函数 func，这个 func 函数调用 new Function 加一个参数即JS代码片段变量 jsStr，然后第二行运行 func() 函数。结果与前面的一致。

new Function 方法，可以有其他参数，代码片段是关键部分不能少，是函数主体。此法被认为是最理想的运行JS代码片段的实现机制。

也许还有其他的方法，我能想到的暂时是以上这些。