每日五题--promise的手写，事件流，事件绑定，事件委托，懒加载如何实现

1.promise的手写

// promise的实现
        class myPromise{
            constructor(fn) {
                this.resolvedCallbacks = [];
                this.rejectedCallbacks = [];
                this.state = "PENDING"; //存放的是promise的状态
                this.value = ''     // value存放的是promise最后去返回的值，
                // 像是resolve(value) reject(value) 这些可以在then中获取到
                
                fn(this.resolve.bind(this),this.reject.bind(this));
                // 由这个fn来判断执行的是resolve还是reject，执行这两个都需要改变this指向
                // 来获取到构造函数的值
                // 这个fn是我们写的回调函数，由我们来决定执行哪个，

            }
            resolve(value) {
                if (this.state === 'PENDING') {
                    // 开始改变状态和赋值，这个value就是resolve（括号传递的参数）
                    this.state = 'RESOLVED'
                    this.value = value

                    this.resolvedCallback.map( cb => {
                        // 开始执行resolve的回调函数，这里将相当于，因为then有时候状态没改变，就会把then里面的回调函数push进去
                        cb(value);
                    })
                }
            }
            reject(value) {
                if (this.state === 'PENDING') {
                    this.state = 'REJECT'
                    this.value = value
                    this.rejectedCallbacks.map(cb => {
                        cb(value);
                    })
                }


            }
            then(onFulfilled,onRejected) {
                if(this.state === 'PENDING') {
                    this.resolvedCallbacks.push(onFulfilled)
                    this.rejectedCallbacks.push(onRejected)
                }
                if(this.state === 'RESOLVED') {
                    onFulfilled(this.value);    //直接执行
                }
                if(this.state === 'REJECTED') {
                    onRejected(this.value); //直接执行
                }
            }
        }

2.事件流

• 从根节点到目标节点的过程叫做捕获阶段，从目标节点到根节点的过程叫冒泡阶段。这两个阶段不会同时进行
• 在addEventListener最后参数写false表示执行冒泡阶段（默认），在addEventListener最后参数写true表示执行捕获阶段
• 在冒泡阶段，子元素触发的事件会传递到父元素，所以可以根据这个特性来实现事件委托，事件委托就是一个父元素有多个子元素都绑定相同事件执行相同操作的时候，只需要给父元素绑定这个事件即可。这样我们就无需手动添加删除子元素的绑定事件了，只需要给父元素设置一个绑定事件即可
• 但这会造成一个问题，如果父元素和子元素都绑定了相同的事件，当子元素触发这个事件时，父元素也会被迫触发，这个时候可以用stopPropagation（）来阻止事件冒泡

3.事件绑定

用addEventListener来给元素绑定事件，box.addEventListener('事件名称',执行的箭头函数()=>{})

4.事件委托

一个父元素有多个子元素，而且这些子元素绑定的事件和执行的操作都一样，那么我们只需要给父元素绑定这个事件即可，利用冒泡机制，触发子元素冒泡到触发父元素的事件。这样可以更加方便，在增加和删除子元素的时候，就不用手动的增加和删除事件了

5.懒加载

简单来说就是页面显示到哪个部分就显示哪个部分的图片

// 懒加载，这个是通过src属性来实现的，当这张照片距离上边框的距离小于当前网页窗口下部
        // 距离上边框的距离，那么就赋予src属性的值
        // offsetTop < scrollTop + clientHeight
        function lazyLoad() {
            const imgs = document.querySelector('img');
            // 求屏幕的高度
            const clientHeight = document.documentElement.clientHeight
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            for(let i = 0;i<imgs.length;i++) {
                const itemOffsetHeight = imgs.offsetTop

            }
        }