7. JavaScript 框架

工具

扩展模块

JavaScript 框架通常被公司用来构建 Web 应用程序。因此,学习流行框架和用例(如下所列)对于提高就业前景是有益的。

注意:

  • 符合这套标准并不意味着要成为某个特定框架的大师并学习它提供的所有内容。这样做可能会限制发展——一个框架现在可能是最受欢迎的选择,但五年后一切都会改变。
  • 相反,我们希望鼓励学生深入了解框架构建的基础 JavaScript 基础知识(参见 JavaScript 基础知识),并学习框架使用的常见功能和模式。这种方法更加灵活和面向未来。
  • 强烈建议学生使用 2 或 3 个流行框架开始构建应用程序,以便他们了解框架的一般工作方式以及它们之间的区别。
  • 高级和/或特定于框架的功能可以作为学生持续学习的一部分来学习。

学习成果

  • 了解如何开始使用框架
    • 链接到相关的 JavaScript 文件,无论是本地还是在 CDN 上(通常不推荐)。
    • 使用依赖项管理器(如 npm)将其添加到你的项目中。
    • 安装 CLI,例如 Vite,并使用它生成一个基于框架的应用程序骨架,你可以对其进行修改。这是入门最简单的方法。
  • 典型框架的基础知识。总体架构会有所不同,但大多数框架都以某种形式包含以下内容,你应该了解这些内容
    • 组件系统
      • 属性。
      • 数据绑定。
      • 事件处理程序。
      • 依赖注入。
      • 组件生命周期系统。
    • 模板语言
      • 通常是领域特定语言 (DSL),例如 JSX 或 handlebars。
      • 包括过滤和条件渲染等功能。
    • 渲染系统(例如虚拟或增量 DOM)。
    • 状态管理。
    • 路由。
    • 样式系统,用于将 CSS 应用于你的组件。
    • 依赖项管理。
    • 扩展系统。
  • 了解使用框架的实际操作。大多数与框架相关的 CLI 或开发环境都包括
    • 一个在文件保存时刷新的本地测试服务器。
    • 一组有用的流行代码编辑器扩展(例如 VSCode),提供代码整理和特定于框架的代码代码补全等功能。
    • 一个用于编写测试的集成系统(另请参见 扩展 6 测试)。
    • 促进部署到远程服务器(大多数部署工具,例如 NetlifyVercel 都集成了/提供了用于与 GitHub 和流行框架协作的工具)。

资源

上一页:6. 测试下一页:8. CSS 工具