FrankKai.github.io
FrankKai.github.io copied to clipboard
FrankKai
FE blog
>这个框架支持React方式写WebComponents。 框架地址：https://github.com/Silind-Software/direflow 假设有这样一个web component组件。 ```html ``` ### 完整构建步骤 一个完整的direflow web component组件，包含以下步骤。 1. 创建一个web component标签 2. 创建一个React组件，将attributes转化为properties属性转化并传入React组件（通过Object.defineProperty做劫持，通过attributeChangedCallback做attribute实时刷新） 3. 将这个React应用，挂载到web component的shadowRoot direflow的配置如下： ```js import { DireflowComponent } from "direflow-component"; import App from...
React那些事儿
- react中的FC是什么?`FC`是什么意思？主要用处及最简写法是怎样的？ - `import { MouseEvent } from 'react'`是什么意思？SyntheticEvent是什么类型？ - `React.forwardRef`是什么意思？useImperativeHandle是什么意思？ - React中的HOC(高阶组件)是什么意思？ - React中的isValidElement和cloneElement是什么意思？ - React中的React.Children如何使用？ - React.createElement(Input, props)中的React.createElement如何理解？ - React中FC的形参的props, context, propTypes, contextTypes, defaultProps, displayName是什么？ - React中的事件绑定onClick={handleOnClick}与onClick={()=>handleOnClick('pop')}区别是什么？ -...
- require类型问题 - 查看打包后的插件内容 - dependencies中的包未生效 - 使用esbuild压缩打包文件 - 发布插件 ERROR TF400898
 就我目前3年（实习了1年，965了1年，996了2年，算3年感觉少了，说是4年老司机也不为过吧。）的工作经验来看，JSON.stringify一般有以下用途： - **深拷贝：深拷贝引用类型的数据** - **序列化：服务端存储重依赖前端的数据，localStorage/sessionStorage存储的数据** 但其实除了上面两种常用的用法之外，JSON.stringify还有许多更加强大的特性，值得系统性学习。 关键是这些特性可能是你开发过程中**经常用到的，只是你不知道而已**。 也许你觉得这是一篇枯燥的长篇大论的讲用法的博文，那么我就说几个有趣的场景吧： - **为什么这个对象明明有foo属性，序列化后在数据库持久化存储之后，这个属性咋就没了呢？** - **为什么axios发送post请求时，如果req的body包含undefined值的参数，在发给服务端的请求中会消失？** - **打印出的JSON字符串就这么不易读么？出了store成一个variable然后parse之外，能不能直接parse就清晰看到它的数据结构呢？** - **为什么序列化一个对象，它还报错呢？报的还是那种自己引用自己的错误？** 如果这几个问题看了之后是一脸懵逼，那么一定要细细阅读一下这篇博文，答案就在文中。聪明的你一定会找到答案的。 - 工作中常用JSON.stringify() - 深拷贝：深拷贝引用类型的数据（JSON.parse(JSON.stringify(obj/arr))） - 序列化：服务端存储重依赖前端的数据, localStorage/sessionStorage存储的数据（例如fabric.js的canvas模板数据，vue-amap的svg路径信息等等 - 存储重前端功能的数据 - localStorage/sessionStorage存储的数据 -...
Rxjs那些事儿
- of - from - map - timer - interval - Observable - Subject - BehaviorSubject（与Subject区别、在medusa中的应用） - Rxjs流最简流程（创建流、处理流、启动流、停止流） - Rxjs在React框架中使用 - Rxjs方式改写react-request-queue
### `:global` `:global`是css-modules的一个概念，用于将当前选择器从局部作用域提升到全局作用域。 >:global switches to global scope for the current selector respective identifier #### 应用场景 - UI库或者第三方组件样式覆盖（例如ant-design） #### 举个例子 覆盖ant-design Tab组件的.ant-tabs选择器。 这是antd的默认样式： ```css .ant-tabs { height: 100%, } ```...
内容包括： - Git常用命令 - git克隆远程分支仓库 - 查看git用户名和密码 - 分支相关 - 查看git历史 - 按照关键词搜索git历史 - 查看commit历史 - 设置git账号 - 查看git账号 - 仅仅查看某一项的配置 - 回滚本次修改 - 查看本次修改的代码 - 提交后发现丢了几个文件没有提交，发现丢了修改记录，重新添加后最终只有一个提交 - 缓存某种后缀的文件 -...
标准库可以说是node的基础，非常重要。 - path.join()与path.resolve()什么区别？ - process.cwd() - fs.readFile()与fs.readFileSync()有什么区别？ - os.cpus()的times返回数据的user mode,nice mode,sys mode,idle mode,irq mode之间的区别？ - crypto - REPL - require.cache