解决marked.js库加载顺序导致的未定义错误

在使用marked.js库进行Markdown解析时，开发者可能会遇到"Uncaught ReferenceError: marked is not defined"的错误提示。这个问题通常与脚本加载顺序和执行时机有关。

问题现象

当开发者在HTML中引入marked.js库并立即尝试使用时，控制台会报出marked未定义的错误。即使去掉了defer属性，问题仍然可能存在。

根本原因

这个问题的核心在于JavaScript的加载和执行顺序：

1. 浏览器解析HTML文档时，遇到script标签会立即下载并执行（除非有defer或async属性）
2. 如果marked.js库还未加载完成就尝试使用marked对象，自然会导致未定义错误
3. 使用defer属性虽然会延迟执行，但可能导致主脚本先执行

解决方案

方法一：调整脚本顺序

将marked.js库的引用放在所有使用它的脚本之前：

<script src="marked.min.js"></script>
<script>
  // 这里可以使用marked
  console.log(marked.parse('# 标题'));
</script>

方法二：使用加载完成事件

确保库完全加载后再执行相关代码：

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

方法三：动态加载脚本

通过JavaScript动态加载库并设置回调：

function loadMarked(callback) {
  const script = document.createElement('script');
  script.src = 'marked.min.js';
  script.onload = callback;
  document.head.appendChild(script);
}

loadMarked(function() {
  console.log(marked.parse('# 标题'));
});

最佳实践建议

1. 将第三方库的引用放在head标签中或body的开始部分
2. 避免在全局作用域中直接调用库功能，使用事件监听确保库已加载
3. 考虑使用模块化开发方式（如ES6模块）管理依赖关系
4. 在复杂项目中，使用构建工具（如Webpack、Rollup）处理依赖关系

通过理解JavaScript的加载机制和采用适当的加载策略，可以有效避免这类库未定义的问题，确保marked.js等第三方库能够正常工作。