本文讲述了此项目在架构设计及技术选型的过程。核心原则就是首先按照需求制定架构方案，再通过架构方案结合市面上流行的技术方案做技术选型。

架构设计

分层架构

　　所谓分层架构，是指将功能类似，抽象级别相近的实现进行分层隔离

这样做的优点很多，首先是可以松散耦合，这个概念在软件开发领域多次提到。所谓松散耦合，可以使代码更易维护、易复用且易拓展。

常见的分层模式：MVC、MVVM

模块化

　　所谓模块化，就是解决一个复杂问题时，自顶向下逐层将系统划分成若干模块的过程。

模块化的意义同样在于解耦合，同时还保证了团队的并行开发。并行开发是软件开发团队最迫切的需求，没有之一。

模块化的方案有很多，比较常见的有AMD、CMD、CommonJS和ES6等。

  • AMD和CMD方案类似，缺点就是将业务代码和模块化代码掺杂在一起。
  • CommonJS的优点就是模块化语法比较少，并且和业务分开。
  • ES6主要是因为和低版本游览器兼容的不好。

最终架构方案

　　暂时先不画图了，其实很好理解。在我们这个项目中使用逻辑层、数据层和工具层这样的分成架构

  • 逻辑层：就是指业务逻辑，又一个主模块拆分成若干个子模块。子模块和对应的数据层进行交互
  • 数据层：数据层和服务器端进行通信。这样做的好处当然是松散耦合这个老生常谈的话题
  • 工具类：一些经常使用的方法可以从业务代码中抽离出来，实现工具类。为整个项目做支持。

技术选型

软件过程

使用敏捷开发，所谓敏捷开发，是指“以用户的需求进化为核心，进行迭代，循序渐进的方法进行软件开发”，敏捷开发应该是一种迭代的意识和方法，而不应该是概念或者工具。敏捷开发的优点是能够应对满足不断变化的需求，缺点就是对团队成员的能力要求比较高。

前后端分离方式

  • 不分离：上古时期，前后端共用一个项目目录，甚至页面内嵌js和css等。这样做本地开发环境搭建成本高、共同维护成本高、发布风险高。于是前后端分离的需求愈发迫切。
  • 部分分离：分离方案有很多，比如后端负责页面模板（JSP/Velocity和Freemarker等）想开发HTML模板时还是需要搭后端环境。更新页面模板需要后端协助，效率偏低，需要前后端同时发布。
  • 完全分离：可以看出部分分离也不尽如人意。因此完全分离应运而生。完全分离的方案大致分为两种
  • 使用velocity，发布时同步到后端。优点是实现了分离，能直接生成动态模板，并且利于SEO；但是缺点是系统复杂度高，需要前后端同时发布。
  • 纯静态HTML、完全通过接口做数据交互。优点是完全脱离后端模板、系统复杂度低；缺点是由于页面均通过js动态渲染，因此不利于SEO，优化方案是使用ServerRender或蜘蛛定制页面

框架

脚本：市面上比较流行的有JQuery、Angular、Avalon、Vue和React等

样式框架：比较流行的是CSS、Less和Sass

用户端主要原则是求稳，用户多样因此要考虑兼容性，有SEO要求，多页应用。因此采用jQuery和CSS

管理系统主要原则是求快，用户单一无需考虑兼容性，且没有SEO要求，因此这里选用比较新的技术React和Sass，同时还会用上ES6的新特性

构建工具

构建工具是编译、压缩和打包静态文件的。目前主流的可以选的有Grunt、Gulp和Webpack

Grunt因为太过庞大这里不考虑。考虑到Webpack天生支持CommonJS，故选用

版本控制

选择GIT，也没什么好选的。

发布方式

发布流程是在git服务器拉取待发布代码，编译打包。最后将生成文件发布到线上机器。这个过程可以通过shell脚本来自动完成。

域名分布：同一域名同一时间的加载数有限制。

  • html页面的域名定为www和admin
  • js+css放在静态文件s.
  • image文件放在img.

总结

以上说了那么多，只是为了讲述技术选型的过程。总结如下：

  • 软件过程：敏捷开发
  • 前后端分离方案：完全分离，纯静态方式
  • 模块化方案：CommonJS和Webpack
  • 框架选择：用户端jQuery+CSS、管理系统React+Sass
  • 版本控制：git
  • 发布过程：拉取代码->编译打包->发布到线上机器