发布日期 » 2018年4月29日 星期日

版权声明 » 帅华君原创文章,未经允许不得转载。

前端架构·译文

建立一个好的前端架构是开始开发web应用程序或网站的基本步骤。好的实践和编码约定是必不可少的,但是结构呢?我们怎样才能构思出一种及时可维护的良好架构?但最重要的是,我们应该从哪里开始?

当我开始思考这个问题的时候,我意识到我需要一些东西:

  • 我想要一个多页面项目(一个web应用程序或网站)。
  • 我希望我的项目能够支持不同的屏幕大小和分辨率,换句话说,我希望它是响应式的。
  • 我希望最终产品是可维护的。
  • 我想要最后的产品是高性能的。
  • 我希望在将来的项目中重用相同的模板。

选择合适的工具

现在我们有很多很酷的工具可以帮助我们在现代前端开发工作流。因此,在面对第1和第2点时,我告诉自己,我需要一个基于断点的CSS架构,它可以帮助我支持不同的设备和桌面大小。另一方面,我也知道如此大量的CSS和文件可能有点混乱(与第3点不兼容),这就是为什么我决定开始使用CSS预处理器(在我的例子中是带有Compass的Sass)。

那么点4呢?答案很简单:我决定使用Gruntjs。最后,点5呢?即使在这种情况下,答案就是: Yeoman,我认为最好的解决方案。

组织工作流

每个前端项目总是包括库、jQuery插件和许多JavaScript和CSS文件(在本例中是SCSS文件),以达到不同的目标。混合所有这些元素意味着需要使用不同的技术,并且,将它们组合在一起意味着需要建立一个好的前端工作流。我们会发现自己不得不管理一个涉及不同技术的庞大工作流程。这就是为什么要把所有的东西都组织在文件夹里,遵循一种模式或惯例,以保持事物的清晰和整洁,这是非常重要的。

我们可以选择将所有基本的前端组件拆分为宏组,例如:

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

在基于模板的体系结构中(例如使用 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\homescss\layout\userLogin

2、 将上面列出的相同文件放入这些文件夹中: _all.scss , _phablets.scss , _tablets.scss , _desktops.scss , _desktop-large.scss_retina.scss

综上所述

综上所述只需一个Yeoman生成器,用来搭建一个响应性的多页面web应用程序或网站。我还决定将一些Grunt任务包括在缩小、混淆和Sass编译上。您可以在这里查看 https://github.com/mcarella/wormhole ,或者直接从NPM下载它: https://www.npmjs.org/package/generator-wormhole

我知道这不是一个通用的解决方案,也许你觉得它看起来有一些冗余,我知道它不适合所有情况,但我认为这是一个很好的起点。你可以用不同的方式添加你想要或组织你的scss的繁重任务,使它变得更轻或更胖。无论您的目标是什么,我通常建议人们根据自己的需要来构建自己的架构或框架,特别注意性能和可维护性,而不会忽略用户体验。