架构设计

前后端完全分离
分层架构

逻辑层–数据层–工具层

通过层级的划分来进行系统的解耦，提高系统可扩展性和可维护性
模块化

达到进一步解耦的效果，让系统通过组件的拼装来完成业务的实现。

模块化的另一个好处：支持团队的并行开发，提高整个团队的效率

技术选型

HTML+CSS+JavaScript+jQuery（Ajax和DOM操作）

工具

webpack

对代码进行基于CommonJs的模块化打包集成
node.js
npm
shell脚本

用于制作自动化脚本发布工具
Charles

用于请求劫持
Git

开发安排

准备部分

基础框架的搭建
- 双平台的开发环境安装
- git仓库的规范化用法
- webpack脚手架搭建实战
通用模块
- 可高复用工具类设计与封装
- 通用模块设计与独立打包方法
- 高逼格UI开发经验与技巧

业务部分

用户模块
- 数据安全性处理方案
- 表单同步/异步验证
- 基于JavaScript的小型SPA开发
商品模块
- jQuery插件模块化改造
- 独立组建抽离技巧
- 多功能列表开发
购物车模块
- 商品状态随时验证方法
- 模块内部方法调用方式
- 非form提交时的数据验证
订单模块
- modal式组件封装思想
- 城市级联操作
- 复杂表单回填
支付模块
- 支付宝支付功能对接
- 支付状态动态监测
- 支付成功回执处理
管理后台
- 管理后天实现思路
- React框架及其组件化
- React-Router的使用
访问数据分析
- PV / UV
- 流量来源监控
- 用户特征分析
SEO优化
- SEO原理
- 关键词的设计
- SEO监控
线上部署
- 线上服务器环境搭建
- 自动化发布脚本编写
- 域名规划与nginx配置
可用性监控
- 外部监控原理
- 第三方监控的设置
- 更高级的监控方式

需求分析

架构设计与技术选型

架构设计

模块化

（了解一下这几种模块化方案，本项目采用common JS）

一个web应用的入口式网页页面，而每一个页面都有一个主模块，用来组织各个子模块的逻辑关系，从而形成一个功能完整的页面，我们可以把主模块和各个子模块放在同一层，称之为逻辑层，而逻辑层需要和后端服务进行数据交互。我们把这些数据交互的方法都划分到一个个的service模块里，我们把这些service模块又划分为一个层，称之为数据层，所有的数据交换都要由数据层来和服务器进行，不允许业务模块和服务器直接进行跨层的对接。最后我们需要划分一个最底层的层级，用来提供支持整个系统的通用工具，称之为工具层。