单页应用

2019-08-14 本文已影响0人一点金光

什么是单页应用

单页Web应用，就是只有一张Web页面的应用。

单页应用的优势

单页应用的缺点

开发框架

# 技术选型0001
vuejs+vue-router+axios+vuex+vux

# 技术选型0002
react+react-dom+react-router+rediux

代码隔离

代码合并

加载策略

把更多的公共功能放到首次加载，以减少每次加载的载入量。
在单页应用中，无需像网站型产品一样，为了防止文件加载阻塞渲染，把js放到html后面加载，因为它的界面基本都是动态生成的。

状态管理

单页应用中，因为界面上的各种功能区块是动态生成的，把产品功能划分为若干状态。

路由管理

单页应用中，因为界面上的各种功能区块是动态生成的，通过根据不同的url路径动态解析，映射到相应的状态。

缓存管理

在单页应用的运作机制中，缓存是一个很重要的环节。由于这类系统的前端部分几乎全是静态文件，所以它能够有机会利用浏览器的缓存机制，而比如动态加载的界面模板，也完全可以做一些自定义的缓存机制，在非首次的请求中直接取缓存的版本，以加快加载速度。
在单页产品中，业务代码也常常会需要跟本地存储打交道，存储一些临时数据，可以使用localStorage或者localStorageDB来简化自己的业务代码。^[1]

前后通信

# 技术选择：JSONP ajax http websocet

# 后台推送：AJAX轮询 长连接 websocet

内存管理

# 防止泄漏
## 文档操作

## 网络连接

样式规划

# 基准样式的分离
##浏览器样式重设

##全局字体的设置

##布局的基本约定

##布局响应式支持

# 组件样式的划分
## 界面组件的样式

## 界面子组的样式

## 一些修饰性样式

# 堆叠次序的管理

产品形态

# 网上应用

# 离线应用
## 电脑
## 手机
## 车载

部署模式

# 有后端

# 无后端

无后端--产品很可能只需要自己编写静态Web页面，在某种BaaS（Backend as a Service）云平台上定制服务端API和云存储，集成这个平台提供的SDK，通过AJAX等方式与之打交道，实现注册认证、社交、消息推送、实时通信、云存储等功能^[2]

变更检测

## 几种方式
https://github.com/xufei/blog/issues/19
### 封存储器
#### 自定

#### Object.defineProperty

### 脏值检测

### 观察机制
#### 订阅模式

#### Object.observe