雪花的博客

发表于 更新于

数组操作的性能问题

看下面这段代码：

1
2
const arr = [1, 2, 3, 4, 5]
arr.unshift(0)

比如像上面那两行代码, 大家都知道数组是有下标的。

如果往输入前面插入一个元素，那么后面的所有元素下标整体都是会往后移动的。这个数组的下标移动，一旦数据量过多的话，就会造成很严重的性能损耗。

实际应用场景

场景一：物联网项目

例如: 物联网项目，一个设备的模板，数据量大的可能有几千个参数。如果把第一个删除删除了，后面恐怖的数据量的下标前移，会给页面造成大概一秒钟的卡顿感。

场景二：滑动加载页面

再比如一些滑动加载的页面，那个页面还具有，自己的文章能右滑删除的功能。

如果存放文章的数据到达了一定数量，用户再删除文章，如果我们重新请求接口，加载列表。这样显然，用户的体验是更不好的。一般在接口请求删除成功后，对本地的那个文章在进行删除。但是，显然有时候也会造成不好的体验。

解决方案

这个时候链表这种数据结构, 再配合上es6的迭代器就很合适了。

代码见以下链接：

双端循环链表

发表于 更新于

为什么需要IndexDB

前端加载某些过大的静态文件，而且还是无法被浏览器缓存的资源时。每次都要浪费很多时间。

比如three.js需要使用的建模文件。如果只有几十kb，几MB的话倒还好。如果模型文件十多M，甚至是几百多M的话。每次关闭网页再重新打开，就又重新加载一遍。长时间的重复等待实在是倒人胃口。

这个时候就可以用indexDB将这些大型文件存起来。避免重复加载这些资源，而倒人胃口。

使用体验

关于这个问题，我自己钻研了一下，并且封装了一个操作IndexDB的方法(详情见文章下链接)。

有一说一，这个东西比MongoDB难用。不能够直接新建表，必须每次在升级数据版本的时候，触发的周期里才能去新建。实在是，太难受了。

emj

相关资源

IndexDB使用方法

发表于 更新于

项目需求

这几天公司做一个项目，遇见了一个需要拖拽表格顺序的项目。

但是UI用的又是element。是没有这个功能的，所以自己就手写了一个插件。

发在了github上面。如果有需要用到的朋友可以移步下面。

代码地址

打开github链接

发表于 更新于

循环依赖示例

1
2
3
let a = {}
let b = { a }
a.b = b

经验分享

这样的循环依赖的对象，需要每次递归的时候保留上一次递归的层级。
并判断这次递归的内容中，有没有上一次的内容。
如果有的话，就直接返回上一次的内容就行了。中断了递归。

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
 * @param { object } obj
 * @returns { object }
 */
const deepCopy = (obj, stack = []) => {
  let target = null
  if (typeof obj === 'object') {
    if(stack.includes(obj)) {
      return obj
    } else {
      stack.push(obj)
    }
    if (Array.isArray(obj)) {
      target = []
      obj.forEach(item => {
        target.push(deepCopy(item, stack))
      })
    } else if (obj) {
      target = {}
      for (const [key, value] of Object.entries(obj)) {
        target[key] = deepCopy(obj[key], stack)
      }
    } else {
      target = obj
    }
  } else {
    target = obj
  }
  return target
}
export default deepCopy

发表于 更新于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
 * @param { object } obj
 * @returns { object }
 */
const deepCopy = (obj) => {
  let target = null
  if (typeof obj === 'object') {
    if (Array.isArray(obj)) {
      target = []
      obj.forEach(item => {
        target.push(deepCopy(item))
      })
    } else if (obj) {
      target = {}
      for (const [key, value] of Object.entries(obj)) {
        target[key] = deepCopy(obj[key])
      }
    } else {
      target = obj
    }
  } else {
    target = obj
  }
  return target
}
0%