JavaScript
文章平均质量分 71
JavaScript
倪琛
程序员
展开
-
JavaScript 神奇的 sort() 方法
最近做一道算法题,感觉写的算法没错啊,可结果就是不对。调试很久之后发现,竟然是 sort() 方法出了问题!示例如下:a = [1, 2, 3, 10]a.sort() // a = [1, 10, 2, 3]惊呆了!一时间以为我排序的是字符串而不是数字。可我用的明明是数字呀!然后又读了一般 MDN 上的相关文档:Array.prototype.sort(),发现人家还真就是这么定义的!默认会把数字先转换成字符串再排序!我晕!!这是谁设计的??如果想要正常按大小排序,需要这样:a = [原创 2022-04-02 07:48:59 · 797 阅读 · 1 评论 -
通过 useEffect 让过期请求自动失效
目录背景实现代码说明参考链接背景很多时候都会遇到这么一种场景:需要不断发送请求,并且新请求发出去的时候,旧请求就过期了。但如果旧请求反而后收到结果,就可能会覆盖更新的结果,造成数据错误。举例来说,假设要实现一个实时搜索框,用户在键入的过程中就可以看到结果,不需要按回车键。例如用户输入 “cat”,则会依次发送 3 个请求:“c”、“ca”、“cat”。这时候,即便 “ca” 的结果比 “cat” 后到,也一定不能覆盖 “cat” 的结果。实现代码示例代码如下:const [searchQue原创 2022-02-27 14:30:06 · 249 阅读 · 0 评论 -
React Native Expo 项目中添加动画音效
目录背景实现代码参考链接背景最近做一个学校作业,用 React Native 写一个游戏。游戏中涉及一个物体下落的动效,是用 React Native 的 Animated API 实现的。现在希望在物体落地的时候发出“嗒”的一个音效,没想到还挺麻烦。首先需要一个库来实现音频的播放。网上搜了一下,大部分人的解决方案都是用 react-native-sound 这个库。我照着试了一下,安装很麻烦不说,即便我只是像下面这样引入这个库:import Sound from 'react-native-so原创 2022-02-17 21:55:17 · 2581 阅读 · 0 评论 -
React Native 中使用 Animated 实现物体下落动效
目录背景实现代码需要注意的几点效果参考链接背景学校留了一个作业,要用 React Native 做个游戏。我做的游戏涉及物体下落的效果,今天来尝试一下使用 React Native 的 Animated API 来实现这个效果。实现代码比较简单,这次直接上代码吧:import { useRef, useEffect } from 'react';import { Animated, Dimensions } from 'react-native';const WINDOW_WIDTH =原创 2022-02-06 18:25:30 · 3097 阅读 · 0 评论 -
使用 Matter.js 在 React Native 中实现物体下落
目录背景Matter.js 简介使用 Matter.js 实现物体下落参考链接背景最近学校有个作业,用 React Native 做个游戏。我想在里面加一些物理效果,比如物体下落。如果自己写的话会比较麻烦,不如直接用现有工具。使用 React Native 的一大好处就是,可以直接用现成的 JavaScript 库,比如物理引擎 Matter.js。Matter.js 简介简单来说,Matter.js 分为两部分:物理引擎(Matter.Engine):你可以创建一些物体,指定物体的属性(例如原创 2022-02-04 21:38:42 · 1151 阅读 · 0 评论 -
如何正确搭配使用 useEffect 与 setInterval
目录背景失败的尝试哪里出错了?正确写法方法一方法二参考链接背景useEffect 看似很简单,其实不然。由于没有理解 useEffect 的工作原理,我被狠狠坑了一回。事情是这样的:我想实现一个很简单的“物体下落”效果:物体的垂直位置用 positionY 这个 state 来表示,从上往下计算, positionY 越大就离屏幕顶端越远;设置一个 setInterval,每隔一小段时间(30 ms)就增加 positionY,然后基于 positionY渲染物体,从而实现“物体下落”的效果;原创 2022-02-02 20:35:15 · 2418 阅读 · 0 评论 -
MobX store 基于另一个 store 做出 reaction
目录背景RootStore 模式Reaction参考链接背景最近遇到一个问题:我们每个域(Domain)都维护自己的一个 MobX store,通常情况下不需要和其他 store 产生联系。比如我们是搜索引擎组(相当于一个域),只需要维护自己的 store 就行了。但突然有个需求,需要我们这个 store 和用户账户组(另一个域)的 store 产生联系:当用户在同一个账户下切换使用者子账户时(比如一家几口人共用一个账户,但有各自的使用者子账户),我们就要加载相应子账户的搜索历史记录。简单来说就是:原创 2022-02-01 11:26:45 · 1110 阅读 · 0 评论 -
获取 TypeScript enum 类型的键名称
目录背景解决方法参考链接背景在 TypeScript 中,通常基于数值来创建 enum 类型,例如:enum Direction { Up = 1, Down, Left, Right,}这样的话,Direction.Up、Direction.Down、Direction.Left、Direction.Right 的取值就分别为 1、2、3、4。但前两天我遇到了一个比较奇怪的问题:后端传来一个值,我需要检查一下它属于该 enum 类型中的哪个类别,然后据此执行后续逻辑。类似于这原创 2022-01-24 18:31:41 · 4415 阅读 · 0 评论 -
解决 React Native Expo 项目运行太慢的问题
目录背景解决背景最近在做一个学校的项目,用 Expo 开发一个 React Native 的项目。今天尝试加一个物体坠落的动效,发现慢的出奇!根本没法用啊。花了半天时间,尝试排查各种原因,无果。一开始以为是我写的代码的问题,后来把能解决的都解决了,甚至完全换上别人写好的、一定没问题的代码,居然还是一样慢!最后想到,是不是因为一直开着远程调试?这还是做上一个项目的时候开的,但因为所有项目都是从同一个手机上的 Expo 应用中打开的,所以 Expo 仍然保留了远程调试开启的状态。解决尝试关掉了 E原创 2022-01-24 00:39:58 · 3220 阅读 · 1 评论 -
TypeScript 中 import type 与 import 的区别
目录背景`import type` vs `import`使用 `import type` 的好处参考链接背景这周遇到了一个比较奇怪的问题:如何在 TypeScript 中根据某个 enum 的取值来执行后续逻辑?按理来说应该很简单,这是 enum 的定义:export enum MyEnum { DEFAULT = 0, SOME_VALUE = 1, SOME_OTHER_VALUE = 2,}然后在另一个项目中,通过 import type 来引入:import type原创 2022-01-15 20:26:30 · 29316 阅读 · 30 评论 -
React Native 初体验
目录背景从 React 到 React NativeExpo开发与调试样式小结背景之前做过 React 前端开发,这学期学校有一门移动开发的课教 React Native,我就选了。上了半学期,做了几个小的 React Native 项目,感觉还挺好,简单写写 React Native 的开发体验。从 React 到 React Native直到接触了 React Native,我才惊叹于 React 的强大。因为从 React 到 React Native,学习成本实在太低了!你还是在用 Rea原创 2022-01-08 23:57:35 · 337 阅读 · 0 评论 -
Next.js 实现原理系列(3):页面渲染
目录背景切换 Page 时,为什么页面上不变的部分也会被重新渲染?源码片段:doRenderReact 的 diff 算法背景这是 Next.js 实现原理系列的第 3 篇,承接之前对 Link 和 Router 的讨论,来看看页面渲染的原理。由于 Next.js 的选择,以及 React 的 diff 算法本身,每次切换页面时,页面组件都会被重新渲染。如果想要避免页面上的某个部分重新渲染,就不能把它放到相应的页面组件内,而是放到自定义的 `App` 组件内。原创 2021-12-12 00:29:04 · 2208 阅读 · 4 评论 -
使用 event.stopPropagation() 阻止事件传播
目录背景DOM 事件传播模型分析一下我上面的例子使用 event.stopPropagation() 阻止事件传播参考连接背景我最近参与的项目涉及开发一个公司内部使用的组件库,我在开发一个搜索框组件时遇到了一个麻烦的问题。简单来说是:点击外层容器会聚焦在输入框上。这是别人写的底层组件上的逻辑,不方便改;我希望点击容器中的 icon 时(是个返回箭头),输入框会失焦。写好 event handler 之后试了一下发现,每次点击容器内部的 icon,都无法实现失焦的效果。显然,内部 icon 的原创 2021-12-07 23:50:26 · 643 阅读 · 0 评论 -
Jest 代码覆盖度不支持 TypeScript 可选链
目录背景可选链Bug背景最近写了一个自定义 React hook(参见文章:实用自定义 React hook:useClickOutside(点击元素外时触发 handler)),但在提交的时候发现,Jest 单元测试总是显示有那么几行代码没有覆盖到。按理来说没覆盖就没覆盖,谁也不应该过度追求 100% 的代码覆盖度啊!但偏偏我们项目设置的最低覆盖度就是 100% ,如果覆盖不了这几行代码,改动就无法提交!好吧。。但我翻来覆去检查了很多遍,明明全部情况都覆盖了啊!为什么会说那几行还没覆盖呢?可选链原创 2021-11-21 09:53:38 · 809 阅读 · 0 评论 -
实用自定义 React hook:useClickOutside(点击元素外时触发 handler)
目录背景代码参考链接背景最近在写公司的新网站,又遇到了这个老问题:如何在点击某元素外部时触发某 handler。一开始我想用 “focus” 的方式实现,就是把该元素设置为可聚焦,如果点击元素外则会失去焦点,从而触发 onBlur 的 handler。但这种方法会遇到很多细节上的问题,效果不是很好,并且代码可读性也很差。最后还是采用了比较经典的方法:在 document 上添加一个点击事件的 handler,然后在 handler 中判断点击位置是否在该元素内部,如果不在则执行相应逻辑。之前写某个原创 2021-11-21 09:27:31 · 2152 阅读 · 0 评论 -
一箭双雕:浅谈 Next.js 页面导航(page navigation)原理
目录背景疑点重重:Next.js 究竟是如何实现页面导航的?服务端渲染,客户端导航疑点 1:客户端导航岂不会影响 SEO?疑点2:JS 禁用也能跳转?原理:客户端导航和传统跳转相结合一箭双雕背景最近公司在做一个基于 SDUI 架构(参加我的另一篇文章:初识 SDUI(Server-Driven UI,服务端驱动 UI))重写客户端(包括 web 端)的项目,我也参与了其中重写 web 端的部分。项目选用的 web 框架是 Next.js,之前我曾粗浅了解过,这次终于有幸能用它来开发了!疑点重重:Ne原创 2021-11-15 00:31:46 · 2112 阅读 · 0 评论