FrankKai

前端通信那些事儿

6

在近两年996模式下的近乎疯狂的迭代需求打磨平台的锻炼下，积累了一些前端通信方面的一些实践经验，在这里做一个汇总。一来对自己做一个总结，二来也是给小伙伴们提供一些吸收。 由于作者使用的是vue.js，所有主要对vue.js的组件通信做总结。而且是.vue单文件组件的形式。用react.js的小伙伴不要失望，文章中有很多通用的通信知识点：比如DOM通过自定义事件通信，基于nodejs的EventEmitter通信，多Window通信 / Tab间通信等等。 这里只讨论前端内部的通信，不涉及前后端通信。前后端之间的http通信，mqtt通信，跨域，文件上传等等等等，讲不完的。以后会单独开一篇文章做梳理。 ### DOM通信 - DOM通过自定义事件通信 ### vue组件间通信 - 父子组件通信 - props v-bind(缩写为:) 父->子 - props, watch 父->子 - $emit v-on(缩写为@) 子->父 - v-bind:foo.sync 父子 - $parent,$refs...

WebComponents那些事儿

1

- webcomponents-sd.js, webcomponents-cs.js, custom-elements-es5-adaptor.js是什么？

js中的of和in那些事儿

1

一直以为of和in在js中是同一类东西。 of不能单独使用；可以与for组合成for...of，for await...of；还有一个Array.of()方法。 但其实in在js中是in operator。可以单独使用；也可以与for组合成for..in。 - of篇 - in篇 - in和of最直观的区别 - 实践中遇到的使用场景 - 如何检测一个空对象？ - 如何遍历普通对象{foo: 1, bar: 2}? - 通过in和of取到的单个条目，修改这个单个条目，会影响原对象吗？ - 普通数组['abc', 'dd', 'foo']通过of迭代如何返回？ - 特殊数组`[mp: 13.914736, lp:...

Vue踩坑记录

22

主要记录在使用Angular，React，Vue三大框架过程中的微小发现，其中可能会包括一些框架之间的对比。 1.vue和vuex中的ES6 Shorthand method names 2.ng-bind与v-bind的区别是什么？ 3.:model与v-model的区别是什么？ 4.vue 知识点查漏补缺 5.表单验证 async-validator 6.Vue.extend() 7.Vue实例(单文件组件)详解 8.Vue响应式更新数组--删除组件列表中特定项不符合预期 9.vue 插件 10. vue单元测试 11. 为添加scoped属性有什么效果？ 12. 什么是style blocks，custom blocks？ 13. Duplicate keys detected: '0'. This...

>这个框架支持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那些事儿

13

- 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')}区别是什么？ -...

VSCode插件开发踩坑

6

- 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那些事儿

11

- of - from - map - timer - interval - Observable - Subject - BehaviorSubject（与Subject区别、在medusa中的应用） - Rxjs流最简流程（创建流、处理流、启动流、停止流） - Rxjs在React框架中使用 - Rxjs方式改写react-request-queue

yarn那些事儿

2

- 常用yarn命令总结 - yarn使用经验