Promise是什么、position：sticky特点及用法、async和await是什么、10种以上IE兼容写法

Promise

是异步编程的一种解决方案，其实是一个构造函数

两个特点：

1、 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变
2、Promise对象的状态改变，只有两种可能：从pending（进行中）变为fulfilled（已成功）和从pending（进行中）变为rejected（已失败）。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的

position：sticky的特点及用法

position:sticky是css定位新增属性；相对定位relative和固定定位fixed的结合；主要用在对scroll事件的监听上；在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
设置position:sticky同时给一个(top,bottom,right,left)之一即可
使用条件：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

！注意：目前手机端的用户非常多，要做到pc和移动端兼顾，由于安卓系统对sticky粘性定位的惨淡支持；如果业务场景可以用其它定位解决，那就还是不要用sticky

async和await是什么

async和await的用法都是promise的语法糖
await必须在async函数中使用，但是async函数的调用不一定需要await关键字,且async函数中不一定有await。
async和await同时使用时，完成的操作是：async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。

10种以上IE兼容的写法

事件对象的IE兼容

window.onkeydown = function(en){
            //IE兼容
            var e = en || window.event;
        }

建码的IE兼容

//建码，所有键盘上的按键，字母无大小写区分
            window.onkeydown = function(en){
                //IE兼容
                var e = en || window.event;
                //获取建码写法、建码兼容写法
                var which = e.keyCode || e.which;
                console.log(which)
            }

字符码的IE兼容

//字符码，仅字母且有大小写区分
            window.onkeypress = function(en){
                //IE兼容
                var e = en || window.event;
                //获取字符码写法、字符码兼容写法    
                var which = e.charCode || e.which;
                console.log(which);
            }

target触发对象兼容

//target触发对象/目标对象
             oU.onclick = function(ev){
                var e = ev || window.event;
                //触发对象、触发目标、兼容
                var target = e.target || window.event.srcElement;
             }

浏览器宽高兼容

document.onclick = function () {
          //输出当前窗口的宽
          var windowWidth =
          //窗口宽高度兼容
            document.documentElement.clientWidth || document.body.clientWidth;
          var windowHeight =
            document.documentElement.clientHeight || document.body.clientHeight;
          console.log(windowWidth, windowHeight);
        };

滚动条的上边距IE兼容

  //滚动的上边距IE兼容
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

阻止a标签默认行为的兼容

oa.onclick = function(ev){
    var e = ev || window.event;
    console.log('第一次运行');
    fundep(e);
    console.log('第二次运行');
}
//系统提供了两个a链接阻止默认行为的方法、兼容
function fundep(ev){
    if(ev.preventDefault){
        ev.preventDefault();
    }else{
        window.event.returnValue = false;
    }
}

阻止事件冒泡

function stopBubble(event){
    if(event.stopPropagation){
        event.stopPropagation()
    }else{
        event.cancelBubble = true;
    }
}

阻止浏览器默认行为

 document.oncontextmenu = function () {
                    //IE兼容
           window.event.returnValue = false;
          return false;
        };

事件监听器的兼容

//监听器：向指定元素添加事件
function on(node, elementType, funcName){
    if(node.addEventListener){
        node.addEventListener(elementType, funcName, false);
    }else{
        node.attachEvent('on' + elementType, funcName);
    }
}
//删除某一个元素节点中的某一事件的某一函数
function off(node, elementType, funcName){
    if(node.removeEventListener){
        node.removeEventListener(elementType, funcName)
    }else{
        node.detachEvent('on' + elementType, funcName);
    }
}

获取当前样式IE兼容

//获取当前有效样式，做一个浏览器兼容
      function getStyle(node, cssStyle) {
        return node.currentStyle
          ? node.currentStyle[cssStyle]
          : getComputedStyle(node)[cssStyle];
      }

AJAX的兼容

//1、声明一个ajax对象  打开窗口
var xhr = null;
//浏览器的兼容
if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest();
}else{
  //IE低版本浏览器
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}