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");
}
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页