灯的个人博客

forever young,forever weeping.

0%

发表于 更新于 分类于

JS-MAP问题

发现问题

  • 定义了一个MAP,代码如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    const QuestuibOptionHandlerMap = new Map([
      [0, getCommonOptions], //单选题
      [1, getCommonOptions], //多选题
      [2, () => {}], //填空题
      [3, getCommonOptions], //下拉题
      [4, () => {}], //日期
      [5, () => {}], //量表题
      [6, () => {}], //AHP 题组
      [7, () => {}], //图片上传题
      [8, () => {}], //文件上传题
      [9, () => {}], //城市
      [1, () => {}], //车型
    ]);

  • 输出MAP

    1
    console.log(QuestuibOptionHandlerMap);

    20210115173433
    然后输出的……..

解决问题.

以后多动动脑子,求你了.
卧槽啊啊啊啊啊啊!!!!!!
第二个,跟最后一个竟然重复了!!!!!!!!!
改行吧

发表于 更新于 分类于

Array.prototype.sort在不同的宿主环境,不同版本,排序方式会不同.

由于开发版本为nodev12,生产版本为nodev10,写了一个sort方法,两份代码,同样的数据,同样的代码内容.排序的内容确不一样.
v8引改变了sort方法的排序方式,导致两个版本排序的结果不一样.
最后使用lodash的orderby方法解决.
其实可以考虑自己写排序.后来感觉太麻烦了…
啊!!!我一定要把生产环境的node升级了!!!!!

发表于 更新于 分类于

笨啊 卧槽

全等号写成了等于号…
我真是个人才…
找bug找了一个小时才发现哪里写错了…
别写bug了,回家养猪吧.

发表于 更新于 分类于

记一次nuxt引入videojs排查问题经历

发现问题

开发的项目是基于nuxt框架,项目中需要使用videojs,在开发阶段没有问题,使用与样式展示都没有问题.

在打包之后运行,发现videojs的样式不能正确展示.样式错误,发现样式没有被打包.

解决问题(阶段1)

发现nuxt.config.js里面有一个配置extractCSS是用来提取css的,把css提取到一个文件里面,把这个配置设置为false就可以解决这个问题.

但是有了新的问题,因为没有提取css,nuxt在服务端渲染的时候,会把所有的样式在html页面返回,导致html的文件比较大.

当时花了一些时间,只找到这个解决办法,而且项目比较赶,暂时这样解决

解决问题(阶段2)

网页需要seo,因为样式全在html里面,不相关内容太多,权重比较低.seo大佬建议去掉这些样式.

找了好久,发现是因为用了tailwindcss这个ui框架,tailwindcss建议使用purgecss这个库来去除不需要的css,不然打包后的文件会比较大.

videojs是在客户端使用js动态添加的class,导致purgecss匹配不到这些样式.所以就从打包后的css内删除.导致样式展示错误.

去看官方文档,看到有一个safelist可以保留这些样式于是在nuxt.config.js内增加如下代码

1
2
3
4
5
6
7
export default {
    // ...
    purgeCSS:{
        safelist: [/vjs/, /video/]
    }
    //...
}

发现不起作用,各种尝试,safelist.deep,safelist.standard属性,不使用正则等…还是不行,直到看到了一个tip

20201111164002

对比了一下自己的安装的依赖,发现nuxt使用的是老版本的purgecss,找到的相关的配置,代码如下.

1
2
3
4
5
6
7
8
export default {
    // ...
    purgeCSS: {
        whitelistPatterns: [/vjs/, /video/],
        whitelistPatternsChildren: [/vjs/, /video/]
    },
    //...
}

问题解决.

