⭐️ 更多前端技术和知识点，搜索订阅号 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 菌 订阅外观模式主要优点在于对客户屏蔽子系统组件，减少了客户处理的对象数目并使得子系统使用起来更加容易，它实现了子系统与客户之间的松耦合关系，并降低了大型软件系统中的编译依赖性，简化了系统在不同平台之间的移植过程

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

basic auth 是最简单的一种，将用户名和密码通过 form 表单提交的方式在 Http 的 Authorization 字段设置好并发送给后端验证

使用git add添加要提交的文件的时候，如果文件名是中文，会显示形如 274\232\350\256\256\346\200\273\347\273\223.png 的乱码。

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

如何创建 http2 node App ⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 所有数据以二进制传输（分片方式不同，HTTP2 之前是字符串的形式发送） 发送的请求可以不按照顺序发送 头信息压缩以及 Server Push（服务端主动推送内容）等高效率的功能 信道复用（只需要建立一个 TCP 链接） 分帧传输（并发发送不同请求） 使...

Docker 快速部署一个 node App ⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 用 Docker 快速部署 node App 需要如下几个步骤： 安装 Docker 和 VSCode Docker 插件（方便操作 Docker） 创建 node 应用 创建 Dockerfile 并将应用打包成 image 事例化 image 创建 Container 首先安装 Docker Docker 的安装看官方文档，...

分离头是指 checkout 历史版本后，做了修改并提交 commit，这时切回别的分支，之前提交的 commit 就会被抛弃。如果想要保留需要手动创建一个新的分支。

包管理工具安装速度慢或许是 lock 文件的坑 ⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 大家都用过 yarn npm 配置镜像加速第三方模块的安装。不知道有没有人遇到过无论怎么配置镜像，安装速度都贼慢的问题。 🚶 就这个很蠢的问题搞到我浪费了很多时间，少赚了几个亿 🤑 问题溯源(yarn 为例)： 想要降低安装速度只需...

在此之前，首先要知道经常配置的 output 中有关 filename 和 chunkFilename 的区别；简单来说在 entry 定义的入口文件走的就是 filename 配置项，在入口文件内部引入的通常情况下是 chunk，走 chunkFilename 的配置

使用 git 篡改历史 ⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 有时候我们需要修改 git 历史提交的文件内容，如果只是在前一个 commit，那么只需要修改文件并执行 --amend 即可： 如修改上一次提交的文件： {代码...} 另外，可能还需要修改以往历史提交的文件，那么就需要使用到 rebase： git log 查看一下以往的...

组件中 watch props 根据 v-if 动态判断并挂载 DOM 的问题 ⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 问题复现：父组件中通过名为 source 的 prop 向子组件 Chart 传入数据 {代码...} {代码...} 子组件接收 source 数据当存在且至少有一条数据的时候，创建 id 为 main 的 div，用以初始化 echarts 实例 {代码...}...

另外一种比较靠谱的方法是将第三方模块打包成插件，如我需要全局使用 echarts，那么在 src 目录下新建一个 lib，并创建名为 echarts.js 的文件：

Vue 递归多级菜单 Vue 递归多级菜单 ⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 考虑以下菜单数据： {代码...} 需要实现的效果： 首先创建两个组件 Menu 和 MenuItem {代码...} MenuItem 是一个 li 标签和 slot 插槽，允许往里头加入各种元素 {代码...} Menu 组件外层是一个 ul 标签，内部是 vFor 遍历生成的 Menu...

目前 jq 用的人还是挺多的，在一些简单的促销 h5 页面，用 jq 去实现一些简单的功能还是比较方便的。本文展示如何用 JQ 去请求一个 blob 对象的 img 图片并渲染到页面上 👀

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

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

文章举例说明一下在 vue 中如何更好的监听浏览器事件。原文介绍了一种新增 vue 实例的方法，单独监听事件。这样代码书写较为简练，容易管理。 🍉

假设 Object 的原型中有一个自定义的 log 属性，我们用字面量语法定义 obj 对象，那么使用 for-in 遍历方法就会遍历到这个 log 对象，为了只遍历其自身的属性，需要增加一层筛选

Vue 匿名、具名和作用域插槽的使用 ⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅 Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用，这篇文章简明扼要的介绍了三种插槽的用法。 🍉 匿名插槽 子组件定义 slot 插槽，但并未具名，因此也可以说是默认插槽。只要在父元素中插入的内...

v-model 双向绑定实际上就是通过子组件中的 $emit 方法派发 input 事件，父组件监听 input 事件中传递的 value 值，并存储在父组件 data 中；然后父组件再通过 prop 的形式传递给子组件 value 值，再子组件中绑定 input 的 value 属性即可。

子组件有时需要与父组件进行沟通，沟通的方式就是子组件 emit 事件，父组件通过监听这个事件来做进一步动作。而父组件与子组件通信则使用 props

BFC(Block Formatting Contexts)，块级格式化上下文。BFC 实际上就是页面中一块渲染区域，该区域与其他区域隔离开来。容器里面子元素不会影响到外部，外部的元素也不会影响到容器里面的子元素。 🦊

⭐️ 更多前端技术和知识点，搜索订阅号 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 浏览器兼容差，可获取包括工具栏的宽高 页面滚动位置 返回整个页面的滚...

此前一篇文章用 wireshark 这个抓包工具调试了一下 HTTP 请求和响应。详细阐述了 TCP 连接和断开的整个过程。这篇文章尝试使用 wireshark 来抓取 TLS 封包，了解一下 HTTPS 请求和响应的整个过程。 🌞