【整理總結】管理Angular專案的5個最好小技巧

伴隨著新功能的釋出，Web apps 的體積越發大。在公司 的過程中，這種釋出變更每天都發生。

在如此高速的釋出週期中，程式碼很快會變得笨拙。特別是基於 JavaScript 開發的專案，比如 或者 。

下面是我們在管理 Angular 專案中 5 個最好的實踐，以達到最大的可讀性，可維護性和可延伸性。

1. 準守單一職責原則

很多單應用程式核心是具有臃腫類的程式碼庫。從本質上講，這些臃腫的程式很難維護。從某種意義上講，他們很脆弱，脆弱到更改一行程式碼可能對到整個程式產生災難的影響。 能阻止這些問題。

單一職責原則意味著元件有且僅有一個功能。

使用這種方法構建應用程式會產生一個模組化框架，其中應用程式是通過這些程式碼塊串聯在一塊的。

使用這種方法能夠讓程式更易讀和更好維護。也能夠在應用中很好定位指定的功能。【相關教學推薦：、】

為了確保你的程式碼能夠滿足這種要求，你可以問自己一個問題：這程式碼是幹什麼的？如果自己的回答包含 and 這個關鍵字，那麼你需要將你的程式碼重構為單一職責的程式碼。

構建 Angular 應用程式並對其擴充套件是一種持續性的練習。在不斷的練習中，使用單一職責原則組織你的專案，將使你的應用程式乾淨，可讀和可維護。

2. 繫結程式碼到模組中

中的 是單一原則的實施。在 Angular 中，每一個模組代表一個分離的和獨立的功能。

Angular 中提供了幾種型別模組去指定如何對它們進行邏輯分組或組織。

Core

Core 模組是一個 NgModule，用來範例化應用並載入全域性使用的核心功能。

所以，任何單例服務都應該在核心模組中實現。頁頭，頁尾或者導航欄都是這種型別的模組。

每個應用程式有且只有一個範例的所有服務（單例服務）都應該在核心模組實現。例如鑑權服務或者使用者服務。

Feature

功能模組代表構建應用程式功能的程式碼。比如，在一個線上購物的應用中，我們會有將商品新增到購物車的功能和用於付款的單獨模組。

Shared

共用模組由可以被組合以建立新功能的模組組成。比如，搜尋函數在平臺中可以被用於多個功能。

以這種方式構建程式碼使事情更加容易定位並增加程式碼可重用性的機會。

3. 組織 SCSS 檔案

如果不遵循通用結構，樣式檔案很快就會變得雜亂無章。一般最佳實踐的模式 7-1 模式，該模式使用 7 個資料夾和 1 個檔案，如下所示：

• App - 專案的主要資料夾

• Abstract - 抽象部分，包含所有變數、混合和類似的元件

• Core - 包含整個站點的排版、重置和樣板程式碼

• Components - 包含要為一個網站建立的所有元件的樣式，例如按鈕、索引標籤和模式

• Layout - 包含定義站點佈局所需要的檔案，例如頁頭和頁尾

• Pages - 包含每個特定頁面樣式

• Vendors - 這個可選資料夾適合專案的使用的引導框架，比如 bootstrap

為包含該特定資料夾所有代入的在每個資料夾中新建一個 all.scss 檔案。

4. 將私有服務放到元件中

許多服務都被設計全域性範圍內執行。然後，在某些情況下，一個元件需要一個服務。傳統的編碼元件實踐推薦單一責任原則。

在這種方法下，服務和元件被編寫為單獨的專案。

但是，考慮下入鍋刪除這些服務的元件會發生什麼？你最終得到的是死程式碼，只會使得倉庫變得更加混亂。在這種情況下，最佳實踐是將服務放在元件內部。

這樣，維護元件和服務就更加容易了。

5. 簡化匯入的 Angular 最佳實踐

巢狀檔案結構本質上比將所有程式碼檔案都放在一個目錄中的平面檔案系統更加容易導航。

然而，隨著專案的方法，專案的檔案結構可能變得相當複雜。雖然這使得定位程式碼變得更加容易，但是當它在編寫匯入語句時提出了挑戰。

當一個目錄結構開始超過三個或者四個級別的時候， import 語句就會變得非常長並且難以閱讀。

解決這個問題的，我們可以在 檔案中設定路徑的別名。在這個檔案中，有個名為 compilerOptions 的陣列。這個是你在應用程式中設定路徑別名。

當程式碼編譯後，在該陣列中定義的路徑別名會替換成真實的路徑。每個路徑的值是一個包含實際路徑和別名的鍵值對物件。

構建 Angular 應用程式並對其進行擴充套件是一項持續的練習。

本文為譯文，採用意譯的形式。原文地址：

更多程式設計相關知識，請存取：！！

以上就是【整理總結】管理Angular專案的5個最好小技巧的詳細內容，更多請關注TW511.COM其它相關文章！