怎麼組織 Angular 專案?以下這篇文章給大家整理總結5個管理Angular專案的Top技巧,希望對大家有幫助!
伴隨著新功能的發布,Web apps
的體積越發大。在公司 DevOps 的過程中,這種發布變更每天都會發生。
在如此高速的發布週期中,程式碼很快就會變得笨拙。特別是基於 JavaScript
開發的項目,例如 NextJS 或 Angular。
以下是我們在管理 Angular
專案中 5 個最好的實踐,以達到最大的可讀性,可維護性和可擴展性。
許多單一應用核心是具有臃腫類別的程式碼庫。從本質上講,這些臃腫的程序很難維護。從某種意義上講,他們很脆弱,脆弱到更改一行程式碼可能會對整個程式產生災難的影響。 single responsibility principle 能阻止這些問題。
單一職責原則意味著元件有且僅有一個功能。
使用這種方法建立應用程式會產生一個模組化框架,其中應用程式是透過這些程式碼區塊串聯在一塊的。
使用這種方法能夠讓程式更易讀、更好地維護。也能夠在應用中很好地定位指定的功能。 【相關教學推薦:angular教學、程式設計教學】
為了確保你的程式碼能夠滿足這個要求,你可以問自己一個問題:這程式碼是做什麼的?
如果自己的答案包含 and
這個關鍵字,那麼你需要將你的程式碼重構為單一職責的程式碼。
建立 Angular
應用程式並對其擴展是一種持續性的練習。在不斷的練習中,使用單一職責原則組織你的項目,將使你的應用程式乾淨,可讀和可維護。
#Angular
中的 modules 是單一原則的實作。在 Angular
中,每一個模組代表一個分離的和獨立的功能。
Angular
中提供了幾種類型模組去指定如何對它們進行邏輯分組或組織。
Core
模組是一個 NgModule
,用來實例化應用並載入全域使用的核心功能。
所以,任何單例服務都應該在核心模組中實作。頁頭,頁尾或導覽列都是這種類型的模組。
每個應用程式擁有且只有一個實例的所有服務(單例服務)都應該在核心模組實現。例如鑑權服務或使用者服務。
功能模組代表建置應用程式功能的程式碼。例如,在一個線上購物的應用程式中,我們會有將商品加入購物車的功能和用於付款的單獨模組。
共享模組由可以被組合以建立新功能的模組組成。例如,搜尋函數在平台中可以被用於多個功能。
以這種方式建立程式碼使事情更容易定位並增加程式碼可重用性的機會。
如果不遵循通用結構,樣式檔案很快就會變得雜亂無章。一般最佳實踐的模式 7-1
模式,該模式使用 7
個資料夾和 1
個文件,如下所示:
App - 專案的主要資料夾
#Abstract - 抽象部分,包含所有變數、混合和類似的元件
Core - 包含整個網站的排版、重設和樣板程式碼
## Components - 包含要為一個網站建立的所有元件的樣式,例如按鈕、選項卡和模式
Layout - 包含定義網站佈局所需的文件,例如頁頭和頁尾
Pages - 包含每個特定頁面樣式
Vendors - 這個可選資料夾適合專案的使用的引導框架,例如bootstrap
all.scss 檔案。
import 語句就會變得非常長且難以閱讀。
tsconfig.json 檔案中配置路徑的別名。在這個檔案中,有一個名為 compilerOptions 的陣列。這個是你在應用程式中配置路徑別名。
Angular 應用程式並對其進行擴展是一項持續的練習。
本文為譯文,以意譯的形式。原文位址:更多程式相關知識,請造訪:
程式設計影片! !
以上是【整理總結】管理Angular專案的5個最好小技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章!