河豚的前端之路

好记性不如烂笔头。把遇到的不常见的知识点都记录下来，避免下次再遇到时还不理解。总结一下也能加深自己的印象。 clearTimeout执行clearTimeout(timer)后，定时器回调不会执行，但timer的值不变。 防抖：事件触发后等待指定时间，若期间没有再次触发，则执行函数；若期间重复触发，则重新计时。 123456789const debounce = (func, wait) => { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => { func.apply(null, args); }, wait); };}; 节流：在指定时间间隔内，无论触发多少次，函数只执行一次。 123456789101112131415161718const throttle = (func, wait) => { let lastTime...

github登录通过OAuth协议接入第三方平台，用户无需注册新账号。下面详细介绍一下接入流程。 创建 GitHub OAuth 应用访问 GitHub Developer Settings 创建新应用。填写 Application name、Homepage URL、Authorization callback URL。保存生成的Client ID 和 Client Secret。 ==！Client Secret 需要另外记录下来，它只在生成的时候可见。== 跳转到授权页123const handleLogin = () => { window.location.href = 'https://github.com/login/oauth/authorize?client_id=Ov23li276DdOmpC29BIR&scope=read:user';} 判断是否登录，如果没有登录则跳转到 github 的登录授权页。 授权后返回code第一步填写了Authorization...

简介Maplibre-gl是一个开源的js库，用于在网页中创建高性能、交互式的地图应用。Maplibre-gl是Mapbox GL JS的免费替代品，提供与 Mapbox GL JS 类似的功能，同时坚持完全开源。 使用场景： GIS 系统：构建地理信息分析工具。 数据可视化：在地图上叠加热力图、轨迹、点云等数据。 室内地图：支持自定义楼层平面图和导航。 移动应用：通过 React Native 集成到跨平台应用中。 核心特性： 矢量切片（Vector Tiles）支持 使用矢量地图数据（而非传统栅格图块），允许动态样式调整和高分辨率渲染。 支持 .pbf 格式的矢量切片，兼容多种数据源（如 OpenStreetMap、自定义数据）。 WebGL 加速渲染 基于 WebGL 技术，实现高性能的地图渲染，适合处理复杂地图样式和大规模数据。 动态样式与交互 通过 JSON 格式定义地图样式（如颜色、图标、文字等），支持实时更新。 支持鼠标/触摸交互（缩放、拖拽、旋转、倾斜等）。 跨平台兼容 可在浏览器和移动端（通过 React Native...

介绍流式写入直接将数据流写入用户磁盘，避免传统方法(如Blob或URL.createObjectURL)因内存限制导致的大文件下载问题。StreamSaver.js库使用浏览器原生的 Streams API，逐块写入数据到磁盘。通过 Service Worker 和中间人(MITM)技术，模拟服务器响应，绕过浏览器对下载文件大小的限制。而且，不需要服务端做任何修改。 使用StreamSaver文档 安装： 1npm i streamsaver 使用： 12345678910111213141516171819202122232425import { createWriteStream } from 'streamsaver';const fileStream = createWriteStream('download.json');const writer = fileStream.getWriter();function download () { const response = await...

介绍这是一个帮助用户在日常中学习单词的软件，包含浏览器插件和微信小程序。 使用流程：1.安装浏览器插件；2.微信扫码登录小程序；3.在网页中选中单词，即可获取翻译结果，可以收藏或取消收藏该单词；4.在微信小程序中复习单词； 浏览器插件： 微信小程序： 开发浏览器插件注意事项content.js与background.js的区别content.js： 直接与网页内容交互，可以修改网页结构、监听用户点击事件等； 无法访问页面的js变量或函数，请求受同源策略限制； 仅能调用部分Chrome API，如chrome.runtime.sendMessage、chrome.storage； 无法直接访问chrome.tabs或chrome.windows等涉及浏览器全局操作的API background.js： 作为全局后台服务，负责处理跨域请求、调用高权限API（通知推送、浏览器标签管理等）； 生命周期与浏览器同步，支持跨域访问； 可调用所有Chrome API； 消息传递content -> background 1234567891011// content...

...

前言浏览器的一些默认样式，我们可能不需要。比如，body {margin: 8px;}，我们一般希望最外层没有外边距，特别是在有<header />或背景图时。再比如，<img/>默认展示为原图大小，原图的宽高一般都非常大，我们可能希望图片不要超过父元素。 重置的规则接下来，详细讲一下部分规则，一些显而易见的规则就没必要一一说明了。 line-height浏览器的默认行高一般是1.2，但这个距离可能会有点紧凑，而且WCAG 标准规定行高应至少为 1.5。行高可以继承，所以在body上设置就可以了。 123body { line-height: 1.5;} 这个方法有个缺点：如<h1/>的行间距太大了。 另一个方法是，以font-size为基础，每行添加固定高度。 123* { line-height: calc(1em +...

创建项目首先，创建项目，vuepress-starter代表你的项目名， 1npm init vuepress vuepress-starter 页面目录结构如下图所示，然后启动项目， 1npm run docs:dev 自定义首页首先在.vuepress/layouts/LayoutHome.vue中定义首页如何布局，然后在/vuepress/clients.js中注册该布局，最后在README.md中声明首页使用此布局。 123456789// /vuepress/clients.jsimport { defineClientConfig, resolvers } from 'vuepress/client';import LayoutHome from './layouts/LayoutHome.vue';export default defineClientConfig({ layouts: { LayoutHome, },}) 1234---home:...

前言我经常使用watch和watcheffect，但前几天遇到一个稍微复杂点的功能，就出现了意料之外的情况，感觉对它们了解的还不够。所以，在此详细探索一下它们。 watch vs watchEffect它们的相同点是都可以监听响应式数据的变化，并执行回调函数。不同点比较多。不同点如下： watch需要显示指定要监听的数据，watchEffect会自动收集依赖； watchEffect会立即执行一次，watch在设置{immediate: true}时才会立即执行一次； watch可以获取到旧值，watchEffect不可以； watch可以通过选项设置为仅执行一次，watchEffect不可以； watch可以设置监听对象的层数，watchEffect不可以； 官方文档也有指出，watch相对于watchEffect的优点： 与 watchEffect() 相比，watch()...

遇见问题在用我自己的脚手架创建项目时，遇到了一个报错，但别人同样的操作没有报错。然后打开.log文件，看到了更详细一点的报错信息。 分析问题搜索Error: could not determine executable to run和getBinFromManifest发现，并没有明确的原因，很多人解决的方法（解决方案集合）都完全不一样。我一一都试了也不行。然后再看报错信息的后面几行，发现了有什么地方不对劲，我要使用的create-pro的版本根本不是0.0.0，而打开第14行的链接，这个npm包也不是我要用的那个。我的库是放在某个scope下的，这个链接指向的包与我的包同名，但不在scope内。但是我要用的库已经全局安装过了，不明白为什么npm拉错了包。 解决问题12# npm create pro // 原命令npm create @chen/pro // √ 总结遇到这个报错的时候，如果也是使用脚手架，可以看看包是否在scope内。不然，可以先看看命令有没有语法错误，然后试试重启vscode、重新安装依赖、赋予当前用户对node完全控制的权限等方法。