前端架构技术方案怎么写前端项目架构搭建

转载

mob64ca13f83523 2024-06-13 21:09:17

文章标签 前端架构技术方案怎么写编码规范前端架构最佳实践 jquery 文章分类 架构后端开发

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

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

结果预览

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

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

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)所有这些通过媒体查询调用。