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

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

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

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

組織工作流程

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

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

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

SCSS

js

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

本文不討論視圖，因?yàn)槲壹僭O(shè)項(xiàng)目中的每個(gè)頁(yè)面或布局只有一個(gè)視圖（HTML 文件）。

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

文件夾樹注解

圖片

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

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

js（主文件夾）

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

\（子文件夾）

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

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

\libs（子文件夾）

對(duì)于存儲(chǔ)庫(kù)php網(wǎng)站前臺(tái)模板，這里當(dāng)然不包含任何插件。

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

\（子文件夾）

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

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

\（子文件夾）

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

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

CSS（主文件夾）

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

\libs（子文件夾）

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

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

\（子文件夾）

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

示例：-.scss、.scss

\（子文件夾）

我決定把這個(gè)目錄下的scss文件分享到整個(gè)項(xiàng)目頁(yè)面，框架子文件會(huì)按如下方式組織：

\（子文件夾）

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

文件夾組織如下：

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

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

最后

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