- 博客(43)
- 收藏
- 关注
RSS订阅原创 一种BEM规范实践
css的样式应用是全局性的，没有作用域可言，为了解决这个问题，社区出现了几套解决方案，第一种是通过人工的方式来约定命名规则，第二种是CSS Modules，第三种是CSS-in-JS，本文不讨论三种方案的优劣，而是给出一种约定命名规则的实践。
2023-05-26 10:21:38
221
原创 开发Vue或React项目时路径别名智能提示方案
在我们开发Vue或React项目时，每次配置完路径别名，在输入路径时都没有对应的智能提示路径，如何解决这个痛点呢？笔者通常都是使用vscode，本次使用vscode来进行演示解决，非常简单的。
2023-02-03 14:53:37
396
原创 ResizeObserver loop limit exceeded报错解决方案
公司内部搭建了前端监控系统Sentry，我把一些项目接入进去，一周后发现上报数量最多的事件是ResizeObserver loop limit exceeded。这些事件上报得太多，给Sentry服务造成很大压力，于是研究一番准备解决之。如果在一个动画帧内，ResizeObserver不能处理所有的observations，就会触发这个。解决方案阻止table的重绘，例如给所有列都增加width，但是这个方案不好，无法自适应宽度。resize时，给回调进行节流，使其1帧内最多执行一
2022-07-13 15:54:53
38895
15
原创 解决Mac终端的命令行前的(base)问题
Mac 安装了 conda 后, 终端的命令行前面会有一个(base), 具体原因是安装 conda 后，每次启动终端都会自动启动 conda 的 base 环境.设置 conda 不自动启动 base 环境就可以了
2022-06-30 09:37:59
4005
原创 amis低代码开发ajax提交reload无法触发
最近在react中引入amis进行低代码开发，遇到一个问题，记录下来。业务背景用户打开页面立即获取一个任务，填写表单并提交，提交完成后获取下一条任务，遇到的bug是表单提交后，无法触发reloadamis schemalet schema = { type: 'page', name: 'my_page', body: { type: 'service', name: 'my_service', api: {
2022-05-20 17:11:04
816
原创 qiankun微前端子应用热更新失效问题
主应用是vue，使用vue-cli构建，子应用是react，使用create-react-app构建。本地开发中主应用和子应用一起启动，发现子应用无法热更新。主应用端口号：8080子应用端口号：3000原因分析子应用的热更新包是在3000端口下，而子应用嵌入主应用后请求的是主应用的端口8080，导致子应用拿不到.hot-update.json文件，进而导致无法进行热更新。查看源码发现，热更新时李静这里使用/，会直接将请求发送到当前url下，也就是主应用，主应用没有这个文件，无法热更新。
2022-05-07 18:23:13
3204
原创 commonjs的模块原理及实现
commonjs规范每个js文件都是一个模块模块的导出 module.exports模块的导入requirerequire的执行步骤调用require时会内部调用Module._load方法；Module.resolveFilename 解析文件名，这一步会尝试给文件加上后缀；const filename = Module._resolveFilename(request, parent, isMain);创建当前模块实例，new Module() => {id,ex
2022-05-06 10:15:13
577
原创 qiankun微前端vue父应用会因为子应用热更新崩溃
背景vue是主工程、react是子工程。一定路由条件下，会在父工程中拉取子工程渲染。且主、子工程都通过weboack-dev-server启动，利用其热更新能力原因分析由于子工程html是主工程通过fetch请求拉取后，再处理塞入主工程html中。因此在当前服务看来，相当于只有一个8080端口在提供服务。主工程是本地8080端口，子工程是本地9090端口。发现子工程入口文件被打入了热更新的逻辑，导致会发送 ws://localhost:8080/sockjs-node 请求 而不是正常情
2022-04-26 22:26:00
1569
原创 35岁职业危机本质是什么
35岁职业危机本质是什么？文章来源是珠峰架构张仁阳老师的内部分享简单来说，35岁职业危机的本质就是，丧失了“职场资本”。什么是职场资本？就是一个人在职场上，所拥有的稀缺技能。那么，35岁职业危机是怎么产生的呢？我经常说，每一个职场人都是“自己”这家公司的CEO。有句话叫做：“有的人早就破产了，只是活在还没有倒闭的公司里”，说的就是35岁职业危机现象。并不是说，这个危机到了35岁那天，就突然爆发了。其实，危机早就发生了，只是你浑然不觉而已。产生35岁职业危机的根本原因就是，已经停止了学习，
2022-04-19 16:10:31
561
原创 Warning: findDOMNode is deprecated in StrictMode
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.
2022-04-15 11:52:05
2715
原创 Vue3响应式原理-WatchAPI
watch的核心就是观测一个响应式数据，当数据变化时通知并执行回调 （那也就是说它本身就是一个effect）
2022-04-10 17:40:55
1221
原创 Vue3响应式原理-computed
Vue3响应式原理-computed,接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。
2022-04-10 17:39:51
1597
原创 vue3响应式原理-effect
为了实现响应式，我们使用了new Proxyeffect默认数据变化要能更新，我们先将正在执行的effect作为全局变量，渲染（取值），然后在get方法中进行依赖收集依赖收集的数据格式weakMap（对象：map（属性：set（effect））用户数据发生变化，会通过对象属性来查找对应的effect集合，全部执行；调度器的实现，创建effect时，把scheduler存在实例上，调用runner时，判断如果有调度器就调用调度器，否则执行runner边界情况：如果在执行effect时，又修改.
2022-04-05 18:13:13
2491
1
原创 vue3的响应式原理-reactive
Reactivity模块基本使用<div id="app"></div><script src="./reactivity.global.js"></script><script> const { reactive, effect, shallowReactive, shallowReadonly, readonly } = VueReactivity; // let state = reactive({ name: 'jw'
2022-04-05 18:11:44
1041
原创 MySQL总结笔记
数据库数据库：英文单词DataBase，简称DB。按照一定格式存储数据的一些文件的组合。顾名思义：存储数据的仓库，实际上就是一堆文件。这些文件中存储了具有特定格式的数据。数据库管理系统：DataBaseManagement，简称DBMS。数据库管理系统是专门用来管理数据库中数据的，数据库管理系统可以对数据库当中的数据进行增删改查。常见的数据库管理系统：MySQL、Oracle、MS SqlServer、DB2、sybase等…SQL：结构化查询语言Structured Query L
2022-03-21 17:52:58
1180
原创 Could not transfer artifact xxxx from/to maven-default-http-blocker (http://0.0.0.0/):
背景升级了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文件中的仓库地址改
2022-01-07 10:35:30
3660
原创 React事件回调总结
React 事件使用onXxxx的方式进行事件绑定SyntheticEvent 合成事件，.nativeEvent才是真实的dom事件对象如果直接使用组件中定义的成员方法作为事件回调，此时回调中的this是undefined可以使用以下方法解决这个问题在组件的构造函数中bind this事件回调使用组件的实例方法，同时实例方法要使用箭头函数定义，这样就捆绑了this在事件回调处使用箭头函数调用，用以添加事件回调参数...
2021-12-26 14:44:49
646
原创 create-react-app is not working since version 4.0.3
使用 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
2021-12-15 09:37:15
1478
2
原创 错误使用数组索引造成的bug
使用数组对象进行页面数据管理，需要避免一个大坑：对数据内容的修改依赖数组的索引进行定位，同时页面可能对数组进行splice操作，此时需谨慎确保操作对象是你预期的。可能出现的情况是，当通过索引对数组的元素进行修改时，其索引发生了变化，导致意外修改了其他数据。...
2021-11-16 15:09:54
259
原创 阿里云oss上传踩坑
xhr.withCredentials = true，默认为true，不要脑残改为false；不要设置这样一个请求头，xhr.setRequestHeader(‘Content-Type’, 'multipart/form-data; '); 在xhr open以后这样设置会造成后面还有一段 binary丢失；事实上，只要请求体是FormData格式的，这个请求头浏览器会自动加上；oss自身对于FormData中的数据有顺序要求，至少key应该在file前面...
2021-11-08 22:00:25
591
原创 react微应用hash模式无法响应主应用路由变化
遇到一个十分奇怪的问题，希望有大佬能给解惑：使用qiankun进行微前端改造，主应用是vue hash模式，微应用是react hash模式；react微应用单独测试没有任何问题；通过主应用菜单切换路由跳转的时候，微应用无法响应，不会跳转；通过浏览器前进后退操作，微应用可以响应对应的路由；将主应用和微应用都改为browser模式可修复此问题；前提是主应用和子应用都由我维护，所以可以随便改；有大神可以帮忙解惑吗？？？...
2021-11-01 19:27:41
612
3
原创 error /node_modules/node-sass: Command failed
NodeJSMinimum node-sass versionNode ModuleNode 144.14+83Node 134.13+79Node 124.12+72Node 114.10+67Node 104.9+64Node 84.5.3+57
2021-11-01 19:09:17
1676
原创 web前端基础知识点checklist
HTML元素分类，块级元素，行内元素。语义化。SEOCSS1. margin 纵向重叠2. margin负值3. BFC独立的渲染区域，内部元素的渲染不会影响边界以外的元素。形成BFC的条件。常见应用，清除浮动。4. 布局圣杯，双飞翼flexgrid5. 定位居中问题6. line-height6.1 内联元素的高度机理内联元素的高度由行高决定。line-height是两条基线之间的高度决定。高度的表现是内容区域 + 行间距，内容区域的高度只与字号和
2021-09-26 22:50:04
413
原创 No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?
（以下操作全部在Mac OS系统上进行）JAVA_HOME问题安装Maven后，我们必须设置JAVA_HOME环境变量，这样工具就知道在哪里可以找到要执行的JDK命令。Maven 目标针对项目的源代码运行适当的 Java 命令。例如，最常见的场景是通过执行javac命令来编译代码。如果JAVA_HOME未指向有效的 JDK 安装，Maven 将在每次执行时抛出错误。# Output... The JAVA_HOME environment variable is not defined co
2021-09-10 18:23:29
1678
原创 安装maven
下载的时候要下那个binary版本的，然后按照以下执行# .zshrc 增加以下export MAVEN_HOME=/Users/xxxx/Documents/apache-maven-3.8.2export PATH=$PATH:$MAVEN_HOME/binsource .zshrccompinit:503: no such file or directory: /usr/local/share/zsh/site-functions/_brew_cask# 如果遇到这个问题，继续往下执行
2021-09-09 20:54:29
241
原创 删除 Mac OS X 中“打开方式”里重复或无用的程序列表
/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/Support/lsregister -kill -r -domain local -domain system-domainuser
2021-09-03 22:53:02
455
原创 vue2面试题
v-model的实现原理mvvm的理解computed有什么特点？为何组件data必须是一个函数ajax请求应该放在哪个生命周期如何将组件所有的props传递给子组件 v-bind="$props"如何自己实现一个v-model多个组件的相同逻辑，如何抽离？mixin何时使用异步组件何时使用keep-alive何时使用beforeDestroy作用域插槽action和mutation有何区别配置vue-router异步加载用vnode描述一个dom结构描述响应式原理.
2021-08-31 22:39:55
150
原创 JavaStudyLog
20210831JAVA常用类梳理Java.IO20210830集合（容器）。List 。线程安全。总结：20210829基本数据类型的包装类String类型常用API1.1 char charAt(int index);1.2 boolean equals(String other);…时间处理相关类（Date，DateFormat，SimpleDateFormat）Calendar…20210827异常处理日志使用20210826
2021-08-31 22:35:01
102
原创 项目流程介绍
stage1 - 需求分析了解项目背景质疑需求是否合理需求是否闭环开发难度如何是否需要其他支持（与客户端交互的部分）不要急于给排期stage2 - 技术方案设计求简，不过度设计产出文档（文字，图，代码描述）找准设计重点（对接部分，接口，定义客户端能力，组件设计，数据结构设计）组内评审（组长，老员工，可能有现成的库或者工具节省开发成本）和RD CRD沟通发出会议结论stage3 - 开发如何反馈排期预留buffer考虑依赖的排期工作量符合开发规范写出开发
2021-07-30 21:46:01
185
原创 前端为何要进行打包和构建
代码方面体积更小，加载更快（tree-shaking，压缩合并）编译高级语言和语法（ts，es6，模块化）兼容性和错误提示（polyfill，postcss，eslint）研发流程统一、高效的开发环境统一的构建流程和产出标准集成公司构建规范（提测，上线）...
2021-07-26 22:28:34
967
原创 Vue3面试题
1. Vue3 比 vue2 优势1. 性能更好2. 体积更小3. 更好的ts支持4. 更好的代码组织5. 更好的逻辑抽离6. 更多新的功能2. Vue3 生命周期1. Options API生命周期2. Composition API生命周期3. 如何看待composition API 和options API1. Composition API 更好的代码组织，更好的逻辑复用，更好的类型推到2. 小型项目，业务逻辑简单，用Options API3. 中大型项目，业务逻辑复
2021-07-19 22:37:18
5704
原创 typora+七牛云图床快速配置，告别手动上传图片
想快速将一篇文章在多个平台进行发布，就必须解决文章中的附件（图片，视频等）问题，附件如何保存迁移极大地影响文章的发布；本文介绍一个工具，使用typora进行文章编写，在typora中配置七牛云图床，可以方便地将附件上传至七牛云；使用markdown标准格式进行写作，可以保证文章不依赖平台，方便在必要时进行博客的快速迁移；
2021-06-26 20:39:11
678
原创 分治算法
解释分治算法的基本思想是将一个规模为N的问题分解为K个规模较小的子问题，这些子问题相互独立且与原问题性质相同。求出子问题的解，就可得到原问题的解。几个典型的分治算法题翻转二叉树翻转根节点翻转左子树翻转柚子树// 翻转一棵二叉树。// 例：// 4// / \// 2 7// / \ / \// 1 3 6 9// 4// / \// 7 2// / \ / \// 9 6
2021-05-20 23:39:42
74
原创 二叉树的前中后序遍历
二叉树二叉树（binary tree）是指树中节点的度不大于2的有序树// js中使用对象构造的二叉树const tree = { val: 1, left: { val: 2, left: { val: 3, }, right: { val: 4, }, }, right: { val: 5, left: .
2021-05-17 14:59:52
86
原创 树结构的深度和广度优先遍历
深度优先遍历访问根节点遍历根节点的children，并对其也进行深度优先遍历const dfs = (root) => { console.log(root.val); root.children && root.children.forEach(dfs);};广度优先遍历建一个队列，将根节点入队列将队头出列并访问将对头的子节点入队列重复2,3const bfs = (root) => { let queue = [root]
2021-05-16 22:03:43
144
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人