<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[进击的程序猿]]></title><description><![CDATA[世界辣么大，我想找个小姐姐来鼓励我敲代码~~~我是真滴皮呀~~]]></description><link>https://blog.youkuaiyun.com/F_Felix</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; F_Felix]]></copyright><item><title><![CDATA[Typescript — infer]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/128308715</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/128308715</guid><author>F_Felix</author><pubDate>Tue, 13 Dec 2022 22:02:49 +0800</pubDate><description><![CDATA[TS 中 infer 的用法]]></description><category></category></item><item><title><![CDATA[Typescript - - 高级用法]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/128308699</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/128308699</guid><author>F_Felix</author><pubDate>Tue, 13 Dec 2022 22:01:33 +0800</pubDate><description><![CDATA[TS 的一些高级用法中的基础知识]]></description><category></category></item><item><title><![CDATA[Jest 使用指南 - - tsx 组件篇]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/118275897</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/118275897</guid><author>F_Felix</author><pubDate>Sun, 27 Jun 2021 16:19:08 +0800</pubDate><description><![CDATA[Jest 使用指南 - - tsx 组件篇
#jest
首先考虑一下，React 组件我们需要测试哪些东西呢？

React 组件的 render 结果是一个组件树，并且整个树最终会被解析成一个纯粹由 HTML 元素构成的树形结构


React 组件可以拥有 state，且 state 的变化会影响 render 结果
React 组件可以拥有生命周期函数，这些生命周期函数会在特定时间点执行
这就是我们的测试一个 React 组件需要考虑的东西了

