xiaoyu

1.apply(thisArg, [argsArray])

在实现之前,首先看一下MDN上关于apply函数的说明:

apply() 方法调用一个具有给定this值的函数,以及作为一个数组(或类似数组对象)提供的参数。

apply函数会将当前调用函数的this绑定在thisArgs上,我们知道,在JavaScript中,常见的函数绑定this的方法除了apply,call之外,还会在函数被当做对象的属性调用时被这个对象绑定,
例如:

1
obj.func() // 执行时func中的this指向obj

六月份开始搭建的自己的第一个网站:书虫小说

在经历前端页面重写后,网站首屏加载速度有了一定提升,之后发现小说目录详情页白屏时间竟然高达1-2s,拖了一段时间,打算解决这个问题,我用Chrome调试抓包发现json数据包大小竟然有200多KB,测试了一下加载时间大概在700ms-1500ms,由于章节列表的生成依赖于这个数据,所以自然会产生很长一段时间的白屏,我打算先解决这个问题

  • 实现思路

使用js移动元素位置,利用css的transition属性实现过渡动画。在线体验

创建一个数组arr,数组的每一项保存着节点元素的文本值(innerText)和元素在节点列表中的索引nodeIndex, 因为接下来的并不是真的交换两个节点,而是交换两个节点的位置(可能有点不好理解)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function init() {
let fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
let div = document.createElement('div'),
num = parseInt(Math.random() * 10);
arr.push({
val: num,
nodeIndex: i, //这里保存的是节点在nodeList中的位置
});

//

}
}