当我们开始一个前端项目时，可以从下面几点考虑。
- 整体架构
- 业务功能实现
- 系统整体可用性，可维护性，可扩展性
- 前后端分离
- API接口交互
- 前后端分离
- 分层架构设计
- 定义：把功能相似，抽象级别相近的实现进行分层隔离
- 优势：松散耦合（易维护、易复用、易扩展）
- 常见分层方式：：MVC，MVVM
- 模块化思想
- 定义：解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程
- 意义：解耦，可并行开发
- 模块化方案：AMD，CMD，CommonJS，ES6
- 工具
- WebPack
- NodeJS
- NPM
- Shell
- Charles
- Git
需求分析
拆分原则
- 单个迭代不宜太大
- 需求可交付，能够形成功能闭环
- 有成本意识，遵循二八原则
- 有预期的价值体现
- 商品
- 首页、商品列表、商品详情
- 购物车
- 购物车数量、添加删除商品、购物车提交
- 订单
- 订单确认（地址管理）、订单提交、订单列表、订单详情
- 支付
- 用户
- 登录、注册、个人信息、找回密码、修改密码、
- 商品管理
- 添加/编辑商品，查看商品，下架
- 品类管理
- 添加品类，查看品类
- 订单管理
- 订单列表，订单详情、发货
- 权限
- 管理员登录
技术选型
同一域名，同一请求的资源数是有限的
- 敏捷开发
- 定义：以用户的需求进化为核心，采用迭代、循序渐进的方法进行软件开发
- 是一种迭代的意识和方法，而不是概念和工具
- 优点：能够应对满足不断变化的需求
- 不足：对团队成员的能力要求比较高
- 前后端不分离
- 前后端共用同一项目目录，甚至页面内嵌js、css
- 本地开发环境搭建成本高
- 共同维护成本高
- 发布风险高
- 部分分离脚本和样式由前端维护
- 后端负责页面模板（JSP/Velocity/Freemarker)
- 本地开发环境搭建成本较高
- 更新页面模板仍需后端协助，效率不够高
- 需要前后端同时发布
- 完全分离
- 方案1：velocity，发布的时候同步到后端
- 优点：完全分离，能直接生成动态的模板，利于SEO
- 缺点：系统复杂度高、需要前后端同时发布
- 方案2：纯静态html、完全通过接口做数据交互
- 优点：完全脱离后端模板，系统复杂度低
- 缺点：不太利于SEO
- 优化方案：Server Render/蜘蛛定制页面
- 方案1：velocity，发布的时候同步到后端
- 方案：
- 软件过程：敏捷开发
- 前后端分离：完全分离，纯静态方式
- 模块化方案：CommonJS+Webpack
- 框架选择：用户端Query+css、管理系统React+Sass
- 版本控制：git
- 发布过程：拉取代码->编译打包->发布到线上机器
知识体系
- 基础框架的搭建
- 双平台的开发环境安装
- git仓库的规范化用法
- webpack脚手架搭建实战
- 用户模块
- 数据安全性处理方案
- 表单同步/异步验证
- 小型SPA开发
- 通用模块
- 可高复用工具类设计与封装
- 通用模块设计与独立打包方法
- 高逼格UI开发经验与技巧
- 商品模块
- jQuery插件模块化改造
- 独立组件抽离技巧
- 多功能列表开发
- 支付模块
- 支付宝支付功能对接
- 支付状态动态检测
- 支付成功回执处理
- 购物车模块
- 商品状态随时验证方案
- 模块内部方法调用方式
- 非Form提交时的数据验证
- 管理后台
- 管理后台实现思路
- React框架及其组件化
- React-Router的使用
- 订单模块
- Modal式组件封装思想
- 城市级联操作
- 复杂表单回填
- 访问数据分析
- PV/UV
- 流量来源监控
- 用户特征分析
- 线上部署
- 线上服务器环境搭建
- 自动化发布脚本编写
- 域名规划与nginx配置
- SEO优化
- SEO原理
- 关键词的设计
- SEO监控
- 可用性监控
- 外部监控原理
- 第三方监控的设置
- 更高级的监控方式
Sublime
webpack配置
webpack2不支持ie8的原因：export default 不被IE8支持，注意default是IE8是关键字不能用。
- 设计思想一require anything
- 加载方式：各种loader插件
- 编译方式：commonjs模块->function类型模块
webpack对脚本和样式引用的问题
- Js用什么loader加载?
- 使用自带的js解析器解析，因为其他loader对ie8不是很友好
- 官方文档上的例子中entry只有一个js，我们有多个怎么办?
- output里要分文件夹存放目标文件，怎么设置
- jquery引入方法？
- 我想提取出公共模块，怎么处理?
- 使用CommonsChunkPlugin提取公共模块
- 样式使用怎样的loader?
- webpack打包的css怎么独立成单独的文件？
- “style-loader”,”css-loader”
通用js工具
- 网络请求工具
- URL路径工具
- 模板渲染工具一hogan
- 字段验证&&通用提示
- 统一跳转
git merge origin master
git tag tag-dev-initial
git push origin tag-dev-initial
页面布局
- 定宽布局
- 通用部分的抽离
- icon-font的引入
- 通用样式的定义
- 对齐，对称
- 扁平
用户模块
- 登录页面功能点
- 字段验证，通过后提交后端接口
- 接口成功失败的处理
- 提交登录接口
- 找回密码页面功能点
- 输入账号，获取密码提示问题
- 输入密码提示问题的答案进行验证
- 提交修改后的密码
- 根据用户名获取密码提示问题接口
- 根据用户名、问题和答案获取认证token接口
- 根据用户名和认证token重置密码接口
- 注册页面功能点
- 对用户名异步验证
- 字段验证，通过后提交后端接仁
- 接口成功失败处理
- 判断用户名是否存在的接口
- 提交注册接口
- 个人中心页面功能点
- 显示个人信息
- 修改个人信息
- 获取用户信息接口
- 修改用户信息接口
商品模块
- 网站首页功能点
- 推荐搜索关键字的快捷链接
- 活动展示的轮播图
- 分楼层的商品分类信息
- 商品详情页功能点
- 商品信息展示
- 缩略图预览
- 添加购物车
- 商品详情接口
- 添加购物车接口
- 商品列表页功能点
- 商品列表的展示
- 排序的逻辑
- 分页的处理
- 商品list接口
购物车模块和支付宝模块
- 购物车页功能点
- 购物车中商品的展示
- 修改购物车中的商品数量
- 选中/取消选中购物车中的商品
- 全选/取消全选购物车中的商品
- 删除单个/多个购物车商品
- 购物车结算
- 购物车页的接口
- 购物车中商品List接口
- 修改购物车商品数量的接口
- 选中/取消选中购物车中商品的接口
- 全选/取消全选购物车中的商品的接口
- 删除购物车商品的接口，支持批量操作
线上
- 添加favicon
- 线上域名的分离，HTML路径的简化
- 添加dns-prefetch
- 对线上打包结果做回归测试
SEO
SEO是指在了解搜索引擎自然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标。
- 增加页面数量
- 减少页面层级
- 关键词密度
- 高质量友链
- 分析竞对
- SEO数据监控