从0到1如何开始一个前端项目（电商）

当我们开始一个前端项目时，可以从下面几点考虑。

• 整体架构

  • 图片描述

• 业务功能实现

• 系统整体可用性，可维护性，可扩展性

  • 前后端分离
    • 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/蜘蛛定制页面

      
      图片描述

• 方案：

  • 软件过程：敏捷开发
  • 前后端分离：完全分离，纯静态方式
  • 模块化方案：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数据监控

图片描述

最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。