# front-end-analysis

**Repository Path**: bingohello/front-end-analysis

## Basic Information

- **Project Name**: front-end-analysis
- **Description**: 前端技术栈分析
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2018-05-24
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端技术栈分析报告

### 工作流程
![](https://i.imgur.com/RCf6qP2.png)

1. 工作内容分为两个部分（浏览器层开发、服务层），相应也有两个入口，一个是产品设计稿，一个是后台数据接口。
2. 浏览器开发：与UI、产品需求部门配合，拿到产品设计稿，进行设计稿的公共组件封装、插件引入，目的是完成界面开发（包括结构编写、样式编写、交互设计）。
3. 服务层开发：与后端部门配合，发送HTTP请求调用数据接口，获取数据后进行聚合处理、格式化、异常处理并返回。
4. 浏览器层发送Ajax请求给服务层，服务层返回处理好的相应数据给浏览器层。
5. 浏览器层需经过模块转换工具进行代码编译、合并、压缩与服务层合并部署。
### 软件架构
![](https://i.imgur.com/icmPcSc.png)

1. 服务层：采用基于node.js的下一代web开发框架koa2，特点是轻量、扩展性高、去掉繁琐的函数嵌套、提升错误处理的效率，
2. 行为层：渐进式JavaScript框架，作用是进行采用模块化方式组件化开发，单页面模式，组件可复用，包含模板机制，提高页面数据渲染能力，代码简洁，扩展性高，运行性能较AngularJS好。
3. 表现层：最成熟、最稳定、最强大的专业级CSS扩展语言，可以定义变量、代码嵌套、函数、混合（大段代码复用）
4. UI框架：Vant--轻量、可靠的移动端Vue组件库，特点：提供完善的文档和示例、50+有赞线上业务检验组件、单元测试覆盖率超过90%、支持服务端渲染。
5. 脚手架：webpack提供丰富的配置，可以自动帮我们转换代码（编译、合并、压缩）
### 技术细节

![](https://i.imgur.com/NqgzlK0.png)

### 与传统开发方式对比

![](https://i.imgur.com/UYPc48f.jpg)

### 开发成本

![](https://i.imgur.com/SFgrPJk.png)

1. 浏览器端的开发成本与传统方式一样，但是代码质量更高
2. 服务层开发（与接口数量相关）

P3：了解需求、抠图&界面开发、兼容测试修改、代码规范修改、接口调用并渲染数据


### 代码规范

1. 书写格式及部分语法问题采用eslint进行js的代码稽查
2. 命名规范，git提交代码后通过人为审查后合并