基於逆向工程技術之前端 Angular 程式碼至使用案例模型建構

Abstract

現代的 Angular 專案普遍採用元件化設計，導致程式碼量龐大且結構複雜，使得僅透過人工閱讀程式碼來理解系統功能與使用者需求變得極具挑戰性。 為了解決此問題，我們提出一套逆向工程方法，旨在從前端程式碼中自動化建構使用案例模型。此方法透過將 Angular 程式碼解析為抽象語法樹，進一步分析元件之間的相依性與互動邏輯，以挖掘出潛藏於程式碼中的系統行為與使用情境。 最終所產生的使用案例模型可協助開發人員、測試人員、分析師或專案使用者更有效率地掌握系統意圖，並促進系統維護、需求追蹤與功能擴充。此方法不僅提升了理解系統的效率，也為大型前端系統的分析提供了一種新方向。

Modern Angular projects typically adopt a component-based architecture, resulting in large and complex codebases. This makes it highly challenging to understand system functionality and user requirements merely by reading the source code. To address this issue, we propose a reverse engineering approach that automatically constructs use case models from frontend code. By parsing Angular code into an Abstract Syntax Tree and analyzing component dependencies and interaction logic, our method uncovers the embedded system behaviors and usage scenarios hidden in the code. The resulting use case models help developers, testers, analysts, or project users efficiently grasp the system’s intended behavior, while also facilitating system maintenance, requirement tracking, and functional expansion. This approach not only improves the efficiency of understanding the system but also offers a new direction for the analysis of large-scale frontend systems.