【編者按】本文作者Matt Carella為我們講解了如何構建一個良好的架構岸裙。除了選擇正確的工具以外来累，在組織工作流中遵循清晰整潔的原則對于我們來說是非常重要的没隘《螅或許有的人會覺得文中所說的是在DOS時代的標準的做法，不過本文對新入門的人來說或許會有幫助。如果您是一位資深的架構師阀湿，也歡迎您在評論中與我們一起分享您的心得與體會赶熟。
以下為譯文：
建立一個好的前端架構是開始開發(fā)Web應用或網(wǎng)站的一個基本步驟。良好的實踐和編碼常規(guī)是必不可少的陷嘴，但是結構呢映砖？我們?nèi)绾卧诳煽氐臅r間內(nèi)構思一個好的架構？但最重要的事情是灾挨，我們應該從哪里開始邑退？
當我開始思考這個問題時，我意識到一些事情：
我想要一個多頁面項目（一個Web應用或網(wǎng)站）劳澄；
我希望我的項目支持不同的屏幕尺寸和分辨率地技，換句話說，我希望它是響應式的秒拔；
我希望最終產(chǎn)品是可被維護的莫矗；
我希望最終產(chǎn)品性能上是出色的；
我希望可以為將來的項目重復使用相同的模板砂缩。
正確的工具
現(xiàn)在我們擁有大量很酷的工具可以用于現(xiàn)代化前端開發(fā)工作流中作谚。因此，面對第1庵芭、2點我告訴自己我需要一個基于CSS體系結構的中斷點（能夠幫我支持不同的設備和桌面的大忻美痢）。而另一個方面大量的CSS和文件可能會有點混亂（這違背了第3點）喳挑，這就是為什么我決定開始使用CSS預處理器的原因彬伦。關于第4點，答案很簡單伊诵，我決定使用Gruntjs单绑。而第5點在我看來Yeoman是一個很好的解決方案。
組織工作流
每個前端項目總是包含庫曹宴、jQuery插件和大量的JavaScript&CSS文件（或本文例子中的SCSS）以達到不同的目的和目標搂橙。使用不同的技術手段混合所有的元素，并把它們放在一起笛坦，這意味著建立一個前端工作流区转。我們會發(fā)現(xiàn)自己在管理一個巨大的、涉及不同技術的工作流版扩。這就是為什么我們需要將所有東西通過遵循一種模式或公約置入文件夾中废离，以此來保持清晰、整潔礁芦。這對我們而言是非常重要的蜻韭。
我們可以在巨大的組合中選擇分解所有基本的前端組件悼尾，如以下所示：
SCSS 文件
scripts（腳本）
views（視圖）
當然我們還可以繼續(xù)細分：
SCSS
variables（變量）
mixins（混合類）
公共部分到每一個布局
單一布局
js
庫（如：jquery、angularjs肖方、gAnalytics等等）
插件（通常為jquery插件）
控制器（我的意思是類似angularjs這樣的控制器）
在一個基于模板的架構（例如使用blade.php或jade with nodejs）我們也可以將視圖分割如下：
views
公共部分到每一個視圖
單一視圖
視圖這塊在本文不做討論闺魏，因為我假設項目里每個頁面或布局只有一個視圖（一個HTML文件）。
基于這些初步的考慮俯画，下面展示的是我的文件夾樹：
文件夾樹注解
imgs
存放所有的圖片文件：.png析桥、.jpg、.jpeg艰垂、壁紙等泡仗。
示例：icon.png、home-background.jpeg猜憎、userAvatar.jpg沮焕。
js（主文件夾）
存放.js文件。子文件夾組織情況如下：
\controllers（子文件夾）
存放angular控制器拉宗，每一個控制器都有一個與對應視圖相同的名字峦树。比如，如果home.html需要一個angular控制器旦事，你可以創(chuàng)建一個像這樣的文件：project\js\controllers\home.js魁巩。
示例：home.js、user-registration.js姐浮、user-login.js
\libs（子文件夾）
用于存放JavaScript庫谷遂，當然這里不包含插件。
示例：jquery-latest.js卖鲤、angular.js肾扰、googleAnalytics.js
\plugins（子文件夾）
插件需要依賴關系來工作，而庫不需要蛋逾，這也就是為什么這里創(chuàng)建兩個文件夾的原因集晚。
示例：jquery-fancyInput.js、restangular.js区匣、customPlugin.js偷拔、jquery-airport.js
\views（子文件夾）
存放所有表象的東西，每個文件都與對應的視圖名稱相同亏钩。例如莲绰，如果home.html需要一些效果、材料以及插件初始值姑丑，你可以創(chuàng)建一個像這樣的文件：project\js\views\home.js蛤签。
示例：home-animations.js、user-registration.js栅哀、user-login.js震肮、site-animations.js
CSS（主文件夾）
這個文件夾包含了所有從主SCSS文件中生成的CSS踏枣。例如home.scss會在該文件中生成對應的home.css文件。
\libs（子文件夾）
即使是對CSS文件钙蒙，我也會區(qū)分庫和插件，這里有些CSS庫例子间驮。
示例：_meyers-reset.scss躬厌、_normalize.scss、_animate.scss竞帽、_960gridSystem.scss
\plugins（子文件夾）
CSS文件包含于該文件夾中是使JavaScript插件工作的必備風格扛施。
示例：_jquery-fancyInput.scss、_jqueryTooltip.scss
\framework （子文件夾）
我決定在這個目錄中存放scss文件以共享到整個項目頁面屹篓，框架子文件將以下面的方式組織：
_variables.scss（項目變量聲明——colors疙渣、spacings等）
_mixins.scss（項目mixin聲明——typography、clearfix堆巧、animations等）
_forms.scss（自定義表單樣式和重置）
_input.scss（自定義輸入樣式和重置）
\layouts (子文件夾)
這是一個敏感的部分妄荔。這個目錄中的文件以這種方式組織：它們涵蓋所有屏幕分辨率、遵循移動第一的原則啦租。所以，你應該使用_all.scss聲明你自己的風格篷角。在該文件中的規(guī)格聲明是對所有屏幕尺寸和所有視圖都有效的系任。如果你希望你的網(wǎng)站適應性強的話恳蹲，就不要僅僅是重寫規(guī)則，為其他屏幕分辨率聲明它們俩滥。
文件夾組織結構如下：
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
這些文件將把握布局異常嘉蕾，被稱為mediaqueries霜旧。
請注意：這些文件共享于所有視圖（HTML頁面）。這就是為什么你需要在scss\layouts文件下創(chuàng)建一個新的文件夾以給定一個特定的風格到一個特定的頁面颁糟。
最后
我知道這不是一個普遍的解決方案航背，也許在某些情況下還會包含一些冗余，但我認為這是一個很好的起點棱貌。不管目的是什么玖媚，我的建議是根據(jù)自己的需求定制自己的體系結構或框架婚脱，特別是在不丟失用戶體驗的前提下保障性能和可維護性勺像。（編譯：陳明）
