架构设计(以电商为例)

1. 分层架构

定义: 把功能相似, 抽象级别相近的实现进行分层隔离, 更偏重于整个系统上纵向层级的划分
优势: 松散耦合(易维护, 易复用, 易扩展)
常见分层方式: MVC, MVVM

2. 模块化

定义: 解决一个复杂问题时, 自顶向下逐层把系统划分成若干模块的过程, 更偏向于横向功能的拆分
意义: 解耦, 可并行开发
模块化方案: AMD(requireJS), CMD(seaJS), CommonJS, ES6

3. 技术选型

软件过程 - 敏捷开发
- 定义: 以用户的需求进化为核心, 采用迭代, 循序渐进的方法进行软件开发, 是一种迭代的意识和方法, 而不是概念和工具
- 优点: 能够应对满足不断变化的需求
- 不足: 对团队成员的能力要求比较高
前后端分离情况
- 前后端不分离
  - 定义: 前后端共用同一项目目录, 甚至页面内嵌js,css
  - 缺点:
    - 本地开发环境搭建成本高
    - 共同维护成本高
    - 发布风险高
- 前后端部分分离
  - 定义: 后端负责页面的模板(jsp/Velocity/Freemarker)
  - 缺点:
    - 本地开发环境搭建成本高
    - 更新页面模板仍需后端协助, 效率不够高
    - 需要前后端同时发布
- 前后端分离-1
  - 定义: velocity, 发布的时候同步到后端
  - 优点: 完全分离, 能直接生成动态的模板, 利于SEO
  - 缺点: 系统复杂度高, 需要前后端同时发布
- 前后端分离-2
  - 定义: 纯静态html, 完全通过接口做数据交互
  - 优点: 完全脱离后端模板, 系统复杂度低
  - 缺点: 不太利于SEO
  - 优化方案: Server Render / 蜘蛛定制页面
构建工具
- Grunt: 庞大复杂
- Gulp: 不错...
- Webpack: 天生支持commonjs, 而且有使用经验 - OK
框架
- js: jQuery, Angular, Avalon, Vue, React
- css: css, less, sass
- 用户端: 求稳, 用户类型多样, 有SEO要求, 多页应用 -- jQuery/css
- 管理系统: 求快, 用户类型单一, 无SEO要求 -- React/sass
版本控制 - git
发布方式
- 发布过程: 从git上拉取待发布代码 -> 编译打包 -> 发布到线上机器
- 域名分布:
  - html: www./admin.
  - js/css: s.
  - image: img.