JavaScript 工具函数汇总 JavaScript 工具函数汇总

CSS Gap（沟槽） 做页面时，经常遇到 多列表设计（如图），要求块与块上下间距一样！像以前，我们一般使用 margin 或者 padding 来做处理，但是使用这些是很烦人的，特别是多行多列的时候更麻烦但是出现 gap 事情就变得简单起来示例<style> .container { display:flex; flex-wrap:wrap; gap: 20px; padding:20px; } .list { flex-basis: 100px; height:100px; background:blue; } </style> <div class="container"> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> </div> ;

解决 concurrently 和 webpackbar 混用的错乱 concurrently熟悉前端应该知道concurrentlyconcurrently 可以并行地运行多个命令（同时跑前端页面和后端接口 mock 的服务）;一般都是concurrently \"npm run mock\" \"npm run dev\"等于说开了两个终端任务 npm run mock 和 npm run devwebpackbarwebpackbar 是 webpack 美化插件，用于 Webpack 构建时输出优雅的进度条，清晰美观输出混乱如果你项目使用了 webpackbar，且用 concurrently 运行多个命令时 ，会发现 webpackbar 的进度条美化失效了，页面会输出大量乱糟糟的信息 解决可以看到因为可能 concurrently 会在每个命令前添加 编号 （如下图），导致进度条解析不成功，导致输出混乱查看 concurrently 的文档发现了这个翻译出来就是 仅输出进程的原始输出，禁用 concurrently 的美化和着色意思就是加了这个命令 concurrently 就不会处理你的命令行输出了{callout color="#f0ad4e"}命令改成如下就可以了{/callout}concurrently -r \"npm run mock\" \"npm run dev\"添加了 -r 配置之后，构建就就很完美了

