Marked.js 项目中 "marked未定义" 问题的分析与解决方案

在开发过程中使用 Marked.js 库时，开发者可能会遇到一个常见的错误："Uncaught ReferenceError: marked is not defined"。这个问题通常与脚本加载顺序和执行时机有关。

问题现象

当开发者尝试在页面中同时使用 Marked.js 库和自定义脚本时，可能会出现以下情况：

1. 在 HTML 中通过 CDN 引入 Marked.js 库
2. 在自定义脚本中立即调用 marked 相关方法
3. 控制台报错提示 marked 未定义

根本原因

这个问题的核心在于 JavaScript 的加载和执行顺序。具体来说有以下几种可能：

1. 使用了 defer 属性：defer 属性会延迟脚本的执行，直到文档解析完成。如果自定义脚本没有 defer 属性，它会在 marked.js 之前执行。

2. 脚本位置不当：如果自定义脚本放在了 marked.js 引入之前，自然无法访问 marked 对象。

3. 异步加载冲突：如果页面中有其他异步加载机制，可能会影响脚本的执行顺序。

解决方案

方案一：调整脚本顺序

最简单的解决方案是确保 Marked.js 库在自定义脚本之前加载：

<script src="marked.min.js"></script>
<script>
  // 你的代码
  console.log(marked.parse('# 标题'));
</script>

方案二：正确使用 defer 属性

如果确实需要使用 defer 属性，应该确保所有依赖关系正确处理：

<script src="marked.min.js" defer></script>
<script defer>
  // 你的代码
  console.log(marked.parse('# 标题'));
</script>

方案三：使用事件监听

更可靠的方式是监听文档加载完成事件：

<script src="marked.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    console.log(marked.parse('# 标题'));
  });
</script>

最佳实践

1. 避免混用加载策略：不要在同一个页面中混用同步和异步加载方式。

2. 模块化开发：考虑使用现代 JavaScript 模块系统，可以更好地管理依赖关系。

3. 错误处理：添加适当的错误处理逻辑，防止脚本加载失败导致整个应用崩溃。

4. 性能考虑：对于大型项目，考虑使用构建工具打包所有依赖，减少 HTTP 请求数量。

通过理解 JavaScript 的加载机制和正确管理脚本依赖关系，可以有效避免 "marked未定义" 这类问题，确保 Marked.js 库能够正常工作。