前端开发规范之项目架构

快来打我* 2022-08-06 07:08 195阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

翻译自：[www.sitepoint.com][]

翻译人员：[前端开发whqet][whqet]，意译为主，不当之处敬请指正。

译者说：临近期末，大部分的基础教学内容已经讲解完毕，在进行比较大型的项目训练之前，如果能让学生了解甚至遵循一些前端开发的编码规范将会是一件非常有意义的事情。因此，本博客准备于近期整理一个编码规范与最佳实践的系列文章，包括html、css、javascript、jquery、php等，希望能对大家有所帮助，本文翻译的项目文件架构。

\------------------------------------------------------------

\--[我参加了博客之星评选，如果你喜欢我的博客，求投票，您的支持是我的动力之源][Link 1]，[走起！][Link 1]

\-----------------------------------------------------------------------------------------

## 结果预览 ##

首先来看最终的文档架构，然后我们来简译一下。

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

## 引子 ##

我们知道，好的编码约定和最佳实践非常重要，但是文档架构呢?建立一个好的文档架构是开始一个网站或者APP的基础，我们如何建立一个结构清晰、便于维护的文档架构呢？

首先明确一下几个问题，我们的目标：

1）需要一个多页面项目（网站或者APP）

2）需要项目支持多屏幕尺寸，换句话说，需要实现响应式布局

3）最终产品易维护

4）最终产品性能良好

5）未来项目可套用该模板

在现代前端开发流程中，有越来越多的工具可以帮助我们。对于第1点和第2点，我们需要一个支持断点的CSS架构，以便自适应不同的设备。另外越来越多的CSS会弄得一团糟（与第3点冲突），因此我选择一个CSS预处理器搞定这些事情（我这里使用SASS的Compass）。对于第4点，答案很简单，选用Gruntjs，对于第5点，我认为Yeoman是最佳答案。

## 组织工作流 ##

每一个前端都会包含类库、jQuery插件以及很多的各种各样目的的JS、CSS文件，有效管理不同的技术、不同文档集中起来运行良好确实需要一个很好的工作流。因此，我们需要遵循开发模式、开发约定，文件组织良好，以保持所有的文档结构清晰、便于管理。

我们把项目所有的文档分成几个大的分组：

*  SCSS files
 *  scripts
 *  views

当然，我们还可以继续分组：

*  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)

*  views
    
     *  common parts to every view
     *  single views

然后，我们就形成了上面最终的文档架构。

## 文件夹阐释 ##

imgs：里面放所有的图片，不同格式的图片。

js：里面放所有的js文件，可以包括几个子文件夹。

controllers：用于存放“angular controllers”，拥有和视图（views）相同的文件名称，例如home.html需要一个控制器，你应该建立一个project\\js\\controllers\\home.js

libs：这里放类库（不是插件）,例如jQuery-latest.js、angular.js、googleAnalytics.js等

plugins：插件，例如jquery-fancyInput.js、restangular.js、customPlugins.js等

views：视图，每个显示文件对应一个视图，例如你的home.html需要一些效果，在views/home.js实现。

css：css文件夹从scss文件夹同步生成而来，home.scss将生成home.css

libs：CSS里面也把类库和插件分开，类库文件例如\_meyers-reset.scss, \_normalize.scss,\_animate.scss, \_960gridSystem.scss

plugins:包含jQuery插件运行必须的css文件，例如\_jquery-fancyInput.scss, \_jqueryTooltip.scss

framework：我决定把所有的跨页面scss文件放这里，例如\_variables.scss、\_mixins.scss、\_forms.scss等

layouts:这里实现响应式布局，遵循“移动优先”原则实现跨屏幕解决方案。\_all.scss中的文件对所有屏幕有限，如果需要适应性我们可以在其他屏幕方案中重写它。\_phablets.scss(481以上)、\_tablets.scss（768以上）、\_desktop.scss(1030以上)、\_desktop-large.scss(1204以上)、\_retina.scss(@2x)所有这些通过媒体查询调用。

## 结论 ##

最后，我利用一个Yeoman生成器搭建该项目，同时包含一些Grunt任务实现压缩、排错、SASS编译等功能。到[github][]查详或[NPM][]下载。

这个不是标准的前端架构方案，可能会给您的项目带来冗余，可能不适用您的项目，但是这是一个好的起点，希望可以为大家自己的前端架构带来灵感。

感谢您耐心读完，如果对您有帮助，[请支持我][Link 1]！

\----------------------------------------------------------

[前端开发whqet][whqet 1]，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。  
\---------------------------------------------------------------------------------------------------------

[www.sitepoint.com]: http://www.sitepoint.com/good-front-end-architecture/
[whqet]: http://http//blog.csdn.net/whqet
[Link 1]: http://vote.blog.csdn.net/blogstar2014/details?username=whqet#content
[github]: https://github.com/mcarella/wormhole
[NPM]: https://www.npmjs.org/package/generator-wormhole
[whqet 1]: http://blog.csdn.net/whqet