本文作者M(jìn)att Carella為我們講解了如何構(gòu)建一個(gè)良好的架構(gòu),。除了選擇正確的工具以外，在組織工作流中遵循清晰整潔的原則對(duì)于我們來(lái)說(shuō)是非常重要的,?；蛟S有的人會(huì)覺(jué)得文中所說(shuō)的是在DOS時(shí)代的標(biāo)準(zhǔn)的做法，不過(guò)本文對(duì)新入門(mén)的人來(lái)說(shuō)或許會(huì)有幫助,。如果您是一位資深的架構(gòu)師,，也歡迎您在評(píng)論中與我們一起分享您的心得與體會(huì)。

以下為譯文：

建立一個(gè)好的前端架構(gòu)是開(kāi)始開(kāi)發(fā)Web應(yīng)用或網(wǎng)站的一個(gè)基本步驟,。良好的實(shí)踐和編碼常規(guī)是必不可少的,，但是結(jié)構(gòu)呢？我們?nèi)绾卧诳煽氐臅r(shí)間內(nèi)構(gòu)思一個(gè)好的架構(gòu),？但最重要的事情是,，我們應(yīng)該從哪里開(kāi)始？

當(dāng)我開(kāi)始思考這個(gè)問(wèn)題時(shí),，我意識(shí)到一些事情：

1. 我想要一個(gè)多頁(yè)面項(xiàng)目（一個(gè)Web應(yīng)用或網(wǎng)站）,；

2. 我希望我的項(xiàng)目支持不同的屏幕尺寸和分辨率，換句話(huà)說(shuō),，我希望它是響應(yīng)式的,；

3. 我希望最終產(chǎn)品是可被維護(hù)的；

4. 我希望最終產(chǎn)品性能上是出色的,；

5. 我希望可以為將來(lái)的項(xiàng)目重復(fù)使用相同的模板,。

正確的工具

現(xiàn)在我們擁有大量很酷的工具可以用于現(xiàn)代化前端開(kāi)發(fā)工作流中。因此,，面對(duì)第1,、2點(diǎn)我告訴自己我需要一個(gè)基于CSS體系結(jié)構(gòu)的中斷點(diǎn)（能夠幫我支持不同的設(shè)備和桌面的大小）,。而另一個(gè)方面大量的CSS和文件可能會(huì)有點(diǎn)混亂（這違背了第3點(diǎn)）,，這就是為什么我決定開(kāi)始使用CSS預(yù)處理器的原因。關(guān)于第4點(diǎn),，答案很簡(jiǎn)單,，我決定使用Gruntjs。而第5點(diǎn)在我看來(lái)Yeoman是一個(gè)很好的解決方案,。

組織工作流

每個(gè)前端項(xiàng)目總是包含庫(kù),、jQuery插件和大量的JavaScript&CSS文件（或本文例子中的SCSS）以達(dá)到不同的目的和目標(biāo)。使用不同的技術(shù)手段混合所有的元素,，并把它們放在一起,，這意味著建立一個(gè)前端工作流,。我們會(huì)發(fā)現(xiàn)自己在管理一個(gè)巨大的、涉及不同技術(shù)的工作流,。這就是為什么我們需要將所有東西通過(guò)遵循一種模式或公約置入文件夾中,，以此來(lái)保持清晰、整潔,。這對(duì)我們而言是非常重要的,。

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

• SCSS 文件

• scripts（腳本）

• views（視圖）

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

SCSS

• variables（變量）

• mixins（混合類(lèi)）

• 公共部分到每一個(gè)布局

• 單一布局

js

• 庫(kù)（如：jquery,、angularjs,、gAnalytics等等）

• 插件（通常為jquery插件）

• 控制器（我的意思是類(lèi)似angularjs這樣的控制器）

在一個(gè)基于模板的架構(gòu)（例如使用blade.php或jade with nodejs）我們也可以將視圖分割如下：

views

• 公共部分到每一個(gè)視圖

• 單一視圖

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

基于這些初步的考慮,，下面展示的是我的文件夾樹(shù)：

