Webpack 配置及规则
参考来源： Webpack5 核心原理与应用实践 配置方法 对象配置 在前面章节中，我们已经编写了许多 Webpack 配置示例，其大多数都以单文件导出单个配置对象方式实现，类似： 比较常用的一种方式，逻辑简单，适合大多数业务项目； 使用配置数组 同一份代码打包出多种产物”场景 导出数组的方式很简单，如： 使用数…
Read articleThe archive
The Journal
Notes on frontend development, engineering, and everyday ideas. Find a subject and start reading.
Webpack 图像处理
参考来源： Webpack5 核心原理与应用实践 在 Webpack 4 中导入图像 原生 Webpack 4 只能处理标准 JavaScript 模块，因此需要借助 Loader —— 例如 file-loader、url-loader、raw-loader 等完成图像加载操作，实践中我们通常需要按资源类型选择…
Read articleReact 中使用 TypeScript
笔记总结自《TS全面进阶指南》 泛型坑位 useState 基本类型 首先是 useState，可以由输入值隐式推导或者显式传入泛型： 需要注意的是在显式传入泛型时，如果像上面的例子一样没有提供初始值，那么 state2 的类型实际上会是 string undefined，这是因为在 useState 声明中对是…
Read articleuseReducer：类Redux的useState替代方案
useState 的替代方案（更复杂的方案）。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。） 在某些场景下，useReducer 会比 useS…
Read article浏览器缓存机制-缓存位置
从缓存位置上来说分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络。 Service Worker Memory Cache Disk Cache Push Cache Service Worker Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使…
Read article浏览器缓存机制-请求头
相关头部字段 强缓存： Expires Cache-Control 协商缓存： Etag、If-None-Match Last-Modified、If-Modified-Since 1. Cach-Control优先级高于Expires； 2. Etag/If-Node-Match优先级高于Last-Modifi…
Read article前端存储方案一览
Cookies 在HTML5标准前本地储存的主要的也是最早提出的⽅式，优点是兼容性好，请求头⾃带cookie⽅便（使用fetch的话需要额外配置），缺点是⼤⼩只有4k，⾃动请求头加⼊cookie浪费流量，而且每个domain限制20个cookie，使⽤起来麻烦，需要自行封装相关方法。 Cookie一旦创建成功，名…
Read articleRESTful 下请求方法的幂等性
概念阐述 一个 HTTP 方法是幂等的，指的是同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的。换句话说就是，幂等方法不应该具有副作用（统计用途除外）。所有的 safe 方法也都是幂等的。 幂等性只与后端服务器的实际状态有关，而每一次请求接收到的状态码不一定相同。需要注意的是，服务器不一定…
Read articleWAF 网络应用防火墙
你可能对传统的“防火墙”比较熟悉。传统“防火墙”工作在三层或者四层，隔离了外网和内网，使用预设的规则，只允许某些特定 IP 地址和端口号的数据包通过，拒绝不符合条件的数据流入或流出内网，实质上是一种网络数据过滤设备。 WAF 也是一种“防火墙”，但它工作在七层，看到的不仅是 IP 地址和端口号，还能看到整个 HT…
Read articleWebSocket
“WebSocket”就是运行在“Web”，也就是 HTTP 上的 Socket 通信规范，提供与“TCP Socket”类似的功能，使用它就可以像“TCP Socket”一样调用下层协议栈，任意地收发数据。 更准确地说，“WebSocket”是一种基于 TCP 的轻量级网络通信协议，在地位上是与 HTTP“平级…
Read article横向对比 CJS 和 ES Module
模块化 🖥️ 什么是模块化开发 模块化开发最终的目的是将程序划分成一个个小的结构。在这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构。结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用。也可以通过某种方式，导入另外结构中的变量、函数、对象等。 上面说提到的结构，就是模块，按照这种结…
Read articleCJS 和 ES Module 横向对比
ES Module export关键字 export关键字将一个模块中的变量、函数、类等导出； 我们希望将其他中内容全部导出，它可以有如下的方式： 方式一：在语句声明的前面直接加上export关键字 方式二：将所有需要导出的标识符，放到export后面的 {}中 方式三：导出时给标识符起一个别名 import关键…
Read articleNo matching articles
Try another keyword or reset your filters.