<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[qq_41402809的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/qq_41402809</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; qq_41402809]]></copyright><item><title><![CDATA[听说vue3使用位运算进行类型判断？]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/124946873</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/124946873</guid><author>qq_41402809</author><pubDate>Tue, 24 May 2022 14:53:04 +0800</pubDate><description><![CDATA[背景
最近在看vue3的源码，发现vue3中有一个块的逻辑是判断 ELEMENT ，STATEFUL_COMPONENT ，TEXT_CHILDREN，ARRAY_CHILDREN这四种类型中的某种是否存在；但是它使用的是位运算来判断的，对此，进行一些个人的解读，欢迎指正。
常规方法
对于这种，我们通常肯定是使用对象来进行判断，比如
export const type = {
  ELEMENT: false,
  STATEFUL_COMPONENT: true,
  TEXT_CHILDREN: fal]]></description><category></category></item><item><title><![CDATA[手写简单版vue，深入理解vue的响应式原理]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/123520760</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/123520760</guid><author>qq_41402809</author><pubDate>Wed, 16 Mar 2022 10:53:23 +0800</pubDate><description><![CDATA[一篇文章带你彻底弄懂vue2的响应式原理，再也不用怕面试官问到啦～]]></description><category></category></item><item><title><![CDATA[深入理解vue-router原理，并实现一个小demo]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/123239559</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/123239559</guid><author>qq_41402809</author><pubDate>Wed, 02 Mar 2022 20:40:32 +0800</pubDate><description><![CDATA[深入理解vue-router原理]]></description><category></category></item><item><title><![CDATA[vue中a-select设置suffixIcon无效的解决方案]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/122568400</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/122568400</guid><author>qq_41402809</author><pubDate>Tue, 18 Jan 2022 20:58:18 +0800</pubDate><description><![CDATA[背景
antd是一个很好用的UI组件库
其中有一个a-select组件

我们现在想改后面这个icon。
官方文档给了一个suffixIcon来进行控制，

但是设置之后发现没有生效
解决方法
先设置 :showArrow="true"， 因为你得先有这个icon，才能再改
再写入icon slot
&lt;a-select default-value="lucy" style="width: 120px" disabled :showArrow="true"&gt;
      &lt;a-icon sl]]></description><category></category></item><item><title><![CDATA[box-sizing导致的文本不垂直居中问题]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/121096152</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/121096152</guid><author>qq_41402809</author><pubDate>Tue, 02 Nov 2021 10:58:18 +0800</pubDate><description><![CDATA[box-sizing

content-box  是默认值。如果你设置一个元素width:100px，那么这个元素的内容区会有100px 宽，并且任何边框和padding的宽度都会被增加到最后绘制出来的元素宽度中，所以元素的总高度会大于100px。
border-box 告诉浏览器：你想要设置的边框和padding的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + pad]]></description><category></category></item><item><title><![CDATA[node.js实现一个图片压缩小工具]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/119890287</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/119890287</guid><author>qq_41402809</author><pubDate>Tue, 24 Aug 2021 15:04:29 +0800</pubDate><description><![CDATA[背景
项目里面经常需要将某个图片压缩到对应目录下，基本上都是使用网站tiny-png来实现。
但是这里有一个问题，就是每次都得反复的操作文件来将图片从一个目录移到另一个目录，非常的不方便，所以就萌生了一个想法，我能不能实现一个小工具，一条命令直接图片压缩并移到指定目录呢；
于是，就有个这个项目。
下面讲一下详细的实现步骤
项目准备，tinify库
在查找合适的图片压缩包时，我发现了tinify,即tiny-png官方给出的一个图片压缩包。这个是将图片传到tiny-png的服务器上，然后再将压缩后的图片返回给]]></description><category></category></item><item><title><![CDATA[面试大概率被问到：ajax是什么...]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/119738544</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/119738544</guid><author>qq_41402809</author><pubDate>Mon, 16 Aug 2021 17:47:21 +0800</pubDate><description><![CDATA[先来看看什么是HTTP

超文本传输协议（HTTP，HyperText Transfer Protocal ），是简单、可靠的互联网文件传输协议。
HTTP的传输，不是一个文件整体传输，而是把一个大的文件，分成一个个报文(message)，然后传输的。所以我们的浏览器渲染页面，一块一块加载的，图片是一条一条显示的。的确，一个jpg图片，也是通过多个报文回来的。每个报文都会进行校验，保证这个报文里面的内容是准确的、和服务器一致的。所以HTTP是可靠的，文件不会发生任何偏差。
HTTP是无连接的，就是你访问一个]]></description><category></category></item><item><title><![CDATA[ES6模块和CommonJS区别，终于搞懂了]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/118759552</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/118759552</guid><author>qq_41402809</author><pubDate>Thu, 15 Jul 2021 15:01:52 +0800</pubDate><description><![CDATA[ESM
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。
因为ESM是静态化的，所以在运行前的编译阶段就可以确定模块关系，从而进行一些模块之间的操作，比如treeshaking等等
CMD
CommonJS 只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。
比如const a = 'func'； const func = require('./test/'+a+'.js'),   这个括号里面是可以放表达式的！！表达式 只]]></description><category></category></item><item><title><![CDATA[CSS选择符大全，你学会了吗]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/118730946</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/118730946</guid><author>qq_41402809</author><pubDate>Thu, 15 Jul 2021 10:14:24 +0800</pubDate><description><![CDATA[1. * test
这个是最常见的通配符，表示匹配所用东西。最常用的
示例
 * {
 margin: 0;  
 padding: 0;
 }

表示取消所有元素的margin和padding
&nbsp;
&nbsp;
&nbsp;
2. # test
id选择器， 配合id使用。
使用时要注意id的唯一性。
示例

&lt;div id='test'&gt; &lt;div/&gt;
&lt;style&gt;
 #test{
	border: 1px solid red
}
&lt;/style/&]]></description><category></category></item><item><title><![CDATA[前端必备，从零开始完成一个node命令行工具]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/118026657</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/118026657</guid><author>qq_41402809</author><pubDate>Sun, 20 Jun 2021 16:10:41 +0800</pubDate><description><![CDATA[前言
node.js 作为一种服务器语言，其拥有很多底层操作的api，比如文件写入，http服务器等模块。同时其语法和js几乎一直，所以作为前端的我们，可以运用这些东西帮助解决一些开发中的实际问题。
前置知识


每当shell新开启一个会话时，shell都会生成environment即环境变量，environment里都是些定义系统属性的变量。命令行输入 env即可查看环境变量





很多程序都会用到这里的变量，比如nvm会用这里的NVM_NODEJS_ORG_MIRROR=https://nodej]]></description><category></category></item><item><title><![CDATA[【参透浏览器原理】1—— 为什么明明浏览器只打开了一个页面，却出现了多个进程]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/118067360</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/118067360</guid><author>qq_41402809</author><pubDate>Sun, 20 Jun 2021 11:53:16 +0800</pubDate><description><![CDATA[前言
这个专题主要是结合对浏览器原理的学习而产出的一些笔记，作为一个职业前端，浏览器就像是我们的一个宝贝盒子一样，我们必须知道你们有些什么，以及为什么会有这些东西的存在，这样我们才能在日常的编码过程中更加游刃有余～
废话不多说，一路火花带闪电 ， 我们开始啦
浏览器有哪些进程
首先我们打开任务管理器（活动监视器），来看看打开一个chrome标签页会有哪些进程吧。

...]]></description><category></category></item><item><title><![CDATA[Vim编辑器的使用技巧和快捷方式]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/117753499</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/117753499</guid><author>qq_41402809</author><pubDate>Wed, 09 Jun 2021 20:23:23 +0800</pubDate><description><![CDATA[vim使用手册常用操作删除命令：复制剪切命令：替换和取消命令：搜索替换命令：保存和退出命令：vim使用技巧定义快捷键
常用操作

删除命令：


dd:       删除光标所在行,


ndd：  删除n行


D:         删除光标所在处到行尾内容


dG:       删除光标所在处到文件末尾内容


复制剪切命令：


yy:             复制当前行


nyy:             复制当前以下n行


dd：           剪切当前行


ndd:        ]]></description><category></category></item><item><title><![CDATA[学习使用Vue必须掌握的开发技巧]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/117671910</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/117671910</guid><author>qq_41402809</author><pubDate>Mon, 07 Jun 2021 20:47:41 +0800</pubDate><description><![CDATA[vue必须掌握的6个开发技巧动态指令参数重用相同路由的组件侦听子组件的生命周期样式穿透强大的render函数长列表性能优化
动态指令参数
将指令参数动态传递给组件。
假设你有一个按钮组件，并且在某些情况下想监听单击事件，而在其他情况下想监听hover事件。这就是动态参数的使用场景了：
&lt;template&gt;
	...
	&lt;aButton @[someEvent]="handleSomeEvent()" /&gt;...
&lt;/template&gt;
&lt;script&gt;
  .]]></description><category></category></item><item><title><![CDATA[【offer收割机】—— 前端详细学习路线和学习方法]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/117438253</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/117438253</guid><author>qq_41402809</author><pubDate>Tue, 01 Jun 2021 11:25:54 +0800</pubDate><description><![CDATA[前言
众所周知，前端目前在国内高校还没有相应的课程，所以大家都得靠自己学，（当然也可以去培训机构 但是有点贵了）。
万事开头难，很多小伙伴刚开始都不知道要学什么或者怎么学。所以在这里本泡泡作为一个大学自学前端并且也校招拿到不错offer的优质自学带师 ，给大家分享一下详细的自学路线和方法。
小白初入门
首先入门肯定就是咱们的前端三件套了——HTML CSS JS
针对HTML，大家可以
高手进阶
前端最重要的技术肯定就是js了，所以进阶主要就是针对js基础的技术进行一些深入
js 你不知道的js  高级程序]]></description><category></category></item><item><title><![CDATA[【音视频入门基础】—— 声音]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/117191505</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/117191505</guid><author>qq_41402809</author><pubDate>Sun, 23 May 2021 12:15:14 +0800</pubDate><description><![CDATA[声音的概念
正常的声音是模拟信号，即连续变化的信号。图形类似于三角函数的图像。
就像下面这样：

但是，总所周知。计算机传输都是0和1，显然上面这种连续的数据跟01压根不沾边。所以，就需要将它转称为01数据，也就是数字信号。
&nbsp;
&nbsp;
&nbsp;
模数转换
模数转换，也就是将模拟信号转化成数字信号。这一切都是通过A/D转换器（ADC）来实现的。
ADC具体的原理我们不做过多分析。重点看一下采样问题。
采样是一种微积分的思想，就是对横坐标取微分（当然实际中不会趋近到无穷），对y值取样。
如]]></description><category></category></item><item><title><![CDATA[css中top和bottom同时为0有什么用]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/117022321</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/117022321</guid><author>qq_41402809</author><pubDate>Wed, 19 May 2021 11:51:01 +0800</pubDate><description><![CDATA[前言
一个绝对定位的元素，一般上下、左右都只指定一个。
那么同时指明top和bottom，有什么用呢。
作用
如果没有其他属性影响(没有指明height)，那么这个元素会拉伸顶部和底部去满足top和bottom都为0的状态。
其实设置bottom: 0; top: 0; 和 设置height:100% 差不多，都是自适应高度。
不过如果同时又设置了高度，那么bottom属性将会被忽略。
同理。right和left也是这样。
有什么应用呢

隐藏滚动条，有时候内容太长会出现滚动条，可以将它隐藏

.outer]]></description><category></category></item><item><title><![CDATA[【offer收割机】——如何找到一份心仪的前端开发工作呢]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/116696051</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/116696051</guid><author>qq_41402809</author><pubDate>Wed, 12 May 2021 20:12:43 +0800</pubDate><description><![CDATA[前言
之前我把找实习需要的知识储备（也就是面经啦），做了一个总结。但是我觉得那个还不够详细，它属于是知道要找实习了，准备面试了，才能起到作用。
但是对于那些想找实习但是不知道怎么找的同学，就需要看看这份手册啦～
保证看完之后，直接打开任督二脉，思路清晰，我是钻一。
话不多说，下面开始干货：
ps:以下所有内容都是根据我个人找实习的经历撰写的，内容有不适之处，还望大家多多指正～
怎么找到一份优质大厂实习呢前言当你有找实习的想法当你知识储备够了之后当面试机会来了当面试过了之后
&nbsp;
&nbsp;
&nb]]></description><category></category></item><item><title><![CDATA[【bug霸哥日记】——做个禁止粘贴的功能，把自己秀哭]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/116670756</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/116670756</guid><author>qq_41402809</author><pubDate>Tue, 11 May 2021 21:29:58 +0800</pubDate><description><![CDATA[前言
今天搞个特别简单的功能，花了我一下午时间。找到bug之后，我被我自己快蠢哭了，想掐死自己

需求，输入框字数限制： 当粘贴的文本加上已经存在的文本 总长度 超过预设之后，禁止粘贴。
好了，就是这么一个简单的需求。
&nbsp;
&nbsp;
说说思路
就是监听paste 事件，获取要粘贴的文本。然后判断长度，超过了就event.preventDefault()，禁止粘贴。
但是呢，这个死活不起作用。哎，就是玩儿！  就是没用。return false也没用。
然后我打印了defaultPrevente]]></description><category></category></item><item><title><![CDATA[mac安装node系列：nvm、npm、nrm]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/116241691</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/116241691</guid><author>qq_41402809</author><pubDate>Wed, 28 Apr 2021 19:50:24 +0800</pubDate><description><![CDATA[node 系列安装

nvm 管理 nodejs 和 npm 的版本。
npm 可以管理 nodejs 的第三方插件。
nrm可以管理源。

按照如下顺序安装
nvm

安装nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash


配置

终端输入：
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] &amp;&amp; . "$]]></description><category></category></item><item><title><![CDATA[mac使用攻略，一些小tips]]></title><link>https://blog.youkuaiyun.com/qq_41402809/article/details/116227470</link><guid>https://blog.youkuaiyun.com/qq_41402809/article/details/116227470</guid><author>qq_41402809</author><pubDate>Wed, 28 Apr 2021 10:14:23 +0800</pubDate><description><![CDATA[前言
这篇文章主要就是记录一下macos的一些实用技巧
会持续更新
如何使用命令
macos 是基于unix的，所以命令上其实和Linux差不多，所以命令的使用可以看我博客的Linux文档
如何用终端打开
直接 命令行输入
open 文件名
就会用默认的打开方式打开文件

...]]></description><category></category></item></channel></rss>