XHTML 脚本

脚本是现代 Web 开发的骨干，它允许在网页内容中实现交互性和动态性。XHTML 结合了 HTML 的灵活性和 XML 的严格语法规则，为在页面中包含和管理脚本提供了一种结构良好的方式。本文是一个循序渐进的指南，介绍如何在 XHTML 中使用脚本，从基础知识到高级用法。

XHTML 脚本的基本结构

XHTML 中的脚本通常使用 JavaScript，并通过 <script> 标签包含。最基本的语法如下：

语法

示例

当页面加载时，这将打开一个警告框并显示“欢迎使用 XHTML 脚本！”

XHTML 中脚本的语法规则

在 XHTML 中编写脚本时，必须遵守所有这些语法规则：

• 小写标签：标签必须为小写。
• 关闭标签：所有元素必须正确关闭。
• 属性引号：属性的值必须用引号括起来。
• CDATA 区段：脚本代码应放在 CDATA 区段内，以避免与 XML 解析器发生冲突。

下一个示例显示了一个包含在 CDATA 区段内的脚本：

CDATA 区段确保脚本代码被视为字符数据，而不是被解析为 XML。

包含外部脚本

为了保持代码的整洁和可维护性，您也可以在 <script> 标签的 src 属性中引用一个外部 JavaScript 文件。

示例

假设您有一个名为 script.js 的 JavaScript 文件，其内容如下：

您可以在 XHTML 文档中如下实现此脚本：

当用户单击按钮时，这将执行 showMessage 函数并弹出一个带有消息“这是一个外部脚本！”的警告框。

Defer 和 Async 属性

可以使用 defer 和 async 属性来管理脚本的加载和运行方式。

1. Defer

defer 属性将脚本的执行推迟到 HTML 文档完全解析之后。

2. Async

async 属性使脚本的下载和执行变为异步，从而避免阻塞 HTML 解析。

示例

在此示例中，defer-script.js 将在解析文档后执行，而 async-script.js 将在下载后立即运行。

使用脚本处理事件

可以使用脚本对 Web 页面的这些事件做出反应，包括单击、表单提交和页面加载。可以将此类事件处理程序直接附加到 XHTML 元素，并使用 onclick、onsubmit 和 onload 等属性。

示例

在此示例中，当用户单击按钮时，displayMessage 函数将打开一个警告框。提交表单时，将运行 validateForm 函数，该函数检查“姓名”字段是否为空，如果为空，则会警告用户并阻止表单提交。

注意：这意味着，在 XHTML 中编写脚本时，必须更加小心，确保所有内容仍然可以被每个残疾用户访问。一些基本原则包括：

• 无 JavaScript 功能： 即使 JavaScript 被关闭或浏览器不支持，也应确保可以执行所有关键操作。
• 文本等效项： 为通过 JavaScript 生成的动态内容为屏幕阅读器提供文本等效项。
  可以使用 ARIA 角色和状态来通知用户有关动态内容的信息。

在 XHTML 文档中嵌入脚本

遵循最佳实践将提高网页的性能、可维护性和可访问性。

1. 将脚本放在 Body 的末尾
   这将缩短页面加载时间；始终建议将脚本放在 body 标签的末尾。这将确保首先加载 HTML 内容，并且用户可以在处理脚本时与页面进行交互。
2. 使用外部脚本
   外部脚本有几个优点：它们使 HTML 更简洁，提高了可维护性，并允许浏览器缓存 JavaScript 文件，这可能会缩短后续访问的加载时间。
3. 避免内联 JavaScript
   虽然直接在 XHTML 文档中包含 JavaScript 似乎很容易，但通常最好将 JavaScript 保存在单独的文件中。它可以分离关注点，从而提高可读性和可维护性。
4. 缩小 JavaScript 文件
   它是从 JavaScript 文件中删除额外的字符（例如空格和注释）的过程。这使得它们更小，从而缩短了加载时间。UglifyJS 或 Google Closure Compiler 等工具可以帮助完成这项工作。
5. 使用描述性名称
   为函数和变量使用清晰的描述性名称可以使代码更易于阅读和维护。
6. 优雅的错误处理
   始终在 JavaScript 代码中包含错误处理机制，以便优雅地管理任何意外问题。即使出现问题，这也能确保更流畅的用户体验。

使用脚本增强可访问性

确保您的 Web 内容可以被所有用户访问，包括那些可能存在残疾的用户，这一点非常重要。以下是一些增强 XHTML 脚本可访问性的技术：

• 无 JavaScript 功能
  确保在用户关闭 JavaScript 或不支持 JavaScript 时，网站的关键功能仍然可用。现在，您应该考虑以渐进增强的方法开发您的网站；首先，开发一个可以工作的 HTML 基础，然后通过使用 JavaScript 应用任何增强功能。
• 文本替代方案
  为 JavaScript 动态创建的内容提供文本替代方案。通过这种方式，屏幕阅读器可以获取此信息，从而更好地为视障人士提供服务。ARIA 角色和状态。
  ARIA 角色和状态是 Accessible Rich Internet Applications 规范的一部分，可为辅助技术提供有关动态更改的附加信息。例如，aria-live 将动态内容中的更改传达给屏幕阅读器。

XHTML 中的高级脚本技术

通过考虑一些高级技术，将您在 XHTML 中的脚本编写技能提升到新的水平。

• 使用 ES6 模块进行高级 JavaScript 模块化
  ES6 模块是一种将 JavaScript 分解为更小、更易于管理的块的方法。这可以在很多方面有所帮助，例如使您的代码可重用和可维护。
• 带有 Promises 的异步 Javascript
  Promises 为您提供了一种处理异步操作的更好的方法。与具有回调的传统方法相比，您将能够进行更简洁，更易于维护的异步代码。
• 安全处理用户输入
  对脚本的用户输入进行清理和验证，以防止出现安全漏洞，如 XSS-跨站点脚本攻击。
• 在 XHTML 中调试 JavaScript
  调试是编写可靠的 JavaScript 代码不可或缺的一部分。如今，大多数主流浏览器都内置了许多非常强大的调试工具，包括断点、检查调用堆栈和性能监控。

结论

在 XHTML 中编写脚本必须解决两个公理：严格的语法规则和 JavaScript 的动态功能。因此，最佳实践、可访问性和高级技术可以在很大程度上实现高度交互但易于维护的网页。