建立优秀前端架构：打造稳固的Web应用基础
对于初入前端领域的开发者来说，构建一个稳健、响应式的Web应用或网站架构是至关重要的。本文将为你揭示如何建立起一个良好的前端架构，并强调选择正确工具和合理工作流的重要性。
面对多页面项目，我们希望Web应用能够支持不同的屏幕尺寸和分辨率，实现响应式设计。我们也希望最终产品具有良好的可维护性和出色的性能，并且能重复使用相同的模板为未来项目提供便利。
选择正确的工具
现代前端开发工作流中，我们有众多酷工具可以选择。对于支持不同设备和桌面大小的需求，我们选择基于CSS的断点体系结构；为了管理大量的CSS和文件，我们决定采用CSS预处理器以避免混乱；为了确保产品的性能，我们选择使用Gruntjs；为了在未来的项目中重复使用模板，Yeoman是一个很好的解决方案。
合理工作流
每个前端项目都包含众多的库、jQuery插件、JavaScript和CSS（或SCSS）文件，以达到不同的目的和目标。将这些元素混合并整合在一起，需要建立一个前端工作流。面对复杂的工作流，我们需要通过遵循一种模式或公约，将一切置入清晰的文件夹中，保持整洁。
基于一些初步考虑，我们可以展示一个文件夹树结构示例：
js主文件夹：存放.js文件，其子文件夹包括controllers、libs、plugins和views。
CSS主文件夹：包含所有从SCSS文件中生成的CSS，其子文件夹包括libs、plugins、framework和layouts。
在layouts文件夹中，我们根据屏幕尺寸和分辨率来SCSS文件，以适应不同的屏幕大小。这些文件包含媒体查询，用于适应各种设备的布局异常。
结语
这并非一个普遍适用的解决方案，可能在某些情况下会显得冗余，但我相信这是一个很好的起点。无论你的目标是什么，我的建议是根据自己的需求定制自己的架构或框架，特别是在保障性能和可维护性的不失去用户体验。
需要注意的是，以上文件夹树结构可以根据实际项目需求进行调整和优化。希望这篇文章能为你带来启发和帮助。如有更多疑问或需要深入探讨，请访问sitepoint获取更多信息或参与讨论。
（编译：陈明）