qq_39404437的博客

【代码】【fetch】浏览器默认请求方式。

看到蛮多写IntersectionObserver的博客的，但是感觉里面关键部分都介绍的模棱两可，所以我来简单说说这个。至于什么是IntersectionObserver，官网上有，我就不去一一阐述了，下面说最关键的点和使用场景！

【代码】有趣且重要的JS知识合集（22）树相关的算法。

新增或设置DOM的属性值：setAttribute()获取DOM的属性值：getAttibute()移除DOM的属性值（自定义和非自定义都可以移除）：removeAttibute()dateset:自定义属性写法规范：以用data-开头，方便识别哪些是自定义的属性方法：元素.dataset它是一个对象，可以获取所有以data-开头的自定义的属性获取单个属性，用元素.dataset.属性名设置元素属性，元素.dataset.属性名 = 数据。

screen/client/scroll/offset等坐标属性知识点

原生js实现图片前端上传 并且按照最佳宽高比例展示图片，然后可以自定义截取图片，右侧预览区域 可以看到截图，最后还可以导出图片

1、新建运行并挂载容器1、新建运行并挂载容器option作用-i以交互模式运行容器，通常与 -t 同时使用-t启动容器后，为容器分配一个命令行，通常与 -i 同时使用-v目录映射，容器目录挂载到宿主机目录，格式： :-d守护进程，后台运行该容器-p指定端口映射，格式：主机(宿主)端口:容器端口-P随机端口映射，容器内部端口随机映射到主机的端口容器名字设置容器使用内存最大值指定容器的 host name指定容器 dns 服务器设置环境变量。

1、install 完整流程1、install 完整流程1.1、根据 .npmrc 进行安装前环境配置注意：镜像源就是在这个文件中配置的~/.npmrc/etc/npmrc1.2、检查有无 lock.json文件注意：npm/pnpm 检查的是 package-lock.json，yarn检查的是 yarn.lock，cnpm没有对应的lock文件，所以不会进行对比检查。

其实在外层是上传接口的请求头区别，但在实际上，只是由于流模式下的写法，无法将音频转成mp3格式（默认为wav格式），当然网上也有小伙伴认为引入lame库来实现wav转换mp3的操作，当然可以啦~这不影响，只是对我来说，我是能不引入第三方库就不引入。这三个状态分别是设备闲置，设备使用，设备暂停，有点类似于window的未响应，当我们想要操作麦克风时，此时麦克风inactive了，那就无法响应我们的请求，所以当状态为inactive时，我们都return掉，使他不执行我们的方法。

在项目开发中，遇到在表格中一次性加载完的需求，且加载数量不少，有几百几千条，并且每条都可能有自己的下拉框，输入框来做编辑功能，此时普通的el-table肯定会导致浏览器卡死，那么怎么办呢？

之前我讲过如何用js绘制矩形框，下面链接快速通道~那么如何判断多个矩形框是否相交？嵌套还是其他的呢？那下面我来分别写写关于矩形框常用的几个算法吧。

效果展示这属于有趣的小功能，其实很多站点都已经提供了此功能了噢，不过我这里还是写一写~效果展示图片上传后，任意点击图片提取点击处颜色的rgba格式和十六进制格式。

通过视频文件上传后监听loadedmetadata事件来获取视频属性。

offsetWidth和clientWidth都是只读属性，但是offsetWidth是包括border的，而clientWidth只包含padding，不包含border的，所以可以利用这个差距来计算border宽度。当很多时候，滚动条宽度也会影响到我们页面上的布局，那怎么去计算这宽度呢？浏览器没有提供这方法来计算，那么我们就模拟一个有滚动条的div，然后算出宽度~

原生js实现矩形框的绘制/拖动/缩放/截图及导出功能1.1、矩形框的绘制1.2、矩形框的缩放1.3、矩形框的拖动1.4、矩形框的键盘移动方向1.5、矩形框的截图及导出图片

1、canvas略解林大大又来更新啦~这次主要做的是关于canvas图像绘制的部分，要实现的功能主要是绘制、对canvas的放大以及那我们先来大概了解下canvas：1、canvas略解宽高是必须加上的，当然你也可以选择动态宽高，可以设置宽高百分比喔，canvas用于在页面上绘制图像（可以是自己的图片，也可以绘制自定义矢量图形：矩形等），其实我们不用担心大量的重绘canvas，现在浏览器完全扛得住这压力，非常流畅丝滑。

call/apply/bind 源码级代码实现

前端必备常用基础算法，基本包含各个方面。关于字符串，树形结构，vue，js等相关算法

/** * 防抖函数（常用于input框搜索情况） * @param {*} func * @param {*} delay * @param {*} immediate * @returns */export function debounce(func, delay, immediate = true) { let timer = null return function(args) { let _this = this if (timer) clearT.

1、常用的input和change事件监听众所周知，输入框我们最多的使用的两种监听：let dom = document.querySelector('#input')dom.addEventListener('input', () => {})dom.addEventListener('change', () => {})首先 oninput事件，是在我们每次输入值都会触发，由于太过于频繁，我们一般都会加上防抖函数，对于onchange事件，他其实和onblur 事件很类似，

socket是在前端里除了接口外最常用的获取数据的手段了，下面我直接上代码总体包括两部分（连接和构建），构建呢又分为断掉重连以及连接出错重连//连接websocket connectWebsocket() { window.socketInstance = this.buildWebsocket(`ws://${socketHost}:${socketPort}/websocket/${getCookie('portal.session.id')}`, (res) => {

条件是两整型数组，用于比较后一个数组相比前一个数组 增加了哪些数据，减少了哪些数据，看过vue2 DOM diff的同学就会知道，虚拟DOM比较的是DOM对象集合的差异，我们这里稍微简单些，是俩整型数组对比interface ResMap { add: Array<number | string> remove: Array<number | string>}interface CompareMap { [key: string]: string | nu.

数组转化为树形结构

后端提供了数据，但是不提供导出excel的接口，那怎么办？前端也可以实现excel导出噢~

当我们在上传文件时，会使用 <input type='file' id='file'/>当第一次上传文件时，ok，上传成功，是没有问题的，第二次上传同样的文件时（为啥上传同样的文件？测试的小伙伴会经常这样操作。。），会发现没有反应，原因是因为，在上传时，浏览器会保存我们上传的文件，并与之前的保存值进行比较，相同就不触发onchange事件，不同才会触发，所以我们第二次上传相同文件时，就没有触发onchange事件，解决方法如下:document.querySelector('#uploa

JS事件循环机制和Promise

1、浮点数相加减乘除问题加法例:1.23456+ 2.345 = 3.57956function add (a, b) { let a1 = a.toString().split('.')[1].length let b1 = b.toString().split('.')[1].length let max = Math.pow(10, Math.max(a1, b1)) return (a * max + b * max) / max }..

JS常见基础使用问题

总结:1、__proto__和constructor属性是对象所独有的；2、 prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。3、__proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点null，然后返回undefined，再往上找就相当于在null上取值，会报错。通过__proto__属性

数组我们常用的方法 map, filter, some, every, find, findIndex等等, 先不考虑es6编译es5转换问题, reduce是属于数组原型链上的方法, 不用考虑兼容性问题, 下面来看看用法和实例:arr.reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ } ) // 无初始值arr.reduce((previousValue, currentValue, curre