草稿
Hismart color
#EE781E
Nuxt.js
vue-demi
元素宽度继承
块级元素（如div）的宽度继承自父级或自己单独设置宽度，无法被撑开宽度
只有行内元素（如span）和行内块元素（如a）才可以被撑开宽度
断言表达式
123(?=abc) 后面必须满足表达式abc
123(?!abc) 后面必须不满足表达式abc
(?<=abc)123 前面必须满足表达式abc
(?<!abc)123 前面必须不满足表达式abc
例如：
/123(?!(\n|.)*abc)/ 123后面的内容，必定不能满足表达式/(\n|.)*abc/
/(?<=abc).*123/ 123前面必须有abc
scss 颜色函数
RGB颜色函数
rgb($red,$green,$blue) 根据红、绿、蓝三个值创建一个颜色；
rgba($red,$green,$blue,$alpha) 根据红、绿、蓝和透明度值创建一个颜色；
red($color) 从一个颜色中获取其中红色值；
green($color) 从一个颜色中获取其中绿色值；
blue($color)从一个颜色中获取其中蓝色值；
mix($color-1,$color-2,[$weight]) 把两种颜色混合在一起。
HSL颜色函数
hsl($hue,$saturation,$lightness) 通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
hsla($hue,$saturation,$lightness,$alpha) 通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
hue($color) 从一个颜色中获取色相（hue）值；
saturation($color) 从一个颜色中获取饱和度（saturation）值；
lightness($color) 从一个颜色中获取亮度（lightness）值；
adjust-hue($color,$degrees) 通过改变一个颜色的色相值，创建一个新的颜色；
lighten($color,$amount) 通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
darken($color,$amount) 通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
saturate($color,$amount)通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
desaturate($color,$amount) 通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
grayscale($color) 将一个颜色变成灰色，相当于desaturate($color,100%);
complement($color) 返回一个补充色，相当于adjust-hue($color,180deg);
invert($color) 反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
Opacity函数
alpha($color) /opacity($color) 获取颜色透明度值；
rgba($color, $alpha) 改变颜色的透明度值；
opacify($color, $amount) / fade-in($color, $amount) 使颜色更不透明；
transparentize($color, $amount) / fade-out($color, $amount) 使颜色更加透明。
其他颜色函数
adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) 通过调整颜色一个属性或者多个属性获取新的颜色；
scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]) 通过调整颜色的一个属性或者多个属性获取一个流畅颜色；
change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) 通过调整颜色的一个或者多个属笥获取一个新颜色；
ie-hex-str($color) 将一个颜色转换成适合ie滤镜使用的颜色。
HTTP缓存
https://blog.csdn.net/qq_34115899/article/details/86107217
word
npm audit security report NPM审计安全报告
low 低
moderate 中等（温和的）
high 高
critical 严重（致命的）
vulnerabilities 漏洞
Rollup打包工具
结合vite
export default {
build: {
rollupOptions: {
output: {
manualChunks (id, { getModuleInfo }) {
// id 'E:/workspace/project-name/node_modules/echarts/...js'
const matchArr = id.match(/(?<=\/node_modules\/)([^\/]+)/) || []
// 返回相同的名称将被打包到一起
if (matchArr[0]) return 'module_' + matchArr[0]
}
}
}
}
}
URL 内置构造函数
URL 接口用于解析，构造，规范化和编码 URL。它通过提供允许你轻松阅读和修改 URL 组件的属性来工作。通常，通过在调用 URL 的构造函数时将 URL 指定为字符串或提供相对 URL 和基本 URL 来创建新的 URL 对象。然后，你可以轻松读取 URL 的已解析组成部分或对 URL 进行更改。
原型属性：
hash // 包含'#'的USVString，后跟 URL 的片段标识符。
host // 一个USVString，其中包含域（即主机名），后跟（如果指定了端口）“：”和 URL 的端口。
hostname // 包含 URL 域名的 USVString。
href // 包含完整 URL 的 USVString。
origin // 只读 返回一个包含协议名、域名和端口号的 USVString。
password // 包含在域名前面指定的密码的 USVString 。
pathname // 以 '/' 起头紧跟着 URL 文件路径的 DOMString。
port // 包含 URL 端口号的 USVString。
protocol // 包含 URL 协议名的 USVString，末尾带 ':'。
search // 一个USVString ，指示 URL 的参数字符串；如果提供了任何参数，则此字符串包括所有参数，并以开头的“？”开头 字符。
searchParams // 只读 URLSearchParams对象，可用于访问search中找到的各个查询参数。
username // 包含在域名前面指定的用户名的 USVString。
原型方法：
toString() // 返回包含整个 URL 的USVString。它是URL.href的同义词，尽管它不能用于修改值。
toJSON() // 返回包含整个 URL 的USVString。它返回与href属性相同的字符串。
静态方法：
createObjectURL() // 返回一个DOMString ，包含一个唯一的 blob 链接（该链接协议为以 blob:，后跟唯一标识浏览器中的对象的掩码）。
revokeObjectURL() // 销毁之前使用URL.createObjectURL()方法创建的 URL 实例。
ESLint 和 Prettier
- ESLint仅仅对 ECMAScript/JavaScript 进行检测；Prettier支持多种语言。
- ESLint既能支持代码格式化，也能保证代码质量；Prettier仅仅是对代码进行格式化。
- ESLint更加灵活，支持自定义规则（无限的可能性）；Prettier固执，设计之初就希望程序员不过多的关注依赖，所以导致灵活性不高，可配置项少（官网思想：如果觉得不够灵活，就不要用！！！）
ESlint-plugin-vue
预设规则：
=== Vue3 ===
plugin:vue/vue3-essential 重要的
plugin:vue/vue3-strongly-recommended 强烈推荐的
plugin:vue/vue3-recommended 推荐的
=== Vue2 ===
plugin:vue/essential 重要的
plugin:vue/strongly-recommended 强烈推荐的
plugin:vue/recommended 推荐的
github.com 打不开
网站查找dns解析最快的服务器
在C:\Windows\System32\drivers\etc找到hosts文件
添加一行，如：20.205.243.166 github.com
cmd执行：ipconfig/flushdns
chrome 多版本共存
F5
void
void 运算符，在javascript语法中，表示对给定的表达式进行求值，然后返回 undefined
换句话说，void 意味着执行表达式，但丢弃表达式的返回值
cherry-pick
-e, --edit 编辑提交信息
-n, --no-commit 只更新工作区和暂存区，不产生新的提交
-x, 在提交信息的末尾追加一行(cherry picked from commit ...)，方便以后查到这个提交是如何产生的。
-s, --signoff 在提交信息的末尾追加一行操作者的签名，表示是谁进行了这个操作
-m parent-number, --mainline parent-number 如果原始提交是一个合并节点，来自于两个分支的合并，那么 Cherry pick 默认将失败，因为它不知道应该采用哪个分支的代码变动 -m配置项告诉 Git，应该采用哪个分支的变动。它的参数parent-number是一个从1开始的整数，代表原始提交的父分支编号
查找
二分查找
没有重复的话，把索引数组转成关联数组，用下标去找应该能很快。
把id的值当做key映射到一个对象上，然后留可以用obj[id]这种形式访问了
Git stash
git stash 暂存
git stash save "comment" 暂存并添加注释
git stash list 查看暂存列表
git stash apply 应用顶部第一个暂存（不删除该暂存）
git stash apply stash@{<number>} 应用指定顺序的暂存（不删除该暂存）
git stash pop 应用顶部第一个暂存，且删除该暂存（不会清空工作区,意味着删除之后仍保留了暂存的内容在工作区中）
git stash pop stash@{<number>} 应用指定顺序的暂存，且删除该暂存（不会清空工作区）
git stash drop 删除顶部第一个暂存（！警告，它会同时清空工作区，你将失去该暂存）
git stash drop stash@{<number>} 删除指定顺寻的暂存（！警告，它会同时清空工作区，你将失去该暂存）
git commit --amend -m "comment" 修改最后一次的提交信息（注释）
git checkout -b temp origin/temp
git checkout -track(-t) origin/temp
git fetch origin temp
git fetch origin temp:temp
git checkout temp
git fetch
git checkout temp
feat：新功能（feature）
fix：修补bug
optimize: 优化
docs：文档（documentation）
style： 格式（不影响代码运行的变动）
refactor：重构（即不是新增功能，也不是修改bug的代码变动）
test：增加测试
chore：构建过程或辅助工具的变动
终端查找命令
pageUp pageDown 上下翻找
ctrl + r 搜索
history 显示历史命令列表
history | grep doc 在历史命令列表中过滤字符doc
key不生效
如果key不生效，可能的情况之一是：父级给设置的key和本级设置的key冲突了
eslint 无法格式化
可能是eslint运行报错了，检查【输出】栏，查看报错并解决
postcss 找不到配置文件
postcss将从引入的css文件开始向上查找，如果引入其它磁盘的文件，可能会出现这个问题
比nvm更好的选择volta
Nginx
nginx配置之后，如果想要打印配置的变量的的值，或者检查配置是否成功
可以简单的在 location 中 return 200 abc123$new_uri 响应字符串
也可以打印在响应头中 add_header X-debug-message abc123$new_uri always;
location ~* ^/((code|auth|gen|daemon).*) {
set $all_uri http://192.168.8.119:9999/admin/$1;
# return 200 $all_uri;
add_header A-debug-message $all_uri always;
proxy_pass $all_uri;
proxy_connect_timeout 600s;
proxy_send_timeout 600s;
proxy_read_timeout 600s;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
早前的笔记
关于ningx的介绍，下载，安装，控制，配置，在不同的操作系统中
浏览器五种监听的API
IntersectionObserver
一个元素从不可见到可见，从可见到不可见
MutationObserver
监听元素的属性和子节点的变化
ResizeObserver
监听元素的尺寸改变
PerformanceObserver
监听记录 performance 数据的行为
ReportingObserver
监听过时的 api、浏览器干预等报告
String.raw
// 自动帮助转义字符串，返回模板字符串不转义的原始字符串内容
// String.raw`abc \n abc`
// String.raw({ raw: 'abc \n abc' })
new RegExp(String.raw`\/\.${abc}\/$`)
Tabby SFTP 目录跟随
在服务器执行以下命令，授权读取当前目录：
export PS1="$PS1\[\e]1337;CurrentDir="'$(pwd)\a\]'
Git tag
git tag -a "v1.1" -m "第1.1版本" 添加标签和标签描述
git tag -a "v0.9" 9fceb02 给早前的提交添加标签
git show "v1.1"
git tag -d "v1.1" 删除本地标签
git push origin v1.1 推送指定标签
git push origin --tags 推送所有标签
git push :refs/tags/v1.1 删除远程指定标签
git push origin --delete v1.1 删除远程指定标签
git push origin --delete refs/tags/v1.1 删除远程指定标签（假如tag和branch重名，请勿重名）
如果你创建的 tag 名和分支名一样，容易造成混淆，就必须使用索引名全称来区分它们。
比如 refs/tags/v1、refs/heads/v1
VsCode 没有历史记录的问题
"terminal.integrated.profiles.windows": {
"my-cmd": {
"path": "C:\\Program Files\\Git\\bin\\bash.exe",
"args": ["-l"],
"env": { "PROMPT_COMMAND": "history -a" }
}
}
插件@vitejs/plugin-legacy@5.4.3配置
仅是5.4.3版本配置解释，最新版本注意查看文档
targets构建目标（除非显式设置，否则回退至默认值） 'last 2 versions and not dead, > 0.3%, Firefox ESR'modernTargets现代构建目标（除非显式设置，否则回退至默认值） 'edge>=79, firefox>=67, chrome>=64, safari>=12, chromeAndroid>=64, iOS>=12'polyfills垫片（默认按需，false则不添加(自行处理垫片)，或者显式设置要包含的垫片） truemodernPolyfills现代垫片（默认不添加，true则按需，或者显式设置要包含的垫片） falseadditionalLegacyPolyfills额外遗留垫片（因为自动检测仅包含es语言功能，所以此处可添加额外的domApi垫片） []additionalModernPolyfills额外现代垫片（因为自动检测仅包含es语言功能，所以此处可添加额外的domApi垫片） []renderLegacyChunks是否渲染遗留包 truerenderModernChunks是否渲染现代包 trueexternalSystemJS是否排除systemJs false
nginx 启动报错
The system cannot find the path specified
可能的原因：配置了环境变量，nginx 直接从启动目录去查找日志及配置文件，而这个路径不匹配且有误。
解决方式：1. 不使用环境变量；2. 封装一层命令
HTTP缓存
启发式缓存
HTTP 旨在尽可能多地缓存，因此在用户没有显式的配置缓存策略的时候（例如cache-control等响应头），如果满足某些条件，响应也会被存储和重用。这称为启发式缓存。
当用户首次发起一个请求，浏览器得知服务器上该资源的最后修改时间是10天前，而服务器响应这个请求的时间是此刻。
试探性地知道，整整10天这个请求对应的资源都没有更新了，那么此后1天内（复用多长时间取决于浏览器的实现，但HTTP规范建议存储后大约10%）应该也不会更新。
因此，浏览器会将该资源强缓存1天，此后1天内（本地时间和缓存时间相比）针对该资源的请求都不会再发送到服务器，而是直接读取硬盘缓存。
协商缓存
相比强硬的缓存到硬盘中，协商缓存要温和的多。它会首先向服务器确认资源有无变更，如无变更才会应用缓存。
Cache-Control: max-age=604800, no-cache, no-store, must-revalidate, privite
Age: 86400
Expires: Tue, 28 Feb 2022 22:22:22 GMT
Vary: Accept-Language
If-Modified-Since: Tue, 22 Feb 2022 22:00:00 GMT
Last-Modified: Tue, 22 Feb 2022 22:00:00 GMT
ETag: "deadbeef"
If-None-Match: "deadbeef"
以上请求头和响应头配合协商缓存，完整介绍，参见MDN的HTTP缓存
单页应用(SPA)的多入口问题
当直接访问 /about 等非根路由时，服务器会返回 404。正确配置时，服务器会将此类请求重定向到 index.html，由前端路由处理。
但多入口的路由，重定向时就会有多个选择。类似nginx等服务器必须正确处理不同前缀（入口）重定向的文档（例如nested/index.html）
而开发模式的服务器也需要额外的配置，否则路由会出现问题。以vite为例
import history from 'vite-plugin-history'
export default defineConfig({
// ...
plugins: [
// ...
history({
rewrites: [
{ from: '/nested', to: './nested/index.html' },
{ from: '/', to: './index.html' }
]
})
]
})
移动端布局单位
对于细节要求度不高的项目（如需快速上线的简单H5页面）可以直接按750px的设计稿开发
然后用meta viewport init-scale 等比例缩放
这样做的缺点：边框大屏过粗、小屏过细；图片字体模糊；浏览器适配时产生小数点像素导致布局错位等问题
rem 的问题在于，它并非是与屏幕宽度严格等效的。
而是分为不同的阶段，例如通过媒体查询或js等方式修改根元素的字体大小。
因此它有时会出现比例不足，或中间状态的问题。
vw 的问题在于，它是严格按照viewport的宽度来计算的。
当我给body设置一个最小宽度或最大宽度时，基于vw的子元素仍然按照视口来计算，导致布局错位。
因此，结合 % / vw / rem / em / min-width / max-width / @meida 等等所有技术，达成目标才是合理的。
浙公网安备 33010602011771号