Bitwarden 贡献文档
⮐ Bitwarden Contributing Documentation我的博客联系我
  • 关于
  • 入门
    • 概述
    • 工具
    • 服务器
      • 设置指南
      • 高级服务器设置
      • 数据库
        • MSSQL
        • 实体框架
      • 事件日志
      • Ingress 隧道
      • SCIM
      • 自托管指南
      • 系统管理门户
      • 单点登录 (SSO)
        • 本地 IdP
        • Okta
      • 故障排除
      • 用户机密
      • 公共 API
    • 网页客户端
      • 网页密码库
        • WebAuthn
      • 浏览器端
        • 生物识别解锁
        • Firefox 隐私模式
      • 桌面端
        • Mac App Store Dev
        • Microsoft Store
        • Native Messaging Test Runner
        • 更新测试
      • CLI
      • 故障排除
    • 移动端
      • Android
        • F-Droid
      • iOS
      • .NET MAUI (legacy)
        • Android
        • iOS
        • watchOS
    • SDK
      • 内部 SDK
      • Secrets Manager
        • Integrations
          • Kubernetes
    • 业务 App
      • 目录连接器
        • JumpCloud
        • OpenLDAP Docker 服务器
      • Key Connector
      • Splunk App
  • 贡献
    • 贡献
    • 代码样式
      • =Android & Kotlin
      • Angular & TypeScript
      • C#
      • =Rust
      • T-SQL
      • =Swift
      • Tailwind
    • 数据库迁移
      • 进化数据库设计
    • 提交签名
    • 拉取请求
      • =贡献审查程序
      • 分支
      • 代码审查
      • UI 审查 - Chromatic
    • 无障碍
    • 依赖管理
    • 功能标记
    • 模板存储库
    • 测试
      • =数据库集成测试
      • 负载测试
      • 单元测试
        • 命名约定
        • 测试结构
    • 修改用户机密
  • 架构
    • 架构
    • 架构决策记录 (ADR)
      • 0001 - Angular Reactive Forms
      • 0002 - Public API for modules
      • 0003 - Adopt Observable Data Services for Angular
      • 0004 - Refactor State Service
      • 0005 - Refactor Api Service
      • 0006 - Clients: Use Jest Mocks
      • 0007 - Manifest V3 sync Observables
      • 0008 - Server: Adopt CQRS
      • 0009 - Composition over inheritance
      • 0010 - Angular Modules
      • 0011 - Scalable Angular Clients folder structure
      • 0012 - Angular Filename convention
      • 0013 - Avoid layered folder structure for request/response models
      • 0014 - Adopt Typescript Strict flag
      • 0015 - Short Lived Browser Services
      • 0016 - Move Decryption and Encryption to Views
      • 0017 - Use Swift to build watchOS app
      • 0018 - Feature management
      • 0019 - Adoption of Web Push
      • 0020 - Observability with OpenTelemetry
      • 0021 - Logging to Standard Output
      • =0022 - Authorization
      • =0023 - Identifying Integrated Clients
    • 移动客户端架构
      • =Android
      • =iOS
        • =推送通知故障排除提示
      • =.NET MAUI (legacy)
        • =概述
        • watchOS
    • =SDK 架构
      • =数据模型
      • =依赖
      • Password Manager
        • Web
          • =互操作性
      • =Secrets Manager
      • =服务器绑定
      • =版本控制和破坏性更改
    • 网络客户端架构
      • 概述
      • 数据模型
      • 表示层
        • Angular
        • CLI
      • =依赖注入
      • 服务层
        • Vision
        • 实现
    • 服务器架构
    • 深度剖析
      • 身份验证
        • 双重身份验证
      • =授权
      • =浏览器自动填充
        • 收集页面详细信息
        • 生成并执行填充脚本
        • 表单提交检测
        • Shadow DOM
        • =内联自动填充菜单
      • Captcha
      • =只读数据库副本
      • 事件日志
      • =FIDO2 和通行密钥
        • =凭据
        • =操作
        • =命名惯例
        • =实现
          • =提供程序
            • =浏览器扩展
          • =依赖方
            • =用于解密的通行密钥
        • =术语表
      • 推送通知
        • 移动端推送通知
        • 其他客户端推送通知
      • =SSH 密钥和代理
        • =SSH 代理
      • =状态提供程序框架
        • =派生状态
    • =安全
      • =定义
      • =原则
        • =P01 - 锁定的密码库是安全的
        • =P02 - 半受损设备密码库的有限安全性
        • =P03 - 完全损坏的系统没有安全性
        • =P04 - 控制密码库数据的访问权限
        • =P05 - 将安全漏洞的影响降至最低
      • =要求
