7. JavaScript 框架

JavaScript 框架常被公司用来构建 Web 应用程序。因此，了解流行的框架及其用例（如下所列）将有助于提升就业前景。

注意:

• 符合这些标准并不意味着要成为某个特定框架的大师并掌握其所有功能。这样做可能会受限——某个框架现在可能是最受欢迎的选择，但在五年后一切都可能改变。
• 相反，我们希望鼓励学生们对构建框架所依赖的 JavaScript 基础知识（参见JavaScript 基础知识）有扎实的理解，并学习框架使用的常见功能和模式。这种方法更具灵活性，也更能适应未来。
• 强烈建议学生们开始使用 2-3 个流行的框架来构建应用程序，这样他们就能理解它们通常的实现方式，同时也能了解它们之间的区别。
• 高级功能和/或特定于框架的功能可以在学生持续学习的过程中进行学习。

学习成果

• 了解如何开始使用框架

  • 链接到相关的 JavaScript 文件，可以是本地文件，也可以是在CDN上（通常不推荐）。

  • 使用 npm 等依赖管理器将其添加到你的项目中。

  • 安装一个 CLI 工具，如Vite，并使用它来生成一个你可以修改的、基于框架的骨架应用程序。这是最简单的入门方式。

• 典型框架的基础知识。整体架构会有所不同，但大多数框架都以某种形式包含以下内容，你应该了解它们：

  • 组件系统

    • Props（属性）。

    • 数据绑定。

    • 事件处理程序。

    • 依赖注入。

    • 组件生命周期系统。

  • 模板语言

    • 通常是特定领域语言（DSL），如 JSX 或 handlebars。

    • 包含过滤和条件渲染等功能。

  • 渲染系统（例如，虚拟 DOM 或增量 DOM）。

  • 状态管理。

  • 路由。

  • 样式系统，用于将 CSS 应用于你的组件。

  • 依赖管理。

  • 扩展系统。

• 了解使用框架的实际操作。大多数与框架相关的 CLI 或开发环境包括：

  • 一个本地测试服务器，在文件保存时自动刷新。

  • 一组适用于流行代码编辑器（例如 VSCode）的有用的扩展，提供诸如框架特定代码的 linting 和代码补全等功能。

  • 用于编写测试的集成系统（另请参阅扩展 6 测试）。

  • 便于部署到远程服务器（大多数部署工具，如Netlify和Vercel，都集成了与 GitHub 和流行框架协同工作的工具/功能）。

资源

• 学习 React，Scrimba 课程合作伙伴

• 框架主要功能

• React 入门

• Vue 入门

• Ember 入门

• Svelte 入门

• Angular 入门