总结

  • 使用tailwindcss样式库,而且用到purgecss这个插件,要注意打包过后的样式是否正确,这个插件会删除不用的css(就是在页面中,没有匹配到相应的class名).
  • 在如上前提下,出现新引入的框架样式展示不正确,考虑在nuxt.config.js里面添加相应的配置.
  • purgecss 3.0版本以上添加 
    1
    2
    3
    4
    5
    6
    7
    export default {
        // ...
        purgeCSS:{
            safelist: [/vjs/, /video/]
        }
        //...
    }
  • purgecss 2.x 版本添加
    1
    2
    3
    4
    5
    6
    7
    8
    export default {
        // ...
        purgeCSS: {
            whitelistPatterns: [/vjs/, /video/],
            whitelistPatternsChildren: [/vjs/, /video/]
        },
        //...
    }
  • 发现问题要及时解决.不能有 又不是不能用 这个心态…55555.

参考文档

发表于 更新于 分类于

给定一个数字数组, 数组里只会有两个数字, 取出唯一一个数字的位置

事例

1
2
3
输入: [1,1,1,2,1,1]
输出: 3
解释: 因为数组里唯一一个2出现的位置是3。
1
2
3
输入: [4,2,2,2,2,2,2]
输出: 0
解释: 因为数组里唯一一个4出现的位置是0。

数组长度为10000

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const arr = [1, 1, 1, 1, 1, 1, 2];
const demo = [3, 2, 2, 2, 2, 2, 2, 2];

/**返回数组中不一样的元素**/
function findDiff(arr) {
  for (let i = 1; i < arr.length; i++) {
    if (arr[i - 1] === arr[i]) {
      continue;
    }
    if (arr[i] === arr[i + 1]) {
      return i - 1;
    }
    if (arr[i - 1] === arr[i + 1]) {
      return i;
    }
    return i;
  }
}

console.log(findDiff(arr));
// console.log(findDiff(demo));

发表于 更新于 分类于
卧槽啊!!! 你要怎么样嘛! 7000预算啊!!!大哥!!! 我就是一个穷上班的!!!!! 过个生日要7000!!!!! 我有那么有钱嘛!!!!! 大哥!!!!

发表于 更新于 分类于

实现一个基础当观察者模式,当被观察者变动当时候,通知观察者.

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
32
class Observer {
  constructor(name) {
    this.name = name;
  }
  update(updateInfo) {
    console.log(`${this.name}更新,更新消息为${updateInfo}`);
  }
}

class Observerd {
  constructor() {
    this.observerList = [];
  }
  addObserve(observer) {
    this.observerList.push(observer);
  }

  notice(updateInfo = "更新消息") {
    for (let observe of this.observerList) {
      observe.update(updateInfo);
    }
  }
}

let fooObserve = new Observer("foo");
let barObserve = new Observer("bar");

let observed = new Observerd();

observed.addObserve(fooObserve);
observed.addObserve(barObserve);
observed.notice("测试消息");

发表于 更新于 分类于

域名解析问题

这段时间在迁移服务器,发现网页再刷新对时候每次刷新数据都会不一样,检查完以后发现是域名解析的问题.
在阿里云域名进行解析都时候,在解析到新服务器的时候,老服务器域名的解析没有删除.(是否需要加一个弹窗?)
每一次请求都会请求到不同的服务器,导致每次的数据都不一样,emmmm(如果数据库同步了,是不是可以这么做负载均衡,笑..)

结论

自己不仔细,删完老服务器绑定的域名以为可以了.域名解析页面没有注意到还有第二页

发表于 更新于 分类于

介绍下重绘和回流（Repaint & Reflow），以及如何进行优化

个人题解

浏览器渲染主要经过三个阶段

1、dom树与style树合成渲染树
2、计算节点的位置与大小的阶段叫回流
3、渲染计算好的节点叫重绘

如何优化

1、减少dom插入次数,可以用虚拟的节点,计算好以后,一次性插入到dom中
2、动画可以使用绝对布局,脱离文档流
3、使用gpu加速相关的属性,比如transition
4、修改的节点可以先隐藏,修改完毕后再进行显示.

相关链接

你真的了解回流和重绘吗 #4
最高赞作者github