建立一个好的前端架构是开始开发web应用程序或网站的基本步骤。好的实践和编码约定是必不可少的,但是结构呢?我们怎样才能构思出一种及时可维护的良好架构?但最重要的是,我们应该从哪里开始?
当我开始思考这个问题的时候,我意识到我需要一些东西:
- 我想要一个多页面项目(一个web应用程序或网站)。
- 我希望我的项目能够支持不同的屏幕大小和分辨率,换句话说,我希望它是响应式的。
- 我希望最终产品是可维护的。
- 我想要最后的产品是高性能的。
- 我希望在将来的项目中重用相同的模板。
选择合适的工具
现在我们有很多很酷的工具可以帮助我们在现代前端开发工作流。因此,在面对第1和第2点时,我告诉自己,我需要一个基于断点的CSS架构,它可以帮助我支持不同的设备和桌面大小。另一方面,我也知道如此大量的CSS和文件可能有点混乱(与第3点不兼容),这就是为什么我决定开始使用CSS预处理器(在我的例子中是带有Compass的Sass)。
那么点4呢?答案很简单:我决定使用Gruntjs。最后,点5呢?即使在这种情况下,答案就是: Yeoman,我认为最好的解决方案。
组织工作流
每个前端项目总是包括库、jQuery插件和许多JavaScript和CSS文件(在本例中是SCSS文件),以达到不同的目标。混合所有这些元素意味着需要使用不同的技术,并且,将它们组合在一起意味着需要建立一个好的前端工作流。我们会发现自己不得不管理一个涉及不同技术的庞大工作流程。这就是为什么要把所有的东西都组织在文件夹里,遵循一种模式或惯例,以保持事物的清晰和整洁,这是非常重要的。
我们可以选择将所有基本的前端组件拆分为宏组,例如:
我们能把它们分成更小的组吗?当然!我们可以:
- SCSS
- variables
- mixins
- common parts to every layout
- single layouts
- js
- libraries (such as jquery, angularjs, gAnalytics and so on…)
- plugins (typically jquery plugins)
- controllers (I mean controllers such as angularjs controllers)
在基于模板的体系结构中(例如使用 blade.php 或 nodejs 的 pug ), 我们也可以拆分视图如下:
- views
- common parts to every view(公共视图)
- single views(单视图)
但是我在本文中没有讨论这种有公共视图的情况,因为我假设在我的项目中,每个页面或布局只有一个视图(一个HTML文件)。
从以上所有这些初步考量为基准,这就是我决定组织架构的方式,以下是我的文件夹树:
project \css \imgs \js \controllers pageOne.js pageTwo.js \libs angular.js jquery.js analytics.js \plugins jquery.tooltip.js textResize.js formValidation.js \views pageOne.js pageTwo.js \scss \framework _core.scss _forms.scss _input.scss _mixins.scss _variables.scss \layouts _all.scss _phablets.scss _tablets.scss _desktop.scss _desktop-large.scss _retina.scss \pageOne _all.scss _phablets.scss _tablets.scss _desktop.scss _desktop-large.scss _retina.scss \pageTwo _all.scss _phablets.scss _tablets.scss _desktop.scss _desktop-large.scss _retina.scss \libs _animate.scss _normalize.scss _reset.scss \plugins _jquery.tooltip.scss _jquery.fancyInput.scss
目录解构说明
imgs
我决定把所有的图像文件都放在这里:.png, .jpg, .jpeg,壁纸等等。
Examples: icon.png, home-background.jpeg, userAvatar.jpg
js (mainfolder)
我决定把所有的.js文件放在这里,在子文件夹中组织如下:
js\controllers
这是 angular controllers 的文件夹,每个都有对应到 view 的名称。例如,如果你的 home.html 需要一个 angular controller,你应该创建一个这样的文件: project\js\controllers\home.js 。
Examples:Examples: home.js, user-registration.js, user-login.js
js\libs
我为javascript库创建了这个文件夹。当我说库的时候,我指的不是插件,这就是为什么我决定区分第一个(libs)和第二个(plugins),创建两个不同的文件夹。
Examples: jquery-latest.js, angular.js, googleAnalytics.js
js\plugins
插件往往需要依赖于库才能工作,而库则不需要。这就是为什么我创建了一个不同的文件夹。
Examples: jquery-fancyInput.js, restangular.js, customPlugin.js, jquery-airport.js
js\views
我为所有的为了表现性的东西创建了这个文件夹。每个文件必须具有对应视图的相同名称。比如你的 home.html 需要一些效果和插件初始化,你应该创建一个这样的文件: project\js\views\home.js ,它有自己的 document ready 。
Examples: home-animations.js, user-registration.js,user-login.js, site-animations.js
css
这个文件夹包含所有从 scss 生成的 css 文件,比如说 home.scss 将会在这个文件夹中生成 home.css 文件。
css\libs
即使是CSS文件,我也区分了库和插件。下面是一些CSS库示例。
Examples: _meyers-reset.scss, _normalize.scss,_animate.scss, _960gridSystem.scss
css\plugins
该文件夹中包含的CSS文件是使JavaScript插件工作的必要样式。
Examples: _jquery-fancyInput.scss, _jqueryTooltip.scss
css\framework
我希望将这些scss文件中的样式作为全局样式,共享到给整个项目全部页面。
framework 子目录的会像下面这样组织:
- __variables.scss_ (项目变量声明:颜色、间距等等)
- __mixins.scss_ (项目mixin声明:排版、clearfix、动画等等)
- __forms.scss_ (定制表单样式 & 重置)
- __input.scss_ (自定义输入样式 & 重置)
css\layouts
这是响应部分。按照移动优先原则,该目录中的文件以这种方式组织,它们覆盖所有屏幕分辨率。因此,您应该开始使用 __all.scss_ 文件声明自己的样式。该文件中声明的规则适用于所有屏幕大小和所有视图。如果你想让你的网站有适应性,而不是仅仅重写规则,并声明它们为任何其他屏幕分辨率。
该文件夹组织如下:
- 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_
这些文件将处理各式各样的设备尺寸下的页面布局,这要感谢CSS3的媒介查询新特性。
注意:这些文件在所有视图(HTML页面)中共享。这就是为什么您需要在 scss\layout 下创建一个新的文件夹,以便将特定的样式提供给特定的页面。
举个例子,如果您想设计一个响应式的 home 页面和一个响应式的 user-login 页面,可以这样:
1、 在 scss\layouts 下创建一个新的文件夹,并让该文件夹的名称与您想要进行自适应的视图具有相同的名称(比如:home 和 userLogin),所以最终的文件夹路径应该是:scss\layout\home 和 scss\layout\userLogin 。
2、 将上面列出的相同文件放入这些文件夹中: _all.scss_ , __phablets.scss , _tablets.scss_ , __desktops.scss , _desktop-large.scss_ 和 __retina.scss 。
综上所述
综上所述只需一个Yeoman生成器,用来搭建一个响应性的多页面web应用程序或网站。我还决定将一些Grunt任务包括在缩小、混淆和Sass编译上。您可以在这里查看 github.com/mcarella/wo… ,或者直接从NPM下载它: www.npmjs.org/package/gen… 。
我知道这不是一个通用的解决方案,也许你觉得它看起来有一些冗余,我知道它不适合所有情况,但我认为这是一个很好的起点。你可以用不同的方式添加你想要或组织你的scss的繁重任务,使它变得更轻或更胖。无论您的目标是什么,我通常建议人们根据自己的需要来构建自己的架构或框架,特别注意性能和可维护性,而不会忽略用户体验。