58笔试总结 | Silas's Blog

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

图片懒加载

通过data-src来加载图片

<div id="div1">
    <ul>
        <li data-src="test1.jpg"></li>
        <li data-src="test2.jpg"></li>
        <li data-src="test3.jpg"></li>
    </ul>
</div>

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 {
            //不支持dataset时的处理方法
            var src = aLi[index].getAttribute('data-src');
        }
    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实现异步的方法

callback hell

fetch('http://www.somepage.com', function(firstError, firstResponse, firstBody) {
    if(firstError) {
        // handle error
    } else {
        fetch(`http://www.somepage.com/${firstBody.someValue}`, function(secondError, secondResponse, secondBody) {
            if(secondError) {
                // handle error
            } else {
                // use secondBody for something
            }
        })
    }
})

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
    })

解决callback hell

generator

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

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

clear: both

overflow: hidden

:after伪元素

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

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

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

function sum(...args) {
    return args.reduce((prev, next) => prev + next)
}
sum(1, 2, 3); //6
// 柯里化sum(1, 2, 3) => sum(1)(2)(3)