<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Czuaphe的博客]]></title><description><![CDATA[平心静气，泰然于世]]></description><link>https://blog.youkuaiyun.com/cuipp0509</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; cuipp0509]]></copyright><item><title><![CDATA[对闭包的理解]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/124386259</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/124386259</guid><author>cuipp0509</author><pubDate>Sun, 24 Apr 2022 16:37:13 +0800</pubDate><description><![CDATA[MDN：闭包就是函数与它目前所在的词法环境一起的统称。

主要应用在使用访问函数内部变量时，返回包含访问函数内部变量的子函数。这样子函数与它的词法环境就构造成了闭包。
闭包的优点：可以隔离外部的直接访问。只能通过返回的函数访问或者修改内部变量。让函数与数据（环境）关联起来。类似于class的功能。
参考资料：
MDN闭包：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functionsz
MDN函数：https://de.]]></description><category></category></item><item><title><![CDATA[UDP与IP分片]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/122559315</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/122559315</guid><author>cuipp0509</author><pubDate>Tue, 18 Jan 2022 14:22:26 +0800</pubDate><description><![CDATA[一、UDP
1. UDP特点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lUf1OSBA-1642486941260)(r5ub5agkh.hb-bkt.clouddn.com/pic/1.jpg)]
它不提供差错纠正、队列管理、重复消除、流量控制和拥塞控制。它提供差错检测，包含我们在传输层中碰到的第一个真实的端到端（end-to-end）校验和。
我们可能考虑到这种可靠性和保护性的缺失，而会一般认为使用UDP一点好处也没有。但是，这是不对的。因为它的无连接特征，它要比其]]></description><category></category></item><item><title><![CDATA[《你不知道的JavaScript（上卷）》第一部分：作用域与闭包的读书笔记]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/121145567</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/121145567</guid><author>cuipp0509</author><pubDate>Thu, 04 Nov 2021 16:36:02 +0800</pubDate><description><![CDATA[《你不知道的JavaScript（上卷）》第一部分：作用域与闭包的读书笔记
作用域和闭包
1、介绍了作用域，主要说明了RHS和LHS这两个概念。RHS是读取值，LHS是赋值。
2、词法作用域：有两个机制可以动态改变词法作用域：eval和with。eval可以运行字符串代码，动态修改已经存在的词法作用域。with可以在属性不存在的时候，将此属性泄漏到全局作用域
3、介绍了词法作用域里面的函数作用域和块作用域。
函数作用域本质上是隐藏函数内部的变量和函数，符合最小暴露原则。
块作用域必须要使用let关键字才能生]]></description><category></category></item><item><title><![CDATA[LeetCode-1962 从优先队列想到堆排序]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/119872861</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/119872861</guid><author>cuipp0509</author><pubDate>Mon, 23 Aug 2021 16:49:20 +0800</pubDate><description><![CDATA[（二叉）堆的定义与性质
什么是（二叉）堆？《算法导论》上说可以看成一个近似的完全二叉树，除了最底层，树应该是完全充满的。而且这棵树还必须满足堆的性质。根据堆不同的形式，堆的性质也不同。最大堆的性质是：在任一子树中，该子树包含的所有结点的值都不大于该子树的根结点，也就是说堆中最大元素保存在堆的根结点上。最小堆性质则相反。
具体有堆性质的二叉树才能叫堆。也就是说堆其实是一类特别的二叉树。那为什么堆是这样拥有的性质呢？我感觉很形象，想像有一堆东西，里面的东西有大有小，你要把它们放在一个平地上，在你放的过程中，大的]]></description><category></category></item><item><title><![CDATA[学习webpack的基本配置和splitChunks配置]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/118302944</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/118302944</guid><author>cuipp0509</author><pubDate>Wed, 30 Jun 2021 14:29:49 +0800</pubDate><description><![CDATA[学习webpack的基本配置和splitChunks配置与模块的同步异步导入
文章目录学习webpack的基本配置和splitChunks配置与模块的同步异步导入entry 入口配置output 出口配置处理vue文件处理CSS文件配置文件压缩公共库代码分离参数chunks
entry 入口配置
entry表示入口，一般是一个字符串，表示入口文件的路径。如果是多入口就需要将entry变成一个对象，属性名就是每个入口的名字，值是每个入口的路径。
// 单入口
entry: './src/main.js'
//]]></description><category></category></item><item><title><![CDATA[JavaScript里面的Map与Object和WeakMap区别]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/117961346</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/117961346</guid><author>cuipp0509</author><pubDate>Wed, 16 Jun 2021 16:30:48 +0800</pubDate><description><![CDATA[Map与Object
Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应。键的类型不仅仅可以是字符串，也可以是对象，甚至是null，undefined。而在Object对象这样的键转会被转成字符串
WeakMap和WeakSet
键名与Map和Set相比，只能是对象。而且对键的引用是弱引用，不会干扰内存的回收。

...]]></description><category></category></item><item><title><![CDATA[事件循环：Promise与宏任务，微任务]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/117464061</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/117464061</guid><author>cuipp0509</author><pubDate>Wed, 02 Jun 2021 17:57:47 +0800</pubDate><description><![CDATA[宏任务与微任务
宏任务：script，setTimeout，setInterval，MessageChannel，I/O（文件，网络）相关API，DOM事件监听，setImmediate（Node.js）。
微任务：process.nextTick（Node.js）MutationObserver（浏览器），Promise.prototype.then()/catch()/finally()。
requestAnimationFrame是宏任务还是微任务？
有4种不同的情况：
宏任务里面新建宏任务：加入宏任]]></description><category></category></item><item><title><![CDATA[JavaScript里面的模块化4种方式（CommonJS，AMD，CMD，es6Module）]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/117259239</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/117259239</guid><author>cuipp0509</author><pubDate>Tue, 25 May 2021 16:44:20 +0800</pubDate><description><![CDATA[JS的模块化大致有CommonJS，AMD，CMD，es6Module四种。那么它们到底有什么相同和不同之处呢？

CommonJS
CommonJS：在Node中使用，同步加载模块。在esModule还没有出现时，为Node主要模块化解决方案。
导入：
const moduleA = require("./modulePath") 
const { moduleB } = require("./modulePath") 

导出：
module.exports = moduleA // 默认模块
modu]]></description><category></category></item><item><title><![CDATA[通过例子解释防抖和节流]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/117256073</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/117256073</guid><author>cuipp0509</author><pubDate>Tue, 25 May 2021 15:54:05 +0800</pubDate><description><![CDATA[这是一篇译文，是一篇我感觉对防抖和节流解释比较好懂的博客。原文在这里

防抖和节流是两个相似的技术去控制很多次我们允许一个函数去执行在一定时间内
有防抖和节流的函数是特别有用的，当我们把这个函数绑到DOM事件时。为什么？因为我们有了一个控制层在事件和执行函数之间。记住，如果我们不去控制DOM事件的冒泡，它的数量可以非常巨大。
例如，让我们看看滚动事件，看下面的例子：

当我们使用触摸板，滚轮或者仅仅是拖动滚动条时每秒就能触发30次滚动事件。而且在手机上缓慢的滚动每秒能触发100次滚动事件在我的测试中。你的.]]></description><category></category></item><item><title><![CDATA[Vue 源码解析（二）：依赖更新（Watcher对象，nextTick和更新队列）]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/117254924</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/117254924</guid><author>cuipp0509</author><pubDate>Tue, 25 May 2021 14:08:18 +0800</pubDate><description><![CDATA[第一篇，新建watcher对象时运行的getter函数，会调用data属性的get修饰器从而触发dep.depend()函数，完成了watcher与dep依赖的收集。让watcher和data建立了联系。那么这一次，让我们看一下依赖收集完成之后，是如何完成依赖更新的。
让我们从还是在initData() 方法里面的defineReactive()方法再次开始吧！
export function defineReactive (obj: Object, key: string, val: any, custo]]></description><category></category></item><item><title><![CDATA[Vue 源码解析（一）：依赖收集（Observer，Dep与Watcher对象）]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/117252119</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/117252119</guid><author>cuipp0509</author><pubDate>Tue, 25 May 2021 11:39:33 +0800</pubDate><description><![CDATA[Vue 实例新建流程
Vue源码目录结构说明

src

compiler 解析模板生成AST和render函数
core

components 目前只有keep-alive组件
global-api 向Vue对象注入全局方法：Vue.use()，Vue.extend()等
instance 向Vue实例对象注入方法：this.$emit(),this.$forceUpdate()等
observer 实现data与Watch对象的依赖收集与更新
util 工具类
vdom Vdom有关方法


entr]]></description><category></category></item><item><title><![CDATA[深入CORS：历史，工作原理和最好的例子]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/117224003</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/117224003</guid><author>cuipp0509</author><pubDate>Tue, 25 May 2021 09:24:50 +0800</pubDate><description><![CDATA[学习同源策略和CORS（Cross-Origin-Resource-Sharing）（跨域资源共享）的历史的演变，深入理解CORS和不同类型的跨域访问策略以及一些最好的例子。
文章目录你的浏览器控制台报错了起点：第一个子资源标签域与跨域跨域请求的危害同源策略进入CORS跨域写预请求跨域读如何使用好CORS一些好例子所有请求都允许Keeping it in the familyNULL域跳过Cookies，如果你能的话附加阅读
你的浏览器控制台报错了



我确定你在浏览器的控㓡台见过上面的报错或者它们的变体]]></description><category></category></item><item><title><![CDATA[VSCode快捷键（Windows）]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/109782824</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/109782824</guid><author>cuipp0509</author><pubDate>Mon, 24 May 2021 16:05:19 +0800</pubDate><description><![CDATA[基础编辑
Ctrl+X：剪切光标所在行（没有选择内容时）
Ctrl+C：复制光标所在行（没有选择内容时）
Alt+↑/↓：光标所在行向上/下移动
Shift+Alt+↑/↓：光标所在行向上/下复制插入
Ctrl+Shift+K：删除光光标所在行
Ctrl+Enter：向光标所在行下一行插入新行
Ctrl+Shift+Enter：向光标所在行上一行插入新行
Ctrl+Shift+\：跳到最近的成对括号上去（各种()[]{}&lt;&gt;括号）（先到尾括号，再到首括号）
Ctrl+]/[：光标所在行增加/减少]]></description><category></category></item><item><title><![CDATA[异步函数发展史：Promise对象，Generator函数，Thunk函数和自动流程管理]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/109849102</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/109849102</guid><author>cuipp0509</author><pubDate>Fri, 20 Nov 2020 14:49:30 +0800</pubDate><description><![CDATA[异步函数发展史：Promise对象，Generator函数，Thunk函数和自动流程管理
文章目录异步函数发展史：Promise对象，Generator函数，Thunk函数和自动流程管理1、回调地狱2、Promise对象3、Promise对象 + Generator函数4、Promise对象 + Generator函数 + 基于Thunk函数的自动化流程管理4.1、Thunk函数4.2、基于Thunk函数的Generator函数自动化流程管理5、Promise对象 + Generator函数 + 基于Pro]]></description><category></category></item><item><title><![CDATA[git 常用功能]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/108339732</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/108339732</guid><author>cuipp0509</author><pubDate>Tue, 01 Sep 2020 14:02:38 +0800</pubDate><description><![CDATA[清空工作区需要两个命令：

git checkout . 清空已经修改的文件
git clean -d 清空新建文件和文件夹

清空暂存区命令：

git reset . 清空暂存区

想从远程拉一个新的分支

git pull origin 刷新所有分支
git checkout  切换到对应的分支上

反做某一次提交

git revert -n &lt;commitid&gt; 可以反做某一次提交

复制某一些提交

git cherry-pick &lt;commitid-a&gt;^…&lt;co]]></description><category></category></item><item><title><![CDATA[Vue3第一次使用：ref与reactive的区别和注意事项]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/108199513</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/108199513</guid><author>cuipp0509</author><pubDate>Mon, 24 Aug 2020 15:30:22 +0800</pubDate><description><![CDATA[今天使用Vue3写了一个todo的例子

Vue3对我最大的感觉：
1、template标签下面可以有多个节点了，终于不用先写一个DIV了
2、setup函数可以代替之前的data，methods，computed，watch，Mounted等对象，但是props声明还是在外面。
不过我总是忘记在return里面写声明好的变量或者方法，导致报错没有这个变量或者函数。这一点还需要适应。希望以后能有方便的插件出现。
const todoList = reactive([])
const todoItem = r]]></description><category></category></item><item><title><![CDATA[我对技术的态度是什么样的？]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/108122103</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/108122103</guid><author>cuipp0509</author><pubDate>Thu, 20 Aug 2020 13:48:58 +0800</pubDate><description><![CDATA[我对技术的态度是什么样的？
技术解放了我们的双手，让我们花在生存上的时间大大减少，可以使用更多的时间去思考自己真正的热爱。这是技术积极的一面。
现在无论你想得到什么样的信息都可以在技术的加持下，比较轻松的找到。信息获取的成本前所未有的低，人们比任何时候都要接近自己的梦想。
消极的一面也是有的。我认为是技术与人类的主次关系。现在的人的闲暇时间都被技术生成各种娱乐消息填满了。 人们现在越来越被动的接受，而不是自己主动去思考自己的需要了。也就是说人们现在不思考了。把思考的权力也交给了技术。这是不对的。我认为只有时]]></description><category></category></item><item><title><![CDATA[Vue的每一个发行版竟然都是动漫]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/107937888</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/107937888</guid><author>cuipp0509</author><pubDate>Tue, 11 Aug 2020 16:30:12 +0800</pubDate><description><![CDATA[Vue目前所有发行版
v2.6.0 Macross 超时空要塞
v2.5.0 Level E Level E
v2.4.0 Kill la Kill 斩服少女
v2.3.0 JoJo’s Bizarre Adventure JoJo的奇妙冒险
v2.2.0 Initial D 头文字D
v2.1.0 Hunter X Hunter 全职猎人
v2.0.0 Ghost in the Shell 攻壳机动队
v1.0.0 Evangelion EVA
v0.12.0: Dragon Ball 龙珠
v0.11.]]></description><category></category></item><item><title><![CDATA[有关ES6中Symbol数据类型的理解]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/106437646</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/106437646</guid><author>cuipp0509</author><pubDate>Sat, 30 May 2020 10:10:39 +0800</pubDate><description><![CDATA[Symbol是一种基本数据类型，一种在ES6引入的新的数据类型。

目的是为了防止属性名的冲突，保证对象中每一个属性名都是独一无二的。

let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 === s2 // false

Symbol类型可以有一个字符串参数，表示对Symbol实例的描述。所以相同描述的两个Symbol类型实例也是不相等的。
如何在对象中使用
let s = Symbol();

// 第一种写法
let a = {};
a[mySymb]]></description><category></category></item><item><title><![CDATA[Webpack mode三种模式配置说明（production，development，none）]]></title><link>https://blog.youkuaiyun.com/cuipp0509/article/details/105329735</link><guid>https://blog.youkuaiyun.com/cuipp0509/article/details/105329735</guid><author>cuipp0509</author><pubDate>Mon, 06 Apr 2020 17:30:25 +0800</pubDate><description><![CDATA[我们都知道webpack的配置文件 webpack.config.js 文件中 mode 表示webpack当前的环境以及对不同的环境的配置。虽然官方文档写明了三种不同的模块的配置，但是没有具体说明是什么意思，我就注释一下对应的模块到底进行了什么操作。
development（开发模式）
下面是从官方上得到的开发模式的全部配置，
// webpack.development.config.js
m...]]></description><category></category></item></channel></rss>