33 lines
1.6 KiB
Markdown
33 lines
1.6 KiB
Markdown
|
---
|
|||
|
|
name: jjb-cloud-component-best-practices
|
|||
|
|
description: 定义 JJB 云组件注意事项与最佳实践。在使用云组件时确保遵守规范、避免常见错误时查阅。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 云组件使用规范
|
|||
|
|
|
|||
|
|
## 注意事项与最佳实践
|
|||
|
|
|
|||
|
|
## 必须遵守
|
|||
|
|
|
|||
|
|
1. **组件属性**：必须严格参考 `cloud-component.d.ts` 文件，不得猜测组件属性
|
|||
|
|
2. **网络请求**：确保云组件地址可访问，建议添加错误处理
|
|||
|
|
3. **依赖管理**：正确配置组件所需的依赖，避免依赖缺失错误
|
|||
|
|
4. **样式隔离**：使用样式ID避免样式冲突，必须使用 `{cloudComponentStyleId}` 占位符
|
|||
|
|
5. **错误处理**：实现适当的错误处理机制，避免组件加载失败导致页面崩溃
|
|||
|
|
|
|||
|
|
## 最佳实践
|
|||
|
|
|
|||
|
|
1. **组件Key唯一性**：确保 `componentKey` 在页面中唯一，避免组件实例冲突
|
|||
|
|
2. **加载状态**：使用 `onLoadStart` 和 `onLoadEnd` 显示加载状态，提升用户体验
|
|||
|
|
3. **资源清理**：在组件销毁时使用 `onDestroy` 清理相关资源
|
|||
|
|
4. **缓存策略**：根据实际需求选择合适的缓存策略，平衡性能和更新及时性
|
|||
|
|
5. **版本兼容**：注意新旧版本云组件的兼容性，新版云组件支持更多特性
|
|||
|
|
|
|||
|
|
## 常见错误
|
|||
|
|
|
|||
|
|
1. **依赖缺失**：云组件中使用了未在 `dependencies` 中声明的依赖
|
|||
|
|
2. **样式冲突**：未使用 `{cloudComponentStyleId}` 占位符导致样式冲突
|
|||
|
|
3. **组件Key重复**：多个云组件实例使用相同的 `componentKey`
|
|||
|
|
4. **网络错误**：未处理云组件资源加载失败的情况
|
|||
|
|
5. **属性猜测**：未参考 `.d.ts` 文件，猜测组件属性导致使用错误
|