如何构建一个良好的前端架构 清晰整洁的工作流
建立良好的前端架构是开始开发Web应用或网站的基本步骤。良好的实践和编码惯例是必不可少的，但是结构呢？怎样才能在可控的时间内构思出好的架构？但最重要的是，我们应该从哪里开始？
当我开始思考这个问题时，我意识到了一些事情:
我想要一个多页项目(一个Web应用程序或网站)；
我希望我的项目支持不同的屏幕尺寸和分辨率，换句话说，我希望它能够响应迅速；
希望最终产品能维持下去；
希望最终产品性能优异；
我希望我可以在未来的项目中重用相同的模板。
合适的工具
现在我们有很多很酷的工具，可以用在现代前端开发工作流程中。所以，面对第一点和第二点，我告诉自己，我需要一个基于CSS架构的断点(可以帮助我支持不同的设备和桌面大小)。另一方面，大量的CSS和文件可能会有点混乱(这违背了第3点)，这也是我决定开始使用CSS预处理器的原因。关于第四点，答案很简单。我决定用Gruntjs。而第五点是，约曼在我看来是一个很好的解决方案。
组织工作流程
每个前端项目总是包含库、jQuery插件和大量JavaScript&CSS文件(或者本例中的SCSS),以实现不同的目标和目的。用不同的技术手段把所有的元素混合起来放在一起，也就是建立一个前端的工作流程。我们会发现自己管理着一个涉及不同技术的庞大工作流程。这就是为什么我们需要遵循一种模式或惯例将所有东西放入文件夹，以保持其清晰整洁。这对我们来说非常重要。
我们可以选择在一个巨大的组合中分解所有基本的前端组件，如下所示:
SCSS文件
脚本(脚本)
视图(视图)
当然，我们可以继续细分:
半导体色敏传感器
变量(变量)
混合班
每种布局都通用
单一布局
射流研究…
库(如jquery、angularjs、gAnalytics等。)
插件(通常是jquery插件)
控制器(我指的是angularjs这样的控制器)
在基于模板的架构中(例如，使用blade.php或带有nodejs的jade)，我们也可以将视图划分如下:
视图
每种观点都有
单一视图
本文不讨论这个视图，因为我假设项目中的每个页面或布局只有一个视图(一个HTML文件)。
基于这些初步的考虑，下面是我的文件夹树:
文件夹树注释
imgs即时消息
存储所有图片文件:。png，。jpg，。jpeg，壁纸等。
例如:icon.png、home-background.jpeg、userAvatar.jpg。
js(个人文件夹)
商店。js文件。子文件夹组织如下:
控制器(子文件夹)
存储角度控制器，每个控制器与对应的视图同名。例如，如果home.html需要一个角度控制器，您可以创建这样一个文件:projectjscontrollershome.js
示例:home.js、user-registration.js、user-login.js
库(子文件夹)
用来存储JavaScript库，当然没有插件。
示例:jquery-latest.js、angular.js、googleAnalytics.js
插件(子文件夹)
插件需要依赖关系才能工作，但是库不需要，这就是为什么这里创建了两个文件夹。
示例:jquery-fancyInput.js、restangular.js、customPlugin.js、jquery-airport.js
视图(子文件夹)
存储外观的所有内容，每个文件都与相应的视图同名。例如，如果home.html需要一些效果、材质和插件初始值，可以创建这样一个文件:projectjsviewshome.js
示例:home-animations.js、user-registration.js、user-login.js、site-animations.js
CSS(主文件夹)
这个文件夹包含所有从主SCSS文件生成的CSS。比如home.scss会在这个文件中生成对应的home.css文件。
库(子文件夹)
即使是CSS文件，我也会区分库和插件。这里有一些CSS库的例子。
例如:_meyers-reset.scss、_normalize.scss、_animate.scss、_960gridSystem.scss
插件(子文件夹)
这个文件夹中包含CSS文件是JavaScript插件工作的必要样式。
示例:_jquery-fancyInput.scss，_jqueryTooltip.scss
框架(子文件夹)
我决定将scss文件存储在这个目录中，以便共享给整个项目页面。框架子文件将按以下方式组织:
_variables.scss(项目变量的声明-颜色、间距等。)
_mixin.scss(项目mixin声明-排版、clearfix、动画等。)
_forms.scss(自定义表单样式和重置)
_input.scss(自定义输入样式和重置)
布局(子文件夹)
这是一个敏感的部分。这个目录中的文件是这样组织的:它们覆盖了所有的屏幕分辨率，遵循移动优先的原则。所以，你要用_all.scss来声明自己的风格。该文件中的规范声明对所有屏幕尺寸和所有视图都有效。如果你想让你的网站具有适应性，不要只是重写规则并声明它们适用于其他屏幕分辨率。
文件夹组织结构如下:
平板电脑(481以上)_平板电脑.scss
平板电脑和小型笔记本电脑(768以上)_平板电脑.scss
台式机(1030以上)_desktop.scss
大屏幕台式机(1204以上)_desktop-large.scss
retina显示异常(@2x)_retina.scss
这些文件将捕获布局异常，称为mediaqueries。
请注意:这些文件在所有视图(HTML页面)中都是共享的。这就是为什么您需要在scsslayouts文件下创建一个新文件夹，以便为特定的页面赋予特定的样式。
最后
我知道这不是一个通用的解决方案，在某些情况下它可能包含一些冗余，但我认为这是一个很好的起点。不管是出于什么目的，我的建议是根据自己的需求定制自己的架构或框架，尤其是在保证性能和可维护性的同时，又不损失用户体验。
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
