javascript - 使用 eval() 获取对导入的引用

Question

我正在使用一个表单小部件，其中表单是由从我的 api 检索到的架构生成的。我正在使用的表单库具有内置验证器( vue-form-generator )，可以通过库直接引用。例如:

"schema": {
  "fields": [{
    "type": "input",
    "inputType": "email",
    "label": "E-mail",
    "model": "email",
    "placeholder": "Email",
    "validator": "VueFormGenerator.validators.email",
    "required": true
  },{
    "type": "submit"
  }]
}

这是我的代码:

<template>
  <div id="app" v-if="loaded">
    <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
  </div>
</template>

<script>
  /* eslint no-eval: 0 */

  import Vue from 'vue'
  import VueFormGenerator from 'vue-form-generator/dist/vfg-core.js'
  import 'vue-form-generator/dist/vfg-core.css'

  Vue.use(VueFormGenerator)

  export default {
    name: 'app',

    data: function () {
      return {
        loaded: false,
        model: null,
        schema: null,
        formOptions: null
      }
    },

    created: function () {
      return fetch('http://localhost:3000/forms')
        .then((response) => response.json())
        .then((json) => {
          // evaluate the validator
          json.schema.fields.map((field) => {
            if (field.validator) {
              field.validator = eval(field.validator)
            }
            return field
          })

          // assign the schema and model
          this.model = json.model
          this.schema = json.schema
          this.formOptions = json.formOptions

          // indicate that the schema has bee loaded
          this.loaded = true
        })
        .catch((ex) => {
          console.log('parsing failed', ex)
        })
    }
  }
</script>

我的想法是，我可以使用 eval() 来评估验证器的名称并将其转换为真正的函数。但是，我收到以下错误:

parsing failed ReferenceError: VueFormGenerator is not defined
    at eval (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/app.js:797:1)), <anonymous>:1:1)
    at eval (eval at <anonymous> (http://localhost:8080/app.js:797:1), <anonymous>:35:29)
    at Array.map (native)
    at eval (eval at <anonymous> (http://localhost:8080/app.js:797:1), <anonymous>:33:26)
    at <anonymous>

有没有办法做到这一点，或者在本地创建翻译以将验证器名称映射到实际函数是更好的选择吗？

谢谢!

Answer 1

您可以尝试使用reduce:

      json.schema.fields.map((field) => {
        if (field.validator) {
          // get every key after VueFormGenerator
          const keys = field.validator.split('.').slice(1)
          // use reduce to get back the deepest prop
          field.validator = keys.reduce((obj, key) => obj[key], VueFormGenerator)
        }
        return field
      })