javascript高级知识

1.”a”==true 和 “a”==false 结果都是false ?

今天有同事问我：”a”==true 和 “a”==false 结果都是false ? 我也答不上来，但是 “1” == true 返回的是 true。

经过查询资料，抽象比较算法的具体过程如下：

根据图示，那就好解释了。”a” 和 true 属于不同的类型，Type(true) 为Boolean 类型，所以两者返回的结果是 x==ToNumber(y) 的结果,即 “a”== 1。继续往下走，结果符合第五条的条件，即 Type(x) 为 String 且 Type(y) 为 Number,返回比较ToNumber(x)==y的结果，即ToNumber(“a”) == 1,即 NaN == 1 ，typeof(NaN)为number,typeof(1)也为number。

两个类型相同的进行比较，符合条件1，又因为x为NaN，所以符合条件c的第一条，返回false,整个比较过程结束。同理 “a” == false 最后也会转换为NaN和1的比较，也符合 1.c.i 条，结果为false。这样也可以解释为什么”1” == true 返回的是true了。
因为 “1” == true,符合第八条，返回比较 x== ToNumber(y) 的结果，即返回 “1” == 1 的结果。又因为 “1” == 1的比较符合第五条，则返回 ToNumber(x) == y的结果，即返回 1 == 1 的结果，继续比较，则符合 1.c.iii 条，所以结果为true。

不知道是否对，应该是这么分析的吧。

2.pako压缩

需求是这样的，后端传回来了很多的数据，为了减少网络请求，老板要求，把数据存储到本地中，但是使用localStroage存储的话会有配额限制，于是老板就想了一个好招，先用js进行压缩，然后在进行存储啊。于是，就开启了我的gzip压缩之路，首先找到的就是pako这个js代码库。

需要说明的是：1.服务器开启了Gzip压缩，数据传到前台之后，前台是自动解压缩的，不需要前端程序员干扰。2.pako并不是万能的压缩工具,它对于某些特定文件(图片,视频,pdf等)均没有很好的压缩效。

这个库用起来也非常的简单,引入压缩库，然后执行压缩和解压缩

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

<script src="./static/lib/pako.min.js"></script>

<script>
    // 压缩数据
    var gzipdata=pako.deflate(JSON.stringify(data), { to: 'string' })
    // 保存数据
    sessionStorage.setItem(sectionId+"_"+start_time+"_"+end_time,gzipdata);

    // 解压缩数据
    var restored = JSON.parse(pako.inflate(gzipdata, { to: 'string' }));

</script>

3.localStorage 存满了怎么办？

各主流浏览器（包含PC、移动端）都是 5M 的数量级。 值得说明的是，安卓上手 Q 、手机QQ浏览器、微信中则是 2.5M 的数量级，因此在移动端，本地存储的 SIZE 更加珍贵。 综上，SIZE 在 2 - 5M 的区间。Cookie是4096字节，也就是4k的大小。

localStorage存不下了怎么办？那就清空全部的缓存，然后重写存储啊。

1
2
3
4
5
6
7
8
9
10
11

const QUOTA_EXCEEDED_ERR_CODE = 22
function write (key, data) {
    try {
        localStorage.setItem(key, data);
    } catch (e) {
        if (e.code === QUOTA_EXCEEDED_ERR_CODE) {
            localStorage.clear();
            localStorage.setItem(key, data);
        }
    }
} 

4.原生实现的效果

(1) tab页

5.SameValueZero比较算法

最近使用array.indexOf(),查询数组中是否有某个值。

5.webp图片格式

这种格式是什么，有什么有点，我就不说了，就是摘抄下，优雅降级的方法，参考文章2中的内容。
(1) 使用picture标签

(2) 使用js检测是否支持

(3) 后端处理

6.利用js代码阻止用户打开控制台

今天打开一个网站 (可能作者也不想让我们看到他的代码)，发现了一个奇怪的现象，就是每当我想要打开控制台，查看页面的js代码的时候，页面就跳转到了一个自定义的网站，刚开始我还以为是我操作错误，反复操作之后，还真是出现了这个现象，于是我上网谷歌了一下。

1
2
3
4

//debug调试时跳转页面
var element = new Image();
Object.defineProperty(element,'id',{get:function(){window.location.href="http://www.baidu.com"}});
console.log(element);

解决方法就是使用书签管理器监听beforeunload事件，点击【右上角一排竖点】->【书签】->【书签管理器】->【右上角一排竖点】->【添加新书签】

将打开下面这个书签管理窗口，然后名称随便写，网站输入下面的内容，保存。

1

javascript:window.addEventListener('beforeunload', function (e) { e.preventDefault();e.returnValue = '' });

在阻止跳转的网页上，先点击这个阻止跳转的书签，然后就可以打开控制台了。在弹出的提示框中选择取消，就可以留在这个页面了。

7.padding无法触发点击事件

今天遇到一个怪事，就是一个元素设置了padding之后，点击padding部分，元素的点击事件不响应。

8.事件代理

使用事件代理，可以很好的解决元素绑定事件带来的内存消耗问题。

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
33
34
35
36
37
38
39
40
41
42
43
44
45

function eventDelegate (parentSelector, targetSelector, events, foo) {
  // 触发执行的函数
  function triFunction (e) {
    // 兼容性处理
    var event = e || window.event;

    // 获取到目标阶段指向的元素
    var target = event.target || event.srcElement;

    // 获取到代理事件的函数
    var currentTarget = event.currentTarget;

    // 遍历外层并且匹配
    while (target !== currentTarget) {
      // 判断是否匹配到我们所需要的元素上
      if (target.matches(targetSelector)) {
        var sTarget = target;
        // 执行绑定的函数，注意 this
        foo.call(sTarget, Array.prototype.slice.call(arguments))
      }

      target = target.parentNode;
    }
  }

  // 如果有多个事件的话需要全部一一绑定事件
  events.split('.').forEach(function (evt) {
    // 多个父层元素的话也需要一一绑定
    Array.prototype.slice.call(document.querySelectorAll(parentSelector)).forEach(function ($p) {
      $p.addEventListener(evt, triFunction);

      // 保存事件处理，可以移除
      $p[evt]=triFunction;
    });
  });
}


/// 使用
function click() { console.log(this);
eventDelegate('#list', 'li', 'click',  click});

// 移除
let mapDom=document.querySelector("#list");
mapDom.removeEventListener("click",mapDom.mousedown);

9.视频截图

我使用了 video 进行了屏幕截图

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
33
34
35

/**
 * 视频截图
 */
function screenShot() {
  var video = videoRef.value; // 找到需要截图的video标签
  var canvas = document.createElement('canvas');
  if (video && canvas) {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); // 图片大小和视频分辨率一致
    var strDataURL = canvas.toDataURL('image/png'); // canvas中video中取一帧图片并转成dataURL
    var arr = strDataURL.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    var blob = new Blob([u8arr], {
      type: mime,
    });
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = '截图.png';
    document.body.appendChild(a);
    a.click();
    setTimeout(function () {
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }, 1000);
  }
}

10.屏幕截图

上面的代码实现了视频截图，还有就是整个屏幕的截图。