随笔分类 - JavaScript学习心得
摘要：一、概述 随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。 Cookie 的大小不超过4KB，且每次请求都会发送回服务器； LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，
阅读全文
摘要：Event Loop 是 JavaScript 的基础概念，面试必问，平时也经常谈到，但是有没有想过为什么会有 Event Loop，它为什么会这样设计的呢？今天我们就来探索下原因。 一、浏览器的 Even Loop JavaScript 是用于实现网页交互逻辑的，涉及到 dom 操作，如果多个线程
阅读全文
摘要：一、问题引子：执行顺序 public static int test1() { int x = 1; try { return x; } finally { x = 2; } } 答案是1不是2，你答对了吗？大家都知道在TCF中，执行到return的时候会先去执行finally中的操作，然后才会返回
阅读全文
摘要：先聊聊需求背景：公司运营需求，说在富文本编辑器中发布包含图片的 Word 文档时，图片和文本内容不能一起复制，每次她们都得分开处理，对于包含较多图片的 Word 时，她们处理起来很抓狂。 一、准备知识：docx 是怎样存储图片的 要解决上述的问题，首先就需要能够解析 Word 文档中的图片。目前 W
阅读全文
摘要：PS：vue3 的源码里大量使用了纯函数注释，那么我们就来了解下：使用 /*#__PURE__*/ 可标注纯函数，那么纯函数是什么，有什么作用？ 一、什么是纯函数 1、纯函数（pure function） （1）返回结果只依赖它的参数，传入的参数一样，返回的结果也是一样的 （2）执行时不改变作用域外
阅读全文
摘要：一、css 样式覆盖实现 1、核心：通过切换 CSS 选择器的方式实现主题样式的切换 在组件中保留不变的样式，将需要变化的样式进行抽离 提供多种样式，给不同的主题定义一个对应的 CSS 选择器 根据不同主题设置不同的样式 2、如何实现： （1）通过 vuex 存储和控制全局的主题色； （2）在 te
阅读全文
摘要：localStorage 存储我们经常使用，但是你有没有深入思考下面这些问题呢？ （1）localStorage 存储的键值采用什么字符编码 （2）5M 的单位是什么 （3）localStorage 键占不占存储空间 （4）localStorage的键的数量，对写和读性能的影响 （5）写个方法统计一
阅读全文
摘要：一、使用游戏来理解协程的概念 如果你还在想办法理解协程是什么，那么就让我们玩一玩分手厨房。分手厨房（overcooked)，是一款多人烹饪游戏，玩家需要在特定的时间内做出尽可能多的订单。协程 (coroutine)有些人花了很多时间并不一定能理解它，而游戏，却很容易理解。 1、如何玩？先让我们来看看
阅读全文
摘要：一、emoji与零宽连接符的应用 1、Emoji ZWJ Sequences 一般的 emoji 的字符是 3 个字节或 4 个字节， 像 👩❤️👩 这种看起来只有单个字符的 emoji 之所以它的 size 远超过 4 字节，是因为它是由若干个 emoji 按顺序连接组成的，这种顺序叫做
阅读全文
摘要：先来看一个奇怪的现象：为什么字符 abc 的长度是23？ 一、什么是零宽度字符 1、零宽度字符是隐藏不显示的，也是不可打印的，也就是说这种字符用大多数程序或编辑器是看不到的。 最常见的是零宽度空格，它是Unicode字符空格，就像如果在两个字母间加一个零宽度空格，该空格是不可见的，表面上两个字母还是
阅读全文
摘要：一、什么是设计模式 官方解释一点就是：模式是一种可复用的解决方案，用于解决软件设计中遇到的常见问题。 说白了，就是“套路”，举个例子：我们玩游戏，第一关用了半小时，第二关用了一小时，第三关用了两小时，......，然后，你花了一个月练到了满级； 于是你开始练第二个号，这时候呢，其实你已经知道，每一关
阅读全文
摘要：一、问题背景 - 正则表达式匹配任意字符 正则表达式中，“.”（点符号）匹配的是除了换行符“\n”以外的所有字符。但有时候我们需要匹配包括换行符在内的字符，发现了几种正则表达式匹配任意字符（包括换行符）的方法。 可以用 ([\s\S]*)，也可以用 “([\d\D]*)”、“([\w\W]*)” 来
阅读全文
摘要：一、基本用法 1、Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。 const target = { a: 1 }; const source1 = { b: 2 }; const source2 = { c: 3 }; Obj
阅读全文
摘要：问题背景来自于这篇文章《如何搞定Banner背景自动换色的功能？》- https://mp.weixin.qq.com/s/c3lv_OjSsUl8365WepOMhw 一、CSS 提取图片主题色功能探索 一种纯 CSS 实现的方案。在《小技巧！CSS 提取图片主题色功能探索 - https://w
阅读全文
摘要：H5 标准新增的本地存储 localStorage 已经很熟悉了，但是还有个 storage 事件监听确实比较陌生，这个事件可以通过更新 localstorage 来触发，而且当前在同一个浏览器下打开的所有同源页面都可以监听得到！下面我们就来具体了解一下： 一、Storage事件介绍 1、stora
阅读全文
摘要：BroadCast Channel 可以帮我们创建一个用于广播的通信频道。当所有页面都监听同一频道的消息时，其中某一个页面通过它发送的消息就会被其他所有页面收到。它的API和用法都非常简单。下面我们来简单了解一下： 一、Broadcast Channel 是什么 1、首先，我们想一个问题：在前端如何
阅读全文
摘要：一、hash、hashchange 事件介绍 1、hash 是什么？ hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分，一般有当前页面中 href 中 # 地址触发。hash 即 URL 中 # 字符后面的部分，具有如下特点： 使用浏览器访问网页时，如果网页URL中带有hash，页
阅读全文
摘要：一、window下自带的 name 属性 不知道大家有没有发现这样一种情况：在控制台里直接输出未声明变量，正常情况应该是会报错的，而且声明未赋值的变量输出应该是undefined；但是偏偏就个别特例，就是name属性。 其实 window 自身就带有 name 这个属性，在控制台输入window可以
阅读全文
摘要：在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。 正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状
阅读全文
摘要：postMessage 是 html5 引入的API，postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档、多窗口、跨域消息传递，多用于窗口间数据通信，这也使它成为跨域通信的一种有效的解决方案。 一、Window postMessage() 方法介绍 po
阅读全文