<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[白开水的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/gudeng007</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; gudeng007]]></copyright><item><title><![CDATA[一种BEM规范实践]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/130881283</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/130881283</guid><author>gudeng007</author><pubDate>Fri, 26 May 2023 10:21:38 +0800</pubDate><description><![CDATA[css的样式应用是全局性的，没有作用域可言，为了解决这个问题，社区出现了几套解决方案，第一种是通过人工的方式来约定命名规则，第二种是CSS Modules，第三种是CSS-in-JS，本文不讨论三种方案的优劣，而是给出一种约定命名规则的实践。]]></description><category></category></item><item><title><![CDATA[开发Vue或React项目时路径别名智能提示方案]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/128866951</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/128866951</guid><author>gudeng007</author><pubDate>Fri, 03 Feb 2023 14:53:37 +0800</pubDate><description><![CDATA[在我们开发Vue或React项目时，每次配置完路径别名，在输入路径时都没有对应的智能提示路径，如何解决这个痛点呢？笔者通常都是使用vscode，本次使用vscode来进行演示解决，非常简单的。]]></description><category></category></item><item><title><![CDATA[ResizeObserver loop limit exceeded报错解决方案]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/125765927</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/125765927</guid><author>gudeng007</author><pubDate>Wed, 13 Jul 2022 15:54:53 +0800</pubDate><description><![CDATA[​		公司内部搭建了前端监控系统Sentry，我把一些项目接入进去，一周后发现上报数量最多的事件是ResizeObserver loop limit exceeded。这些事件上报得太多，给Sentry服务造成很大压力，于是研究一番准备解决之。

如果在一个动画帧内，ResizeObserver不能处理所有的observations，就会触发这个。

解决方案


阻止table的重绘，例如给所有列都增加width，但是这个方案不好，无法自适应宽度。


resize时，给回调进行节流，使其1帧内最多执行一]]></description><category></category></item><item><title><![CDATA[解决Mac终端的命令行前的(base)问题]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/125534180</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/125534180</guid><author>gudeng007</author><pubDate>Thu, 30 Jun 2022 09:37:59 +0800</pubDate><description><![CDATA[Mac 安装了 conda 后, 终端的命令行前面会有一个(base), 
具体原因是安装 conda 后，每次启动终端都会自动启动 conda 的 base 环境.设置 conda 不自动启动 base 环境就可以了]]></description><category></category></item><item><title><![CDATA[amis低代码开发ajax提交reload无法触发]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/124886976</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/124886976</guid><author>gudeng007</author><pubDate>Fri, 20 May 2022 17:11:04 +0800</pubDate><description><![CDATA[最近在react中引入amis进行低代码开发，遇到一个问题，记录下来。
业务背景
用户打开页面立即获取一个任务，填写表单并提交，提交完成后获取下一条任务，遇到的bug是表单提交后，无法触发reload
amis schema
let schema = {
    type: 'page',
    name: 'my_page',
    body: {
        type: 'service',
        name: 'my_service',
        api: {
         ]]></description><category></category></item><item><title><![CDATA[qiankun微前端子应用热更新失效问题]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/124636896</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/124636896</guid><author>gudeng007</author><pubDate>Sat, 07 May 2022 18:23:13 +0800</pubDate><description><![CDATA[主应用是vue，使用vue-cli构建，子应用是react，使用create-react-app构建。本地开发中主应用和子应用一起启动，发现子应用无法热更新。
主应用端口号：8080
子应用端口号：3000
原因分析

子应用的热更新包是在3000端口下，而子应用嵌入主应用后请求的是主应用的端口8080，导致子应用拿不到.hot-update.json文件，进而导致无法进行热更新。



查看源码发现，热更新时李静这里使用/，会直接将请求发送到当前url下，也就是主应用，主应用没有这个文件，无法热更新。

]]></description><category></category></item><item><title><![CDATA[commonjs的模块原理及实现]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/124604062</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/124604062</guid><author>gudeng007</author><pubDate>Fri, 06 May 2022 10:15:13 +0800</pubDate><description><![CDATA[commonjs规范

每个js文件都是一个模块
模块的导出 module.exports
模块的导入require

require的执行步骤


调用require时会内部调用Module._load方法；


Module.resolveFilename 解析文件名，这一步会尝试给文件加上后缀；
const filename = Module._resolveFilename(request, parent, isMain);



创建当前模块实例，new Module() =&gt; {id,ex]]></description><category></category></item><item><title><![CDATA[qiankun微前端vue父应用会因为子应用热更新崩溃]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/124438958</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/124438958</guid><author>gudeng007</author><pubDate>Tue, 26 Apr 2022 22:26:00 +0800</pubDate><description><![CDATA[背景
vue是主工程、react是子工程。一定路由条件下，会在父工程中拉取子工程渲染。且主、子工程都通过weboack-dev-server启动，利用其热更新能力
原因分析




由于子工程html是主工程通过fetch请求拉取后，再处理塞入主工程html中。因此在当前服务看来，相当于只有一个8080端口在提供服务。


主工程是本地8080端口，子工程是本地9090端口。发现子工程入口文件被打入了热更新的逻辑，导致会发送 ws://localhost:8080/sockjs-node 请求 而不是正常情]]></description><category></category></item><item><title><![CDATA[35岁职业危机本质是什么]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/124276344</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/124276344</guid><author>gudeng007</author><pubDate>Tue, 19 Apr 2022 16:10:31 +0800</pubDate><description><![CDATA[35岁职业危机本质是什么？

文章来源是珠峰架构张仁阳老师的内部分享

简单来说，35岁职业危机的本质就是，丧失了“职场资本”。
什么是职场资本？就是一个人在职场上，所拥有的稀缺技能。
那么，35岁职业危机是怎么产生的呢？
我经常说，每一个职场人都是“自己”这家公司的CEO。
有句话叫做：“有的人早就破产了，只是活在还没有倒闭的公司里”，说的就是35岁职业危机现象。
并不是说，这个危机到了35岁那天，就突然爆发了。其实，危机早就发生了，只是你浑然不觉而已。
产生35岁职业危机的根本原因就是，已经停止了学习，]]></description><category></category></item><item><title><![CDATA[Warning: findDOMNode is deprecated in StrictMode]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/124191592</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/124191592</guid><author>gudeng007</author><pubDate>Fri, 15 Apr 2022 11:52:05 +0800</pubDate><description><![CDATA[Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode


总是遇到这个问题，记录一下，大部分情况这个warning与我们自己的代码无关，主要是UI 库例如antd的问题；
官网有解释：不建议在严格模式下使用findDOMNode这个API，官网地址在这https://reactjs.org/docs/stric.]]></description><category></category></item><item><title><![CDATA[Vue3响应式原理-Ref]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/124082350</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/124082350</guid><author>gudeng007</author><pubDate>Sun, 10 Apr 2022 17:41:53 +0800</pubDate><description><![CDATA[proxy代理的目标必须是非原始值，所以reactive不支持原始值类型。所以我们需要将原始值类型进行包装。]]></description><category></category></item><item><title><![CDATA[Vue3响应式原理-WatchAPI]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/124082332</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/124082332</guid><author>gudeng007</author><pubDate>Sun, 10 Apr 2022 17:40:55 +0800</pubDate><description><![CDATA[watch的核心就是观测一个响应式数据，当数据变化时通知并执行回调 （那也就是说它本身就是一个effect）]]></description><category></category></item><item><title><![CDATA[Vue3响应式原理-computed]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/124082299</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/124082299</guid><author>gudeng007</author><pubDate>Sun, 10 Apr 2022 17:39:51 +0800</pubDate><description><![CDATA[Vue3响应式原理-computed,接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。]]></description><category></category></item><item><title><![CDATA[vue3响应式原理-effect]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/123974062</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/123974062</guid><author>gudeng007</author><pubDate>Tue, 05 Apr 2022 18:13:13 +0800</pubDate><description><![CDATA[为了实现响应式，我们使用了new Proxy
effect默认数据变化要能更新，我们先将正在执行的effect作为全局变量，渲染（取值），然后在get方法中进行依赖收集
依赖收集的数据格式weakMap（对象：map（属性：set（effect））
用户数据发生变化，会通过对象属性来查找对应的effect集合，全部执行；
调度器的实现，创建effect时，把scheduler存在实例上，调用runner时，判断如果有调度器就调用调度器，否则执行runner

边界情况：

如果在执行effect时，又修改.]]></description><category></category></item><item><title><![CDATA[vue3的响应式原理-reactive]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/123974025</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/123974025</guid><author>gudeng007</author><pubDate>Tue, 05 Apr 2022 18:11:44 +0800</pubDate><description><![CDATA[Reactivity模块基本使用
&lt;div id="app"&gt;&lt;/div&gt;
&lt;script src="./reactivity.global.js"&gt;&lt;/script&gt;
&lt;script&gt;
    const { reactive, effect, shallowReactive, shallowReadonly, readonly } = VueReactivity;
    // let state = reactive({ name: 'jw']]></description><category></category></item><item><title><![CDATA[qiankun微前端落地实践]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/123812287</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/123812287</guid><author>gudeng007</author><pubDate>Tue, 29 Mar 2022 09:35:17 +0800</pubDate><description><![CDATA[一次qiankun微前端框架在业务上的落地，主应用是vue，微应用是react，详细介绍了落地的实施步骤；]]></description><category></category></item><item><title><![CDATA[MySQL总结笔记]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/123641790</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/123641790</guid><author>gudeng007</author><pubDate>Mon, 21 Mar 2022 17:52:58 +0800</pubDate><description><![CDATA[数据库

数据库：
英文单词DataBase，简称DB。按照一定格式存储数据的一些文件的组合。
顾名思义：存储数据的仓库，实际上就是一堆文件。这些文件中存储了具有特定格式的数据。
数据库管理系统：
DataBaseManagement，简称DBMS。
数据库管理系统是专门用来管理数据库中数据的，数据库管理系统可以对数据库当中的数据进行增删改查。
常见的数据库管理系统：
MySQL、Oracle、MS SqlServer、DB2、sybase等…

SQL：结构化查询语言
Structured Query L]]></description><category></category></item><item><title><![CDATA[Could not transfer artifact xxxx from/to maven-default-http-blocker (http://0.0.0.0/):]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/122359215</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/122359215</guid><author>gudeng007</author><pubDate>Fri, 07 Jan 2022 10:35:30 +0800</pubDate><description><![CDATA[背景
升级了idea之后,依赖包下载不成功,报错 Could not transfer artifact xxxx from/to maven-default-http-blocker (http://0.0.0.0/):
排查
之后发现:idea升级之后,maven也升级了,maven升级到3.8.1之后,其默认配置文件中增加了一组标签，如果仓库镜像是http 而不是https 就会被拦截禁止访问,我们公司的私有长裤是http.
解决
因我司私有仓库也支持https,所以将setting文件中的仓库地址改]]></description><category></category></item><item><title><![CDATA[React事件回调总结]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/122152899</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/122152899</guid><author>gudeng007</author><pubDate>Sun, 26 Dec 2021 14:44:49 +0800</pubDate><description><![CDATA[React 事件使用onXxxx的方式进行事件绑定
SyntheticEvent 合成事件，.nativeEvent才是真实的dom事件对象
如果直接使用组件中定义的成员方法作为事件回调，此时回调中的this是undefined
可以使用以下方法解决这个问题

在组件的构造函数中bind this
事件回调使用组件的实例方法，同时实例方法要使用箭头函数定义，这样就捆绑了this
在事件回调处使用箭头函数调用，用以添加事件回调参数




...]]></description><category></category></item><item><title><![CDATA[create-react-app is not working since version 4.0.3]]></title><link>https://blog.youkuaiyun.com/gudeng007/article/details/121945127</link><guid>https://blog.youkuaiyun.com/gudeng007/article/details/121945127</guid><author>gudeng007</author><pubDate>Wed, 15 Dec 2021 09:37:15 +0800</pubDate><description><![CDATA[使用 npx create-react-app app-name 创建项目报错
Need to install the following packages:
  create-react-app
Ok to proceed? (y)

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create]]></description><category></category></item></channel></rss>