javascript - 管理代码中大量硬编码数据的最佳方法？

Question

我正在使用 Javascript 进行在线测试。我将 channel 库组织为一个数组，正如你所看到的，它一团糟(抱歉代码墙):

  var passageBank = [
        ["Passage 1", //Passage Title
        '<p>In 1960, Dr. George Sperling asked participants to recall a 4x3 group of letters flashed on a screen for less than a second. When instructed to recall as many letters as possible, most participants could only name the first four or five letters.</p><p>Dr. Sperling then asked another group to name only one of the rows. After they saw the image flash, he would randomly sound one of three tones. Sounding a high-frequency tone indicated that the participant should give the first line of letters; a medium-frequency tone indicated the middle row; and a low-frequency tone asked for the last row. If the tone was broadcast immediately after the image was flashed, the majority of subjects recalled all four letters. This marked the discovery of iconic memory, the visual form of sensory memory. Audible sensory memory (also known as echoic memory) lasts for several seconds.</p><div id="figure"><img src="https://ka-perseus-images.s3.amazonaws.com/a7d4238a28e6eef5321d3f6278fb17ce5a9461cf.png"></div><b>Figure 1</b><span id="figure">Experimental setup for Dr. Sperling</span><p>Sensory memory is constantly processing enormous amounts of information from the world around you. What you pay attention to gets passed into working memory. This stage can be described in three major sections – the visuospatial sketchpad, the phonological loop, and the central executive. The sketchpad stores visual information, like a photograph, while the loop deals with words and numbers. The job of coordinating the two falls to the central executive – connecting an address you hear with a map that you see, for example.</p>', //Passage with Formatting
        [[/*Array of Questions*/
        /*Question 1*/
        "Why did Dr. Sterling use a tone to indicate the line of the row he wanted participants to recite?", 
        /*A*/
        "Asking verbally would take longer than iconic memory lasts",
        /*B*/
        "Dr. Sperling intended to study the connection between audio and visual cues", 
        /*C*/
        "It was the clearest way to signal the question to multiple participants",  
        /*D*/
        "Using an audible cue helped trigger echoic memory", 
        /*Answer*/
        "A",
        /*Student Answer*/
        "X",
        /*Solution*/
        "The tones were part of the second round of the experiment.<br><br>Iconic memory is thought to last only a fraction of a second.<br><br>In order to test iconic memory, Dr. Sperling required a stimulus that was quick enough that the image would still be in participants heads."
        ],
        [/*Question 2*/"Which is the best test of echoic memory?","Asking participants to provide the next line in a well-known song","Asking participants to summarize a story that was read to them", "Asking participants to identify whether two tones are identical", "Asking participants to sing the first line of their favorite song", "C", "X", "Echoic memory is a form of sensory memory - it is very short-lived.<br><br>Echoic memory is an audible fragment of the information we are continually processing from the outside world.<br><br>Asking participants to identify whether two tones are identical is the best test of echoic memory."],
        [/*Question 3*/"Which of the following explains why we see movement in a flip-book or stop-motion animation?", "Iconic memory","Central executive", "Echoic memory", "Visuospatial sketchpad", "A", "X", "Flip-books and stop-motion animations are both series of still images flashed in front of the eyes in quick succession to create a moving image.<br><br>The central executive is responsible for coordinating the visuospatial sketchpad and the phonological loop.<br><br>Iconic memory is a major part of change detection, and helps us notice the changes in each progressive image, turning it into a single moving picture."],
        [/*Question 4*/"If you drive by a stop sign and then try to recall it several minutes later, which are you using?", "Echoic memory, then the phonological loop","Echoic memory, then the visuospatial sketchpad", "Iconic memory, then the visuospatial sketchpad", "Iconic memory, then the phonological loop", "D", "X", "Information passes through the sensory memory to the working memory.<br><br>A stop sign is a picture of a word.<br><br>The stop sign (a picture of a word) would first pass through the iconic memory, and then into phonological loop."],
        [/*Question 5*/"Which of the following is a technique used to increase the amount of information stored in working memory?","Semantic Networking","Imagery", "Self-referencing","Chunking","D", "X", "Many mnemonic techniques are focused on transferring information from working memory to long-term memory.<br><br>Semantic networks are like mental maps in our heads where we connect related concepts.<br><br>Chunking is the process of grouping information to reduce the number of “datums” stored, to allow for a greater amount of information to be stored in working memory. Ex: remembering TVFBIHPCBS as TV FBI HP CBS."]],
        ]]