由 GitBook 提供支持
在本页
  • HTML
  • JavaScript / TypeScript
  • 角度样式指南
  • 变量命名
  • RxJS
  • 避免订阅
  • 使用 takeUntil 取消订阅
  • 无异步订阅
  1. 贡献
  2. 代码样式

Angular & TypeScript

上一页=Android & Kotlin下一页C#

最后更新于1年前

对应的

HTML

请确保每个输入字段和按钮都有一个描述性 ID。这将方便 QA 更有效地编写测试自动化。

ID 应具有以下三个组件:

  • 组件名称:为确保 ID 的唯一性,我们在它们前面加上组件名称。用很少的改变,同时避免我们多次重复使用相同的组件名称,以保持唯一性。

  • HTML 元素:这使您可以快速了解我们正在访问的内容。

  • 可读名称:我们正在访问的内容的描述性名称。

请在组件内使用破折号,并使用下划线分隔组件。

<component name>_<html element>_<readable name>

register_button_submit
register-form_input_email

在为组件库编写组件时,有时需要确保 ID 存在,以便正确处理对其他元素的引用的可访问性。可以考虑使用自动生成的 ID,但要确保它可以被覆盖。对自动 ID 使用以下命名约定:

<component selector>-<incrementing number>

bit-input-0

请确保选择器中的单词使用破折号分隔,并且不要使用 camelCase 格式。

JavaScript / TypeScript

或者,您可以手动运行它们:

npm run prettier
npm run lint:fix

角度样式指南

变量命名

  • 对于 boolean 变量,使用基本词,不要包含前缀,如 is、has 等,除非没有它就无法传达含义,例如避免与其他属性混淆。

RxJS

避免订阅

只要有可能,我们应该避免显式订阅,而是使用模板中的 | async 管道。这将确保在没有任何样板的情况下销毁组件时清理订阅。

为此,我们可以使用 .pipe 操作和 rxjs 操作符将输入的 observable 修改为我们可以显示的内容。

研究以下示例,很容易忘记取消订阅 observable,我们也有比我们想要的更多的样板。

private destroy$ = new Subject();
public transformed = [];

observable$
  .pipe(takeUntil(this.destroy$))
  .subscribe((v) => {
    transformed = transform(v);
  });

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

// Template
<div *ngFor="let t of transformed">
  {{ t }}
</div>

现在另外研究以下示例,其中我们将订阅替换为 | async。

transformed$ = observable$.pipe(map(transform));

// Template
<div *ngFor="let t of transformed$ | async">
  {{ t }}
</div>

使用 takeUntil 取消订阅

悬空订阅是内存泄漏的常见原因。为了避免这种情况,我们使用了 prefer-takeUntil 规则。这要求任何订阅首先通过 takeUntil 操作符进行管道传输。

takeUntil 模式的主要好处是审查者可以快速确认订阅是否已清理。

private destroy = new Subject<void>();

ngOnInit() {
  this.observable$
    .pipe(takeUntil(this.destroy$))
    // This subscription will automatically be cleaned up when `this.destroy$` emits.
    .subscribe(value => console.log);
}

ngOnDestroy() {
  this.destroy.next();
  this.destroy.complete();
}

无异步订阅

异步订阅很少如您期望的那样工作。它们不是按顺序执行,而是有可能并行执行。这很容易导致意外行为。为避免这种情况,我们的代码库中禁止异步订阅,您需要选择正确的操作。

一些合适的操作符如下:

[译者注]:camelCase - 驼峰命名法。法是电脑编程时的一套命名规则。当变量名或函数名是由两个或多个单词连结在一起,利用驼峰式命名法来表示,以增加变量和函数的可读性。单词之间不以空格、连接号或下划线等隔开。第一个单词的首字母小写,第二个单词的首字母大写(小驼峰),或者每一个单词的首字母均大写(大驼峰。也被称为 Pascal 命名法)。

我们使用 和 来自动格式化和 lint 代码库。每次创建提交时,npm ci 都会自动安装 pre-commit 钩子以在您的更改上运行 Prettier 和 ESLint。

我们通常遵循 。

在编写 RxJS 代码时,我们有一些准则,这些准则是使用 和 强制执行。这些规则旨在帮助避免常见的 RxJS 陷阱,这些陷阱可能导致 Observables 无法清理或出现意外行为。

:取消之前的操作,使其适用于我们在收到新的输入后不关心旧结果的场景。

:按顺序运行异步操作,防止并行和乱序执行。如果我们关心每一个事件的处理,请使用它。

:请仔细考虑这是否适合您的用例。mergeMap 将展平可观察对象,但不关心顺序。如果排序很重要,请使用 concatMap。如果您只关心最新值,请使用 switchMap。

官方页面地址
骆峰式命名
Prettier
ESLint
Angular 样式指南
eslint-plugin-rxjs
eslint-plugin-rxjs-angular
switchMap
concatMap
mergeMap