FrankKai.github.io
FrankKai.github.io copied to clipboard
FrankKai
FE blog
原文：https://webpack.js.org/contribute/writing-a-loader/#setup demo仓库：https://github.com/FrankKai/webpack-loader-demo - 什么是loader - 安装 - 简单用法 - 复制用法 - 指南 - 简单 - 链式 - 模块化 - 无状态 - loader工具 - loader依赖 - 模块依赖 - 通用代码 - 绝对路径...
TypeScript类型体操，核心思想是 **通过类型生成新的类型！** 记录一下type-challenges的题解，以及解题思路。 仓库地址：https://github.com/type-challenges/type-challenges/blob/main/README.zh-CN.md ### 2 - 获取函数返回类型 `infer / (...args: any) => infer P` https://github.com/type-challenges/type-challenges/issues/11520 ### 3 - 实现 Omit `keyof / extends / in` https://github.com/type-challenges/type-challenges/issues/11545 ### 4 -...
阅读vue源码的时候发现有TypeScript，一脸懵逼，因此需要入个门。 新公司工作中需要用到TypeScript，学习过程中遇到一些疑惑，做了记录。 - ts类型中的?，意思是什么？ - 什么是duck typing？ - constructor之前的变量定义是什么？ - declare是什么？ - ts中unknown, void, null和undefined，never区别是什么？ - ts中的泛型约束是什么？ - 数组类型的两种定义方式 - ts中的类型断言 - 泛型函数与泛型接口 - 如何理解as const？ - declare global是什么意思？ -...
高中物理老师每次开年级大会的时候，开场白总是喜欢说一句：”人生如梦！“，当时没有什么感受，直到工作了几年以后，这种感受尤为强烈。 算上读大学的时间，来杭州已经9年了，4年读大学+5年工作，可以说是资深杭漂了。 有几段经历还是记忆挺深刻的，和大家分享下。 主要分享一下在杭州这几年的工作和生活感受，以及对未来的一种期许。 ## 工作感受 ### 实习期以及第一份工作 大三暑假在学校体育馆投了一份简历，匆匆忙忙找了一份在滨江的实习，算是正式入坑前端了。 暑期实习期间和室友租了一间房，领养了一只猫，当时每天学习在公司高负载学习前端基础，抱着红宝书就是啃，5点多下班，回到家6，7点，累到每次睡1个多小时才能缓过来。 暑期结束以后，就从实习公司离开回到了学校，领养的猫也很无奈地送回了原主人那里，开始准备找秋招实习的机会。 秋招拿到一家在拱墅区的实习机会，每天早上6点起床，坐公交车从下沙到城西，接近2小时到公司实习，真不知道当时怎么坚持下来的，放到现在是真的没有这个毅力。 在校招公司顺利转正了，而且认识了许多到现在还保持联系的小伙伴，有同部门的老学长，老大哥，也有跨部门的老哥老姐，更多的是同届一起进来实习的小伙伴。 在这里学习到很多，第一个独立完成的前端项目就是在这里，第一次跟着有经验的前辈做项目也是在这里。可以说在这里有了真正的前端项目落地的经验。 但是由于辛辛苦苦一个月下来，几乎没有存款，实在是看不到未来的希望，而且部门流动性也特别大，只能无奈地选择了离开。 ### 电商公司抗大梁 在一家火速发展的电商公司，负责从零到一将IM系统、模板系统等等核心功能的设计和实现，在这里呆了有接近3年的时间，项目经验和代码能力在这里得到了极大的提升。 这里的大多数小伙伴，人非常nice，团队氛围特别棒。除了日常的工作之余，一有时间就去学习前端相关的知识以及夯实编程基本功，在这里成长特别大。 由于公司发展比较迅猛，相比于之前的工作，在这里涨薪幅度还是比较给力的，几乎半年多就涨一次薪。 但是由于项目单一，成长受限，所以只能做出换一个环境的选择。 ### 上市公司节奏快 也是目前在职的公司，在这里是压力与成长并存的。尤其是刚来的第一年，压力几乎是拉满的，但是成长与收获也是非常大的。 不仅接触了各式各样的前端项目，设计前端技术方案、落地webComponents项目、开发低代码组件、维护webRTC SDK、开发vscode插件等等等等，在技术深度上面也在逐渐加强，总体来说这里还是挺不错的。 虽然说由于种种原因，公司有一些不得已的降本提效操作，对于疫情下的低迷经济而言，可以说是一个考验。 ## 生活感受 ###...
- for循环比forEach做break和return方便一些 - 过滤出存在至少一个mqtt协议的条目 - 实现一个sleep函数，并且每隔1秒打印出心形的一行 - 小数取整 - 十六进制色转RGB方便调整透明度 - await一个promise异常如何捕获？ - 计算属性不仅仅可用于拼接，还可以用于逻辑计算 - Object.is与==和===有什么不同？ - 如何实现一个浅比较？浅比较中的“浅”代表什么意思？ - proxy方式的属性监听（watch） - encodeURI vs encodeURIComponent - Function.prototye.bind()怎么用 - 可选链的执行过程 - e.target和e.currentTarget...
最近准备一个技术分享，看到以前做的一个语音转文字的功能，放在slides上落灰了，索性整理到这里和大家分享下。 - 语音转写流程图 - PC端浏览器如何录音 - 录音完毕后语音如何发送 - 语音发送和实时转写 - 通用录音组件 - 总结 ### 语音转写流程图  ### PC端浏览器如何录音 ``` AudioContext，AudioNode是什么？ MediaDevice.getUserMedia()是什么？ 为什么localhost能播放，预生产不能播放？ js中的数据类型TypedArray知多少？ js-audio-recorder源码分析 代码实现 ``` #### AudioContext是什么？ AudioContext接口表示由链接在一起的音频模块构建的音频处理图形，每个模块由一个AudioNode表示。 一个audio...
前端通信那些事儿
在近两年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-sd.js, webcomponents-cs.js, custom-elements-es5-adaptor.js是什么？
一直以为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踩坑记录
主要记录在使用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...