它确实有效，但在上下文中引用和理解很烦人。我哥哥明智地指出，以类似字典的格式组织起来可能会更好。 (对于所有学究来说 - 显然 javascript 实际上没有字典？但无论它是什么似乎都足够接近)

我尝试做这样的事情:

var passageBank = {
        'Passage 1': '<p>In 1960, Dr. George Sperling asked participants to recall a 4x3 group of letters flashed on a screen for less than a second. When instructed to recall as many letters as possible, most participants could only name the first four or five letters.</p><p>Dr. Sperling then asked another group to name only one of the rows. After they saw the image flash, he would randomly sound one of three tones. Sounding a high-frequency tone indicated that the participant should give the first line of letters; a medium-frequency tone indicated the middle row; and a low-frequency tone asked for the last row. If the tone was broadcast immediately after the image was flashed, the majority of subjects recalled all four letters. This marked the discovery of iconic memory, the visual form of sensory memory. Audible sensory memory (also known as echoic memory) lasts for several seconds.</p><div id="figure"><img src="https://ka-perseus-images.s3.amazonaws.com/a7d4238a28e6eef5321d3f6278fb17ce5a9461cf.png"></div><b>Figure 1</b><span id="figure">Experimental setup for Dr. Sperling</span><p>Sensory memory is constantly processing enormous amounts of information from the world around you. What you pay attention to gets passed into working memory. This stage can be described in three major sections – the visuospatial sketchpad, the phonological loop, and the central executive. The sketchpad stores visual information, like a photograph, while the loop deals with words and numbers. The job of coordinating the two falls to the central executive – connecting an address you hear with a map that you see, for example.</p>', //Passage with Formatting
    }

但我对应该如何实现这些问题感到困惑。我觉得我需要一本字典中的字典；如果我只使用数组，那么它就违背了这样做的目的。

顺便说一句，如果您对我的测试感到好奇 here it is.

是的，我意识到我的 github 存储库一团糟。我正在尝试处理它，但 github 对我来说太令人困惑了。这是我的第一个真正的项目，我只是在学习诀窍。

Answer 1

在讨论数据结构之前，我建议您了解一下the MVC pattern 。您正在开发一个 Web 应用程序，那么这对于您的情况来说是一个很好的模式。它可以帮助解决您的问题。

MVC 的目的是分离代码中的不同内容:

• 模型是应用程序中处理数据的部分。
• View 是应用程序中处理数据显示的部分。
• Controller 是应用程序中处理用户交互的部分。

就您的情况而言，我们可以识别 3 个部分:

• 您的硬编码字符串数组应由模型处理。
• 您的用户界面应由 View 处理。
• 您的测验交互应由 Controller 处理。

一旦代码中实现了良好的分离，重构数据结构(数组、对象、对象数组...)或更改这些数据的来源(外部文件、外部第三方 API、数据库...)。您只需更改模型内部的逻辑，而无需重构所有应用程序。

话虽如此，我的下一个建议是从代码中提取所有数据。将字符串存储在数据库中可能会很好(请参阅 T30's answer )，但首先您可以将数据存储在简单的 JSON file 中。 。很好地涵盖了从 JavaScript 加载 JSON 文件的主题(例如 How to use a JSON file in javascript )。

最后，我将使用对象数组重构您的数据结构。数组的每个元素都是一个段落(passage1、passage2...)，对象中的每对键值将是该段落的一个元素(标题、文本、问题、答案...) 。类似于:

[
    {
        "title": "Passage 1",
        "text": "…",
        "questions": [
            {
                "label": "…",
                "choices": ["…"],
                "answer": "…",
                "solution": "…"
            },
            { ... },
            { ... }
        ]
    },
    {
        "title": "Passage 2",
        ...
    },
    {
        "title": "Passage 3",
        ...
    }
]

为了帮助您将数组转换为有效的 JSON 对象，您可以通过调用 JSON.parse(data) 直接在浏览器控制台中对其进行测试。您将看到该函数是否可以解析它，或者是否出现一些语法错误。