⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 桥接模式实际上就是将逻辑抽象和具体的实现分离。 以追加字符串到文件中为例 代码从 {代码...} 变为： {代码...} 上面代码是读取某个文件并在文件中追加字符串，最后调用回调函数。 桥接模式的主要特点就是实现层（这里的文本追加逻辑）和抽象层（这里的文件和文本）的...

⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 Proxy 方法创建代理模式 使用 Proxy API 可以方便的创建一个 get 和 set 拦截器 {代码...} Object.defineProperty 方法创建代理模式 在 ES6 之前，通常使用 Object.defineProperty 这个方法： {代码...} 请关注我的订阅号，不定期推送有关 JS 的技术文章，只谈技术不谈...

⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 组合模式在对象间形成树形结构; 组合模式中基本对象和组合对象被一致对待; 无须关心对象有多少层, 调用时只需在根部进行调用; 实现原理 创建宏任务并维护一个任务列表 list 创建宏任务方法 add 将 task push 到 list 中 创建 execute 方法循环遍历 list 中的 task 对象 ...

⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅看到篇文章觉得不错，原文：[链接]。讲的是使用 Proxy 来封装 Storage API，做一层提供存取数据的代理层。这里简单翻译一下这篇文章的主要内容。

⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 不会改变原有的对象，而是在其基础上进行拓展。 实现原理 创建一个 A 类 A 类中的属性和方法使用 ES7 中的修饰器语法对类和类的属性增加功能 实现代码 ts 修饰器语法 如下是 ts 官方文档的例子： [链接] {代码...} 函数式 {代码...} AOP 装饰函数 {代码...} {代码...} ...

1. JavaScript 适配器模式 旧接口格式和使用者不兼容的情况下需要加一个适配转换接口，无需要改变旧的接口格式 eg: 电源适配器 实现步骤 针对 A 类创建一个 B 转换类 B 类中的 constructor 初始化中创建一个实例 instance 利用类的多态特性覆盖 A 类的方法 代码实现 class 语法 {代码...} 函数式 {代码...}

几种应该避免使用箭头函数的情况 ⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 避免在定义对象方法时使用 箭头函数虽然因语法简练受人追捧。但由于没有 this 会导致在一些情况下出现预想不到的意外情况。😯 比如在对象中定义一个方法： 看起来很完美调用这个方法能够按照预期，获得对象的 food 属性 但如果将其改为箭...

给元素增加 class，使用 classList 属性，该属性返回的是 DOMTokenList 对象，对象有一个 add 方法可添加 class，如果没有这个属性那么使用 className 进行字符串拼接

⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 梳理下常见的不冒泡事件 UI 事件 load 异步 不冒泡 ❌ unload 不冒泡 ❌ abort 不冒泡 ❌ error 异步 不冒泡 ❌ select load、unload 这些资源加载的事件不冒牌也是容易理解🤐 Focus 事件 事件触发顺序见下表： Event Type Notes User shifts focus focusin 第一个目标元素获...

整理获取 viewport 和 element 尺寸和位置方法 ⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 视口页面或窗口的位置和宽高 获取视口宽高 下面方法是包括滚动条的宽高，不支持 IE8 {代码...} width + padding + border + 滚动条 另外 outerWidth 浏览器兼容差，可获取包括工具栏的宽高 页面滚动位置 返回整个页面的滚...

⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 检查一个数组为空很容易，直接调用 length 方法即可，那么如何检查一个对象是否为空呢 ❓ 这里的空指的是对象没有自有属性 假设这里有两个对象，一个是 obj 一个是 anotherObj {代码...} ❗️想了半天查看对象是否有 Symbol 属性只能使用 getOwnPropertySymbols 方法，如果...

长时间我们一直在使用 document.execCommand 来与剪切板做交互，尤其是基本上都在使用 clipboard.js 这个库，其基本原理也是插入 DOM 树中一个隐藏的 textarea 元素，然后将要复制的文本写入到 textarea 元素中，最后调用 textarea 的 select 方法和 document.execCommand('copy') 方法，然后删除 textarea 元素

内容安全策略的主要作用就是尽量降低网站遭受 XSS 跨站脚本攻击的可能。浏览器没办法区分要执行的代码是否为页面本身的还是恶意注入的，XSS 就是利用这一点对网站进行攻击。 🙁

