超悠閒_JavaScript,NpmLibrary,HTML & CSS-CSDN博客

Webpack 配置: 自定义网站图标 favicon文章目录Webpack 配置: 自定义网站图标 favicon实现核心技术: html-webpack-plugin 插件完整代码示例参考连接实现核心技术: html-webpack-plugin 插件我们可以透过 html-webpack-plugin 来实现自定义 favicon 的配置从原生的角度来说，我们要自定义 favicon 需要在 html 文件的 <head> 标签内加上这句话<link rel="shortc

2022-03-04 10:43:47 1581

原创 JS: 自定义右键操作列表 Context Menu

JS: 自定义右键操作列表 Context Menu文章目录JS: 自定义右键操作列表 Context Menu默认 Context Menucontextmenu 事件完整代码示例参考连接默认 Context Menu使用页面的时候，使用右键点击页面会弹出类似下面的可选操作列表，这个列表在浏览器中称为 Context Menu实际上我们也可以像下面这样自定义自己的 Context Menu上图应用：drawiocontextmenu 事件而我们要自己掌控这个右键点击事件有两种方式

2022-03-03 21:01:16 1953

原创 React Router 升级 v6: Redirect 重定向替代方案

React Router 升级 v6: Redirect 重定向替代方案文章目录React Router 升级 v6: Redirect 重定向替代方案React Router v6 Redirect 更新官方推荐方案 1: 使用 Navigate 组件替代官方推荐方案 2: 自定义 Redirect 组件自定义 Redirect 示例: 防止异常跳转并上报完整代码示例参考连接React Router v6 Redirect 更新React Router 的第六版做了许多破坏性的更新，其中一个就是将

2022-03-03 16:09:58 6181

原创 Nginx 踩坑笔记: 部署 React/Vue 前端应用路由 404 Not Found(Error: 404 Not Found | Nginx 1.21.6)

Nginx 踩坑笔记: 部署 React/Vue 前端应用路由 404 Not Found(Error: 404 Not Found | Nginx 1.21.6)文章目录Nginx 踩坑笔记: 部署 React/Vue 前端应用路由 404 Not Found(Error: 404 Not Found | Nginx 1.21.6)0. 项目背景1. 问题描述2. 问题排查 & 解决方案解决方案附录：示例项目运行文档参考连接0. 项目背景React/Vue 等 SPA 前端应用使用 hist

2022-03-03 14:27:01 2851

原创 Docker: 部署 Nginx 反向代理

