Javascript

2023-05-26 · 阅读 106 · 字数 368

因为经常要在我大象笔记博客里将其他文章的引用链接贴到当前文章里，手动复制标题和链接太麻烦了。 所以需要在页面里嵌入一段 js 代码，自动获取当前页面 h1 标题 及 链接，拼接成 markdown 链接格式。 代码 const h1 = document.querySelector('h1'); if (h1) { const title = h1.textContent; const url = window.location.href; const markdownLink = `[${title}](${url})`; console.log(markdownLink ...

阅读全文...

2022-09-26 · 阅读 839 · 字数 323

用习惯了 golang 的 gofmt 自动格式化代码工具，迫切需要其他语言的自动 format 功能。发现 js 也有类似的工具 prettier。 https://prettier.io/ 用了一下，还可以。至少可以自动帮我补充行尾的分号，及自动换行。但是也有非常不爽的地方，就是会把你多行对齐的注释毁掉。而且官方维护团队态度恶劣，对这个问题连讨论的余地都不留。远不如 gofmt 优雅。 全局安装 虽然官方推荐每个项目独立安装一个，且做好不同的配置，但是我基本都一个人开发项目，所以也不需要兼顾别人的感受，全局安装更方便。 sudo npm install -g prettier VIM 中 ...

阅读全文...

2022-08-04 · 阅读 1413 · 字数 132

TypeScript 最恶心的地方在于让写 js 完全丧失了灵活性。今天发现之前写的 antd 代码里一堆 TypeScript 报错信息，虽然代码能正常编译运行。 报错代码为第二行： function slugHandler() { console.log(formRef.current.getFieldValue("Title")); } 报错信息为： Object is possibly 'null' 解决方法非常类似 Kotlin 的语法糖。 方法一：non-null assertion operator ! formRef.current!.getF ...

阅读全文...

2022-07-12 · 阅读 1066 · 字数 47

父级访问子 iframe 的方式 const iframe = document.querySelector('iframe'); const iDoc = iframe.contentWindow.document; iDoc.querySelector('#text') 子 iframe 访问父级 window.parent.document.querySelector("#text") postMessage 通信参考 完美解决iframe父子间的通信问题 ...

阅读全文...

2022-06-03 · 阅读 1919 · 字数 254

示例代码 const maxWidth = imgs.reduce((m, x) => Math.max(m, x.width), 0); 其功能是计算一组图片的最大宽度。 但是看起来很难理解。 可读性更好的 reduce 用法 const maxWidth = imgs.reduce( (previousValue, img) => Math.max(previousValue, img.width), 0 ); 其实就是遍历数组中的每一项，通过函数逐一比对，最终返回一个最大/小值。 reduce 参数说明 reduce() 方法接收一个函数作为累加器，数组中的每个值（ ...

阅读全文...

2022-05-03 · 阅读 4759 · 字数 770

之前只用过 webpack 进行 js 项目打包，但其实都是用的现成的脚手架，不需要过多的自己配置。 这次是纯手动创建的项目，并没有任何脚手架代码及配置，所以我想尝试自己配置一遍。 为何选择 esbuild 粗略调研了一圈，webpack, rollup, vite, esbuild。 webpack 确实最强大，我甚至花了两天时间看了一本书，虽然学到不少，但用不到那么多配置 vite 感觉是人为推广，跟风严重，不太想去了解，而且开发环境是基于 esbuild。我对知乎上一致好评的技术选型有天然的抵触情绪 rollup 官方教程不错 我决定尝试 esbuild，仅仅是因为 esbuild 是 ...

阅读全文...

2022-04-01 · 阅读 1284 · 字数 152

例如展示合作伙伴公司的 logo 等。 轮播的英文到底是什么 slick 光滑的 flick 轻弹，拂去 carousel 旋转木马 Flicking https://naver.github.io/egjs-flicking/ 简洁，不需要依赖 jQuery 韩国产 自适应效果好 目前没有遇到坑 在 staticfile.org 中搜素时，使用 egjs-flicking。 目前就使用这个了。 同样也适用于顶部大 banner 的轮播，参考 https://naver.github.io/egjs-flicking/Showcases slick https://kenwheeler ...

阅读全文...

2022-05-02 · 阅读 1720 · 字数 246

我在写一个自动选课的插件，需要先扫描几千个课程，然后统计出所有课程所属的类目。 这个类目，需要去重，然后列举出来，如果能用 python set 类型来统计，就非常方便了。 但是不知道 js 是否支持这样的数据类型。 查了一下，果然已经支持。在 Chrome 里测试了一下，非常方便 > let s = new Set(); > s Set(0) {} > s.add(1) Set(1) {1} > s.add(2) Set(2) {1, 2} > s.add(3) Set(3) {1, 2, 3} > s.add(3) Set(3) {1, 2, 3} / ...

阅读全文...

2021-09-08 · 阅读 1300 · 字数 159

js 中使用 float 浮点数类型，会发现运算时结果表示出人意料 问题现象 2.4 - 2.25 > 0.1499999999999999 0.1 + 0.2 > 0.30000000000000004 看来这是一个经典的问题。 解决方法一 转换成整数进行计算 (2.4 * 100 - 2.25 * 100) / 100 > 0.15 解决方法二 如果计算不求精确，四舍五入即可 (0.1 + 0.2).toFixed(2) > "0.30" 方案一的漏洞 2.3 * 100 > 229.99999999999997 2.3 * 10 ...

阅读全文...

2021-08-21 · 阅读 1767 · 字数 38

例如，我想用 js 实现将数字 1000，显示成 1,000 的格式。 实现方法 let x = 100000000000000; x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); > "100,000,000,000,000" 参考 https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript ...

阅读全文...

2021-08-02 · 阅读 2679 · 字数 116

由于要跟蓝牙设备交互，在传递浮点数时，想用 ascii 进行编码。 问题来了，22.22 这样的浮点数，用 ascii 码表示时，如何进行 array buffer 与 string 的相互转换。 解析数据实现代码 function ab2str(buf) { return String.fromCharCode.apply(null, new Uint8Array(buf)); } 由于是用了 AscII 编码 (256 个字符)，所以一个字符是用 1 个字节，即 8 bit 表示。 这里用 Uint8 来解析。 参考 https://stackoverflow.com/questio ...

阅读全文...

2021-07-30 · 阅读 2733 · 字数 227

返回的数据是一个字节，即 8 bit 位，每一个 bit 代表一个设备状态的开启与否。 即 8 个不同设备的开启状态。 如何用 Javascript 来解析二机制状态位呢？ 开关作用 可以通过 dataView.getUint8(N) 将返回的一个字节数据 array buffer 转换成整数，例如下面的 flags。 然后通过开关位比对来判断其状态： var flags = 5; // 二进制的0101 if (flags & 4) { // ... } // 0101 & 0100 => 0100 => true 注意，这里是单个与符号，两个就是逻辑与符 ...

阅读全文...

2021-06-24 · 阅读 7627 · 字数 144

我想将小程序中获取到的日期和时间，转换成 UTC 时间，格式如： 2021-12-25T08:08:08Z 好方便传输给后台，进行 InfluxDB 时间区间过滤。 转换方法 先拼接成不加 Z 结尾的字符串。不加 Z 代表是当前 locale 对应的市区。 > let d = new Date(Date.parse("2019-01-01T00:00:00")); Tue Jan 01 2019 00:00:00 GMT+0800 (中国标准时间) d.toISOString() "2018-12-31T16:00:00.000Z" d.t ...

阅读全文...

2021-04-01 · 阅读 5536 · 字数 189

例如在一段 Ant Design Pro V5 的代码中看到： import { Button, message, Input, Drawer } from 'antd'; import React, { useState, useRef } from 'react'; import { useIntl, FormattedMessage } from 'umi'; import { PageContainer, FooterToolbar } from '@ant-design/pro-layout'; import type { ProColumns, ActionType } from ...

阅读全文...

2021-01-31 · 阅读 12300 · 字数 569

在 tampermonkey 的很多实际使用场景中，需要在模拟点击之后，等待界面变化，或者数据返回，此时就需要用到 setTimeout。但是如果是一系列的点击等待，就需要进行 setTimeout 嵌套，或者 setTimeout 时间进行倍数增长，代码可读性非常低。 所以，我想找一种 setTimeout 同步的写法，以提高代码的可维护性。 测试代码 (function() { 'use strict'; function wait(ms) { return new Promise((resolve, reject) => { ...

阅读全文...