[編者按] 本文作者 Matt 解釋了如何構(gòu)建一個好的架構(gòu)。除了選擇正確的工具外，在我們的組織工作流程中遵循清晰整潔的原則對我們來說非常重要?？赡苡腥藭J(rèn)為文章所說的是DOS時代的標(biāo)準(zhǔn)做法，但這篇文章可能對新手有所幫助。如果您是資深架構(gòu)師，也歡迎您在評論中與我們分享您的經(jīng)驗和心得。

構(gòu)建良好的前端架構(gòu)是開始開發(fā) Web 應(yīng)用程序或網(wǎng)站的重要一步。良好的實踐和編碼約定是必不可少的，但是結(jié)構(gòu)呢？我們?nèi)绾卧诳晒芾淼臅r間內(nèi)構(gòu)想出一個好的架構(gòu)？但最重要的是，我們應(yīng)該從哪里開始？

我想要一個多頁項目（網(wǎng)絡(luò)應(yīng)用程序或網(wǎng)站）；我希望我的項目支持不同的屏幕尺寸和分辨率，換句話說網(wǎng)站開發(fā)，我希望它具有響應(yīng)性；我希望最終產(chǎn)品是可維護(hù)的；我希望最終產(chǎn)品是高性能的；我希望將來的項目可以重復(fù)使用相同的模板。正確的工具

現(xiàn)在，我們擁有大量用于現(xiàn)代前端開發(fā)工作流程的酷工具。所以面對第 1 點和第 2 點，我告訴自己我需要一個基于 CSS 架構(gòu)的斷點（這將幫助我支持不同的設(shè)備和桌面尺寸）。另一方面，大量的 CSS 和文件可能有點令人困惑（這與第 3 點背道而馳），這就是我決定開始使用 CSS 預(yù)處理器的原因。關(guān)于第4點，答案很簡單，我決定使用。在我看來，第 5 點是一個很好的解決方案。

組織工作流程

每個前端項目總是包含庫、插件和大量 &CSS 文件（或本示例中的 SCSS），以服務(wù)于不同的目的和目標(biāo)?；旌纤性夭⑹褂貌煌募夹g(shù)手段將它們組合在一起意味著構(gòu)建前端工作流程。我們會發(fā)現(xiàn)自己在管理一個涉及不同技術(shù)的龐大工作流程。這就是為什么我們需要通過在文件夾中遵循模式或約定來保持一切清晰和整潔。這對我們來說非常重要。

我們可以選擇在一個巨大的組合中分解所有基本的前端組件，如下所示：

當(dāng)然，我們可以繼續(xù)細(xì)分：

SCSS

js

在基于模板的架構(gòu)中（例如使用.php 或jade with），我們還可以按如下方式拆分視圖：

本文不討論視圖，因為我假設(shè)項目中的每個頁面或布局只有一個視圖（HTML 文件）。

基于這些初步考慮，這是我的文件夾樹：

文件夾樹注解

圖片

存儲所有圖像文件：.png、.jpg、.jpeg、壁紙等。

示例：icon.png、home-.jpeg、.jpg。

js（主文件夾）

存儲 .js 文件。子文件夾的組織方式如下：

\（子文件夾）

存儲控制器，每個控制器都與對應(yīng)的視圖同名。例如，如果 home.html 需要一個控制器，您可以像這樣創(chuàng)建一個文件：\js\\home.js。

示例：home.js、user-.js、user-.js

\libs（子文件夾）

對于存儲庫php網(wǎng)站前臺模板，這里當(dāng)然不包含任何插件。

示例：-.js、.js、.js

\（子文件夾）

插件需要依賴才能工作，庫不需要，這就是這里創(chuàng)建兩個文件夾的原因。

示例：-.js、.js、.js、-.js

\（子文件夾）

存儲所有展示的東西php網(wǎng)站前臺模板，每個文件都和對應(yīng)的視圖同名。例如，如果 home.html 需要一些效果、材質(zhì)和插件初始值，您可以創(chuàng)建如下文件：\js\\home.js。

示例：home-.js、user-.js、user-.js、site-.js

CSS（主文件夾）

此文件夾包含從主 SCSS 文件生成的所有 CSS。例如 home.scss 會在這個文件中生成對應(yīng)的 home.css 文件。

\libs（子文件夾）

即使對于 CSS 文件，我也會區(qū)分庫和插件，這里有一些 CSS 庫的示例。

示例：- .scss、.scss、.scss、.scss

\（子文件夾）

此文件夾中包含的 CSS 文件是插件工作的基本樣式。

示例：-.scss、.scss

\（子文件夾）

我決定把這個目錄下的scss文件分享到整個項目頁面，框架子文件會按如下方式組織：

\（子文件夾）

這是一個敏感的部分。此目錄中的文件以涵蓋所有屏幕分辨率并遵循移動優(yōu)先原則的方式組織。因此，您應(yīng)該使用 _all.scss 聲明您自己的樣式。此文件中的規(guī)范聲明適用于所有屏幕尺寸和所有視圖。如果您希望您的網(wǎng)站具有適應(yīng)性，不要只是重寫規(guī)則并聲明它們用于其他屏幕分辨率。

文件夾組織如下：

這些文件將掌握布局異常并被調(diào)用。

注意：這些文件在所有視圖（HTML 頁面）之間共享。這就是為什么您需要在 scss\ 下創(chuàng)建一個新文件夾來為特定頁面賦予特定樣式的原因。

最后

我知道這不是一個通用的解決方案，在某些情況下可能會有一些冗余網(wǎng)站制作，但我認(rèn)為這是一個很好的起點。無論目的是什么，我的建議是根據(jù)您的需求定制您自己的架構(gòu)或框架，特別是在不損失用戶體驗的情況下保證性能和可維護(hù)性。（編譯：??陳明）