58笔试总结

Author Avatar
FanShen 4月 16, 2018

昨天做了58的在线笔试题,题很基础。但完成的还是不够好,许多题目涉及的知识点,我总是浅尝则止。现在,静下心来,再查查资料。把题再做一遍。

图片懒加载

通过data-src来加载图片

function setImg(index) {
    var aLi = document.getElementByName('li');
    if(aLi[index].childNodes.length == 0) {
        if(ali[index].dataset) {
            var src = aLi[index].dataset.src;
        } else {
            var src = aLi[index].getAttribute('data-src'); //不支持dataset时的处理方法
        }
    var oImg = document.createElement('img');
    oImg.src = src;
    aLi[index].appendChild(oImg);
    }
}

获取元素距离页面顶部的距离

function getH(el) {
    var h = 0;
    while(el) {
        h += el.offsetTop;
        el = el.offsetParent;
    }
    return h;
}

组装

window.onscroll = function() {
    var aLi = document.getElementByName('li');
    for(var i = 0, l = aLi.length; i < l; i++) {
        var oLi = aLi[i];
        var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
        var h = getH(oLi);
        if(h < t) {
            setTimeout("setImg(" + i + ")",500)
        }
    }
};
window.onload = function() {
    windows.onscroll();
};

列举常见的跨域方法,以及jsonp不能进行post请求的原因

document.domain

适用于主域相同,子域不同的情况,通常做法是通过一个iframe加载跨域页面资源

var test = window.open('http://test.5bang.top/');

location.hash

通过设置/监听url的hash部分,来实现跨域

window.name

window.name用来获取/设置窗口的名称,将跨域的window.name通过重定向到同域页面进行读取

jsonp

允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback作为函数名来包裹住json数据

function todo(data) {
    console.log('my name is' + data.name);
} 

var script = document.createElement('script');  //script标签只支持get
script.src = 'http://5bang.top/name?callback=todo';  //callback参数用来指定回调函数的名字
document.body.appendchild(script)

postMessage

window.postMessage是html5中基于事件消息的API

webSocket

一种html5的协议,实现了浏览器与服务器的全双工通信。

CROS

服务器返回的头部信息包含Access-Control-Allow-Origin: domain-name(允许跨域的域名),浏览器就会允许此次跨域请求

解决callback地狱问题(反复嵌套),写出js实现异步的方法

promise

promise实例

    const promise = new Promise(function(resolve,reject){
        //
        if(/*异步操作成功*/) {
            resolve(value);
        } else {
            reject(error);
        }
    })
  • resolve():将promise对象的状态由未完成变为成功(pending => resolved),在异步操作成功时调用,并将异步操作的结果作为参数传递出去
  • reject(): 将promise对象的状态由未完成变为失败(pending => rejected),在异步操作失败时调用,并将异步操作报出的错误作为参数传递出去

then()

    promise.then(function(value){
        //success
    },function(error){
        //error
    })

generator

两种清除浮动的方法,以及它们有什么缺点

浮动元素脱离常规文档流之后,原来紧跟其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐

clear: both

overflow: hidden

:after伪元素

针对移动端设备的布局方式

实现一个插件,当鼠标移动到文本时,显示一个文本输入框

实现一个sum()函数,接收任意参数,然后柯里化sum()