JavaScript Prototype

JavaScript - 使用外部脚本和库

理解如何合并和利用外部 JavaScript 代码对于现代开发至关重要。库可以提供专业功能、实用工具，甚至是完整的框架。

引入外部脚本

要使用外部 JavaScript 文件或托管在内容分发网络（Content Delivery Network，简称 CDN）上的库，您可以使用 <script> 标签及其 src 属性将其包含在 HTML 页面中：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <!-- 示例：从 CDN 引入库 -->
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/some-library/1.0.0/some-library.min.js"></script> -->
  <!-- 示例：引入本地脚本文件 -->
  <script src="path/to/your/script.js" defer></script>
 </head>
 <body>
  <p>Page content...</p>
  <!-- 通常的做法是将脚本放在 body 标签结束前 -->
  <!-- 或在 head 中使用 'defer' 属性实现非阻塞加载 -->
 </body>
</html>

defer 属性确保脚本在 HTML 完全解析后执行，但在 DOMContentLoaded 事件之前。async 属性允许脚本异步下载并在准备就绪时立即执行，可能在 HTML 完全解析之前。

JavaScript 库的作用

JavaScript 库是预先编写好的 JavaScript 代码集合，提供了广泛的功能，可以简化复杂的任务并加速开发。它们可以帮助处理：

• **DOM 操作与事件：**虽然现代 JavaScript 拥有强大的内置 DOM API，但历史上的库为这些任务提供了简洁的语法。如今，您可能会选择一个库来处理复杂的 UI 组件。
• **实用函数：**像 Lodash 或 Underscore 这样的库提供了用于数组操作、对象操作、日期处理等的实用函数。
• **UI 框架：**像 React、Vue 或 Angular 这样的库提供了全面的工具，用于通过基于组件的架构构建交互式用户界面。
• **数据可视化：**像 D3.js 或 Chart.js 这样的库有助于创建交互式图表和图形。

当原生 JavaScript（纯标准 JavaScript，不使用外部库）可以高效地完成任务时，通常更倾向于使用原生 JavaScript，以减少依赖并提高性能。

在 DOM 准备就绪后运行代码

为确保您的 JavaScript 代码与已加载和解析的 HTML 元素进行交互，您通常应该等待 DOM 准备就绪。现代的方法是使用 DOMContentLoaded 事件：

document.addEventListener('DOMContentLoaded', function() {
    // 你的与 DOM 交互的代码可以在这里
    const heading = document.querySelector('h1');
    if (heading) {
        heading.textContent = 'DOM is Ready!';
    }
});

或者，将您的 <script> 标签放在靠近 </body> 闭合标签之前的位置通常也能达到类似效果，因为在脚本执行时 HTML 已经解析完毕。

概念示例：使用库功能

假设您已经引入了一个提供 utils.formatDate(dateObject) 函数的实用库。

您可以像这样使用它：

// 假设 'utils' 库已加载并提供了 'formatDate'
document.addEventListener('DOMContentLoaded', function() {
  const today = new Date();
  // const formattedDate = utils.formatDate(today); // 假设的库函数
  // 对于内置的日期格式化方法，可以使用 toLocaleDateString():
  const formattedDate = today.toLocaleDateString('en-US', {
    year: 'numeric', month: 'long', day: 'numeric'
  });

  const dateDisplayElement = document.getElementById('date-display');
  if (dateDisplayElement) {
    dateDisplayElement.textContent = `Today's date: ${formattedDate}`;
  }
});

此示例说明了库如何提供即用的函数。请始终查阅库的文档以获取具体的使用说明。许多常见任务也可以通过内置的 JavaScript 特性实现。