白开水的博客

css的样式应用是全局性的，没有作用域可言，为了解决这个问题，社区出现了几套解决方案，第一种是通过人工的方式来约定命名规则，第二种是CSS Modules，第三种是CSS-in-JS，本文不讨论三种方案的优劣，而是给出一种约定命名规则的实践。

在我们开发Vue或React项目时，每次配置完路径别名，在输入路径时都没有对应的智能提示路径，如何解决这个痛点呢？笔者通常都是使用vscode，本次使用vscode来进行演示解决，非常简单的。

​ 公司内部搭建了前端监控系统Sentry，我把一些项目接入进去，一周后发现上报数量最多的事件是ResizeObserver loop limit exceeded。这些事件上报得太多，给Sentry服务造成很大压力，于是研究一番准备解决之。如果在一个动画帧内，ResizeObserver不能处理所有的observations，就会触发这个。解决方案阻止table的重绘，例如给所有列都增加width，但是这个方案不好，无法自适应宽度。resize时，给回调进行节流，使其1帧内最多执行一

Mac 安装了 conda 后, 终端的命令行前面会有一个(base), 具体原因是安装 conda 后，每次启动终端都会自动启动 conda 的 base 环境.设置 conda 不自动启动 base 环境就可以了

最近在react中引入amis进行低代码开发，遇到一个问题，记录下来。业务背景用户打开页面立即获取一个任务，填写表单并提交，提交完成后获取下一条任务，遇到的bug是表单提交后，无法触发reloadamis schemalet schema = { type: 'page', name: 'my_page', body: { type: 'service', name: 'my_service', api: {

主应用是vue，使用vue-cli构建，子应用是react，使用create-react-app构建。本地开发中主应用和子应用一起启动，发现子应用无法热更新。主应用端口号：8080子应用端口号：3000原因分析子应用的热更新包是在3000端口下，而子应用嵌入主应用后请求的是主应用的端口8080，导致子应用拿不到.hot-update.json文件，进而导致无法进行热更新。查看源码发现，热更新时李静这里使用/，会直接将请求发送到当前url下，也就是主应用，主应用没有这个文件，无法热更新。

commonjs规范每个js文件都是一个模块模块的导出 module.exports模块的导入requirerequire的执行步骤调用require时会内部调用Module._load方法；Module.resolveFilename 解析文件名，这一步会尝试给文件加上后缀；const filename = Module._resolveFilename(request, parent, isMain);创建当前模块实例，new Module() => {id,ex

背景vue是主工程、react是子工程。一定路由条件下，会在父工程中拉取子工程渲染。且主、子工程都通过weboack-dev-server启动，利用其热更新能力原因分析由于子工程html是主工程通过fetch请求拉取后，再处理塞入主工程html中。因此在当前服务看来，相当于只有一个8080端口在提供服务。主工程是本地8080端口，子工程是本地9090端口。发现子工程入口文件被打入了热更新的逻辑，导致会发送 ws://localhost:8080/sockjs-node 请求 而不是正常情

35岁职业危机本质是什么？文章来源是珠峰架构张仁阳老师的内部分享简单来说，35岁职业危机的本质就是，丧失了“职场资本”。什么是职场资本？就是一个人在职场上，所拥有的稀缺技能。那么，35岁职业危机是怎么产生的呢？我经常说，每一个职场人都是“自己”这家公司的CEO。有句话叫做：“有的人早就破产了，只是活在还没有倒闭的公司里”，说的就是35岁职业危机现象。并不是说，这个危机到了35岁那天，就突然爆发了。其实，危机早就发生了，只是你浑然不觉而已。产生35岁职业危机的根本原因就是，已经停止了学习，

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.

proxy代理的目标必须是非原始值，所以reactive不支持原始值类型。所以我们需要将原始值类型进行包装。

watch的核心就是观测一个响应式数据，当数据变化时通知并执行回调 （那也就是说它本身就是一个effect）

Vue3响应式原理-computed,接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。

为了实现响应式，我们使用了new Proxyeffect默认数据变化要能更新，我们先将正在执行的effect作为全局变量，渲染（取值），然后在get方法中进行依赖收集依赖收集的数据格式weakMap（对象：map（属性：set（effect））用户数据发生变化，会通过对象属性来查找对应的effect集合，全部执行；调度器的实现，创建effect时，把scheduler存在实例上，调用runner时，判断如果有调度器就调用调度器，否则执行runner边界情况：如果在执行effect时，又修改.

Reactivity模块基本使用<div id="app"></div><script src="./reactivity.global.js"></script><script> const { reactive, effect, shallowReactive, shallowReadonly, readonly } = VueReactivity; // let state = reactive({ name: 'jw'

一次qiankun微前端框架在业务上的落地，主应用是vue，微应用是react，详细介绍了落地的实施步骤；

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

背景升级了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文件中的仓库地址改

React 事件使用onXxxx的方式进行事件绑定SyntheticEvent 合成事件，.nativeEvent才是真实的dom事件对象如果直接使用组件中定义的成员方法作为事件回调，此时回调中的this是undefined可以使用以下方法解决这个问题在组件的构造函数中bind this事件回调使用组件的实例方法，同时实例方法要使用箭头函数定义，这样就捆绑了this在事件回调处使用箭头函数调用，用以添加事件回调参数...

使用 npx create-react-app app-name 创建项目报错Need to install the following packages: create-react-appOk 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