nginx 判断移动端还是电脑跳转域名或不同的文件 经常会遇到这种需求，根据访问终端的不同，来选择跳转不同的内容。一般区分小屏幕移动端和电脑端而区分访问内容。这有两种办法，一种是根据终端跳转域名，还有一种是根据终端访问的文件不同。下边就说下 nginx 对于这两种办法的配置跳转域名比如 www.domain.com 是 PC 端网址 而 m.domain.com是移动端网址server { listen 80; server_name www.domain.com domain.com; root /data/domain; charset utf-8; if ( $http_user_agent ~* "(Android|iPhone|Windows Phone|UC|Kindle)" ){ # 跳转判断 rewrite ^/(.*)$ http://m.domain.com$uri redirect; # redirect表示302跳转（暂时性转移）　 } index index.html index.htm; #... }跳转不同的文件server { listen 80; server_name www.domain.com domain.com; root /data/domain; #默认PC端访问内容 charset utf-8; if ( $http_user_agent ~* "(Android|iPhone|Windows Phone|UC|Kindle)" ){ # 跳转判断 root /data/mobile_domain; #移动端访问内容 } index index.html index.htm; #... }

H5 语音朗读 API 前段时间有同学问我 h5 有没有朗读 api ,一开始他找了 云服务的 api ,其实 h5 本身自带朗读h5 中相关的 API 有两类，一类是“语音识别(Speech Recognition)”，另外一个就是“语音合成(Speech Synthesis)”，这两个名词听上去很高大上其实就是 “语音转文字”，和“文字变语音”，这次我们看看我们要使用的“文字变语音”（SpeechSynthesisUtterance） 。兼容性用之前我先来看看兼容性可以看到 IE 不支持 ，部分移动端不支持，其他的都还好！简单用法先来个最简单的使用例子 读出 "羽叶风雨 Nice"var utterThis = new SpeechSynthesisUtterance("羽叶风雨 Nice"); speechSynthesis.speak(utterThis);浏览器 使用一下，（真~不~错~）。支持属性当然还有其他玩法 ，api 还支持 语言 音量 语速 音高text – 要合成的文字内容，字符串。lang – 使用的语言，字符串， 例如："zh-cn"或'ja-JP'。voiceURI – 指定希望使用的声音和服务，字符串。volume – 声音的音量，区间范围是 0 到 1，默认是 1。rate – 语速，数值，默认值是 1，范围是 0.1 到 10，表示语速的倍数，例如 2 表示正常语速的两倍。pitch – 表示说话的音高，数值，范围从 0（最小）到 2（最大）。默认值为 1。根据这些属性我来封装成语音函数function speak(textToSpeak) { var u = new SpeechSynthesisUtterance(); u.text = textToSpeak; //汉语 u.lang = "zh-CN"; //速度 u.rate = 1; // 其他属性 speechSynthesis.speak(u); } speak("支付宝到账，100万，元");😄 😁 😆试试别的语言function speak(textToSpeak) { var u = new SpeechSynthesisUtterance(); u.text = textToSpeak; //汉语 u.lang = "ja-JP"; //速度 u.rate = 1; speechSynthesis.speak(u); } speak("雨の降る夜は"); //雨下的夜😛 😝 😜回调方法不仅如此，该实例对象还暴露了一些方法：onstart – 语音开始时触发。onpause – 语音暂停时触发。onresume – 语音重新开始时触发。onend – 语音结束时触发。onboundary - 当语音达到单词或句子边界时触发。onerror - 语音发生错误时触发。onmark - 语音发生错误时触发。示例 在语音读完打印 "真的到账了！！！"function speak(textToSpeak, fun) { var u = new SpeechSynthesisUtterance(); u.text = textToSpeak; //汉语 u.lang = "zh-CN"; //速度 u.rate = 1; // 其他属性 speechSynthesis.speak(u); u.onend = function () { fun && fun(); }; } speak("支付宝到账，100万，元", function () { console.log("真的到账了！！！"); });speechSynthesis我们看到上面例子还是用了 speechSynthesis 对象，它是是语音服务的控制接口；它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。SpeechSynthesis.cancel() - 移除所有语音谈话队列中的谈话。speechSynthesis.getVoices() - 返回当前设备所有可用声音的 SpeechSynthesisVoice 列表。SpeechSynthesis.pause() - 把 SpeechSynthesis 对象置为暂停状态。SpeechSynthesis.resume() - 把 SpeechSynthesis 对象置为一个非暂停状态：如果已经暂停了则继续。SpeechSynthesis.speak() - 添加一个 utterance 到语音谈话队列；它将会在其他语音谈话播放完之后播放。我来看看我的浏览器支持哪些语音包列表 ，运行 speechSynthesis.getVoices()总结语音API还不太成熟，可以当成彩蛋类来用！比如消息提醒，或者可能为以后无障碍提供帮助！

css 适配暗黑模式 自从苹果支持暗黑模式后，各个 APP 网站都支持暗黑模式，之前很多都是 js 手动切换模式，其实纯 css 媒体特性也能完全适配prefers-color-schemeprefers-color-scheme 是 CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。语法no-preference 表示系统未知用户在这方面的选项。light 表示系统选择使用浅色主题的界面。dark 表示系统选择使用暗色主题的界面。例子<div class="day">Day</div> <div class="night">Night</div> @media (prefers-color-scheme: dark) { .day { background: #333; color: white; } .night { background: black; color: #ddd; } } @media (prefers-color-scheme: light) { .day { background: white; color: #555; } .night { background: #eee; color: black; } }实际使用正常模式的下 我们正常写 css 代码 ， 如果需要根据系统显示暗黑模式即可添加如下代码... // 正常css 代码 @media (prefers-color-scheme: dark) { ... //暗黑模式css代码; }兼容性好用是好用 ，如果考虑兼容性 就需要注意了（我是不考虑兼容性）

解决 Xcode Command Line Tools 错误或无法安装问题 问题发现升级 Mac系统后，发现 Xcode Command Line Tools 出现问题了在我构建项目时 出现了No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.当我运行/usr/sbin/pkgutil --packages | grep CL/usr/sbin/pkgutil --pkg-info com.apple.pkg.CLTools_Executables发现没有任何输出 无语😒 ， 可能 Mac 升级把我的包搞丢了 试了下 sudo xcode-select --reset 运行后 并没有正常解决办法办法一 命令行安装命令行运行以下命令, 然后输入root密码来删除Xcode Command Line Toolssudo rm -rf $(xcode-select -print-path)再运行以下来命令重新安装xcode-select --install 重新安装结束后检查是否一切正常正常会如下图所示 如果重装不了 就试试办法二办法二 手动下载安装苹果开发官网（需要登录苹果账号） https://developer.apple.com/download/more/?=command%20line%20tools 会列出所有版本的安装包手动下载Command Line Tools for Xcode 双击安装一步一步安装

ES2020 新运算符 '??' ES2020 新的运算符 ??ES2020 新的特性新增了一个运算符 ?? (空值合并运算符)什么是 ??空值合并运算符并不是什么全新的东西。它只是一种获得两者中的第一个不是 null/undefined值的语法。 a ?? b 的结果是：如果 a 是已定义的，则结果为 a，如果 a 不是已定义的，则结果为 b。等于说，如果第一个参数a不是 null/undefined，则 ?? 返回第一个参数a。否则，返回第二个参数b。 翻译一下 就是result = a ?? b; result = (a !== null && a !== undefined) ? a : b;与|| 比较咋一看 有点跟 || 像,空值合并运算符 ?? 是最近才被添加到 JavaScript 中的，它的出现是因为人们对 || 的使用不太满意。例如如下代码const a = 0,b=1; const result1 = a ||b // 1 const result2 = a ||b // 0它们之间重要的区别是：|| 返回第一个 真 值。?? 返回第一个 已定义的 值。在上面代码中a b 是已经定义的值,不存在未定义! || 的语法类似找到第一个值的 Boolean(a) 是 true 的运算付.?? 运算符的优先级?? 运算符的优先级相当低：在 MDN 文档中 中为 5。因此，?? 在 = 和 ? 之前计算，但在大多数其他运算符之后计算。let a = null; let b = null; // 重要：使用括号 let c = (a ?? 100) * (b ?? 50); alert(c); // 5000否则，如果我们省略了括号，则由于 * 的优先级比 ?? 高，它会先执行，进而导致错误的结果。// 没有括号 let c = a ?? 100 * b ?? 50; // 就变成了与下面这行代码的计算方式相同 let c = a ?? (100 * b) ?? 50; // 明显不是我们想要的 已知问题出于安全原因，JavaScript 禁止将?? 与 && 或 || 一起使用,除非使用括号明确指定了优先级。下面的代码会触发一个语法错误：let result = 1 && 2 ?? 3; // Syntax erro 可以明确地使用括号来解决这个问题：let result = (1 && 2) ?? 3; // 2 总结空值合并运算符 ?? 提供了一种从列表中选择第一个已定义的值。?? 运算符的优先级非常低，在表达式中使用它时请添加括号。如果没有明确添加括号,不能将其与 || 或 && 一起使用。

JavaScript 中精度问题及简单解决办法 JavaScript 中的数字按照 IEEE 754 的标准，使用 64 位双精度浮点型来表示。其中符号位 S，指数位 E，尾数位M分别占了 1，11，52 位，并且在 ES5 规范 中指出了指数位E的取值范围是 [-1074, 971]。想用有限的位来表示无穷的数字，显然是不可能的，因此会出现一些列精度问题 比如 0.1 + 0.2 !== 0.3解决思路一般是把浮点数转化为字符串，模拟实际运算的过程。以下是 简单的 解决办法// 两个浮点数求和 function fpAdd(num1, num2) { let r1, r2; try { r1 = num1.toString().split('.')[1].length; } catch (e) { r1 = 0; } try { r2 = num2.toString().split(".")[1].length; } catch (e) { r2 = 0; } const m = Math.pow(10, Math.max(r1, r2)); return Math.round(num1 * m + num2 * m) / m; } // 两个浮点数相减 function fpSub(num1, num2) { var r1, r2 try { r1 = num1.toString().split('.')[1].length; } catch (e) { r1 = 0; } try { r2 = num2.toString().split(".")[1].length; } catch (e) { r2 = 0; } const m = Math.pow(10, Math.max(r1, r2)); const n = (r1 >= r2) ? r1 : r2; return (Math.round(num1 * m - num2 * m) / m).toFixed(n); } // 两个浮点数相除 function fpDiv(num1, num2) { var t1, t2 try { t1 = num1.toString().split('.')[1].length; } catch (e) { t1 = 0; } try { t2 = num2.toString().split(".")[1].length; } catch (e) { t2 = 0; } const r1 = Number(num1.toString().replace(".", "")); const r2 = Number(num2.toString().replace(".", "")); return (r1 / r2) * Math.pow(10, t2 - t1); } // 两个浮点数相乘 function fpMul(num1, num2) { const m = 0, s1 = num1.toString(), s2 = num2.toString(); try { m += s1.split(".")[1].length } catch (e) { }; try { m += s2.split(".")[1].length } catch (e) { }; return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m); }

H5 移动端开发经常遇到的问题 搜罗了一些 H5 移动端开发经常遇到的问题，来方便以后查阅！还会继续添加！1. 弹出数字键盘<!-- 有"#" "*"符号输入 --> <input type="tel" /> <!-- 纯数字 --> <input pattern="\d*" />安卓跟 IOS 的表现形式应该不一样，大家可以自己试试。当运用了正则 pattern 后，就不用关注 input 的类型了2. 调用系统的某些功能<!-- 拨号 --> <a href="tel:10086">打电话给: 10086</a> <!-- 发送短信 --> <a href="sms:10086">发短信给: 10086</a> <!-- 发送邮件 --> <a href="mailto:839626987@qq.com">发邮件给：839626987@qq.com</a> <!-- 选择照片或者拍摄照片 --> <input type="file" accept="image/*" /> <!-- 选择视频或者拍摄视频 --> <input type="file" accept="video/*" /> <!-- 多选 --> <input type="file" multiple />3. 打开原生应用<a href="weixin://">打开微信</a> <a href="alipays://">打开支付宝</a> <a href="alipays://platformapi/startapp?saId=10000007" >打开支付宝的扫一扫功能</a > <a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>这种方式叫做 URL Scheme，是一种协议，一般用来访问 APP 或者 APP 中的某个功能/页面（如唤醒 APP 后打开指定页面或者使用某些功能）😒URL Scheme 的基本格式如下：行为(应用的某个功能/页面) | scheme://[path][?query] | | 应用标识 功能需要的参数一般是由 APP 开发者自己定义，比如规定一些参数或者路径让其他开发者来访问，就像上面的例子 🍤注意事项唤醒 APP 的条件是你的手机已经安装了该 APP某些浏览器会禁用此协议，比如微信内部浏览器（除非开了白名单）4. 解决 active 伪类失效<body ontouchstart></body>给 body 注册一个空事件即可 😂5. 忽略自动识别<!-- 忽略浏览器自动识别数字为电话号码 --> <meta name="format-detection" content="telephone=no" /> <!-- 忽略浏览器自动识别邮箱账号 --> <meta name="format-detection" content="email=no" />当页面上的内容包含了手机号/邮箱等，会自动转换成可点击的链接 😁比如你有如下代码：但是有些浏览器会识别为手机，并且可以点击拨号。6. 解决 input 失焦后页面没有回弹一般出现在 IOS 设备中的微信内部浏览器，出现的条件为：页面高度过小聚焦时，页面需要往上移动的时候所以一般 input 在页面上方或者顶部都不会出现无法回弹 🤣解决办法为，在聚焦时，获取当前滚动条高度，然后失焦时，赋值之前获取的高度：<template> <input type="text" @focus="focus" @blur="blur" /> </template> <script> export default { data() { return { scrollTop: 0 }; }, methods: { focus() { this.scrollTop = document.scrollingElement.scrollTop; }, blur() { document.scrollingElement.scrollTo(0, this.scrollTop); } } }; </script>6. 禁止长按以上行为可以总结成这几个（每个手机以及浏览器的表现形式不一样）：长按图片保存、长按选择文字、长按链接/手机号/邮箱时呼出菜单。想要禁止这些浏览器的默认行为，可以使用以下 CSS：// 禁止长按图片保存 img { -webkit-touch-callout: none; pointer-events: none; // 像微信浏览器还是无法禁止，加上这行样式即可 } // 禁止长按选择文字 div { -webkit-user-select: none; } // 禁止长按呼出菜单 div { -webkit-touch-callout: none; }7. 滑动不顺畅，粘手一般出现在 IOS 设备中，自定义盒子使用了 overflow: auto || scroll 后出现的情况。优化代码：div { -webkit-overflow-scrolling: touch; }8. 屏幕旋转为横屏时，字体大小会变具体出现的情况不明 😒，有时候有有时候没有，欢迎指出。优化代码：* { -webkit-text-size-adjust: 100%; }9. 最简单的 rem 自适应大家都知道，rem 的值是根据根元素的字体大小相对计算的，但是我们每个设备的大小不一样，所以根元素的字体大小要动态设置 😂html { font-size: calc(100vw / 3.75); } body { font-size: .14rem; }这是最简单的,稍微复杂的可以使用我正在使用的 rem.js10. 滑动穿透当你想在出现遮罩的时候，锁住用户的滚动行为，你可以这么做。假设 HTML 结构如下： 我是弹框 CSS 样式如下：.mask { position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba($color: #333, $alpha: 0.6); .content { padding: 20px; background-color: #fff; width: 300px; } }可以看到，当在遮罩上滑动的时候，是会穿透到父节点的，最简单的办法就是阻住默认行为：document.querySelector(".mask").addEventListener("touchmove", event => { event.preventDefault(); });如果在 vue 中，你可以这么写：<div class="mask" @touchumove.prevent></div> 如果.content 也有滚动条，那么只要阻止遮罩本身就行：document.querySelector(".mask").addEventListener("touchmove", event => { if (event.target.classList.contains("mask")) event.preventDefault(); });或者：<div class="mask" @touchumove.self.prevent></div> 这样，当出现遮罩的时候用户的滑动就会被锁住啦 👌