项目技术文档：Designing with Progressive Enhancement 代码示例

1. 安装指南

由于该项目已被归档，不再维护，因此不建议在新项目中使用。如果您仍然希望使用该项目，可以按照以下步骤进行安装：

1. 克隆仓库：

   git clone https://github.com/filamentgroup/dwpe-code-examples.git
   

2. 进入项目目录：

   cd dwpe-code-examples
   

3. 安装依赖： 由于该项目依赖于 jQuery 和 EnhanceJS，您需要手动下载并引入这些库。

   • 下载 jQuery：可以从 jQuery 官网 下载最新版本的 jQuery。
   • 下载 EnhanceJS：可以从 EnhanceJS GitHub 仓库 下载 EnhanceJS。

4. 引入依赖： 将下载的 jQuery 和 EnhanceJS 文件放入项目的 lib 目录，并在 HTML 文件中引入：

   <script src="lib/jquery.min.js"></script>
   <script src="lib/enhance.js"></script>
   

2. 项目的使用说明

该项目包含了《Designing with Progressive Enhancement》一书中的代码示例。这些示例展示了如何使用 Progressive Enhancement（渐进增强）技术来构建适应不同浏览器能力的网页。

2.1 渐进增强的基本概念

渐进增强是一种设计理念，旨在确保网页在所有浏览器中都能正常工作，同时为支持高级功能的浏览器提供更好的用户体验。EnhanceJS 框架通过检测浏览器的功能，动态加载所需的 JavaScript 和 CSS 文件，从而实现渐进增强。

2.2 示例代码结构

每个示例代码通常包含以下部分：

• HTML 文件：定义页面的结构。
• CSS 文件：定义页面的样式。
• JavaScript 文件：使用 jQuery 和 EnhanceJS 实现功能增强。

2.3 运行示例

1. 打开项目中的 HTML 文件，例如 example1.html。
2. 在浏览器中打开该文件，查看示例效果。

3. 项目API使用文档

3.1 EnhanceJS API

EnhanceJS 提供了以下主要 API 用于渐进增强：

• enhance.loadStyles：根据浏览器功能加载 CSS 文件。

  enhance.loadStyles([
      "styles/basic.css",
      "styles/enhanced.css"
  ]);
  

• enhance.loadScripts：根据浏览器功能加载 JavaScript 文件。

  enhance.loadScripts([
      "scripts/basic.js",
      "scripts/enhanced.js"
  ], function() {
      // 脚本加载完成后的回调函数
  });
  

• enhance.test：测试浏览器是否支持特定功能。

  if (enhance.test("svg")) {
      // 浏览器支持 SVG
  }
  

3.2 jQuery API

项目中的示例代码使用了 jQuery 的以下常用 API：

• $ 选择器：选择 DOM 元素。

  var button = $("button.continue");
  

• html 方法：设置或获取元素的 HTML 内容。

  button.html("Next Step");
  

• on 方法：绑定事件处理函数。

  $("#button-container button").on("click", function() {
      // 处理点击事件
  });
  

4. 项目安装方式

如前所述，项目已被归档，不再维护。如果您仍然希望使用该项目，可以通过以下方式安装：

1. 克隆仓库：

   git clone https://github.com/filamentgroup/dwpe-code-examples.git
   

2. 手动下载依赖：

   • 下载 jQuery 和 EnhanceJS，并将其引入项目。

3. 运行示例：

   • 打开项目中的 HTML 文件，在浏览器中查看示例效果。

---

注意：由于该项目不再维护，建议仅用于学习和参考，不建议在新项目中使用。