超悠閒-CSDN博客

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

mime-db 源码解析(Npm library)文章目录mime-db 源码解析(Npm library)正文0. 基本信息1. 源码解析1.1 导出模块入口1.2 MIME 数据来源1.3 db.json 生成其他资源参考连接阅读笔记参考正文0. 基本信息version：v1.51.0功能：导出标准 MIME 类型映射表1. 源码解析1.1 导出模块入口mime-db 与 mime 类型，同时作为 mime 库构建的强依赖，而实际上 mime-db 的源码没啥内容，实际上就是导出一个

2021-12-03 01:04:53 1008

原创 mime 源码解析(Npm library)

mime 源码解析(Npm library)文章目录mime 源码解析(Npm library)正文0. 基本信息1. 源码解析1.0 MIME 类型定义1.1 标准版 vs 轻量版(lite)1.2 Mime 类1.3 define1.4 getType & getExtension2. 构建依赖2.0 项目打包 & 发布2.1 mime-db 引入2.2 划分 standard/other3. 小结其他资源参考连接阅读笔记参考正文0. 基本信息version：v3.0.0功能

2021-12-02 23:05:25 697 1

原创 Rust 构建 Wasm 模块

Rust 构建 Wasm 模块文章目录Rust 构建 Wasm 模块正文1. 安装1.1 使用 Rustup 安装 Rust1.2 安装 wasm-pack1.3 CLion 配置2. 手动构建 Rust to Wasm 项目2.1 创建项目2.2 配置文件 Cargo.toml2.3 模块导出函数 & 打包2.4 前端项目展示3. 使用 wasm-pack 模版构建3.1 配置文件补全3.2 模块导出函数 & 打包3.3 前端 @wasm-tool/wasm-pack-plugin 插件

2021-12-02 17:37:24 3874 3

原创 Rust Closure 闭包解析（匿名函数）

Rust Closure 闭包解析（匿名函数）文章目录Rust Closure 闭包解析（匿名函数）正文1. 简单闭包 - 纯粹的匿名函数2. 捕获上下文 & FnOnce、FnMut、Fn 类型验证其他资源参考连接完整代码示例正文闭包与匿名函数是现代语言对与函数式编程范式常见的实现，与 JavaScript 惊人的相似的是对于外部上下文的变量捕捉等特性，下面我们就来介绍如何在 Rust 中使用闭包，同时它也将作为 Rust 多线程编程中的重要基础知识之一1. 简单闭包 - 纯粹的匿名函数

2021-11-30 22:31:35 597

原创 C++: SDL2 开发环境配置（Mac+CLion）

C++: SDL2 开发环境配置（Mac+CLion）文章目录C++: SDL2 开发环境配置（Mac+CLion）正文1. 环境配置2. 安装依赖2.1 使用 Homebrew 安装 SDL22.2 项目 CMakeLists.txt 配置文件3. SDL2 初试3.1 App 类声明3.2 Init 实现3.3 Execute 实现3.4 主函数 & 运行截图其他资源参考连接完整代码示例正文今天给大家介绍如何在 C++ 中使用 SDL2 图形库1. 环境配置对于 SDL 是什么库就不多

2021-11-30 21:56:30 5321

原创 Rust: Box 智能指针进阶 - Rc、RefCell、Weak

Rust: Box 智能指针进阶 - Rc、RefCell、Weak文章目录Rust: Box 智能指针进阶 - Rc、RefCell、Weak正文1. Box 类型复习2. 自定义模拟 Box 类型3. 递归类型定义4. Box 进阶：Rc5. Box 进阶：RefCell6. 循环依赖 & Weak7. 结论其他资源参考连接完整代码示例正文1. Box 类型复习Rust 内置类型: Box、Option、ResultBox 为一种特别的引用类型，实际数据存储在堆上Box 作为引用类

2021-11-29 14:33:55 2225

原创 JS Web API: Stream API 解析

JS: Stream API 解析文章目录JS: Stream API 解析正文1. Stream 概念 & 类型2. ReadableStream3. WritableStream4. pipeTo 传递数据4.1 自定义流对接4.2 pipeTo5. TransformStream & pipeThrough5.1 TransformStream 的创建5.2 自定义流通道5.3 TransformStream + pipeThrough6. 应用其他资源参考连接完整代码示例正文1

2021-11-26 12:23:24 2407 2

原创 Webpack: Loader 开发分享

