YolkPie

前言webpack 自身会提供一些基础插件，比如压缩、生成 html 文件、预加载等。有时，我们需要利用 webpack 提供的不同阶段钩子来做一些定制化功能的插件，以满足我们的业务需求，比如代码检查、打包后的文件处理(添加、删除、更改)。下面介绍如何自定义 webpack 插件。 插件基本结构自定义插件大概包含以下几个步骤： webpack 插件其实就是一个构造函数，所以要先定义一个类函数；function TestPlugin() {} 在构造函数的原型上定义 apply 方法，在安装插件时，apply 方法会被 Webpack compiler 调用。apply 方法可以接收一个 Webpack compiler 对象的引用；TestPlugin.prototype.apply = function(compiler) {} 通过 compiler 对象，可以插入指定的事件钩子； 在钩子回调中，可以拿到 compilation 对象，使用 compilation 操纵修改 webpack 内部实例数据，其也提供了事件回调钩子； 实现功能后 ...

函数上移 动机：如果某个函数在各个子类中的函数体都相同，则将函数上移 检查待上移的函数，确定完全一致 检查函数体内引用的所有函数调用和字段都能从超类中调用到 如果待上移的函数声明不同，则修改为将要在超类中使用的声明 超类中创建一个函数，将待上移函数代码复制其中 执行静态检查 移除一个待上移子类函数 测试 移除其余待上移子类函数 Before: 12345678910class Employee extends Party { get annualCost() { return this.monthlyCost * 12; }}class Department extends Party { get annualCost() { return this.monthlyCost * 12; }} After: 123456789class Party { get annualCost() { return this.monthlyCost * 12; & ...

将查询函数和修改函数分离 动机：任何有返回值的函数，都不应该有看得到的副作用。 一种常见的优化办法是：将查询所得记过缓存于某个字段中，后续重复查询可以大大加快速度。 复制函数，以查询来命名 移除有副作用的代码 执行静态检查 查找所有调用原函数的地方，替换为新函数，并在下面调用一次原函数 从原函数中去掉返回值 测试 Before: 12345678910111213141516// Miscreant - 恶棍function alertForMiscreant(people) { for (const p of people) { if (p === "Don") { setOffAlarms(); return "Don"; } if (p === "John") { setOffAlarms(); return "John"; } } return " ...

本文主要讲一下javascript的基本数据类型以及一些堆和栈的知识和什么是深拷贝、浅拷贝，深拷贝与浅拷贝的区别，以及怎么进行深拷贝和怎么进行浅拷贝。 堆和栈深拷贝和浅拷贝的主要区别在内存中的存储类型不同。堆和栈都是内存中划分出来用来存储的区域。栈（stack）为自动分配的内存空间，它由系统自动释放；而堆（heap）则是动态分配的内存，大小不定也不会自动释放。 ECMAScript的数据类型首先先说一下ECMAScript的数据类型。 基本数据类型 undefined boolean number string null 基本数据类型存放在栈中。存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配，是直接按值存放的，所以可以直接访问。 基本数据类型值不可变js中的原始值（undefined、null、布尔值、数字和字符串）与对象（包括数组和函数）有着根本区别。原始值是不可更改的。 基本数据类型的值是不可变的，动态修改了基本数据类型的值，它的原始值也是不会改变的，例如： 123let str = "abc";console.log(st ...

类内味道可度量的味道 过长方法 我们遵循这样一条原则：每当感觉须要写注释来说明代码的时候。我们就把须要说明的东西写进一个独立的方法中，并以其意图(而非实现手法)命名。 抽取方法 (解释能力、共享能力、选择能力) 12345678910111213141516171819202122232425262728293031323334class Api { constructor() { this.name = 'yyy' this.age = 18 } sayHello() { login() console.log(`name: ${this.name}`) console.log(`name: ${this.age}`) } login() { console.log('login') }}to cla ...

下面分析16.14.2版本react中useState的源码实现 介绍数据结构当前fiber节点的数据结构是： 1234567891011121314const fiberNode = { tag: xxx, // 标记不同的组件类型 key: xxx, memoizedState: { // hooks baseState: xxx, // 初始化 initialState， 每次 dispatch 之后的newState memoizedState: xxx, // 上次更新完之后的最终值 queue: { // 缓存的更新队列， lastRenderedReducer: basicStateReducer(state, action), lastRenderedState: xxx, // 上次state的值 pending: null // 存放即将更新的newState信息 }, ne ...

useState实现一个stateuseState接收状态初始值，返回一个数组，第一个是状态的当前值，第二个是函数，用来更新状态. 以const [count, setCount] = useState(0)为例：组件第一渲染时，从useState拿到初始值0。当调用setCount(count+1)时，调用dispatch，state更新为1，之后执行render，组件重新渲染，此时拿到新的count（每一次都拿到独立的count状态，但是这个状态在一次渲染过程中是常量） 123456789101112131415let _statefunction useState(initialState) { _state = _state || (typeof initialState === 'function' ? initialState() : initialState) const dispatch = action => { const curState = _state const newSt ...

前言 说到浏览器缓存，一些前端同学可能会先联想localStorage和sessionStorage，但它们是完全不同的概念。localStorage或sessionStorage是浏览器本地存储技术，是用来存储客户端临时信息的；浏览器缓存是，浏览器将通过HTTP获取的网路资源保存到本地，下次再请求相同的url时，根据当前的缓存机制，来决定是使用本地缓存的资源还是向服务器发送网络请求。 浏览器缓存的好处： 减少了重复数据的传输； 减少服务器端的网络请求 加快客户端页面加载速度，提升用户体验 浏览器缓存的流程浏览器缓存的具体流程是： 浏览器发送请求时，首先判断是否采用缓存（强缓存或协商缓存），若未使用缓存，向服务器端请求资源； 若使用缓存，先判断是否使用强缓存且强缓存为过期，若是的话，直接使用本地缓存的资源； 若未使用强缓存或者强缓存已过期，浏览器向服务端发起请求，服务端根据请求头的信息判断是否使用协商缓存，若使用协商缓存且协商缓存的资源未发生变化，则返回304和空的响应体，直接从客户端缓存中读取资源；否则返回200和新的资源 下面详细介绍缓存资源的存放位置、强缓存和协商 ...

git分支管理策略概述 git flow工作流 Git的特色之一就是可以灵活的建立分支，因为有分支的存在，才构成了多工作流的特色。同时因为其灵活性，也应运而生出分支杂乱的问题，像下图这样： 为了解决杂乱的工作流，而产生的分支管理策略 三大git分支管理策略 分支长生命周期分支 主分支Master 有且仅有一个，用于发布版本，每个版本发布需打tag tag名为 <版本号>_<发布时间> 建议使用–no-ff参数 参数说明 开发分支Develop 日常开发分支 短生命周期分支 功能分支 为了开发某个功能从dev分支分出来 开发完成后要合并入dev分支 采用fearure-的命名方式 使用后应该删除 预发布分支 在发布正式版本之前用于测试 从dev分支分离出来，测试没问题后分别合并进master及dev分支 如发现BUG，从分支分离出fix分支，修复问题后分别合并进该分支及dev分支 采用release-命名方式 使用后应该删除 修复BUG分支 修复线上BUG分支 从master分支分离出 ...

Cookie、Session、Token到底是什么背景 通天塔页面分享至京喜小程序中交互丢失 定位问题为iOS14以上，跨站请求默认不再携带cookie 2月24号 正式宣布将在 iOS、iPad OS 13.4 和 macOS 上的 Safari 13.1 里默认完全屏蔽第三方 Cookie。 随后chrom80版本也做了同样操作 Full Third-Party Cookie Blocking and More HTTP是无状态的Web服务器 什么是无状态呢？一次对话完成后下一次对话完全不知道上一次对话发生了什么。 1234567洛：大爷，楼上322住的是马冬梅家吧？大爷：马都什么？夏洛：马冬梅。大爷：什么都没啊？夏洛：马冬梅啊。大爷：马什么没？夏洛：行，大爷你先凉快着吧。 让无状态的服务器记住一些事情 当然Web服务器是记不住东西的，我们需要一些外部的办法。 cookie的产生过程 浏览器第一次访问服务端时，服务器此时肯定不知道他的身份，所以创建一个独特的身份标识数据，格式为key=value，放入到Set-Cookie字段里，随着响应报文发给浏览器。 浏览器看到有Set ...