文件夾樹(shù)注解

imgs

存放所有的圖片文件：.png、.jpg,、.jpeg,、壁紙等。

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

js（主文件夾）

存放.js文件,。子文件夾組織情況如下：

\controllers（子文件夾）

存放angular控制器,，每一個(gè)控制器都有一個(gè)與對(duì)應(yīng)視圖相同的名字。比如,，如果home.html需要一個(gè)angular控制器,，你可以創(chuàng)建一個(gè)像這樣的文件：project\js\controllers\home.js。

示例：home.js,、user-registration.js,、user-login.js

\libs（子文件夾）

用于存放JavaScript庫(kù)，當(dāng)然這里不包含插件,。

示例：jquery-latest.js,、angular.js、googleAnalytics.js

\plugins（子文件夾）

插件需要依賴(lài)關(guān)系來(lái)工作,，而庫(kù)不需要,，這也就是為什么這里創(chuàng)建兩個(gè)文件夾的原因,。

示例：jquery-fancyInput.js,、restangular.js、customPlugin.js,、jquery-airport.js

\views（子文件夾）

存放所有表象的東西,，每個(gè)文件都與對(duì)應(yīng)的視圖名稱(chēng)相同,。例如，如果home.html需要一些效果,、材料以及插件初始值,，你可以創(chuàng)建一個(gè)像這樣的文件：project\js\views\home.js。

示例：home-animations.js,、user-registration.js,、user-login.js、site-animations.js

CSS（主文件夾）

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

\libs（子文件夾）

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

示例：_meyers-reset.scss、_normalize.scss,、_animate.scss,、_960gridSystem.scss

\plugins（子文件夾）

CSS文件包含于該文件夾中是使JavaScript插件工作的必備風(fēng)格。

示例：_jquery-fancyInput.scss,、_jqueryTooltip.scss

\framework （子文件夾）

我決定在這個(gè)目錄中存放scss文件以共享到整個(gè)項(xiàng)目頁(yè)面,，框架子文件將以下面的方式組織：

• _variables.scss（項(xiàng)目變量聲明——colors、spacings等）

• _mixins.scss（項(xiàng)目mixin聲明——typography,、clearfix,、animations等）

• _forms.scss（自定義表單樣式和重置）

• _input.scss（自定義輸入樣式和重置）

\layouts (子文件夾)

這是一個(gè)敏感的部分。這個(gè)目錄中的文件以這種方式組織：它們涵蓋所有屏幕分辨率,、遵循移動(dòng)第一的原則,。所以，你應(yīng)該使用_all.scss聲明你自己的風(fēng)格,。在該文件中的規(guī)格聲明是對(duì)所有屏幕尺寸和所有視圖都有效的,。如果你希望你的網(wǎng)站適應(yīng)性強(qiáng)的話(huà)，就不要僅僅是重寫(xiě)規(guī)則,，為其他屏幕分辨率聲明它們,。

文件夾組織結(jié)構(gòu)如下：

• phablets (481up) _phablets.scss

• tablets and small laptops (768up) _tablets.scss

• desktops (1030up) _desktop.scss

• desktops with large screens (1204up) _desktop-large.scss

• retina displays exceptions (@2x) _retina.scss

這些文件將把握布局異常，被稱(chēng)為mediaqueries,。

請(qǐng)注意：這些文件共享于所有視圖（HTML頁(yè)面）,。這就是為什么你需要在scss\layouts文件下創(chuàng)建一個(gè)新的文件夾以給定一個(gè)特定的風(fēng)格到一個(gè)特定的頁(yè)面。

最后

我知道這不是一個(gè)普遍的解決方案,，也許在某些情況下還會(huì)包含一些冗余,，但我認(rèn)為這是一個(gè)很好的起點(diǎn)。不管目的是什么,，我的建議是根據(jù)自己的需求定制自己的體系結(jié)構(gòu)或框架,，特別是在不丟失用戶(hù)體驗(yàn)的前提下保障性能和可維護(hù)性,。