vue 从ace 编辑框获取代码return结果 或 获取编辑框函数

0 编译器的函数

function funcX() {
  return 'Hello World!';
}

1 第一种 获得函数,从编辑去器得到code 字符串,再processedData  是函数

const funcACE = new Function(
  'return ' + this.code + ';'
);
const processedData = funcACE();

// 调用 processedData 函数并将结果保存到变量 result 中
const result = processedData();
console.log(result); // 输出函数执行结果

2 第二种 获得字符串

      // 2
      // 使用编辑器实例的 getValue() 方法获取当前文本内容
      this.code = this.editor.getValue();

      // 3
      // 根据输入的代码生成方法funcx --> 传参
      const funcACE = new Function('data',
        `
      ${this.code}
      return funcX(data);
      `
      );
      // 4
      //  
      const processedData = funcACE(data);  //--> 得到字符串

      // 5 字符串 转 json
      let dataArray = JSON.parse(processedData);

// 或者使用箭头函数的简写:
// const funcACE = () => eval(`{ ${this.code} return funcX(); }`);
//其中 eval() 函数将字符串解析为函数体,然后外部再使用箭头函数将其包裹起来,最终返回一个函数。这种做法同样不太推荐,因为 eval() 函数的风险依然存在。

总的来说,new Function() 是动态生成函数的一个常用方法,并且也是比较安全的,但在使用时应当仔细考虑风险。

你可能感兴趣的:(js,vue基础,前端,javascript,vue.js)