重写promise 写一个类似于promise的方法

1.重写promise 写一个类似于promise的方法

  // promise  内置类
    //重写promise  写一个类似于promise的方法
    class MyPromise{
        constructor(excutor){//当new Mypromise constructor执行l
            //this -》Promise 的实例
            //pending fulfilled rejected
            this.state = 'pending';
            //用来存储或失败的回调函数  事件池
            this.fulfilledEvent = [];
            this.rejectEvent = [];
            //1.resolve 改变状态，
            let resolve = (result)=>{
                if(this.state !== 'pending')return
                this.state = 'fulfilled';//执行resolve 状态变为fulfilled
                // this->promise实例
                clearTimeout(this.timer)
                //this 为了每次可以清除掉  不用放在全局
               this.timer = setTimeout(()=>{//必须箭头函数 否则里面this找不到
                this.fulfilledEvent.forEach(item=>{
                    if(typeof item == 'function'){
                        item(result)  //成功的函数执行
                    }
                })
               })
            }
            let reject = (result)=>{//result  resolve里面的参
                if(this.state !== 'pending')return
                this.state = 'rejected';//执行reject 状态变为rejected
                // this->promise实例
                clearTimeout(this.timer)
                //this 为了每次可以清除掉  不用放在全局
               this.timer = setTimeout(()=>{//必须箭头函数 否则里面this找不到
                this.rejectEvent.forEach(item=>{
                    if(typeof item == 'function'){
                        item(result)  //成功的函数执行
                    }
                })
               })
            }
             //如果代码异常 会走失败 不会再控制台抛出异常
            try{
                excutor(resolve,reject);//resolve 是函数 所以必须创建函数 
            }catch(e){//e  错误信息
                reject(e)
            }
             
        };
        //then 接收2个函数  是订阅：往成功的事件池 和失败的事件池放入成功的回调函数和失败的回调函数
        //then 公有属性
        then(resolveFn,rejectFn){
            //当then不传回调时，给俩个形参赋默认值
            if(resolveFn === undefined){
                resolveFn = () =>{}
            }
            if(rejectFn === undefined){
               rejectFn = () =>{}
            }
            this->then返回的实例
            return new MyPromise((resolve,reject)=>{//then返回的实例是p2
            //这个运行 会让事件池resolve执行
            //如果上一个then中返回一个promise实例，那么这个函数会被resolve包裹一下 ，再放进这个实例的事件池中
            //它的实参是excutor(resolve,reject);/
            //往事件池中放入方法
            //this->then返回的实例
            this.fulfilledEvent.push((result)=>{//item运行 这个函数运行
                try{
                    let x = resolveFn(result);
                    //resolve this->p2事件池中方法执行
                    x instanceof MyPromise?x.then(resolve,reject):resolve()  //如果它是返回的promise的实例 就让他 否则resolve执行  resolve是上面的resolve 
                }catch(e){
                    reject(e)
                }
            });
            this.rejectedEvent.push((result)=>{
                        try{
                           let x = rejectedFn(result);
                           // resolve : 让成功的事件池中的方法运行，里面执行时，this-->P2的事件池中的方法执行
                           x instanceof MyPromise? x.then(resolve,reject):resolve();
                        }catch(e){
                            reject(e);
                        }
                    });
                })
        }
    }
    let p1 = new MyPromise(function(resolve,reject){//then返回的实例是p2
        // resolve(100)
        // resolve(200)
        // console.log(a);
        reject()
        
    })
    p1.then(function(a){
        console.log(a);
        
        //成功回调函数
    },function(){
        //失败回调
        console.log(88);
        
    })
    console.log(p1);
    



    let p  = new Promise(function(resolve,reject){//resolve 形参  //p  promise 实例
    //如果代码异常 会走失败 不会再控制台抛出异常
        console.log(a);
        
    })
    let c = p.then(function(){
        console.log(1000);
    }).then(function(){
              // 上一个中的回调如果不返回promise实例，那么这个then受上一个then默认返回的promise的状态影响，如果回调中返回了promise实例，那么这个then就受返回的promise实例的影响
    },function(){
        console.log(2000);
    })
    

