超悠閒的博客

fetch API 提供的取消请求代码实现，以及前端请求取消、时序问题的讨论与思考

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

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

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

JS Web API: NetworkInformation 网络状况 API文章目录JS Web API: NetworkInformation 网络状况 API正文0. 基本信息1. 相关 API2. 代码实现3. 最终效果其他资源参考连接完整代码示例正文0. 基本信息今天要给大家讲解的是利用浏览器的 WebAPI 来获取当前用户的网络状况，然而实际上浏览器 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检查全屏模式是否可用方法

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，获取相关文件的头信息或是查询

JS 实战: 前端图片下载实现文章目录JS 实战: 前端图片下载实现正文1. Image + canvas API 实现2. Fetch API / XHR 实现其他资源参考连接完整代码示例正文1. Image + canvas API 实现/src/utils/index.ts第一步是构造 Image 对象，实际上就是 HTMLImageElement 类型的对象，也就等价于 <img> 标签的作用export const downloadImgByImage = (imgSr

JS 进阶: 深入理解键盘事件 Keyboard Event文章目录JS 进阶: 深入理解键盘事件 Keyboard Event正文1. 基础 API2. 基础事件：keydown、keyup3. 应用：一次按下 + 释放仅触发一次事件4. 应用：组合键事件监听封装5. 应用：计算按压时间6. 应用：定制定时器超越事件触发间隔限制其他资源参考连接完整代码示例正文1. 基础 API第一部分是基础 API事件名描述事件类型keydown按下按键KeyboardEvent

ES6 特性: 模版字符串 Template String文章目录ES6 特性: 模版字符串 Template String正文1. 特性：字符串拼接2. 特性：字符串模版作为函数3. 应用：字符串表达式转对象4. 应用：生成内联 CSS 样式(style 样式)其他资源参考连接完整代码示例正文1. 特性：字符串拼接原来使用 + 号拼接字符串 => 改为使用反引号与 ${} 表达式组合字符串ES5 以前const greeting = 'Hello ' + name + '!';

JS 事件: Composition Input 组合输入事件(中文输入事件监听)文章目录JS 事件: Composition Input 组合输入事件(中文输入事件监听)前言正文组合输入事件：compositionstart、compositionupdate、compositionend输入阶段代码示例1. 非受控组件2. 受控组件结语其他资源参考连接完整代码示例前言今天跟大家分享一个比较有趣的小知识。我们都知道 html 中监听 <input> 标签的输入相关事件有 input、ch

JS 实战: 一文了解 5 种文件上传场景文章目录JS 实战: 一文了解 5 种文件上传场景前言正文1. 单文件上传2. 多文件上传3. 按目录多文件上传4. 多文件合成压缩包上传5. 大文件分块上传结语其他资源参考连接完整代码示例前言今天来跟大家分享 5 个常见的文件上传场景，由浅入深，小心服用（示例代码仓库还另外附带使用 koa 实现的服务端负责保存代码，本篇就简单介绍前端部分的实现而已）正文本篇展示的前端代码使用了 React 作为载体，但是文件上传本身的能力是与 React 无关的1.

JS 基础: RegExp 正则表达式完整理解与应用文章目录JS 基础: RegExp 正则表达式完整理解与应用前言正文0. 什么是正则表达式？1. JS 中与正则表达式相关的方法1.0 JS 中正则表达式的构造方法：字面量、RegExp 构造函数1.1 RegExp.prototype.test(string)1.2 RegExp.prototype.exec(string)1.3 String.prototype.match(regexp)1.4 String.prototype.search(reg

JS 模块化: CommonJS 与 ESM(ECMAScript Module) 的引用机制比较 & 循环依赖解决方式文章目录JS 模块化: CommonJS 与 ESM(ECMAScript Module) 的引用机制比较 & 循环依赖解决方式前言CommonJS & ECMAScript Module正文1. 引入机制比较1.1 导出 / 引入语法1.2 原始类型的导出/引入(primitive variable)1.2.1 CommonJS 方案1.2.2 ESM 方案1.

JS 模块化: AMD 模块化方案的理解与应用文章目录JS 模块化: AMD 模块化方案的理解与应用前言JS 模块化标准：CommonJS、AMD、ES6 Module(ESM = ECMAScript Module)动机正文1. 模块化之前1.1 同步脚本1.2 在 head 标签中引入脚本1.3 使用 window.onload2. 使用 RequireJS 实现 AMD 规范2.1 引入 RequireJS2.2 AMD 模块规范2.3 Sample 1: 基本模块定义2.4 Sample 2:2

ES7 提案: Decorators 装饰器文章目录ES7 提案: Decorators 装饰器前言正文1. Decorator 装饰器使用规范1.1 装饰器的使用形式 & 具体行为1.2 为何不能修饰函数？2. 详细说明 & 代码示例2.1 类装饰器 Class Decorators2.1.1 传入参数 & 基础用法2.1.2 装饰器返回值2.1.3 装饰器表达式2.1.4 装饰器注入原型方法2.1.5 装饰器实现混入(Mixin)模式2.2 类方法装饰器 Class Metho

JS 基础: JavaScript 中 4 种继承方式 & instanceof 实现文章目录JS 基础: JavaScript 中 4 种继承方式 & instanceof 实现前言正文1. 借用构造函数的继承2. 借用原型对象的继承3. 创建实例对象作为原型的继承4. 创建未初始化实例作为原型的继承Babel 编译后的继承instanceof 关键字实现结语其他资源参考连接完整代码参考前言如果对于 JS 的原型链(prototype chain)与类型判断还不太了解的，推荐你先把下

JS 基础: 从 5 种创建对象的方式看 new 操作符的作用与实现文章目录JS 基础: 从 5 种创建对象的方式看 new 操作符的作用与实现前言正文创建 Object 对象的五种方式使用 Object.create(proto) 创建对象自定义类型函数属性 & 原型创建自定义类型对象自定义类型小结再谈对象的创建1. 构造函数的返回值2. 自定义对象修改原型后再创建new 关键字实现结语其他资源参考连接完整代码参考前言本篇要来谈谈 JS 语言中的创建普通 Object 对象的五种方法，并引出

JS 动画：给网页下个雪吧文章目录JS 动画：给网页下个雪吧简介参考完整示例代码正文1. 一朵雪花2. 很多雪花3. 让雪花动起来4. 快速划过的雪花5. 雪花摇曳6. 最终效果结语简介前些日子面试的时候被问到 raf 的问题，写了篇 JS 动画基础: 细说 requestAnimationFrame。今天来分享一个动画的实现：为网页加一个下雪动画（电脑太烂了 gif 录的巨卡请各位加减看啊hhh参考 冬天到了，给你的网站下个雪吧 https://juejin.cn/pos

JS 前端路由：单页面应用的路由原理和实现文章目录JS 前端路由：单页面应用的路由原理和实现简介参考完整示例代码正文从页面刷新到路由跳转单页面应用的优劣前端路由分类前端路由实现项目架构Hash 实现History 实现结语简介在浏览器的默认行为中，不同的 url 就对应着不同的资源。这就表示当我们使用路径来区别一个网页的不同页面的时候，实际上浏览器就必须从服务端将不同页面加载下来解析然后展示，而这也是传统页面的做法。下面我们来介绍一种当前更流行，并将异步交互体验发挥到极致的网页：单页面应用(SPA

JS 函数式编程: 高阶函数之柯里化(currying)和反柯里化(uncurrying)文章目录JS 函数式编程: 高阶函数之柯里化(currying)和反柯里化(uncurrying)简介参考完整示例代码正文柯里化 Currying实现目标基础实现特殊终止条件函数内部柯里化柯里化的应用环境兼容性`Function.prototype.bind`反柯里化 Uncurrying`Function.prototype.call` 实现`Function.prototype.apply` 实现`Reflect

JS 动画基础: 细说 requestAnimationFrame文章目录JS 动画基础: 细说 requestAnimationFrame简介参考完整示例代码正文`setInterval` 实现动画`setInterval` 的限制`requestAnimationFrame` 实现动画rAF 基础实现rAF 定时调用：timestamprAF 取消回调：`cancelAnimationFrame`渲染、动画分离最终封装版本`requestAnimationFrame` 特性 & 使用注意事项结

Promise 应用: 回调函数方法封装成 Promise，并透过 async/await 同步化文章目录Promise 应用: 回调函数方法封装成 Promise，并透过 async/await 同步化简介参考完整示例代码正文什么是"接受回调函数的方法"？示例一：http 请求示例二：mysql 命令示例三：同步方法面临问题：回调地狱封装开始回调函数方法准备（接受回调函数的方法）使用 Promise 进行封装使用 async/await 关键字同步化结语简介前一篇ES6特性：Promise異步函數介

JS 基础: 你真的了解 console 的强大之处吗？文章目录JS 基础: 你真的了解 console 的强大之处吗？简介参考正文`console` 的方法console.logconsole.warnconsole.errorconsole.clearconsole.time & console.timeEndconsole.tableconsole.countconsole.group & console.groupEndconsole.log（自定义样式）结语简介相信大部分的人

JS 基础: Get & Check Object Properties 获取和检查对象属性文章目录JS 基础: Get & Check Object Properties 获取和检查对象属性简介参考正文获取属性`Object.keys(obj)``Object.getOwnPropertyNames(obj)``Object.getOwnPropertySymbols(obj)``getOwnProperties` & `getOwnEnumerableProperties`检查

JS 基础：一次搞懂 for、for…in、for…of 循环文章目录JS 基础：一次搞懂 for、for...in、for...of 循环简介参考正文样例一般 for 循环Scope 作用域for...in 循环`enumerable: false`模仿 for...infor...in 小结for...of 循环Symbol.iteratorfor...of 小结结语简介在 JavaScript 里面，for 循环有三种使用方式：for、for...in、for...of(ES6 新增)，我们们还

JS 实战: Drag 点击拖曳效果文章目录JS 实战: Drag 点击拖曳效果简介参考正文项目结构 & 静态模版添加元素添加 position主要逻辑片段事件响应结构移动元素限制可移动范围最终版本结语简介一直以来都觉得网页中的点击拖曳效果很酷，本篇就来尝试看看实现使用原生 JS 来实现点击拖曳元素的效果。参考 DIV 点击拖动，纯JS 实现 https://blog.csdn.net/qq_32214375/article/details/82387482

JS 基础: typeof & instanceof 类型检查文章目录JS 基础: typeof & instanceof 类型检查简介参考正文`typeof` 关键字字面量类型判断内置函数类型判断`typeof` 小结应用`instanceof` 关键字Prototype Chain 原型链回顾内置函数的原型链属性规则：`prototype`、`__proto__``instanceof` 实例添加新类型直接指向 Number.prototype继承 Number完善 Integer一般

ES6 实战: 手写 Promise文章目录ES6 实战: 手写 Promise简介参考正文类结构和对外接口重要属性回调函数静态方法最终类结构简单同步版本Promise 返回值打包接受异步任务添加静态方法结语简介前一篇：ES6特性：Promise異步函數，介绍过了一些 Promise 的基础概念和用法，本篇将要来尝试手写自己的 Promise 类。Promise 属于 ES6 新增的原生函数，因此在 ES5 甚至更早的版本环境里面我们需要透过 babel 或是其他 polyfill 来额外注入 Pr

ES6: Proxy 代理文章目錄ES6: Proxy 代理簡介參考正文Conception 思想Create 創建實例`Proxy.revocable(target, handler)`Handlers 處理方法`get(target, propKey, receiver)`參數說明Sample`set(target, propKey, value, receiver)`參數說明Sample`has(target, propKey)`參數說明Sample`deleteProperty(target, p

JS 基礎：Closure 閉包文章目錄JS 基礎：Closure 閉包簡介參考正文IIFE 立即執行函數(Immediately Invoked Functions Expression)Closure 閉包for 循環：使用 IIFE 建立塊級作用域PrimeCreator 質數(素數)製造機Module 模塊化Module Loader 模塊加載器結語簡介在 ES6 新增 let、const 的塊級作用域變量聲明，以及 import/export 等模塊化語法之前，只能透過 var 以及，IIF

JS 基礎：Hoisting 變量提升、TDZ 暫時性死區(Temporal Dead Zone)文章目錄JS 基礎：Hoisting 變量提升、TDZ 暫時性死區(Temporal Dead Zone)簡介參考正文Scope 作用域`var``let`、`const`Hoisting 變量提升(對於 `var` 來說)暫時性死區 TDZ (Temporal Dead Zone)結語簡介本篇將會分成三部分介紹 JS 語言裡的作用域介紹什麼叫做變量提升(hoisting)，以及身為解釋型語言的 J

JS 基礎：Prototype Chain 原型鏈文章目錄JS 基礎：Prototype Chain 原型鏈簡介參考正文Object 對象創建直接量 `{}`內置構造函數 `new Object()`使用 `Object.create(proto, propertiesObject)`Class 類型Prototype 原型Function without prototypeFunction with prototypeConcept 概念SamplePrototypte is an Object 原型也

JS 基礎：void 冷知識文章目錄JS 基礎：void 冷知識簡介參考正文語法Usage 作用Application``IIFE(Immediately Invoked Function Expression)箭頭函數結語簡介今天來介紹一下 JS 規範中超級沒有存在感的運算符：void。啥？聽都沒聽過？我也沒聽過，要說本篇的來源是某次在 babel 首頁編譯後的代碼裡面無意間撇到一個 void// 有興趣的可以到 babel 首頁嘗試// 編譯前() => { this }// 編譯

ES6: Module 模塊化文章目錄ES6: Module 模塊化簡介參考正文Usage 應用Overview 概述`export` 導出`export var` 個別導出`export {}` 一組導出`export { as }` 導出別名`export default` 默認導出導出引用`import` 導入`import {}` 個別導入`import { as }` 導入別名`import * as` 整體導入`import` 默認導入`export + default` 複合寫法提案：簡

JS 基礎：事件觸發機制文章目錄JS 基礎：事件觸發機制簡介參考正文EventTarget 事件目標對象Methods 方法EventTarget.addEventListenerEventTarget.removeEventListenerEventTarget.dispatchEventEvent 事件對象Properties 屬性Methods 方法Capture & Bubbling 捕獲和冒泡階段`preventDefault()` & `stopPropagation()`實踐

JS 基礎：Event Loop 事件循環機制文章目錄JS 基礎：Event Loop 事件循環機制簡介參考正文Structure 結構Stack 棧Heap 堆WebAPIs 接口Callback Queue 回調函數隊列Problem 問題Blocking 阻塞SampleSolution 解決辦法Render Blocking 瀏覽器渲染阻塞SampleSolution 解決方法Callback Queue Blocking 回調函數隊列阻塞結語簡介前言：一個國外開發者非常經典的關於事件循環機制

JS 基礎：DOM & BOM文章目錄JS 基礎：DOM & BOM簡介參考正文Overview 總覽BOM(Browser Object Model)Window 對象Window.document (Document 對象)Window.history (History 對象)Window.location (Location 對象)Window.navigator (Navigator 對象)Window.screen (Screen 對象)Window.localStorage (

JS 基礎：Function.prototype 三大方法文章目錄JS 基礎：Function.prototype 三大方法簡介參考正文目的`Function.prototype.call` & `Function.prototype.apply`call & apply 語法call & apply Sample`Function.prototype.bind`bind 語法bind Sample應用self 替換bind 函數arrow function 箭頭函數結語簡介F

ES6: Generator 生成器文章目錄ES6: Generator 生成器簡介參考正文Basic 基礎定義和用法帶參數的 next遍歷自定義對象屬性擴展運算符展開迭代器作為對象屬性yield\* 語法協程(coroutine)半協程(semi-coroutine)this 綁定Generator 實例方法Generator.prototype.throw()Generator.prototype.return()finallyGenerator 應用異步操作同步化控制流程管理Iterator 接口結