接下来我们来考虑一下怎么去测试，Jest 提供了一个基于]]></description><category></category></item><item><title><![CDATA[Jest 使用指南 - - Mock 篇]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/118275875</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/118275875</guid><author>F_Felix</author><pubDate>Sun, 27 Jun 2021 16:18:28 +0800</pubDate><description><![CDATA[Jest 使用指南 - - Mock 篇
#jest
Jest Mock

为什么会用到 Mock？ Mock 能帮我们解决什么问题？
在项目中，一个模块的方法内常常会去调用另外一个模块的方法。在单元测试中，我们可能并不需要关心内部调用的方法的执行过程和结果，只想知道它是否被正确调用即可，甚至会指定该函数的返回值。此时，使用Mock函数是十分有必要。
Mock函数提供的以下三种特性，在我们写测试代码时十分有用：
- 擦除函数的实际实现（换句话说：改变函数的内部实现）
- 捕获函数调用情况( 包括：这些调用中]]></description><category></category></item><item><title><![CDATA[Jest 使用指南 - - ts 文件篇]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/118275864</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/118275864</guid><author>F_Felix</author><pubDate>Sun, 27 Jun 2021 16:17:00 +0800</pubDate><description><![CDATA[Jest 使用指南 - - ts 文件篇
#jest
ts 文件的单测

ts 文件主要是一些工具方法的使用，然后对于其中的工具方法进行单测，比对返回的数据结构，包括基础数据类型、对象、数组、函数

异步方法
这部分直接参考 测试异步代码 · Jest
用到的 api 介绍


expect.assertions(1)
expect.assertions(number)验证在测试过程中是否调用了一定数量的断言。这在测试异步代码时通常很有用，以确保回调中的断言确实被调用。


Done
test 的第二个参数]]></description><category></category></item><item><title><![CDATA[Jest 使用指南 - - 基础篇]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/118275849</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/118275849</guid><author>F_Felix</author><pubDate>Sun, 27 Jun 2021 16:16:16 +0800</pubDate><description><![CDATA[Jest 使用指南 - - 基础篇
#jest
Jest 基础
Jest 语法

description
Describe, 一种用于包含一个或多个相关测试的 Jest 方法。每次在开始为功能编写新的测试套件时，都将其包装在 describe 块中。

description('一组测试的名称', () =&gt; {
	// 测试的方法
})


test
Test 是实际的测试模块，我们会在 test 里面运行我们的一些函数或方法，一般在测试里有三部分：输入（参数等）、功能（运行的函数方法）、预期输出（]]></description><category></category></item><item><title><![CDATA[Single-Spa 实践（下）-- 拆分子应用不同目录]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/110585819</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/110585819</guid><author>F_Felix</author><pubDate>Thu, 03 Dec 2020 22:37:21 +0800</pubDate><description><![CDATA[Single-Spa 实践（下）-- 拆分子应用不同目录

在上篇中讲到了，在同一个目录下创建主应用以及子应用，但是这样的话其实还是感觉像一个大应用，并且别的模块在维护的时候还需要把整个项目 clone 下来，感觉还是欠缺了点什么。

在这篇中大致上还是基于上看的结构，接着把上面的结构完全拆开来，拆分到单独的 repo，可以分为如下几个结构：
1. 根(主)应用： root-config
2. 子应用1: app1
3. 子应用2: app2
接着一步步来
Step 1
把 app1 和 app2 从 mi]]></description><category></category></item><item><title><![CDATA[Single-Spa 实践（上） -- 子应用在相同目录下]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/110585620</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/110585620</guid><author>F_Felix</author><pubDate>Thu, 03 Dec 2020 22:35:36 +0800</pubDate><description><![CDATA[Single-Spa 实践（上） – 子应用在相同目录下

基于 single-spa 来搭建一个 react 的微前端应用，主应用以及子应用都在同一个个目录下，即下方的 micro-front 下

Step 1 新建一个目录，并初始化
mkdir mirco-front &amp;&amp; cd micro-front
npm init -y

Step 2 增加 webpack 配置
怎么简单怎么来，因为后面我们是用的 react，并且是用 CRA 来创建的子应用，所以这个 webpack 的基本配]]></description><category></category></item><item><title><![CDATA[Docker 学习]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/109553192</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/109553192</guid><author>F_Felix</author><pubDate>Sat, 07 Nov 2020 22:03:18 +0800</pubDate><description><![CDATA[Docker 学习

前言
软件开发的一大难题就是环境配置，不同的用户计算机的环境是不同的，这就可能会导致不同的问题出现。
因此就出现了以下三种解决方案：


虚拟机

资源占用多：因为相当于就是一个实际的操作系统，所以哪怕你的程序只要1M资源，但是别的资源依旧被占用着
冗余步骤多：无法跳过一些系统级别的操作，比如用户登陆
启动慢：启动操作系统需要多久，那么虚拟机就需要多久


Linux 容器 （LXC）：Linux 容器不是模拟一个完整的操作系统，而是对进程进行隔离，或者说是在进程外包裹一层保护壳

启]]></description><category></category></item><item><title><![CDATA[位运算总结]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/109553165</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/109553165</guid><author>F_Felix</author><pubDate>Sat, 07 Nov 2020 22:01:56 +0800</pubDate><description><![CDATA[位运算总结

191.位1的个数题解 位运算


按位与 &amp;
按位与运算将参与运算的两数对应的二进制位相与，当对应的二进制位均为 1 时，结果位为 1，否则结果位为 0。

0000 0101 &amp; 0000 1000 = 0000 0000

判断奇偶：这是因为奇数的二进制最低位始终为 1，而偶数的二进制最低为始终为 0。所以，无论任何奇数与 1 即 0000 0001 相与得到的都是 1，任何偶数与其相与得到的都是 0。
if( 3 &amp; 1) {
	// 奇数
} else {
	]]></description><category></category></item><item><title><![CDATA[微前端 Micro-Frontnds - Single-SPA Application API]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/109553136</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/109553136</guid><author>F_Felix</author><pubDate>Sat, 07 Nov 2020 21:59:54 +0800</pubDate><description><![CDATA[微前端 Micro-Frontnds - Single-SPA Application API

Application API

import { registerApplication, start } from 'single-spa';
// or
import * as singleSpa from 'single-spa';

registerApplication

使用在 root config 中，用于注册应用
Simple arguments

singleSpa.registerApp]]></description><category></category></item><item><title><![CDATA[微前端 Micro-Frontends - Single-SPA]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/109553123</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/109553123</guid><author>F_Felix</author><pubDate>Sat, 07 Nov 2020 21:59:24 +0800</pubDate><description><![CDATA[微前端 Micro-Frontends - Single-SPA
single-spa 包含两部分，
1. Applications ，每个应用都是一个完整的 SPA，每个应用需要知道怎么从 DOM 上 bootstrap(引导), mount(安装), and unmount(卸载)（这三个可以理解为 single-spa 的生命周期）
2. 一个配置文件 single-spa-config ，可以理解为 HTML 页面和 single-spa 注册应用程序的 js 配置文件，注册应用需要的参数：
1. ]]></description><category></category></item><item><title><![CDATA[微前端 Micro-Frontends - 概念]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/109553088</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/109553088</guid><author>F_Felix</author><pubDate>Sat, 07 Nov 2020 21:58:43 +0800</pubDate><description><![CDATA[微前端 Micro-Frontends - 概念

什么是微前端？（what）
微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用可以独立运行、独立开发、独立部署。微前端的核心在于拆，拆完后在合。



为什么需要用到微前端？（why）
原先的单体应用


当我们的项目越来越复杂的，项目中的功能模块也越来越多，这就导致了一个问题，代码复杂。

代码构建部署缓慢
对开发人员非常不友好（特别是新接手的人来说，找个模]]></description><category></category></item><item><title><![CDATA[webpack 配置注意的小技巧 和 坑]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/108550573</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/108550573</guid><author>F_Felix</author><pubDate>Sat, 12 Sep 2020 15:45:40 +0800</pubDate><description><![CDATA[webpack 配置注意的小技巧 和 坑
// 相关版本信息
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"


css-loader 中的坑

自 v1.0.0 开始废弃了 minimize option，因此无法由如下的写法 v1.0.0 break changes

// ... 省略其余配置内容
module:{
	rules:[
		// "css-loader?minimize",  error
		{ 
			test: /\.css$/, 
		]]></description><category></category></item><item><title><![CDATA[Chrome Extension demo 说明]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/107577694</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/107577694</guid><author>F_Felix</author><pubDate>Sat, 25 Jul 2020 13:43:06 +0800</pubDate><description><![CDATA[Chrome Extension demo 说明
因为工作中的需要，所以就开发了一个 Chrome 扩展（插件），这个扩展的主要功能包括如下几点
- 划词翻译
- i18n yaml 文件的导入
- 翻译内容的保存，yaml 文件的导出
项目地址 GitHub。GitHub - Felix-Prince/crx-i18n-extension: 基于 react 开发的 Chrome 翻译 extension
总结一下开发过程中使用的技术以及遇到的问题
使用的技术
1. 翻译使用的是 translation.]]></description><category></category></item><item><title><![CDATA[Chrome Extension 通信常用 API 说明]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/107577422</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/107577422</guid><author>F_Felix</author><pubDate>Sat, 25 Jul 2020 13:18:01 +0800</pubDate><description><![CDATA[通信常用 API 说明

chrome.runtime.sendMessage

/**
 * 向您的扩展程序/应用或另一个扩展程序/应用中的其他事件监听者发送单个消息。
 * @param {string} extensionId 发送消息的扩展程序或应用的标识符，扩展的 id，省略就是当前扩展内部通信
 * @param {any} message
 * @param {object} options
 * @param {function} callback (response: any) =&gt;]]></description><category></category></item><item><title><![CDATA[Chrome Extension 第二篇--通信]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/107577365</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/107577365</guid><author>F_Felix</author><pubDate>Sat, 25 Jul 2020 13:11:52 +0800</pubDate><description><![CDATA[Chrome Extension 第二篇 – 通信
Chrome Extension JS 对比




JS 种类
可访问的 API
DOM 访问情况
JS 访问情况
直接跨域




background js
可以访问绝大部分的 API，除了 devtools 系列
不能直接访问
不可以
可以


content scripts
只能访问 extension、runtime 等部分 API
可以访问
不可以
不可以


browser action
可以访问绝大部分的 API，除了 devtools ]]></description><category></category></item><item><title><![CDATA[Chrome Extension 第一篇 — manifest]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/107577321</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/107577321</guid><author>F_Felix</author><pubDate>Sat, 25 Jul 2020 13:09:24 +0800</pubDate><description><![CDATA[Chrome Extension 第一篇 — manifest
简介
Chrome 浏览器给我们提供了很多插件，比如：React Developer tools 、划词翻译、Octotree等，可以让我们在某些页面或者所有页面中能使用一些特定的功能。这是给 Chrome 浏览器增加功能。
Chrome 浏览器扩展使用的技术还是HTML、CSS 和 JavaScript ，所以对前端开发来说是非常友好很容易上手的。扩展程序本质上是网页
概念及基础
每一个扩展程序包含以下文件：

一个清单文件
一个或多个 HT]]></description><category></category></item><item><title><![CDATA[Webpack 工程化]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/106747150</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/106747150</guid><author>F_Felix</author><pubDate>Sun, 14 Jun 2020 15:57:16 +0800</pubDate><description><![CDATA[Webpack 工程化

搭建一个 react 的环境，并且是基于 typescript 的项目

首先我们需要思考的一个问题是我这个项目需要哪些功能（可以先把能想到的功能配置进去，之后再想到的再配置，毕竟一开始可能想不全是正常的）
1. 能处理样式 less/css 文件
2. 能处理图片字体图标 png/jpg/gif/svg/ttf/… 等
3. 能处理 react 组件代码 jsx/tsx
4. 能把 ts 转换成 js
5. 能把 es6 代码 转化为 es5
6. 能处理代码规范 eslint
]]></description><category></category></item><item><title><![CDATA[GraphQL 第二章 Schema 和类型]]></title><link>https://blog.youkuaiyun.com/F_Felix/article/details/106729391</link><guid>https://blog.youkuaiyun.com/F_Felix/article/details/106729391</guid><author>F_Felix</author><pubDate>Sat, 13 Jun 2020 11:04:53 +0800</pubDate><description><![CDATA[GraphQL 第二章 Schema 和类型
定义了 schema 后我们就能知道服务器会返回那种对象，这些对象有哪些字段可用等。
每个 GraphQL 服务都会定义一套类型，用以描述你可能从那个服务查询到的数据，每当查询到来，服务器就会根据 schema 验证并执行查询。
之前我们讲了 GraphQL 的查询语言，这里我们来讲一下 GraphQL Schema language 。这个和 GraphQL 的查询语言类似。
一个 GraphQL schema 中的最基本的组件是对象类型，它表示你可以从服务上]]></description><category></category></item></channel></rss>