架构

概述

Ionic Framework 被组织成一个单仓库内的模块化、独立的包集合。该架构遵循核心与适配器模式，其中一个框架无关的核心（@ionic/core）提供了 Web 组件，然后这些 Web 组件被适配到 Angular、React 和 Vue 等特定的 JavaScript 框架。

来源： core/package.json1-119 packages/vue/package.json1-71 packages/react/package.json1-95 packages/angular/package.json1-26 packages/vue-router/package.json1-14 packages/react-router/package.json1-70 packages/angular-server/package.json1-26

核心架构

Ionic Framework 的核心（@ionic/core）是使用 Web Component 编译器 Stencil 构建的。这种架构使 Ionic 能够创建与框架无关的 UI 组件，这些组件可在多个平台和 JavaScript 框架中使用。

来源： core/stencil.config.ts1 core/package.json33-37

Web Component 系统

Ionic 组件使用 Stencil 实现为标准的 Web Components，这提供了许多优势

框架无关：组件可与任何 JavaScript 框架或不带框架的环境一起使用
面向未来：基于 Web 标准，而非特定于框架的 API
性能：高效的渲染，具有最小的运行时开销
Shadow DOM 封装：组件之间相互隔离，以获得更好的样式和行为

组件系统遵循一致的模式

来源： core/stencil.config.ts1 core/package.json33-37 core/src/components/input/input.tsx1-15 core/src/components/select/select.tsx1-5 core/src/components/textarea/textarea.tsx1-15

框架集成

Ionic 的组件被封装在特定框架的适配器中，为每种支持的框架提供了惯用的开发体验。这些适配器将 Web Component 模式转换为特定框架的模式。

Angular 集成

@ionic/angular 包提供了 Angular 指令和服务，这些指令和服务封装了核心 Web Components，实现了

Angular 模板语法和绑定
Angular 依赖注入
Angular 路由器集成
Angular 表单控件集成
通过 @ionic/angular-server 支持服务器端渲染 (SSR)

来源： packages/angular/package.json1-26 packages/angular-server/package.json1-37

React 集成

@ionic/react 包提供了 React 组件，这些组件封装了核心 Web Components，实现了

React 组件模式
React 状态管理
React props 和事件
通过 @ionic/react-router 集成 React 路由

来源： packages/react/package.json1-95 packages/react-router/package.json1-70

Vue 集成

@ionic/vue 包提供了 Vue 组件，这些组件封装了核心 Web Components，实现了

Vue 组件模式
Vue 响应式系统
Vue 模板语法
通过 @ionic/vue-router 集成 Vue 路由

来源： packages/vue/package.json1-71 packages/vue-router/package.json1-14 packages/vue/src/proxies.ts1-6

关键子系统

Ionic 的架构包含几个关键子系统，为组件提供重要的功能。

组件系统

所有 Ionic 组件都遵循一致的属性、事件、方法和样式模式

来源： core/src/components/input/input.tsx1-15 core/src/components/select/select.tsx1-5 core/src/components/textarea/textarea.tsx1-15

导航系统提供类似移动端的导航体验，包括过渡、历史管理和深层链接。

来源： packages/angular/package.json1-26 packages/react-router/package.json1-70 packages/vue-router/package.json1-14

覆盖层系统

叠加系统管理显示在主内容之上的 UI 元素，例如模态框、警报和弹出窗口

来源： core/api.txt23-52

表单控件

Ionic 提供了一套全面的表单控件，可在不同平台上一贯地运行

来源： core/src/components/input/input.tsx1-15 core/src/components/select/select.tsx1-5 core/src/components/textarea/textarea.tsx1-15 core/src/components/range/range.tsx1-2 core/src/components/toggle/toggle.tsx1

主题系统

Ionic Framework 基于 CSS 变量提供了一个强大的主题系统，可以轻松实现跨浅色和深色模式以及特定平台的样式自定义。

来源： core/package.json1-119

构建和打包系统

Ionic Framework 使用复杂的构建系统来生成优化的组件

来源： core/stencil.config.ts1 core/package.json75-104

结论

Ionic Framework 的架构围绕着一组 Web Components 构建，这些组件可适应不同的 JavaScript 框架。这种方法允许 Ionic 在提供特定框架的习惯性体验的同时，提供跨平台的统一 UI 套件。该架构促进了代码重用、一致的设计和与框架无关的组件，同时仍然与最流行的 JavaScript 框架深度集成。

架构

概述