灯的个人博客

forever young,forever weeping.

0%

发表于 更新于 分类于

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

发表于 更新于 分类于

有以下 3 个判断数组的方法，请分别介绍它们之间的区别和优劣Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()

个人题解

1、Object.prototype.toString.call(),是使用原型上的toString()方法,输出为[Object xxxxx],通过xxxxx的内容判断当前的类型.目前大部分判断类型都是基于此方法,比较准确

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
console.log(Object.prototype.toString.call([1, 2, 3])); //[object Array]
console.log(Object.prototype.toString.call(1)); //[object Number]
console.log(Object.prototype.toString.call(NaN)); //[object String]
console.log(Object.prototype.toString.call("1")); //[object Function]
console.log(Object.prototype.toString.call(() => {})); //[object Number]
console.log(Object.prototype.toString.call(undefined)); //[object Undefined]
console.log(Object.prototype.toString.call(null)); //[object Null]
console.log(Object.prototype.toString.call({})); //[object Object]
console.log(Object.prototype.toString.call(/reg/)); //[object RegExp]
console.log(Object.prototype.toString.call(true)); //[object Boolean]
console.log(Object.prototype.toString.call(Symbol)); //[object Function]
console.log(Object.prototype.toString.call(new Set())); //[object Set]
console.log(Object.prototype.toString.call(new Map())); //[object Map]
console.log(Object.prototype.toString.call(new Date())); //[object Date]
console.log(Object.prototype.toString.call(new WeakSet())); //[object WeakSet]
console.log(Object.prototype.toString.call(new WeakMap())); //[object WeakMap]
// ....

2、instanceof是基于原型链的判断方法,一个数组会找到他的原型是不是属于array,如果是返回true

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
let fsimpleStr = "This is a simple string"; 
let fmyString  = new String();
let fnewStr    = new String("String created with LETructor");
let fmyDate    = new Date();
let fmyObj     = {};
let fmyNonObj  = Object.create(null);
simpleStr instanceof String; // 返回 false, 检查原型链会找到 undefined
myString  instanceof String; // 返回 true
newStr    instanceof String; // 返回 true
myString  instanceof Object; // 返回 true

myObj instanceof Object;    // 返回 true, 尽管原型没有定义
({})  instanceof Object;    // 返回 true, 同上
myNonObj instanceof Object; // 返回 false, 一种创建非 Object 实例的对象的方法

myString instanceof Date; //返回 false

myDate instanceof Date;     // 返回 true
myDate instanceof Object;   // 返回 true
myDate instanceof String;   // 返回 false

class Parent {}
class Child extends Parent {}
let demo = new Child();
console.log(demo instanceof Child); // true
console.log(demo instanceof Parent); // true
console.log(demo instanceof Object); // true

3、Array.isArray(),Array对象上提供的判断是否是数组的方法,比较准确

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
Array.isArray([1, 2, 3]);  
// true
Array.isArray({foo: 123}); 
// false
Array.isArray("foobar");   
// false
Array.isArray(undefined);  
// false

// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'))
// 鲜为人知的事实：其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype); 

// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray(new Uint8Array(32))
Array.isArray({ __proto__: Array.prototype });

相关链接

第 21 题：有以下 3 个判断数组的方法，请分别介绍它们之间的区别和优劣Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()
MDN isArray
MDN instanceof

发表于 更新于 分类于

如何实现a=1a=2a=3

个人题解

1
2
3
4
5
6
7
8
9
10
11
// node
let b = 1;
Object.defineProperty(global, "a", {
  get() {
    return b++;
  },
});

console.log(a===1); // true
console.log(a===2); // true
console.log(a===3); // true