javascript - 这是 javascript eval 的好用处吗？

Question

我们有一个包含许多问题的表单，其中一些问题仅根据与 JSON 中发送的其他问题相关的动态逻辑显示。

每个问题的逻辑类似于，但可能更复杂:

如果出现以下情况，则显示我:(quest1 == value1 OR quest1 == value2) AND (quest2 == value3 OR quest3 == value4)。

简化的 JSON 示例:

[
    "AND",
    {
        "quest1": "value1,value2"
    },
    [
        "OR",
        {
            "quest2": "value3"
        },
        {
            "quest3": "value4"
        }
    ]
]

随着父问题值的变化，确定子问题可见性的一种方法似乎是将给定问题的 JSON 解析为 JS 友好的语法，如上面所示，包括实际的当前值并使用 eval( )。有更好的选择吗？

谢谢!

Answer 1

我已经构建了这个确切的场景。我将问题和答案组装为树服务器端，然后通过 Ajax 调用将模型加载到页面中。每个 Question 对象都有问题文本和 Answer 对象数组，以及一个用于保存任何选定答案的属性(最初为空)。每个 Answer 对象都包含答案值和指向基于该答案的下一个问题的指针。我使用自引用淘汰赛模板，在选择中显示问题和答案列表。选择答案后，会触发 if 逻辑，显示下一个问题和可能的答案 - if:question.chosenAnswer()。

这里的关键是构建一棵树并使用您正在使用的任何库或框架遍历它。

我现在在手机上，当我有真正的键盘时，我会添加一些代码。

答案结构:{answerId,answerValue,nextQuestion}

其中answerId是一个唯一的数字/ID，用于标识通过树到达该答案的唯一路径。

问题树:

    {
    question: "Are there lots of questions?", // string
    chosenAnswer: null, // Answer
    answers: [
        {
            answerId: 1,
            answerValue: "Yes",
            nextQuestion: {
                question: "How many answers can there be?",
                chosenAnswer: null,
                answers: [
                    {
                        answerId: 2,
                        answerValue: "1",
                        nextQuestion: null // leaf
                    },
                    {
                        answerId: 4,
                        answerValue: "2",
                        nextQuestion: {
                            question: "How do you decide?",
                            chosenAnswer: null,
                            answers: [
                                {
                                    answerId: 5,
                                    answerValue: "Guess",
                                    nextQuestion: null // leaf
                                },
                                {
                                    answerId: 6,
                                    answerValue: "Think",
                                    nextQuestion: null // leaf
                                },
                            ]
                        }
                    },

                ]
            }
        },
        {
            answerId: 7,
            answerValue: "No" 
            nextQuestion: null // leaf
        },
    ]
}

您可以通过 AJAX 调用加载它，如果您使用 jQuery 进行 AJAX，则可以在 .done(response) 中获取解析后的 JSON。如果没有，您可以使用 JSON.parse()。无需评估。我基于这个结构构建了 Knockout.js View 模型。

然后，只需使用您的框架(knockout、Angular 等)来根据所选答案管理增量显示即可。如何执行此操作取决于您的工具。

我根据当前问题的答案数组填充我的选择下拉列表。我对 selectedAnswer 属性进行了订阅(或监视)，以便在选择叶答案时(nextQuestion 为 null 或未定义)，我会触发一个事件，其中包含选择作为事件数据一部分的 Answer 对象。因此，我可以记录最终选择的答案或对其使用react。

作为示例，这是我在 Knockout.js 中使用的自引用模板:

<script id="qaTmpl" type="text/html">
    <div class="col-md-12 clearfix leaders">
        <div>
            <label class="question pull-left">{{question}}</label>
            <span>
                <select class="pull-right" data-bind="disable: $root.editBuffer().valueId(),
                    options: answers, optionsText: 'answer', optionValue: 'answer', value: chosenAnswer, optionsCaption:'Choose...'"></select>
            </span>
        </div>
    </div>
    <!-- ko if: $data && chosenAnswer&& chosenAnswer() && chosenAnswer().nextQuestion -->
    <!-- ko template: {name: 'qaTmpl', data: chosenAnswer().nextQuestion} --><!-- /ko -->
    <!-- /ko -->
</script>

我希望你能明白。我希望我能更具体，但很多实现细节都是特定于您的框架和模板引擎的。