2.强缓存和协商缓存

缓存 304

缓存的优点：
    减少了不必要的数据传输，节省带宽
    减少服务器的负担，提升网站性能
    加快了客户端加载网页的速度
    用户体验友好
缺点：
	 资源如果有更改但是客户端不及时更新会造成用户获取信息滞后，如果老版本有bug的话，情况会更加糟糕。
	所以，为了避免设置缓存错误，掌握缓存的原理对于我们工作中去更加合理的配置缓存是非常重要的。
   性能优化

强缓存 和协商缓存

	强缓存 其实强是强制的意思。当浏览器去请求某个文件的时候，服务端就在respone header里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制，具体表现为：respone header 的cache-control，

常见的设置是max-age public private no-cache no-store等

cahe-control:max-age=315360000,public 这属于强缓存
每次用户正常打开这个页面，浏览器会判断缓存是否过期，没有过期就从缓存中读取数据；

缓存 本地磁盘或者浏览器缓存
强缓存总结  针对的是静态资源 比如html css 图片

cache-control: max-age=xxxx，public
客户端和代理服务器都可以缓存该资源；
客户端在xxx秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，如果用户做了刷新操作，就向服务器发起http请求

cache-control: max-age=xxxx，private
只让客户端可以缓存该资源；代理服务器不缓存
客户端在xxx秒内直接读取缓存,statu code:200

cache-control: max-age=xxxx，immutable
客户端在xxx秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，即使用户做了刷新操作，也不向服务器发起http请求

cache-control: no-cache
跳过设置强缓存，但是不妨碍设置协商缓存；一般如果你做了强缓存，只有在强缓存失效了才走协商缓存的，设置了no-cache就不会走强缓存了，每次请求都回询问服务端。

cache-control: no-store
不缓存，这个会让客户端、服务器都不缓存，也就没有所谓的强缓存、协商缓存了。

response header响应头  前端改不了

协商缓存
response header里设置
etag：每个文件有一个，改动文件了就变了，就是个文件hash，每个文件唯一
last-modified：文件的修改时间，精确到秒
//过程
发请求-->（强缓存）看资源是否过期-->过期-->请求服务器-->服务器对比资源是否真的过期（对比etag， last-modified：）-->没过期-->返回304状态码-->客户端用缓存的老资源。


协商缓存步骤总结：

请求资源时，把用户本地该资源的 etag 同时带到服务端，服务端和最新资源做对比。
如果资源没更改，返回304，浏览器读取本地缓存。
如果资源有更改，返回200，返回最新的资源。

3. encodeURI()编码

请求地址中如果出现非有效的Unicode编码内容，浏览器会默认进行encodeURI编码
    encodeURI()//编码
    decodeURI()//解码
    encodeURI()/是不会编译/的
    //这俩个针对整个url进行编码
    encodeURIComponent会编译/
     encodeURIComponent
     decodeURIComponent
    //这俩个针对部分url进行编码
    let str = 'http://www.zhufengpeixun.cn/manage?from='+encodeURIComponent('http://127.0.0.1:5500/%E7%AC%AC%E4%B8%89%E5%A4%A9/iframe.html')
    console.log(str);
    let newStr = encodeURI(str)
    let a = decodeURI(newStr)
    console.log(a);
    

    //客户端中文编码方式
    //escape
    //unescape  
    用于客户端页面之间处理，比如从列表页面跳转到详情页，可以把中文信息进行编译，然后再详情页进行解码

4.iframe

	iframe :一个标签 可以在父页面嵌套子页面
	iframe:src的地址就是嵌套子页面的地址

  <!-- <iframe src="./child.html"></iframe> -->
    <a href="https://www.baidu.com" target="iframeA">百度</a>
    <a href="https://www.taobao.com" target="iframeA">淘宝</a>
    <a href="https://www.jd.com" target="iframeA">京东</a>
    <iframe src="https://www.baidu.com" name="iframeA"></iframe>