Webpack: Loader 开发分享文章目录Webpack: Loader 开发分享正文1. Concept 概念2. Configuration 配置实例3. Custom 自定义 Loader3.1 配置自定义 Loader3.2 内嵌 loader（路径指定）3.3 Loader 写法4. 实战：jsonc-loader其他资源参考连接完整代码示例正文1. Concept 概念Webpack 的理念告诉我们万物皆模块（Module），然而一个完整的前端网页不仅仅只有 JavaScript，

2021-11-25 20:30:13 280

原创 UI 实现分享: 动态导航栏

UI 实现分享: 动态导航栏文章目录UI 实现分享: 动态导航栏正文1. 实现效果2. 实现细节2.1 html 布局2.2 元素定位2.3 导航栏列表项2.4 动画效果2.5 hover 变色其他资源参考连接完整代码示例正文1. 实现效果先来看看最终实现效果静态图动态效果2. 实现细节2.1 html 布局元素布局上比较简单，分成中心的 .toggle 元素，以及周围的 li 元素列表index.html <div id="app"> &

2021-11-24 21:27:34 1190

原创 Babel 插件开发: 数组负数索引语法糖

Babel 插件开发: 数组负数索引语法糖文章目录Babel 插件开发: 数组负数索引语法糖正文1. Doc2. 核心流程3. 核心包简单尝试4. 插件开发实战：数组负数索引支持4.1 插件解构规则4.2 插件配置4.3 插件实现4.4 t.memberExpression 小坑分享4.5 运行成果其他资源参考连接完整代码示例正文在前端开发用 Babel 也有一段时间了，今天给大家介绍到底如何开发一个自定义的 Babel 插件，加入自己的语法糖！1. DocBabel 插件的文档感觉比较老旧了，可

2021-11-23 17:12:09 884

原创 Rust 实战: 启动多线程 Web 服务

Rust 实战: 启动多线程 Web 服务文章目录Rust 实战: 启动多线程 Web 服务正文0. 基本信息1. 监听 TCP 连接请求2. 创建多线程运行环境2.1 线程池 ThreadPool2.2 任务执行 Worker3. 运行效果其他资源参考连接完整代码示例正文0. 基本信息Rust 语言内置提供了 TcpListener 的结构体，来实现监听 TCP 的网络连接，不过默认情况下程序都是同步并阻塞在 incoming 方法上的。因此本篇除了介绍使用 TcpListener 监听 TCP

2021-11-19 19:40:15 1409

原创 JS Web API: NetworkInformation 网络状况 API

JS Web API: NetworkInformation 网络状况 API文章目录JS Web API: NetworkInformation 网络状况 API正文0. 基本信息1. 相关 API2. 代码实现3. 最终效果其他资源参考连接完整代码示例正文0. 基本信息今天要给大家讲解的是利用浏览器的 WebAPI 来获取当前用户的网络状况，然而实际上浏览器 API 提供的状态还是比较粗浅，而且大多都是估计值，同时兼容性并不是那么好，所以如测速下载等功能实际上还是依赖服务端对前端行为的响应进行检

2021-11-19 17:21:30 2215

原创 is-path-cwd 源码解析(Npm library)

is-path-cwd 源码解析(Npm library)文章目录is-path-cwd 源码解析(Npm library)正文0. 基本信息1. 源码解析其他资源参考连接阅读笔记参考正文0. 基本信息version：v3.0.0功能：检查字符串是否为当前工作目录（与 process.cwd 比较）1. 源码解析整个库唯一的功能就是与 process.cwd() 比较，然后对 win32 做忽略大小写的兼容index.js（阅读笔记：index.js）import process

2021-11-18 12:34:42 265

原创 inflight 源码解析

inflight 源码解析文章目录inflight 源码解析正文0. 基本信息1. 源码解析1.0 源码结构1.1 主入口 inflight1.2 启动函数创建着 makeres其他资源参考连接阅读笔记参考正文0. 基本信息version：v1.0.6功能：收集多个回调函数并返回只执行一次的启动函数，启动时一次调用多个回调这个与 Promise 的想法有所不同，Promise 的概念是第一次调用就会尽可能的往后执行知道挂起，这个库实现的范式则是返回一个延迟启动的函数，有点像是 Rust 中的

2021-11-18 11:58:18 503

原创 path-is-absolute 源码解析(Deprecated)

