JS的异步编程过程中的问题集锦、echarts使用记录。
描述一下今天的业务场景
为了方便维护，在JS里的把html模板和业务逻辑做了分离，在业务逻辑里向模板对象传递指定的data对象返回生成好的html，以往的数据对象是用户交互产生的，今天需要改成从接口拉取。
按照以往的逻辑，获取用户的交互数据，传递给模板。基本上是同步的，今天修改的时候为了不触碰原有的代码，把网络请求单独放在了其他对象里，业务流程变成了，调用网络请求函数产生的返回值作为数据对象传递给模板对象。
一切看似没问题，结果模板解析的时候数据对象能正常打印显示数据对象，但是输出的html是空的。研究了好一会，才发现没考虑异步的问题（JS遇见异步函数，放进执行队列，不等待它执行完成，而直接执行后面的代码）；
数据对象在网络请求没完成的时候，已经开始解析模板了。（但是这个打印的时候有正常数据被打印，这就比较迷了），通过debugger断点，得知data是空的。然后就是改进了：
- 将模板调用往后的业务逻辑放在网络请求的回调函数，。
- 使用promise对象，请求完毕的回调函数内调用resolve传递数据，然后在promise的then方法里调用模板对象之后的业务逻辑；
- await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，获取async函数的返回值可通过await；
echarts使用记录
图例（legend）、标题（title）、文字提醒（tooltip）、表格类型和样式（serial）、坐标系（Grid）、x轴（xAxis）、Y轴（yAxis）、样式（itemStyle、areaStyle、lineStyle）
1.配置项说明
title，标题组件，包含主标题和副标题。
legend，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
grid ，代表整个坐标系的配置，直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
grid:{
left:"5%",
top:"5%",
right:"5%",
bottom:"8%"
}xAxis，直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
yAxis，直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴。
dataZoom ，用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
tooltip，数据提示框组件。
color，调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
textStyle，全局字体样式。
series，设置图表的数据及类型和样式。
series: [{
name: 'Funnel',
type: 'funnel',
left: '10%',
top: 0,
bottom: 0,
width: '50%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {show: true, position: 'inside'},
labelLine: {length: 10, lineStyle: {width: 1, type: 'solid'}},
itemStyle: {borderColor: '#fff', borderWidth: 1},
emphasis: {label: {fontSize: 20}},
data: [{value: 50, name: '发起申请'}, {value: 60, name: '新增好友数'}, {value: 70, name: '主动触达数'}, {
value: 80,
name: '互动数'
}, {value: 90, name: '有效互动数'}],
}]- label ，图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
- type，定义图表的类型。
2.渐变内置生成器echarts.graphic.LinearGradient
series: [
{
name: '发起申请',
type: 'line',
smooth: true,
showSymbol: false,
stack: 'Total',
areaStyle: {
opacity: 0.5,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#5768FF10'
},
{
offset: 1,
color: '#5768FF'
}
])
},
data: [20, 20, 40, 40, 50, 50, 60, 60, 70, 70, 80, 80, 90, 90]
}
]前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始. 第5个参数则是一个数组, 用于配置颜色的渐变过程. 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color表示颜色
JS Api
1.Notifications API 接口用于向用户配置和显示桌面通知。
Notification.requestPermission().then(function (permission) {
// 如果用户接受权限，我们就可以发起一条消息
if (permission === "granted") {
var notification = new Notification("Hi there!");
}
});2.全屏Api：https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API
3.网页性能相关的API：https://developer.mozilla.org/zh-CN/docs/Web/API/Navigation_timing_API
4.JS异步编程：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous
全屏切换
/*是否处于全屏*/
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
/*接口是否可用*/
if(document.exitFullscreen) {
document.exitFullscreen();
}
}宏任务、微任务
JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。Event Loop 包含两类：一类是基于 Browsing Context，一种是基于 Worker。二者的运行是独立的，也就是说，每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop，每一个 Web Worker 也有一个独立的 Event Loop。
腾讯云开发者
