---
# System prepended metadata

title: Coding 風格
tags: [Development]

---

Coding 風格
===
紀錄團隊的開發風格
> 開發上需要配合香港的需求，一步一步增加功能，目前沒考慮統一風格，所以專案上較沒一致性，實驗性質開發

1. 變數採駝峰式命名，常數則全大寫
2. 無論是service、directive或其他元件都視為class component，需加入四段註解，增加程式可讀性
    * property
    * constructor
    * hook
    * method

3. RxJs訂閱後處理，需用新的做法，一個object去接所有回傳值
    ```typescript
    this.eCContextService.natureService.getNature().subscribe(
        { 
            next: () => {},
            error:()=>{},
            complete:()=>{}
        }
    );
    ```
4. 開發模組以功能面切component
5. 不需要注入到全域的Service記得移除providedIn root屬性，
    ```typescript
    @Injectable({
      providedIn: 'root'
    })
    ```
    
6. CSS不要使用!important強制overwrite，因為!important優先權最高，會增加之後trace code難度
    :::info
    可以自己寫一個延伸的class，在既有基礎上去擴充
    :::
7. 表單Formgroup可以使用FormBuilder建立實體，後面的JSON物件會比較好看
    ```typescript!
    this.editForm = this.fb.group({
        // 編號
        code: '',
        // 上下架
        active: true,
    });
    ```
8. 使用notificationService做訊息提示，別用primeng的messageService，很醜
9. 使用ecContextService做統一的API方法接口
10. 發送接收API時需加loader去block頁面避免使用者重複發送，目前手動加，之後規範統一後統一用interceptor - 已經改為全 interceptor 控制
11. loading效果目前已全面使用loader interceptor處理，錯誤處理也有相對應的error interceptor在處理

12. TS 的程式碼排版預設使用 prettier，設定上只調整了如下圖
    ![](https://i.imgur.com/Scx1yjR.png)
    
13. 開一個新的 module如果那個模組裡面要開 components要做一個 components 資料夾

###### tags: `Development`