有没有比 `const` 更好的方法来存储大块文本？

Posted 2023-02-22

【中文标题】有没有比 `const` 更好的方法来存储大块文本？

【英文标题】：Is there a better way than `const` to store large blocks of text?

【发布时间】：2017-02-18 06:29:21

【问题描述】：

我正在使用 React 制作单页 Web 应用程序。我的一个页面有一大块这样的文本：

const ContentText = <p>......huge block of text.......</p>

在我的编辑器中看起来很丑，我想知道是否有存储大块文本以在页面上呈现的最佳做法。

【问题讨论】：

是的 - 更好的做法是不存储大块文本。如果您需要保留一些 html，则表明您需要一个模板解决方案。如果您的 HTML 对于模板解决方案而言过于可塑性，请考虑内联生成 HTML 标记并填充它，这样您就不必将其保留为文本。

@vlaz 他说他正在使用反应，所以他已经在使用模板引擎。文本显然必须来自某个地方

@azium 根据我的经验，您将模板文本存储在模板 file 中，然后调用它。我想你可以将它存储在一个变量中，但它非常难看，正如 OP 所发现的那样。你甚至可以处理你的模板文件并将它们作为 ` 标签添加到你的 HTML 中（我在这里借用了 Knockout.js 的东西，但它很有用）在这种情况下你只需要获取他们通过 ID 然后执行替换。当然文本“必须来自某个地方”，但它不必与页面的逻辑混为一谈。这是 MVC 教给我们的最重要的事情之一。

@vlaz 但是 React 是 模板文件。 React 是一个视图库。这也向我们展示了 MVC 已经过时，单向数据流更容易维护。

@azium 我很困惑 - MVC 在什么时候指示“你不应有单向数据流”？如果它确实施加了这样的限制，我担心地没有意识到这一点。我认为它所说的本质上是“将您的观点与您的逻辑和数据分开”。

【参考方案1】：

我会用你的文本创建一个模块并导入它。这样一来，您根本不应该关心它在编辑器中的样子，因为除非您专门尝试编辑大量文本，否则您并没有真正接触该文件。

export default `
  ....huge block of text....
`

然后你实际使用它的地方：

import hugeText from './text/hugeText'

....

render() 
  return <p>hugeText</p>

像 atom 和 sublime 这样的编辑器也有“软包装”模式，所以你不需要大量的水平滚动。

【讨论】：

此文本将与 JS 代码一起打包，从而影响打包大小。更多下载，更多浏览器解析。