盧偉冰長文解析K60至尊版 對Redmi有著里程碑式的意義
在今天的Redmi后性能時代戰略發布會結束之后，Redmi總經理盧偉冰又帶來了一篇長文，詳解了為什么 Redmi 要開啟后性能時代？為什么選擇和 MediaTek、Pixelworks 深度合作？以及后性
在大型應用中，最關鍵且最具挑戰性的方面之一就是擁有一個良好且合理的文件結構。在考慮通過微前端將代碼庫拆分成多個應用之前，可以遵循一些步驟來改善項目級別的架構，并在您考慮這一路徑時使過渡更容易。
我們的目標是應用某種模塊化方法，使代碼庫更容易理解，通過為各個功能設置邊界，減少代碼耦合和副作用。
默認情況下，當使用流行的前端框架之一搭建新項目時，組件結構是扁平的，并且沒有任何層次結構。
圖片
本示例使用的是 Vue 的默認項目結構，但 React 對如何將文件放入文件夾也沒有意見。
這個例子使用了 Vue 的默認項目結構，但 React 也沒有對如何將文件放入文件夾提出意見。
我們通過實踐發現，對于大型項目，這種架構很快就會失控。需要某種模塊化方法來輕松定位給定的文件，為各個功能設置邊界，并避免組件的緊密耦合。
將應用分解成多個功能任何大型應用都會被分解成多個獨立的功能。識別它們并不總是容易和直接的，但經過一段時間和經驗之后會變得更好。我們一起嘗試將一個流行的應用分成多個部分作為練習。
圖片
Twitter 的主頁有很多內容。時間線是頁面的核心，被許多功能環繞，如導航、推文創建部分、帶有多個子組件的側邊欄、懸浮消息組件等。
圖片
將構成這些功能的所有組件放在同一個文件夾中是不可維護的，即使使用 IDE 的快速查找選項，定位其中一個組件也會非常困難。
從經驗來看，更好和更全面的文件結構如下所示：
圖片
在項目根目錄下運行以下命令以創建不存在的文件夾。
mkdir -p src/{components,composables,config,features,layouts,lib,pages,services,stores,test,types,utils,assets}需要注意的三件重要事項：
Pages 文件夾：頁面文件夾已經在上下文和構建工具（如 webpack 或 Vite）將創建的實際塊方面進行了一些模塊化。將所有頁面放在一個地方非常有幫助，但其中的邏輯應保持最低限度。
Features 文件夾：為了更容易的維護和擴展，我們希望將大部分應用代碼放在 features 文件夾中。每個功能文件夾應包含特定功能的領域代碼。
共享內容：在一個理想的世界中，我們不應該有共享組件、composables、stores 和 services，所有內容都應該放在相應的功能文件夾中。不幸的是，在實際項目中，這無法避免，但我們應該提前計劃，并在將內容添加到這些文件夾時格外小心。
正如前面提到的，我們的大部分應用應該放在 features 文件夾中，分為多個子目錄。
圖片
上述的 index.ts 文件充當每個功能的公共 API。在從另一個領域導入內容時，應該僅通過此文件進行。這可以防止循環依賴，并且還可以更輕松地找到導入的來源。
// 不好的做法
本文鏈接：http://www.www897cc.com/showinfo-26-97295-0.html一個合理的前端應用文件結構
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 互聯網配置中心設計和實踐，你學會了嗎？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號