Docker: 部署 Nginx 反向代理文章目录Docker: 部署 Nginx 反向代理环境准备实验一：容器内部署 Nginx 静态资源服务器目录结构静态资源准备Docker Compose 配置nginx 配置启动 & 效果实验二：Nginx 反向代理本机服务准备 Express 服务修改 Docker Compose 配置修改 nginx 配置测试实验小结参考连接完整代码示例环境准备要求安装下列服务DockerDocker Compose(Windows/MacOS 下 Dock

2022-02-28 17:10:18 3765

原创细说 Nginx: 负载均衡 Load Balance

细说 Nginx: 负载均衡 Load Balance文章目录细说 Nginx: 负载均衡 Load Balance准备服务负载均衡配置项负载均衡策略更多配置项示例ip_hash轮询 + 权重参考连接完整代码示例准备服务首先我们先准备三个后端服务，起在 8081～8083 端口上server.jsconst express = require('express');const createServer = (ports) => { const countMap = {}; //

2022-02-27 21:56:04 1485

原创细说 Nginx: 静态资源服务器基础 - server,location,root

细说 Nginx: 静态资源服务器基础 - server,location,root文章目录细说 Nginx: 静态资源服务器基础 - server,location,rootNginx 概述 & 安装简要安装Nginx 配置文件结构实验1: 第一个路由实验2: 更多的服务器2.1 location 路径匹配实验3: 代理服务器实验小结参考连接完整代码示例Nginx 概述 & 安装简要Nginx 作为 http 服务器可说是大获成功，不论是在静态资源分发或是反向代理上的负载均衡性能都非

2022-02-27 17:08:33 2680

原创 Yarn 升级: v3 都出了不要再用 yarn1 了

Yarn 升级: v3 都出了不要再用 yarn1 了！文章目录Yarn 升级: v3 都出了不要再用 yarn1 了！Yarn 默认版本Yarn 升级公告开始升级！第一步：初始化项目/现有项目升级第二步：安装依赖查看变化小结参考连接完整代码示例Yarn 默认版本2202 年了 yarn 也该升级了，什么 pnpm 都跑出来要喧宾夺主了，是时候来看看我们曾经的好帮手 yarn 的改变默认版本下安装的 yarn 都是 v1 版本的Yarn 升级公告实际上作者本身也好久没有去看 yarn 的官网（

2022-01-24 00:28:35 5616 5

原创 Flask 踩坑笔记: localhost:5000 无法访问/host,port 配置无效(Error: Failed to load resource: the server responded

Flask 踩坑笔记: localhost:5000 无法访问/host,port 配置无效(Error: Failed to load resource: the server responded with a status of 403 ())文章目录Flask 踩坑笔记: localhost:5000 无法访问/host,port 配置无效(Error: Failed to load resource: the server responded with a status of 403 ())0.

2022-01-23 17:36:54 7267

原创 HTML 踩坑笔记: video 标签 autoplay 属性失效(Error: Uncaught (in promise) DOMException: play() failed)

HTML 踩坑笔记: video 标签 autoplay 属性失效(Error: Uncaught (in promise) DOMException: play() failed)文章目录HTML 踩坑笔记: video 标签 autoplay 属性失效(Error: Uncaught (in promise) DOMException: play() failed)0. 项目背景1. 问题描述尝试: 主动调用 play 方法（失败）2. 解决方案2.1 解决方案 1: 静音2.2 解决方案 2: 监听

2022-01-23 17:03:53 6238

原创 React 状态管理: Recoil - Facebook 状态管理

React 状态管理: Recoil - Facebook 状态管理文章目录React 状态管理: Recoil - Facebook 状态管理Recoil 概念Recoil 示例0. RecoilRoot1. Atom 状态2. Selector 导出状态3. Async Selector 异步导出状态4. Atom Family 状态类5. Selector Family 导出状态类6. RecoilBridge: 跨 Root 通信小结参考连接完整代码示例Recoil 概念第一次尝试 Recoi

2022-01-14 22:26:16 612

原创 Pnpm Workspace: 单仓库多项目(monorepo)

Pnpm Workspace: 单仓库多项目(monorepo)文章目录Pnpm Workspace: 单仓库多项目(monorepo)pnpm vs npm vs yarnWorkspace 实战（monorepo）1. 构建项目2. 填充项目内容3. 项目配置 & 启动指令4. 观察 node_modules 目录结构小结参考连接完整代码示例pnpm vs npm vs yarnnpm/yarn 采用了直接平铺的方式，而 pnpm 则是采用 .pnpm 隐藏目录隐藏真实的平铺结构，在使用

2022-01-08 13:12:45 13517 15

原创 React 代码拆分: 从 react-loadable 到 Suspense + lazy 组合

React 代码拆分: 从 react-loadable 到 Suspense + lazy 组合文章目录React 代码拆分: 从 react-loadable 到 Suspense + lazy 组合代码拆分（懒加载）1. react-loadable 实现2. 简单实现3. 使用 Suspense + lazy 实现4. 闪烁问题参考连接完整代码示例代码拆分（懒加载）对于一些人可能会把代码拆分与模块化搞混（对说的就是作者自己），但是我们必须明白一件事情：通常我们使用 React + Webpac

2022-01-07 00:16:54 894

原创 JS 缓存: Service Worker 实现离线应用

JS 缓存: Service Worker 实现离线应用文章目录JS 缓存: Service Worker 实现离线应用Service Worker 概述1. 加载 Service Worker2. Service Worker 编程2.0 Service Worker 生命周期2.1 install 启用缓存2.2 fetch 缓存代理2.3 activate 清理资源小结其他资源参考连接完整代码示例Service Worker 概述Service Worker 属于一种特殊的 Web Worker

2022-01-05 13:21:09 1687

原创 CSS 实战: 纯 CSS 画三角形

CSS 实战: 纯 CSS 画三角形文章目录CSS 实战: 纯 CSS 画三角形实现技术核心: Border 属性基础改变高度、宽度扭曲变形其他资源参考连接完整代码示例实现技术核心: Border 属性基础使用 CSS 实现三角形的基础在于 Border 属性首先我们先来看基础的 border 使用#t1 { border-top: 20px solid blue; border-right: 20px solid green; border-bottom: 20px solid ye

2022-01-03 19:27:32 639 1

原创 HTML 进阶: Web Components 原生组件技术

HTML 进阶: Web Components 原生组件技术文章目录HTML 进阶: Web Components 原生组件技术Web Components 概念 & 技术核心1. Custom Elements 自定义标签1.1 注册 Web Component1.2 生命周期钩子2. Shadow DOM3. Template 模版 & Slot 插槽3.1 Template 模版的作用3.2 Slot 插槽的作用小结其他资源参考连接完整代码示例Web Components 概念 &

2022-01-03 12:26:31 974

原创 Vue: 深入理解 v-model 工作原理

Vue: 深入理解 v-model 工作原理文章目录Vue: 深入理解 v-model 工作原理动态绑定 v-model基础使用v-model 绑定自定义组件（推荐）不使用 v-model 捕获组件 value 值使用 input 事件绑定 valuevalue 与 input 事件联动小结其他资源参考连接完整代码示例动态绑定 v-model用过 vue 的人应该都知道 v-model 的用法，官方文档也告诉我们应该用 v-model 来绑定 input、textarea 等标签的值。然而当我们想要

2022-01-01 00:25:05 1299

原创 Rust: Cargo Workspaces 多项目（即 Monorepo）

Rust: Cargo Workspaces 多项目（即 Monorepo）文章目录Rust: Cargo Workspaces 多项目（即 Monorepo）Workspaces？Monorepo？Cargo Workspace 特征项目实践项目结构项目构建构建项目根目录配置文件 Cargo.toml声明依赖项目功能填充打包运行小结其他资源参考连接完整代码示例Workspaces？Monorepo？作为一个前端人，相信大家对于近期越来越火的 monorepo 都略有耳闻，从 lerna、yarn w

2021-12-31 12:51:54 3511

原创 semver 源码解析(Npm library)

semver 源码解析(Npm library)文章目录semver 源码解析(Npm library)正文0. 基本信息1. 源码解析1.1 核心类型1.2 SemVer 类型实现核心1.2.1 SemVer 构造函数1.2.2 SemVer.prototype.compare 比较1.2.3 包装函数1.3 Comparator 类型实现核心1.3.1 Comparator 构造函数1.3.2 Comparator.prototype.intersects 计算交集1.4 Range 类型实现核心1.

2021-12-06 15:16:08 473

原创 single-line-log 源码解析(Npm library)

single-line-log 源码解析(Npm library)文章目录single-line-log 源码解析(Npm library)正文0. 基本信息1. 实现原理2. 源码解析2.1 逃脱序列定义2.2 log 函数包装2.3 代理标准流其他资源参考连接阅读笔记参考正文0. 基本信息version：v1.1.2功能：单行重复输出在命令行我们常常有这么一个需求：需要在同一行不断输出相同的问题，或是修改部分文字，达到模拟动画的效果今天要介绍的这个库就是用于实现单行重复输出的效果1.

2021-12-06 01:55:47 224

原创 lru-cache 源码解析(Npm library)

lru-cache 源码解析(Npm library)文章目录lru-cache 源码解析(Npm library)正文0. 基本信息1. 源码解析1.1 LRUCache 结构 & 构造函数1.2 set(key, value, maxAge)1.3 get(key)、peek(key)1.4 del(key)1.5 forEach(fn(value, key, cache), \[thissp\])1.6 dump、load其他资源参考连接阅读笔记参考正文0. 基本信息version：

2021-12-04 21:32:58 301

原创 yallist 源码解析(Npm library)

yallist 源码解析(Npm library)文章目录yallist 源码解析(Npm library)正文0. 基本信息1. 源码解析1.0 类型 & 接口1.1 类型定义1.2 增：push、pushNode、unshift、unshiftNode1.3 删：pop、shift、splice1.4 查：get、getReverse、toArray、toArrayReverse、slice、sliceReverse、reverse1.5 函数式：forEach、forEachReverse、

2021-12-03 11:41:25 469

原创 mime-type 源码解析(Npm library)

mime-type 源码解析(Npm library)文章目录mime-type 源码解析(Npm library)正文0. 基本信息1. 源码解析1.0 API1.1 MIME 类型源 & 初始化1.2 lookup1.3 contentType1.4 extension1.5 charset2. 小结其他资源参考连接阅读笔记参考正文0. 基本信息version：v2.1.34功能：MIME 类型相关工具函数导出本质上与 mime 库类似，不过 mime 库基于包大小的考量与用户使

2021-12-03 02:40:17 484

空空如也

空空如也