随笔分类 - javascript
工作中遇到的一些javascript问题总结
摘要：### 背景 前段时间给基于 vue3 的 H5 项目做一些优化，该项目经常会有一些页面间的通信，譬如选择地址、乘机人等信息后回填到上一个页面。对于这种简单、频繁的通信，实在不想搞成**重火力**（eg:pinia）。最好让使用者用完即走，不用操心除业务逻辑之外的任何事情。 ### 路由控制页面通信
阅读全文
摘要：## 3996 条路由？  `addRoute`函数用了大约1s才执行完毕。通过观察，发现居然有3996条路由记录
阅读全文
摘要：背景 同事开发一个表格，一次性渲染5w+条数据。但在渲染某些数据时，内存暴增，经排查，发现其数据用了数字90作为对象的key。 分析 我们猜测，当用数字作为对象的key时，数据将以数组的形式进行存储。由于其中拥有大量的节点（空节点也要占据内存），导致内存飙升。 使用chrome浏览器无痕模式进行验证
阅读全文
摘要：我司现在使用vue3做为新项目的框架，设计了如下的目录： |--src |-- assets/ |-- boot/ |-- components/ |-- config/ |-- lib/ |-- projects/ |-- flight/ |-- promotion/ |-- member/ |-
阅读全文
摘要：卧槽！牛逼！IMBA！这就是我第一次看到这个库的心情。迫不及待的想要分享给大伙儿。 同步代码 众所周知，JS 是一门‘单线程’语言，一旦开始，就会从始至终、从上到下的执行完毕，非常的专一。 console.log(1) console.log(2) console.log(3) // 1 // 2
阅读全文
摘要：这个活动搞一个转盘抽奖吧，简单弄下就行 离下班还有半小时，产品发给我了一个小需求。 一看我就笑了——转盘抽奖，这还不容易？无非： 请求数据； 等待结果返回，计算转盘停止时的角度 x，开始旋转； 等待旋转停止 关键代码： const angle = await fetchData() const ro
阅读全文
摘要：最近看了一本书《代码之髓》，里面提到浮点数在计算机的存储方式——IEEE 754 会引起浮点数的精度丢失问题。这让我想起了“著名”的 JS 问题：为什么 0.1 + 0.2 !== 0.3 ? 迷迷糊糊的就记得是浮点数精度丢失原因造成的，但问到具体是怎么回事儿就傻眼了。 今天就尝试用基本知识来推理下
阅读全文
摘要：getImageData ctx.getImageData方法返回一个ImageData对象，它有三个属性——width、height、data，其中 data 包含了图片色值数据。 data属性返回一个 Uint8ClampedArray，它可以被使用作为查看初始像素数据。每个像素用4个1byte
阅读全文
摘要：背景 用户点击预订按钮，会进入预订流程，可以将其粗略的总结为 4 个步骤：1.表单验证；2.乘机人校验；3.创建订单；4.订单校验。 其业务特点是： 1）以时间为序顺序执行； 2）阻塞执行，即前一步骤执行完毕后，才能执行后一步骤； 3）任一步骤出错，流程终止。 本项目基于 Vue.js 进行开发 基
阅读全文
摘要：在安卓手机端，input 输入框被输入法遮挡出现的机率几乎是 100%。如果领导们不在意，我们就睁一只眼闭一只眼。但如果要认真起来解决问题，却发现并不是很容易，然而今天并不是来倒苦水的，直接进入正题。 我们先看看 iPhone 的优异表现： 他苹果婊能做到，我们安卓鸡怎么不行？ 默默无闻 focus
阅读全文
摘要：装饰者 装饰者是一个用来改变函数行为的包装器，它可以在不更改函数原有代码的前提下，为函数增加其他功能。一个简单的例子是计算函数的执行时间： function add(a, b) { return a + b; } function calculateTimeDecorator(fn) { retur
阅读全文
摘要：日常业务开发，会频繁请求接口，非常耽误功夫。一个简单的方法是把数据缓存起来，然而我并不想每次提交前还要关心缓存数据是否被移除。 所以，要实现： 将数据复制到项目文件夹中，名字就叫 apiMock.js，不限文件个数和位置； 无侵入、不影响打包； 项目环境（重要） vue-cli3、webapck4
阅读全文
摘要：对于 PC 端的 VUE 项目来讲，刷新页面导致数据消失是一个绕不开的坑。好在 vuex-persistedstate插件能够解决这个问题。 vuex-persistedstate 它的原理是： 每次 mutation 都将整个 store 保存到本地（localStorage/sessionSto
阅读全文
摘要：大概在去年的这个时候，V8 团队发布了一篇博文 "Faster async functions and promises" ，向我们介绍了他们是如何提升 await 的执行速度，值得一看，这里还有 "中文版" 。没有这个前提，看我的这篇文章可能就没啥意义了。 博文中提到了在不同 Node 版本中，a
阅读全文
摘要：javascript 异步编程从来都是一个难题，最开始我们用 callback，但随之触发了回调地狱，于是“发明” Promise 解决 callback 嵌套过深的问题。然而由于滥用 Promise（一连串的 then），代码变得不易阅读了。此时，async-await 横空出世，它让我们可以用同
阅读全文
摘要：input 框输入后发送异步请求，页面拿到响应进行渲染。但偶尔会遇到问题：响应内容和输入结果不一致。因为 http 无法保证响应到达的顺序。 如何解决呢？提供一个小思路。 myRequest.js 我们使用 requestId 标识请求的次数，并将其封装到 myRequest 函数对象内。处理响应时
阅读全文
摘要：一般我们都不关心 ECMA 规范，只需要学习怎么使用就好了。但有时候遇到一些难以解释的问题/现象，就不得不看一下规范是如何要求实现的了。规范内容庞杂，理解其中的术语有利于我们快速看懂规范。 Environment 环境指定了标识符在表达式中的意义。譬如当谈论表达式 x + 1 时，如果不指明 x 所
阅读全文
摘要：如何创建测试是一件困难的事。网络上有许多关于测试的文章，却从来不告诉你他们是如何开始创建测试的。 所以，今天我将分享我在实际工作中是如何从头开始创建测试的。希望能够对你提供一些灵感。 目录： 使用 Express 创建一个应用 使用 Mongoose 链接 MongoDB 使用 Jest 作为测试框
阅读全文
摘要：你可能对使用数组的 join 方法已经轻车熟路，但你也许不知道： 10.If element0 is undefined or null, let R be the empty String; otherwise, let R be ToString(element0). https://www.e
阅读全文
摘要：判断“this 指向谁”是个老大难的问题。 网络上有许多文章教我们如何判别，但大多艰涩复杂，难以理解。 那么这里介绍一个非常简单实用的判别规则： 1）在函数【调用】时，“this”总是指向小数点左侧的那个对象 2）如果没有小数点，那么“this”指向全局作用域（比如 Window，严格模式为 und
阅读全文
浙公网安备 33010602011771号