<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[拯救世界的光太郎]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/qq_44647809</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; qq_44647809]]></copyright><item><title><![CDATA[多标签页之间的通信]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/120501104</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/120501104</guid><author>qq_44647809</author><pubDate>Sat, 18 Nov 2023 15:38:17 +0800</pubDate><description><![CDATA[解决方案、解决方案。]]></description><category></category></item><item><title><![CDATA[命令式编程与声明式编程的区别]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/131074658</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/131074658</guid><author>qq_44647809</author><pubDate>Thu, 08 Jun 2023 11:09:41 +0800</pubDate><description><![CDATA[可以看到，每个查询都有单独的语句，每个查询语句都相当于都是一个黑盒，无需关注黑盒内部是如何实现的，拿着语句加上必要的字段即可实现目的。对遍历行为进行封装。这是一个高度频繁使用的功能，封装过后即可不再关注这一功能细节，而是将注意力放在如何实现做乘法或者加法。有了遍历的黑盒，可以实现单独针对遍历的功能进行优化，提升遍历效率的同时，而外界又无任何感知。关注对不同行为解耦（黑盒模型，即将功能进行封装，达到使用时无需注功能内部实现的目的）一条语句拆分成了三段，其实就是对不同功能的语句进行拆分，提升复用效率。]]></description><category></category></item><item><title><![CDATA[TS如何解决属性在另一个类型中不存在的问题？]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/128474890</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/128474890</guid><author>qq_44647809</author><pubDate>Wed, 28 Dec 2022 23:33:54 +0800</pubDate><description><![CDATA[TS 在遇到以下这些条件语句时，会在语句的块级作用域内「收紧」变量的类型，这种类型推断的行为称作类型守卫 (Type Guard)。=、!==（这里列举常用的 4 种）类型守卫可以帮助我们在块级作用域中获得更为精确的变量类型这里就可以通过判断 animal 中是否存在 meow 属性，来确定变量是否为 Cat 类型的对象let call;// 鼠标放到 animal 上，可以看到类型被限定为 Cat } else {]]></description><category></category></item><item><title><![CDATA[记录一个yarn dev时解决了很久的bug]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/124847155</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/124847155</guid><author>qq_44647809</author><pubDate>Wed, 18 May 2022 18:37:28 +0800</pubDate><description><![CDATA[✘ DylanMa@C02GD5MKMD6R  ~/Desktop/babi/vcloud-finance/packages/web   zhuoya/alarm  yarn dev
yarn run v1.22.18
$ DEBUG=webpack* node --max_old_space_size=8192 scripts/devServer.js
process.env.NODE_ENV: development
[HPM] Proxy created: **  -&gt;  http:/.]]></description><category></category></item><item><title><![CDATA[借助 nvm 安装并使用某个版本的 node，关闭再打开控制台查看 node 版本提示 zsh: command not found]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/124802891</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/124802891</guid><author>qq_44647809</author><pubDate>Mon, 16 May 2022 16:46:11 +0800</pubDate><description><![CDATA[已经借助 nvm 已经安装了 node，并且使用 nvm use 使用了对应版本的 node，但是切换一个控制台，使用 node -v 查看 node 版本，提示zsh***
这个问题可能是由于 default 版本与当前 use 版本不一致导致，借助命令 nvm alias default vxxx 将 dafault 切换为 nvm use 的版本，重新打开控制台打印 node 版本即可发现问题解决

...]]></description><category></category></item><item><title><![CDATA[常见 React Hooks 的概念与使用，这一篇文章就够了]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/124025725</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/124025725</guid><author>qq_44647809</author><pubDate>Thu, 07 Apr 2022 20:27:59 +0800</pubDate><description><![CDATA[16.8 的新特性，可以实现在不编写 class 的情况下，使用 state 和其它的一些 React 特性。
Redux 作者总结了 class 的几个缺点：

大型组件很难拆分和重构，也很难测试
业务逻辑分散在组件的各个方法之中，导致逻辑重复或逻辑关联
组件类引入了复杂的编程模式，比如 render props 和 高阶组件

简而言之就是：class 组件比较 “重”。

一、useState
useState 用来解决函数式组件只有属性，没有状态的问题。
使用方法：
const [n, setN] ]]></description><category></category></item><item><title><![CDATA[Mobx-React 用法简述]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/123797408</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/123797408</guid><author>qq_44647809</author><pubDate>Mon, 28 Mar 2022 17:48:00 +0800</pubDate><description><![CDATA[一、是什么？
一个非常简单的 状态管理工具，对比 Redux，Mobx 会更容易上手，更容易理解，且编写方便。
二、使用方法
1. 直接借助 Javascript（不推荐）
const map = observable.map({ key: "value"});
map.set("key", "new value");

const list = observable([1, 2, 4]);
list[2] = 3;

const person = observable({
    firstName: "]]></description><category></category></item><item><title><![CDATA[单体架构、面向服务架构、微服务简单了解 【微前端】]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/123475029</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/123475029</guid><author>qq_44647809</author><pubDate>Mon, 14 Mar 2022 15:10:57 +0800</pubDate><description><![CDATA[微服务属于什么？
一种架构风格。
软件架构大体经历了：

单体架构 → 面向服务的架构(SOA) → 微服务

1. 单体架构
特征：
单体架构是一种将所有功能打包在一个容器中运行的设计风格
一个实例中继承了一个系统的所有功能
通过负载均衡 软件 / 设备 实现多实例调用。
优点：
易开发、易调试、易部署
缺点：

可靠性差：某个模块bug可能导致会导致整个应用的崩溃。
不易协同：协同开发时，版本冲突频繁。
升级困难：牵一发而动全身。


2. 面向服务的架构(SOA)
特征：
是一种分布式服务架构，将应用]]></description><category></category></item><item><title><![CDATA[WebSocket 与 HTTP 关联的小知识~]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/123463140</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/123463140</guid><author>qq_44647809</author><pubDate>Sun, 13 Mar 2022 19:19:26 +0800</pubDate><description><![CDATA[1.来源于出处
首先，WebSocket来自H5，是H5定义的众多规范和API中的一个。HTTP协议就只有HTTP协议。
2.二者的关联
WebSocket协议基于TCP协议，它需要借助HTTP先建立连接，即客户端发送转换协议的请求，服务器转换协议并响应101，接下来再发送的请求/响应既是基于Websocket协议。（这学互联网的基本都知道吧~）
3.WebSocket建立的是持久连接，而HTTP即使是1.1，建立的也只是长连接
持久连接在连接建立后，只要不主动关闭，连接就可以始终保持。而长连接就必须依赖心]]></description><category></category></item><item><title><![CDATA[需求做完不知道干什么？那就写个React吧]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/123087021</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/123087021</guid><author>qq_44647809</author><pubDate>Thu, 03 Mar 2022 10:36:20 +0800</pubDate><description><![CDATA[阉割版 React - 使用文档
Note: index.js 需要搭配 index.html 使用，因为存在多个版本，所以需要保证两个文件名相同！
配置缘故，在 index.js 中书写 JSX，默认使用原生 React 的 createElement，尽管引入的是自己的 React，也并不会使用我们自己写的 createElement
因此我们需要先去 Babel 将JSX 编译为 JS ，这里面显式地调用了 createElement ，一起看个一段写在 index.js 中的代码：
render()]]></description><category></category></item><item><title><![CDATA[不懂就问：map中使用await为什么会失效？]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/122638385</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/122638385</guid><author>qq_44647809</author><pubDate>Wed, 26 Jan 2022 10:02:38 +0800</pubDate><description><![CDATA[问题发生的场景：页面加载时，会加载一个n行的列表，列表每一行对应一组数据，一组数据由一个请求获得。我们需要将请求获取到的数据按照一定顺序显示到页面上

下面先看一下数据大致的请求与存储方式：


dataSource = [obj1, obj2, ...];

getData = async (dataSource) =&gt; {

  let selectArr = [];
  let { title } = this.props;

  _.map(dataSource, (item, index) ]]></description><category></category></item><item><title><![CDATA[Redux-saga快速解读]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/122449431</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/122449431</guid><author>qq_44647809</author><pubDate>Wed, 12 Jan 2022 15:19:22 +0800</pubDate><description><![CDATA[首先，对于redux来说，redux-saga就是一个中间件。

其次，redux-saga主要用于处理action中涉及到的一些副作用，来确保reducer始终都是一个纯函数。

常规操作redux中的state，流程是这样的：


UI（点击按钮） → dispatch（action）→ reducer（根据action操作state）→ store（合并reducer更新的state）→ UI更新



toLoginIn: (username, password)=&gt;{
  dispatch(]]></description><category></category></item><item><title><![CDATA[奇怪的小知识 - 如何清空一个数组？在不改变地址的情况下呢？]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/122261593</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/122261593</guid><author>qq_44647809</author><pubDate>Fri, 31 Dec 2021 19:39:06 +0800</pubDate><description><![CDATA[let arr = [1, 2, 3];

不考虑地址问题：

arr = [];

地址不改变：

// 方法一：
arr.length = 0;

// 方法二：
for(let i in arr)(
  arr.pop();
)

// 方法三：
arr.splice(0, arr.length);


]]></description><category></category></item><item><title><![CDATA[二叉树的广度优先遍历]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/121706927</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/121706927</guid><author>qq_44647809</author><pubDate>Sat, 04 Dec 2021 14:44:11 +0800</pubDate><description><![CDATA[二叉树的广度优先遍历：从根节点开始，一层一层遍历二叉树，自左向右地打印每一个节点



思路：

先创建一个数组，用数组模拟队列。压入根节点，然后开始遍历：

从数组头弹出一个元素，然后看数组


let arr = [];

function getRes(node){
    if(node){
        console.log( node.val );
        arr.push(node);
    }
    while(arr.length &gt; 0){
        let.]]></description><category></category></item><item><title><![CDATA[一道题，就能让你完美地掌握：this指向、作用域&作用域链、闭包、特殊数据类型]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/121694612</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/121694612</guid><author>qq_44647809</author><pubDate>Fri, 03 Dec 2021 20:22:31 +0800</pubDate><description><![CDATA[inner = 'window';
function say() {
    console.log(inner);
    console.log(this.inner);
}
var obj1 = (function() {
    var inner = '1-1';
    return {
        inner: '1-2',
        say: function() {
            console.log(inner);
            console.log(.]]></description><category></category></item><item><title><![CDATA[手写发布订阅器]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/121604203</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/121604203</guid><author>qq_44647809</author><pubDate>Mon, 29 Nov 2021 11:24:03 +0800</pubDate><description><![CDATA[发布订阅器的基本实现其实非常简单，核心思路就是维护一个对象，对象的key、value分别表示事件及其对应的回调函数数组。然后可以通过暴露的方法去清除事件对应的回调，也可以通过方法去触发事件对应的回调。

属性：消息队列


{
  "click": [fn1, fn2, fn3],
  "abc": [fnA, fnB]
}

/*
能向消息队列里添加内容 on
删除消息队列中的内容   off
触发消息队列内的内容   emit
*/



class Observer {
  constructor()]]></description><category></category></item><item><title><![CDATA[递归调用栈溢出问题分析与解决]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/121594948</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/121594948</guid><author>qq_44647809</author><pubDate>Sun, 28 Nov 2021 18:19:20 +0800</pubDate><description><![CDATA[文章出自：递归调用栈溢出问题分析与解决 - 灰信网（软件开发博客聚合）https://www.freesion.com/article/59181236995/

本文主要是相对做一个保存，主要是因为文章所在的网站本人没有注册账号，再去注册一个就实在是太多了，原文排版还是很不错的，大家可以直接通过上面的连接查看原文

问题模拟

让递归爆栈还是很简单的，例如如下代码就能轻而易举实现


// 故意来一次爆栈体验
function stackOverflow(){
    stackOverflow();
.]]></description><category></category></item><item><title><![CDATA[Promise、async、await]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/121587810</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/121587810</guid><author>qq_44647809</author><pubDate>Sun, 28 Nov 2021 17:58:37 +0800</pubDate><description><![CDATA[我们都知道，JavaScript是一门单线程的编程语言，但是在单线程中进行异步编程，可以有很多多线程所不具备的优点。由于所有的操作都运行在同一个线程中，因此我们无需考虑线程同步、资源竞争的问题。并且可以从源头上避免线程的切换，从而降低线程自身的开销。

但是它也会伴随着一些问题，假如我们有这样一种需求：我们需要在定时器内添加定时器，代码就是这样的：



如果我们还需要在内部嵌套很多定时器，随即就会产生一个回调地狱，这种代码的可读性非常差，以至于我们在分析这样的代码时，需要额外花费很多的事件去分析代码的逻.]]></description><category></category></item><item><title><![CDATA[JS中绑定this的四种方式]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/121427993</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/121427993</guid><author>qq_44647809</author><pubDate>Fri, 19 Nov 2021 18:18:26 +0800</pubDate><description><![CDATA[let car = {
  type: 'truck',
  size: 'big',
  description: function(){
    console.log(
      "The Car is ", car.type , ". And the size is ", car.size, "."
    );
  }
}

这里面多次出现了car.***，语句上显得十分冗余，我们可以借助this来简化代码：


let car = {
  type: 'truck',
  size: 'bi.]]></description><category></category></item><item><title><![CDATA[暑期实习总结]]></title><link>https://blog.youkuaiyun.com/qq_44647809/article/details/121411960</link><guid>https://blog.youkuaiyun.com/qq_44647809/article/details/121411960</guid><author>qq_44647809</author><pubDate>Fri, 19 Nov 2021 11:36:15 +0800</pubDate><description><![CDATA[刚入职：学习TS

遇到的问题：

1. 在指定返回值为void时，如果设定了返回值，结果会怎么样？答案是：会报错，只要我们对函数设定的返回值类型与return 的类型不一致，就会报错


function abc(a: number, b: number): number{
}
let m: number = abc(1, 2);




function abc(a: number, b: number): void{
  return a+b;
}
let m: number = abc(1, 2);]]></description><category></category></item></channel></rss>