2019年3月29日目前，Node 对 ES6 Module 的支持又有新进展。一个新的 PR 更新了当前 --experimental-modules 的实现方案。

整个流程主要是创建 PaymentRequest，将购买货物的详细信息传递给浏览器，在 UI 层面显示支付的 UI，用户填入支付信息或从缓存中一键填充并确认支付。

Permission API 不是一个新的标准，早在 2015 年，就已经成为标准。这个 API 的主要作用就是提供一个统一的查询 API 权限的接口。 😌

IDB 操作的基本步骤是 open 方法打开数据库 ? 然后是创建数据库 store 对象仓库 ? 需要注意更新数据库版本应先调用 close 方法关闭旧版数据库 需要注意创建 store 一定要在新版本数据库的 upgradeneeded 事件处理函数中创建，因为本质上他是修改数据库结构 如果对数据库进行数据操作那么需要通过事务来执行 ?。 打开数据...

今天聊聊 xhr 的替代品 Fetch，在全局作用域中有个 fetch 方法方便使用。虽然同样也是处理 HTTP 请求和响应的，但 fetch 有两个不同之处，一个是收到错误的 HTTP 状态码时，fetch 方法返回的 Promise 不会被 reject，而是将 resolve 的对象中名为 ok 属性设置为 false，只有在网络出现故障的情况下才会被 reject。另外一...

PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。

浏览器画中画功能允许用户在一个小的叠加窗口中弹出网页中播放的视频 🎥，Chrome 版本大于 71 均默认开启该功能。下面简单介绍一下该 API 如何使用 📖

[译]使用 JavaScript 对象 Rest 和 Spread 的7个技巧 原文作者：Joel Thoms 原文标题：7 Tricks with Resting and Spreading JavaScript Objects 原文：[链接] Rest 和 Spread 操作符不仅仅可以用于让参数休息和扩展数组。 下面针对 JavaScript 对象时使用 Rest 和 Spread 时的 7 个鲜为人知的技巧。 添加属性 克隆一个...

LocalStorage 大家都不陌生基本上每天都在跟他打交道。但这是个会阻塞主线程的同步 API，很多情况下存取大量数据可能会造成性能问题。🙁

之前提到过尾调用，尾调用就是函数的最后一步调用另外一个函数。那么递归就是调用自身，尾递归就是再函数的最后一步调用自身。😵 和尾调用一样，尾递归因为调用栈中只存在一个调用记录，因此不会像普通递归那样耗费那么多内存。 以乘阶函数为例 {代码...} 计算乘阶函数参数为 n 那么调用栈就需要保存 n 个调用记录。如果...

最近回顾 js 继承的时候，发现还是对一些概念不是很清晰。这里再梳理一下 JS 中继承的几种主要的方式，构造函数继承、原型链继承、组合继承以及原型式继承、寄生式继承、寄生组合式继承和 ES6 的 Class：

不可变性、纯函数、副作用，状态可变这些单词我们几乎每天都会见到，但我们几乎不知道他们是如何工作的，以及他们是什么，他们为软件开发带来了什么好处。

原型指的就是一个对象，实例“继承”那个对象的属性。在原型上定义的属性，通过“继承”，实例也拥有了这个属性。“继承”这个行为是在 new 操作符内部实现的。

很多人包括我在内很抵触这种问题?，因为很长一段时间我一直弄不明白 == 和 === 到底是怎么个规则。如果你也没闹明白 == 和 ===，读了这篇文章应该至少不会见到这俩操作符就觉得恶心了吧?。

在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单，但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子，看看你应该注意什么，以及哪个循环最适合特定用例。

图解尾调用优化 尾调用 啥是尾调用？ 尾调用就是函数的最后一个步骤调用另一个函数 比方说： 函数在调用的时候会在调用栈中 push 一个调用帧，每次执行完函数都会逐一弹出调用帧知道所有函数执行完毕，调用栈被清空： 调用栈中的同步代码 {代码...} 调用栈如下图： 首先执行 script ，将 main 主程序推入调用栈中并执行...

有关 JS 中的 this、call、apply 和 bind 的概念网络上已经有很多文章讲解了 这篇文章目的是梳理一下这几个概念的知识点以及阐述如何用原生 JS 去实现这几个功能