path-is-absolute 源码解析(Deprecated)文章目录path-is-absolute 源码解析(Deprecated)正文0. 基本信息1. 源码解析其他资源参考连接阅读笔记参考正文0. 基本信息version：v2.0.0功能：NodeJS 的 path 模块 isAbsolute 方法的 polyfill1. 源码解析其实可以看到作者的源码基本也是参考 NodeJS 的源码，这应该是比较早期的库了，基本上我们直接用 Node 或是主动 install 官方的 pa

2021-11-18 02:50:24 298

原创 once 源码解析

once 源码解析文章目录once 源码解析正文0. 基本信息1. 源码解析1.1 源码结构1.2 once 基本款1.3 onceStrict 严格模式1.4 原型方法其他资源参考连接阅读笔记参考正文0. 基本信息version：v1.0.4功能：返回只执行一次的函数的高阶函数吐槽：作者把 wrappy 库的 sample 包一包就也能发个包，也是很偷懒1. 源码解析1.1 源码结构once.js（阅读笔记：/once.js/0_structure.js）var wrappy

2021-11-18 02:30:18 296

原创 wrappy 源码解析

wrappy 源码解析文章目录wrappy 源码解析正文0. 基本信息1. 源码解析2. 作者实现其他资源参考连接阅读笔记参考正文0. 基本信息version：v1.0.2功能：实现函数科里化包装1. 源码解析整个项目很小，就一个方法wrappy.js（阅读笔记：wrappy.js）整个函数的目标就是实现函数的包装，一共接受两个参数module.exports = wrappy;function wrappy(fn, cb) { // 一次传入两个参数 if (fn &

2021-11-17 22:38:02 364

原创 minimatch 源码解析

minimatch 源码解析文章目录minimatch 源码解析正文0. 基本信息1. 源码解析1.1 项目展开1.2 Minimatch1.2.1 构造函数1.2.2 make 初始化表达式解析1.2.3 裁剪前导 !1.2.4 花括号展开1.2.5 分段 & parse 正则表达式转换1.2.6 正则表达式转换：第一部分 - 初始化状态1.2.7 正则表达式转换：第二部分 - 循环解析1.2.7.1 状态扩展符1.2.7.2 分组符号1.2.7.3 或符号1.2.7.4 类运算符1.2.7.5

2021-11-17 22:07:18 756

原创 brace-expansion 源码解析

brace-expansion 源码解析文章目录brace-expansion 源码解析正文0. 基本信息1. 源码解析1.0 代码结构1.1 主入口 expandTop1.2 转译/反转译 escapeBraces、unescapeBraces1.3 递归展开 expand1.3.1 不存在 {}1.3.2 忽略 ${}1.3.3 展开 {}1.3.4 非序列 => 保留原字符串1.3.5 捕捉序列参数1.3.6 展开序列1.3.7 返回结果2. 小结其他资源参考连接阅读笔记参考正文0. 基本

2021-11-16 17:42:05 804

原创 balanced-match 源码解析

balanced-match 源码解析文章目录balanced-match 源码解析正文0. 基本信息0.1 Usage0.2 Version: v2.0.00.2 Doc1. 源码解析1.0 源码项目结构1.1 主入口1.2 balanced1.3 maybeMatch1.4 range其他资源参考连接阅读笔记参考正文0. 基本信息0.1 Usagebalanced-match 这个库的目标很简单：匹配第一个符合条件的一对字符串，同时将其拆解成前、中、后等三部分0.2 Version: v2.

2021-11-16 15:01:50 496

原创 Yarn 踩坑笔记: 安装异常资源错误缓存处理(Error: SyntaxError: Invalid or unexpected token)

Yarn 踩坑笔记: 安装异常资源错误缓存处理(Error: SyntaxError: Invalid or unexpected token)文章目录Yarn 踩坑笔记: 安装异常资源错误缓存处理(Error: SyntaxError: Invalid or unexpected token)正文项目背景问题描述解决方案其他资源参考连接完整代码示例正文项目背景本篇描述的问题有可能出现在任何使用了包管理工具的前端项目中，并不只局限于 yarn。问题描述有时候我们发现项目安装完依赖之后(npm

2021-11-16 00:44:49 3119

原创技术方案分享: gulp + webpack 联合编译三方库发布版本

技术方案分享: gulp + webpack 联合编译三方库发布版本文章目录技术方案分享: gulp + webpack 联合编译三方库发布版本正文0. 打包的目标到底是什么？1. 如何打包？2. 代码示例2.1 创建项目2.2 安装依赖2.3 定义 gulp 工作流2.4 ts、babel 编译配置项2.5 打包成果展示2.6 webpack 打包单文件成果其他资源参考连接完整代码示例正文使用过 npm 写项目的同学或多或少都经历过使用某个打包工具进行打包然后发布项目的时候（可能用的是 webpac

2021-11-15 23:46:18 827

原创 Rust 特性: Drop 特性(类 C++ 析构函数)

Rust 特性: Drop 特性(类 C++ 析构函数)文章目录Rust 特性: Drop 特性(类 C++ 析构函数)正文0. 关于析构函数1. 代码实现1.0 Drop 实现1.1 自动回收1.2 主动回收其他资源参考连接完整代码示例正文0. 关于析构函数写过 C++ 的应该都知道，资源被释放的时候会调用析构函数，方法签名如下class AClass { public: ~AClass();}Java 也有类似的函数class Object { fini

2021-11-14 16:28:10 1351

原创 Rust 内置类型: Box、Option、Result

Rust 内置类型: Box、Option、Result文章目录Rust 内置类型: Box、Option、Result正文1. Box1.1 创建 Box1.2 修改 Box1.2.1 修改 Box 数据1.2.2 修改 Box 指针1.2.3 引用其他变量2. Option2.1 Option 作为返回值2.2 Option 解包(解构)：使用 match2.3 Option 解包：使用 unwrap2.4 Option 解包：使用 ?3. Result3.1 Result 解包：使用 match3.

2021-11-14 12:32:57 1275

原创 Rust 基础: 三方库依赖 & 自定义三方库

Rust 基础: 三方库依赖 & 自定义三方库文章目录Rust 基础: 三方库依赖 & 自定义三方库正文1. 项目类型2. 引入官方三方库3. 自定义三方库3.1 创建库项目3.2 加点内容3.3 引入自定义三方库其他资源参考连接完整代码示例正文今天来介绍一下如何在 rust 项目中依赖三方库，以及如何自定义一个三方库1. 项目类型在 Rust 中存在两种基础的项目类型一种属于应用(application)，主入口默认采用 src/main.rs第二种为三方库(library

2021-11-10 13:36:32 6278

原创 Rust 基础: Module 模块系统

Rust 基础: Module 模块系统文章目录Rust 基础: Module 模块系统正文1. 简介2. 文件内模块3. 单文件模块4. 目录为模块5. 目录下其他模块其他资源参考连接完整代码示例正文1. 简介在 Rust 中的模块系统感觉与 ESM(ECMAScript Module)非常类似，只是更加严谨，同时也限制了作用域与可见性模块系统实际上用关键字 mod 就能进行区分，同时也跟 ESM 一样，一个文件将被视为一个单独的模块；而目录则与 ESM 类似，由特殊名称的文件 mod.rs 为

2021-11-10 12:26:34 751

原创 JS API: Fullscreen 全屏 API

JS API: Fullscreen 全屏 API文章目录JS API: Fullscreen 全屏 API正文1. 相关 API2. 代码示例2.1 一般用法2.2 封装成钩子2.3 效果其他资源参考连接完整代码示例正文今天来介绍一下全屏模式 API 使用1. 相关 API属性Properties用法Document.fullscreenElement当前处于全屏模式的根元素Document.fullscreenEnabled检查全屏模式是否可用方法

2021-11-09 17:03:02 1363

原创 JS: web 上的文件操作

JS: web 上的文件操作文章目录JS: web 上的文件操作正文1. web 上的文件操作2. 文件来源2.1 文件选择器2.2 拖拽文件3. 提取文件内容3.1 关于 FileReader3.2 文件编辑3.3 文件展示3.3.1 图片3.3.2 视频3.3.3 其他文件其他资源参考连接完整代码示例正文1. web 上的文件操作首先先明确 web 上如何操作文件，文件系统实际上是属于操作系统级别的较低层 API，实际上 web 浏览器能做的也就是访问系统上的 fs，获取相关文件的头信息或是查询

2021-11-06 12:36:48 354 1

原创 react-intersection-observer 源码解析二连发

react-intersection-observer 源码解析二连发文章目录react-intersection-observer 源码解析二连发正文1. IntersectionObserver API2. @researchgate/react-intersection-observer@1.3.52.1 类型定义 types2.2 观察者封装 observer2.2.1 模块结构2.2.2 观察者实例缓存/记录2.2.3 查找观察目标2.2.4 创建观察者2.2.5 观察/取消观察方法2.3 ho

2021-11-04 16:22:01 548

原创 CSS 实战: Switch 按钮开关(checkbox 实现)

CSS 实战: Switch 按钮开关(checkbox 实现)文章目录CSS 实战: Switch 按钮开关(checkbox 实现)正文1. 效果2. 代码实现2.1 html 结构2.2 外框 wrapper + 底座 box 样式2.3 白色按钮 but2.4 表情符号其他资源参考连接完整代码示例正文1. 效果 2. 代码实现2.1 html 结构<label class="box-wrapper"> <input type="checkbox" />

2021-11-02 00:39:04 840

原创 CSS 实战: Loading 动画

CSS 实战: Loading 动画文章目录CSS 实战: Loading 动画正文1. html 结构2. div 实现样式3. svg 实现样式4. 实现效果其他资源参考连接完整代码示例正文1. html 结构这里一共实现两种 loading 图样，一个使用 <div> 标签，一个则是 svg 的 <circle> 元素<div class="loading-css"></div><svg viewBox="0 0 50 50" clas

2021-11-01 23:50:18 839

原创 Webpack 插件分享: webpack-bundle-analyzer 打包文件分析工具

Webpack 插件分享: webpack-bundle-analyzer 打包文件分析工具文章目录Webpack 插件分享: webpack-bundle-analyzer 打包文件分析工具正文0. 为什么需要分析？1. 功能 & 范例2. 引入方式其他资源参考连接完整代码示例正文0. 为什么需要分析？前端工程化越来越庞大，对于三方库、源代码的编译、打包等能力要求越来越高，如果一不小心打了太大的东西进去会造成客户端渲染的时候严重延迟，影响用户体验1. 功能 & 范例webpac

2021-11-01 17:22:52 1647

原创 delegate 源码解析

delegate 源码解析文章目录delegate 源码解析关联文章正文0. 功能1. 用法2. 入口函数 delegate3. 核心功能 _delegate4. 封装监听函数 listener5. 查找最近目标元素 closest其他资源参考连接阅读笔记参考关联文章good-listener 源码解析正文0. 功能之前写过的 good-listener 源码解析提过，good-listener 库本质上就是对 delegate 库的封装，本篇再向下深入探究 delegate 库的功能1

2021-11-01 14:07:46 233

原创 good-listener 源码解析

good-listener 源码解析文章目录good-listener 源码解析正文0. 使用1. 主流程1.1 辅助工具函数(类型判断)1.2 核心方法 listen1.3 监听元素 listenNode1.4 监听元素集合 listenNodeList1.5 根据选择器监听 listenSelector1.6 监听器返回对象2. 总结其他资源参考连接阅读笔记参考正文0. 使用good-listener 的使用方法主要就是一个 listen 核心函数，函数签名如下/** * Validates

2021-11-01 11:42:57 287

原创 select 源码解析

select 源码解析文章目录select 源码解析正文0. 功能1. 代码结构1.1 HTMLSelectElement1.2 HTMLInputElement、HTMLTextAreaElement1.3 其他 Element其他资源参考连接阅读笔记参考正文0. 功能select 库的功能是使用户能够以编程命令式的方式选择某个 html 元素节点，并同步获取元素内容文本1. 代码结构/src/select.js（阅读笔记：/src/select.js）function select(e

2021-11-01 10:23:32 741

原创 tiny-emitter 源码解析

tiny-emitter 源码解析文章目录tiny-emitter 源码解析正文0. 关于 Emitter1. 源码结构2. 监听事件 on3. 取消监听 off4. 触发事件 emit5. 单次触发事件 once其他资源参考连接阅读笔记参考正文0. 关于 Emittertiny-emitter 是 Node 提供的 EventEmitter 的简单版本，也就是面试的时候常见的 Emitter 实现1. 源码结构tiny-emitter 的源码就只有一个 index.js 文件/index.

2021-11-01 09:32:52 555

原创 Clipboard.js 源码解析

Clipboard.js 源码解析文章目录Clipboard.js 源码解析正文0. 源码解析都在看什么？1. 源码解析路线 & 手段2. Clipboard 源码解析2.1 源码目录结构2.2 基础使用2.3 源码入口：Clipboard 类2.4 配置参数解析 resolveOptions2.4.1 defaultAction2.4.2 defaultTarget2.4.3 defaultText2.5 监听事件 listenClick2.6 事件触发 onClick2.6.1 默认事件 Cl

2021-11-01 01:49:29 298

空空如也

空空如也