本周学习总结(原生)

类型别名

type Name = string;
type NameResolver = () => string
const getName = (n: NameResolver): Name => {
  if (typeof n === 'string') {
    return n;
  } else {
    return n();
  }
};

类型别名常用于联合类型

字符串字面量类型

type EventNames='click'|'scroll'|'mousemove'
const handleEvent = (ele: Element, event: EventNames) => {

};
handleEvent(document.getElementById('hello'), 'scroll');
类型别名与字符串字面量类型都是使用type进行定义

环形仪表图

  let template1=elem[0];
                    let myCharts5=echarts4.init(template1);
                    let total = 100;

                    let value = 75;
                    let option = {
                        title: {
                            text: `${value}%`,
                            left: 'center',
                            top: 'center', //top待调整
                            textStyle: {
                                color: '#fff',
                                fontSize: 20,
                            },
                        },
                        //背景圆
                        graphic: [{
                            type: 'circle',
                            left: 'center',
                            top: 'middle',
                            shape:{r:55},
                            style: {
                                fill: '#02154A',
                            },
                        },
                            /*最外层小圆环*/
                            {
                                type:'ring',
                                left:'center',
                                top:'middle',
                                shape:{
                                    r:57,
                                    r0:59
                                },
                                style:{
                                    fill: '#192e5e',
                                }
                            }],
                        series: [
                            {
                                name: '',
                                type: 'gauge',
                                radius: '90%',
                                center: ['50%', '50%'],
                                startAngle: 0,
                                endAngle: 359.9,
                                splitNumber: 14,
                                zlevel:2,
                                hoverAnimation: true,
                                axisTick: {
                                    show: false
                                },
                                splitLine: {
                                    length: 18,
                                    lineStyle: {
                                        width: 8,
                                        color: '#02154a'
                                    }
                                },
                                axisLabel: {
                                    show: false
                                },
                                pointer: {
                                    show: false
                                },
                                axisLine: {
                                    lineStyle: {
                                        opacity: 0
                                    }
                                },
                                detail: {
                                    show: false
                                },
                                data: [{
                                    value: 0,
                                    name: ''
                                }]
                            },
                            {
                                name: '',
                                type: 'pie',
                                radius: ['70%', '86%'],
                                center: ['50%', '50%'],
                                silent: true,
                                clockwise: true,
                                startAngle: 90,
                                z: 0,
                                // zlevel: 0,
                                label: {
                                    normal: {
                                        position: 'center',
                                    }
                                },
                                data: [
                                    {
                                        value: value,
                                        name: '',
                                        itemStyle: {
                                            normal: {
                                                color: new echarts4.graphic.LinearGradient(0, 1, 0, 0, [{
                                                    offset: 0,
                                                    color: '#033bce'
                                                }, {
                                                    offset: 1,
                                                    color: '#03bcfe'
                                                }]),
                                            }
                                        }
                                    },
                                    {
                                        value: total - value,
                                        name: '',
                                        label: {
                                            normal: {
                                                show: false
                                            }
                                        },
                                        itemStyle: {
                                            normal: {
                                                color: '#003554'
                                            }
                                        }
                                    },
                                    {
                                        name:'',
                                        type: 'pie',
                                        radius: ['70%', '86%'],
                                        center: ['50%', '50%'],
                                        z: 0,
                                        itemStyle: {
                                            normal: {
                                                color: new echarts4.graphic.LinearGradient(0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: '#1147A1'
                                                },
                                                    {
                                                        offset: 0.5,
                                                        color: '#423DB3'
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: '#1147A1'
                                                    }
                                                ]),
                                                label: {
                                                    show: false
                                                },
                                                labelLine: {
                                                    show: false
                                                }
                                            },
                                        },
                                        label: {
                                            normal: {
                                                position: "center",
                                            }
                                        },
                                        data: [100],
                                    },
                                ]
                            },
                            /*内圈*/
                            {
                                name: '',
                                type: 'gauge',
                                radius: '60%',
                                center: ['50%', '50%'],
                                startAngle: 0,
                                endAngle: 359.9,
                                splitNumber: 15,
                                hoverAnimation: true,
                                axisTick: {
                                    show: false
                                },
                                splitLine: {
                                    length:2,
                                    lineStyle: {
                                        width: 12,
                                        color: '#192e5e'
                                    }
                                },
                                axisLabel: {
                                    show: false
                                },
                                pointer: {
                                    show: false
                                },
                                axisLine: {
                                    lineStyle: {
                                        opacity: 0
                                    }
                                },
                                detail: {
                                    show: false
                                },
                                data: [{
                                    value: 0,
                                    name: ''
                                }]
                            },

                        ]
                    };
                    myCharts5.setOption(option)

新写法

/*判断报错信息*/
const handleErrors = (params) => {
  if (params.length === 0) {
    throw new Error('数组的长度不能为0')
  }
  if (params.some(val => typeof val !== 'number')) {
    throw new Error('每一个元素都应该是Number')
  }
  if (params.some(val => val > Infinity || val < -Infinity)) {
    /*最大值,最小值
    * 9,007,199,254,740,991
    * -9,007,199,254,740,991*/
    throw new Error('每一个元素不能超过最大值,或者小于最小值')
  }
}

const sum = (...params) => {
  handleErrors(params);
  return params.reduce((acc, val) => acc + val, 0)
}

//求最小值
const minNum=(...params)=>{
  return params.reduce((acc,val)=>acc<val?acc:val)
};
console.log(minNum(1, 12, 1, 1, -1, 12))
//-1

class

class MathHandle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  add() {
    return this.x + this.y
  }
}

let m = new MathHandle(10, 20)
console.log(m.add())

再次提一些异步

const getUser = () => new Promise((resolve, reject) => {
  resolve('zhangsan');
  reject('失败')
}).then(resolver=>{
  console.log(resolver)
})

async function add() {
  console.log(1)
  await getUser()
  console.log(3)
}
add()
/*
* 1
zhangsan
3
* */

彻底弄懂怎么正确使用async/await

//微任务
const p1 = () => new Promise((resolve, reject) => {
    resolve('微任务')
}).then(res => {
    console.log(res)
})
//宏任务
const p2 = () => new Promise(res => setTimeout(() => {
    res('宏任务')
},1000)).then(res => {
    console.log(res)
})
const add = async () => {
    console.log(1)
    await p2()
    await p1()
    console.log(4)
}
add()

简化成函数
const pipeAsync = (...args) => arg => args.reduce((acc, val) => {
    return acc.then(val)
}, Promise.resolve(arg))

const sum = pipeAsync(
    x => x + 1,
    x => new Promise(resolve => setTimeout(() => {
        resolve(x * 4)
    }, 1000)),
    x => new Promise(res => res(x * 10)),
    x=>x+10

);
(
    async () => {
        //5+1   *4  *10  +10
        console.log(await sum(5))
    }
)()

const arrayFromRange = function arrayFromRange(min, max) {
    const output = []
    for (let i = min; i <= max; i++)
        output.push(i)
    return output
}
console.log(arrayFromRange(1, 10))
//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
//优化后
const arrayFrom = (min, max) =>
    Array.from({length: max - min+1}, (_, i) => i + min)
console.log(arrayFrom(1, 10))
//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

虚拟ＤＯＭ

https://github.com/wavesoft/dot-dom
有时间好好看看