498字1 分钟

# 起因： 在 iPad 打开页面白屏，在网页端 Chrome 可以正常浏览，网页端 Safari 白屏，查看到以下报错。 # 问题原因： (?!) 零宽负向先行断言 (?=) 零宽先行断言 (?<=) 零宽后行断言 (?<!) 零宽负向后行断言。 Safari 浏览器不支持以上四种断言验证 并且直接把正则规则包在 /…/g 里在 Safari 也会报错 # 解决方案： 修改正则断言写法，去除以上四种断言验证 例如可以用. /(?:/)(xxxx)/ 代替 /(?<=
3.5k字3 分钟

# 1、Set 原理：Set 类似于数组，但是成员的值都是唯一的，接受一个数组或类数组作为参数。代码最少但是无法去掉 {} 空对象。 let arr = [1, 1, 2, "true", true, true, undefined, undefined, null, null, NaN, NaN, {}, {}, {a:1}, {a:1}] let result = Array.from(new Set(arr)) console.log(result)  /
4.4k字4 分钟

# 如何优雅的生成网页截图 这篇文章起源于一个页面生成图片进行下载分享的需求，因为浏览器没有原生的截图 API，所以需要借助 canvas 来实现导出图片实现需求。 首先要知道，svg 到图像的转换过程涉及： 创建 Blob/Blob URL（参阅什么是 Blob URL 以及为什么使用它？） 将其渲染到画布上 返回数据 url # 可行性方案 方案 1： 将 DOM 改写成 canvas ，调用 canvas 的 toBlob 或者 toDataURL 方法即刻上传到七牛云或服务器 方案 2： 使用第三方库实现 canvas ， 在不更改页面已有 DOM 的情况下优雅产生 c
1.3k字1 分钟

我们开发中经常会碰到 package.json 里面的软件包 的版本号前边有 ，^，甚至有的有 >, < 等标识，那他们都是什么意思呢？ 想要知道，^，>，< 这些字符什么意思，我们先去了解一下什么是 npm 的语义版本控制 npm 的语义版本控制 语义版本控制：所有的版本都有 3 个数字： x.y.z 。 x 代表的是主版本（当进行不兼容的 API 更改时，则升级主版本） y 代表的是次版本（当以向后兼容的方式添加功能时，则升级次版本） z 代表的是补丁版本（当进行向后兼容的缺陷修复时，则升级补丁版本） 这是一种约定，每个 npm 包必须遵守该约定，因
943字1 分钟

大家都知道，强制一行溢出显示省略号（...）的情况很简单 overflow:hidden;//超出的隐藏text-overflow:ellipsis;//显示省略符号来代表被修剪的文本。white-space:nowrap;//不换行 但是如果要强制两行甚至多行的话，需要用到 css3 的知识点 网上大多版本都是： overflow: hidden; // 超出的文本隐藏text-overflow: ellipsis; // 溢出用省略号显示display: -webkit-box; &
4k字4 分钟

目前在学习音视频开发中，记录一点学习小心得： 视频加载触发事件 当音频 / 视频处于加载过程中时，会依次发生以下事件： loadstart durationchange loadedmetadata loadeddata progress canplay canplaythrough 所以如果当前帧的数据已加载，但没有足够的数据来播放指定音频 / 视频的下一帧时，会发生 loadeddata 事件。 # 常用事件 播放 this.play () 停止 – video 没有 stop 方法，可以用 pause 暂停获得同样的效果 暂停 this.pause ()
401字1 分钟

从需求出发，想维护一堆字典。在使用时，要么通过枚举直接拿到值，要么拿到对应 options，对于 value/Label 互查，都可以通过 options 得到。 基于以上两点需求: 定义枚举，代码中避免写出 status === 1 这种代码。 export enum Status { WaitPay = 0, Success = 1, Cancel = 2, } 定义对应 options，增加了 label，便于遍历、渲染。另外这里也支持扩展。 export const StatusOptions = [ {
6.6k字6 分钟

本期我们要做的是一个四方位云台操控器（也是遥控器），我们需要方向的 icon（自己找或者自己画～）和 ahooks 的 useInterval（ahooks 真好用啊 ） # 1. 实现目标 长按可以设定每 x 秒触发一次接口 点击也可以移动 ... 没了（就是这么简单） # 2. 实现方法 export const DIRECTION_MAP: any = { top: 1, bottom: 6, left: 4, right: 5,};function Ptz(props: IPtzProps) { const [interval,
1k字1 分钟

# resizable 实现拖拽改变 div 宽度 记录一下需求，方便下次粘贴。 要求是右侧可以拖拽调节大小，并且 hover 上去要有蓝色竖线提示，只需要使用 resizable 这个 js 库，这个需求就非常简单了～～ # 1. 效果展示 # 2. 使用方法 yarn add re-resizable 或者 npm install --save re-resizable 安装组件 在项目中引用 handleLine 下的 div 才是移动的块，所以我们设置的是它下层的 div Index.less .resizable {   transition: all
3.1k字3 分钟

需求来源是某页面具有编辑功能，如果用户正在编辑态，且内容还没保存。 如果用户点击了某些地方会导致切换路由，需要弹窗提示是否需要切换。 如果用户想要刷新或关闭浏览器窗口需要提示用户，是否刷新 / 关闭此网站？ 基于这个需求想到了四种方法，记录下来方便自己下次复制粘贴。 # 1. componentWillUnmount 首先这个钩子函数是在组件卸载前调用的一个函数，它并不能阻止当前组件的卸载。所以不要想方设法在这里做提示，因为即便提示了，组件还是会卸载，文章还是会消失。 # 2. 路由守卫 - <Prompt/> 为了实现第一个功能，需要一个跳转路由之前进行的判断