河豚的前端之路

前言任何人在任何时候都有可能悄无声息的把大写锁定打开。在大部分输入时，用户可以轻易地发现输入的是大写。但，在输入密码时，用户就不容易发现了。为了更好的用户体验，我们可以在用户输入密码时提示大写锁定已开启。你也一定见过这种场景吧。 提示用户大写锁定已开启123456789const inputElement = document.querySelector('#your-input-element');inputElement.addEventListener('keydown', function(event) { if (event.getModifierState('CapsLock')) { console.log('大写锁定是打开的'); } else { console.log('大写锁定是关闭的'); ...

前言在这篇文章中，作者将演示如何用200多行JS实现一个虚拟DOM。而且实现的是一个功能齐全、性能足够的npm库。主要目标是说明react、vue等框架背后的基本技术。react、vue、Elm都允许用户描述网页外观，从而简化了交互式网页创建，不必使用添加/删除元素来实现该页面，它们都是通过虚拟DOM来做到的。 Elm是一个纯函数式的语言，它声明式的创建网页。 虚拟DOM的目标它与性能无关。 虚拟DOM是一种抽象，它用于简化修改UI的操作。 用户描述期待的外观，库负责将DOM从当前状态转换成用户期望的状态。 关键思想该库将接管单个DOM并在其中进行操作。 该元素最初应该是空的，而且假设除了该库没有任何东西能修改它，这是用户应用程序的根。 如果只有我们能修改它，那么我们不需要检查就可以知道元素里都有什么。如何知道？通过追踪我们对它的所有修改。 我们将通过保留包含每个HTML元素简化表示的结构，来追踪根节点的内容。准确的说，是每个DOM节点。 因为这个表示是真实DOM的映射，不在真实的DOM中，所以称其为虚拟节点。它们组成虚拟DOM。 用户永远不会创建真实的 DOM...

前言某些情况下，我们可能想要知道接口是否在设定时间内返回。比如，请求发出30s还没返回就可以提示用户当前堵塞是否继续排队。比如，某个请求正常情况下3s返回结果，如果等30s没结果就可以丢弃这次结果。比如，超过设定时间后自动重试。 axios设置timeout1234567891011121314151617import axios from 'axios'; // 设置超时时间为10秒 const timeout = 10000; // 发送请求 axios.get('https://api.example.com/data', { timeout: timeout }) .then(response => { console.log('请求成功:', response.data); }) .catch(error => { if (axios.isCancel(error)) { ...

前言需要实现的功能是，打开 http://a.b.c.d 可以访问服务器上的某个目录。而且，在第一次登录及登录过期时会进行登录，登录成功后才可以访问到目录。 开启目录浏览功能使用 autoindex 指令可以开启目录浏览功能。不仅要设置autoindex，还必须要设置root或alias。 访问 / 时，根目录开启目录浏览1234localtion / { root /; autoindex on; } 访问存在的path时，该子目录开启目录浏览1234location /a/ { root /; autoindex on; } 访问不存在的path时，某个子目录开启目录浏览功能1234location /x/ { alias /b/; # 注意 最后一个/是必需的 autoindex on; } 其他autoindex指令 autoindex_exact_size on | off;：控制是否显示文件的精确大小。默认为...

前言tailwind学习曲线比较陡峭，熟悉之后会方便开发，但熟悉之前需要频繁查文档。下面讲一下如何使用tailwind及常用样式，帮助快速上手。我使用的技术栈是vite+vue。 安装安装12npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 添加配置123456// tailwind.config.js export default { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], } 引入tailwind样式1234// style.css @tailwind base; @tailwind components; @tailwind...

前言有时我们会在页面上使用计时器。通常我们会用js实现计时器功能，但某些时候更适合用css，比如某些邮件客户端不支持运行js。 4个属性 counter()：一个css函数，返回一个代表计数器的当前值的字符串。它通常和伪元素搭配使用，但是理论上可以在支持值的任何地方使用。 1counter(计数器名称); @property：自定义css属性，兼容性不是特别好，值的类型可以是integer、number、color、url、percentage、transform-function等。 123456@property --property-name { syntax: "<color>"; // 值类型检测 inherits: false; // 是否允许继承 initial-value: #c0ffee; // 默认值...

为什么要自定义脚手架？首先，每次创建项目后都需要很多重复性操作，比如安装UI库、css预处理器。在业务层面，每次也要添加一些必备的功能，比如登录、404页面等。其次，可以锻炼自己的技术。 脚手架的功能脚手架创建项目的流程： 让用户选择模板； 根据用户输入填充模板； 下载模板文件到创建的新文件夹中； 从框架来看，创建项目的时候需要选择是vue框架还是react框架，以及是否需要添加 typescript。 从插件来看，需要安装UI库、CSS预处理器、路由、全局状态管理器。 从项目功能来看，还需要封装fetch请求、登录、未登录页面、404页面、部署配置文件。 再参考一下vite，所以我们可以先设置几个模板，然后把小功能填充到模板里面。 具体的逻辑1.判断远程是否有更新版本，如果有询问用户是否更新。 当前版本从package.json中获取。 远程版本用exec()获取： 1exec('npm show xx version', (error, stdout, stderr) =>...

前言项目中一般用 svg 做小图标或背景图，背景图不需要设置 cursor， 小图标会写成单个的 IconXx.vue 文件。前不久遇到一个需求，需要展示 svg，并且可点击，这就需要设置 cursor，但直接设置不会生效。 svg 插入页面的方法SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object>、<iframe>。SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件。 1234567891011<embed src="circle1.svg" type="image/svg+xml" /><object data="circle1.svg" type="image/svg+xml"></object><iframe src="circle1.svg"></iframe><svg...

前言git 限制上传文件大小在 100M 以内。在日常工作中，偶尔会遇到某次提交的文件总量过大或者某个文件过大，所以在此记录一下如何解决这个问题。 分批次提交如果是提交很多文件，但单文件都不大的时候，可以选择分批次提交。如果已经 commit 才发现文件总量过大，则需要撤销 commit 。以下是会用到的 git 命令。 123git reflog 查看所有操作的历史记录git reset HEAD^2 上上一个版本git reset @~ 撤销一次commit 如果仅撤销上一次，则直接用第3条命令。如果在尝试解决问题时进行了多次 commit，则可以通过第1条命令查询想要回退到的版本，然后通过第2条命令回退。 LFS首先，下载git LFS。然后，关联需要用 LFS 上传的文件，比如下面的命令。 1git lfs track 'xx.mp4' 最后，按照正常的提交流程进行提交。 以下是可能用到的命令 12345# 关联某类型文件git lfs track '*.mp4' # 查找大于 nM 的文件find ./ -size +100M

前言经常遇到hover时显示二级菜单的需求，在这个需求中，需要注意的是鼠标经过缝隙的时候菜单会隐藏。使用transition可以在经过缝隙时仍显示菜单，但如果在缝隙停留时间超出动画时间则菜单仍会隐藏。 初级可以用transition来解决鼠标经过缝隙时二级菜单隐藏的问题。但transition只有零点几秒的动画时间，如果鼠标停留缝隙的时间超出动画时间则二级菜单仍会隐藏。jcode 进阶版可以给触发菜单的元素和二级菜单之间填充一个透明的元素，这个透明元素是二级菜单的伪元素。这样，无论鼠标停留在缝隙多久，二级菜单都不会隐藏。jcode 总结css博大精深！