前言
在 web 应用中，以 markdown 格式来展示文本已经是习以为常的做法之一。而在 ember.js 中，使用 ember-cli-markdown-file-contents 插件可以轻松地实现这个功能。
但是该插件在加载远程 markdown 文件时可能存在一些性能问题，对于一些大型的文档网站而言，这是不可接受的。为了优化这些场景下的性能，我们可以使用 ember-fr-markdown-file 这个 npm 包来实现更优秀的加载体验。
安装
使用以下命令安装 ember-fr-markdown-file 包：
--- ------- ---------- ----------------------
使用
在模板中使用
要在模板中使用 ember-fr-markdown-file，我们需要将 markdown-file 组件导入：
--------------- ------------------
path 属性指定了 markdown 文件的位置。相对于应用根目录的位置（类似于 app/templates）。在该位置下，我们可以创建任意数量的 markdown 文件，并在需要展示的位置指定路径即可。
markdown 文件的加载和缓存
ember-fr-markdown-file 会自动缓存已经加载的 markdown 文件，以减少每次文件加载的性能消耗。
如果你需要强制重新加载 markdown 文件，可以通过传递 reload=true 属性的方式来实现：
--------------- ---------------- -------------
使用 Yaml Front Matter
如果在 markdown 文件开头添加了 Yaml Front Matter，ember-fr-markdown-file 会自动提取该信息并将其注入到组件的 frontMatter 属性中。以下是一个例子：
--- ------ --- ---- ----- ----- ------------ --- - ---- -- -- ---- ----
在程序中，我们可以像这样访问 frontMatter 对象：
------------------------------ ---------------------------
文件不存在的错误处理
当指定的 markdown 文件不存在时，ember-fr-markdown-file 组件会自动显示一个简单的错误消息。如果我们想要自定义这个消息，可以将 not-found 描述符传递给组件，比如：
--------------- ------------------ -----------------------------
-- ----------------------------- ------- ---------------- -------------- - ------ ---- ------------ ----- -
在程序中，我们可以像这样使用：
---- ------------------------ --------------- ---------------------- ------------------ ----------------------------- ------
其他
为了更好的设计 ember-fr-markdown-file 的界面，我们可以使用以下组件：
markdown-file-content表示已经解析的 markdown 文件内容，可以获得 markdown 文件内容的 HTML 格式。markdown-file-loading表示正在加载中的 UI 界面。markdown-file-error表示 markdown 文件加载失败后的错误信息。
以下是一个完整的代码示例：
----- --- ----- ------------
---------------------------------- -------- -- ---------------------------------
------ -- --- ----- -----------
---- ----------------------
-------------------------
------
------ -- --- ----- ----------
------------------------------ -- ---- -------- ---------------------------------
-------结论
通过使用 ember-fr-markdown-file 这个 npm 包，我们可以轻松优化并改善 Web 应用中的加载性能体验，以及在展示 markdown 文件时获得更强大的功能支持。同时，优秀的组件化设计也让我们能够自由定制界面，具备更好的可扩展性。
参考资料：
- ember-fr-markdown-file GitHub 仓库
- Yaml Front Matter
- Creating a markdown component in ember.js
- Introduce frontend-markdown-files-addon
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066e18a563576b7b1ecb4d