最近哥們兒我接手了一個官網的前端項目，雖説是官網，但它是個 Web 應用而非營銷網站，所以還是有一定複雜度在的。

這幾天是邊往死裏摁🐞邊熟悉代碼邏輯，沒想到這是個燙手🍠，前人留了一堆坑給我——令我覺得他撐死了也就中級水平，不能再高了……🙁☹️🙂‍↔️

是不以為我看到這💩山會苦惱不堪，心中如那呼倫貝爾大草原般萬🐎奔騰？

不！你想錯了！！我興奮得很呢！！！

別誤會，別誤會！我不是那個什麼「抖艾姆」哈！

而是，因為這類項目就像試金石一樣，可以證明我是金子，是寶藏，是那唯一的神話——畢竟資深「前端鏟💩官」來着！☺️😊🤪

好了好了，「前情提要」就此打住，我們進入正題——

這個官網項目是基於 Next.js 開發的，目錄結構就是隨處可見的那種，對開發與維護沒啥約束性。

項目的核心問題則是幾乎沒有抽象，代碼如未經整理的機房中的線纜，可複用性、可維護性等極差。

你説什麼？健壯性？？那是啥？？？

我寫過一篇名為《聊聊中後台前端應用：目錄結構劃分模式》的文章，包括這個項目在內的絕大部分前端項目的目錄結構都是文中提到的「野生」模式——助紂為虐的幫兇！

正如一開始説的，這項目是個 Web 應用，那就代表很大程度上能進行領域建模，也明示了我要剷平這座💩山的話，第一步要用「模塊化」模式調整目錄結構，如同每年的公司組織架構變動。

因 Next.js 項目機制的限制，需用 app 文件夾替代 entry 文件夾。

理想狀態下，除了 app 文件夾，shared 和 domain 這倆文件夾是不受 Next.js 機制干涉的，並且它們承擔了整個應用的絕大部分邏輯——隨時準備脱離 Next.js 的魔爪！😜😜😜

理想很豐滿，但現實很💀感。

由於這項目身患頑疾，無法一步到位，今天重構之後不得不先留下些殘黨餘孽遊蕩在外，待我過幾天將它們逐一殲滅！

這一看，清爽多了，美滋滋～😄😁😆

本文其他閲讀地址：小紅書｜微信公眾號