从0到上线开发企业级电商项目_前端_02_电商平台架构设计及技术选型

一、架构设计

1.分层架构

定义：把功能相似，抽象级别相近的实现进行分层隔离。

优势：松散耦合（易维护、易复用、易扩展）

常见分层方式：MVC、MVVM

2.模块化

定义：解决一个复杂问题时，自顶向下逐层把系统划分为若干模块

意义：解耦，可并行开发

模块化方案：AMD,CMD,CommonJS,ES6

我们将采用CommonJS，模块化语法少，和业务是分开的。

3.架构设计

主模块（子模块）-逻辑层

Svervice – 数据层  -> 服务器

工具 -工具层

二、技术选型

1.软件过程

敏捷开发 -> 适合变化的项目

定义：以用户的需求进化为核心，采用迭代、循序渐进的方法进行软件开发，是一种迭代的一是和方法，而不是概念和工具

优点：能够应对满足不断变化的需求

不足：对团队成员的能力要求比较高，要很好的配合。

2. 前后端分离

完全分离

纯静态html、完全通过接口做数据交互

优点：完全脱离后端模版、系统复杂程度低

缺点：不太利于SEO

优化方案：Server Render/蜘蛛定制页面

3.框架选型

用户端：jQuery

求稳

用户类型多样

有SEO要求，多页应用，带来额外流量。

管理系统：react  sass

求快

用户类型单一

无SEO要求

4.构建工具

Webpack：天生支持commonJS

 

5.版本控制

git

 

6.发布方式

从git上拉去发布代码

编译打包

发布到线上机器

发布方式-域名分布：同一域名下，同一时间的请求数是有上限的，为了提高网页加载速度，将前端的文件放在不同的域名下。

HTML -> www./admin.

JS+CSS -> s.

IMAGE -> img.

 

7.选型结果

软件过程：敏捷开发

前后端分离：完全分离，纯静态方式

模块化方案：CommonJS+Webpack

框架选择：用户端jQuery+css、管理系统React+Sass

版本控制：git

发布过程：拉取代码 -> 编译打包 -> 发布到线上机器