- 博客(32)
- 收藏
- 关注
RSS订阅原创 如何打一个既支持cjs，又支持esm的npm包？
模块化是一个老生常谈的问题了，打包工具层出不穷。那么，如何利用这些打包工具去打出既支持cjs，又支持esm的npm包呢。这篇文章不涉及概念，是一些打包实测。可以clone下来，本地构建测试。
2023-05-06 11:10:03
592
原创 如何理解防抖和节流?
前端工程师们都听过看起来很高级的词，节流和防抖，其实节流就是throttle，防抖就是debounce，其实这个也属于前端性能优化的一部分。
2022-09-08 10:13:47
1700
原创 如何打一个既支持cjs，又支持esm的npm包？
模块化是一个老生常谈的问题了，打包工具层出不穷。那么，如何利用这些打包工具去打出既支持cjs，又支持esm的npm包呢。
2022-09-08 10:01:34
642
原创 tsconfig.json的esModuleInterop使用场景是怎样的？
tsconfig.json的esModuleInterop使用场景是怎样的？tsconfig.json的module该如何选择？
2022-07-08 10:52:11
665
原创 前端语音转文字实践总结
最近准备一个技术分享，看到以前做的一个语音转文字的功能，放在slides上落灰了，索性整理到这里和大家分享下。从技术选型，到方案设计，到实际落地，可以说把全链路都覆盖到了。
2022-06-16 17:18:26
3575
1
原创 一份工作4年前端的Git备忘指南
刚毕业的时候用过极短时间的SVN，后面就一直在用Git来做代码的版本控制了，前前后后差不多4年的时间，期间做了一些在使用Git过程中的记录和心得，在这里分享给大家，大家或许可以从中吸收到一些有用的东西。无论是github，还是gitlab，还是其他的代码托管平台，代码管理都是用git去做的，git可以说是一名程序员的必备技能，对于工作和面试都是非常有帮助的。Git常用命令优雅使用Git的一些实践oh-my-zsh 常用命令Git常用命令git克隆远程分支仓库：git clone -b.
2021-05-29 17:35:57
209
原创 如何理解mqtt用到的101交换协议？
使用过mqtt的同学都知道，mqtt连接时，在Network面板中的status是101。NameStatusTimemqtt101（Switching Protocols）Pending那么101（Switching Protocols）到底是什么意思呢？这篇文章将带你理解101交换协议是什么，以及101交换协议运用的协议升级机制。101交换协议协议升级机制101交换协议HTTP的101交换协议意味着client向server发送的消息中包含了Upgrad.
2021-05-26 00:17:36
3021
原创 如何理解vue中的key？
就目前所了解的情况，key的作用有以下这些。v-for遍历时，用id，uuid之类作为key，唯一标识节点加速虚拟DOM渲染响应式系统没有监听到的数据，用+new Date()生成的时间戳作为key，手动强制触发重新渲染场景一大同小异司空见惯，场景二是下面这样的：<div :key="rerender"> <span>Hello Vue.js !</span> <complexComponent :propObj="propObj" :.
2021-05-24 11:05:05
483
原创 PostCSS真的太好用了！
在PostCSS官网有着这样的对PostCSS特性介绍，箭头后面是对应功能的插件及其github地址。increase code readability → AutoprefixerUse tomorrow’s CSS ,today! → postcss-cssnextThe end of global CSS → postcss-modulesAvoid errors in your CSS → stylelintPowerful grid CSS → lost →lostPostCSS.
2021-05-24 11:03:28
303
原创 如何解决0.1 +0.2===0.30000000000000004类问题
上篇博客深度剖析了0.1+0.2 === 0.30000000000000004的原因。这篇博客将主要提供几种解决小数精度丢失问题的Javascript类库的代码示例，以及简单的原生EcmaScript方法的代码示例。一.类库部分math.jsmath.js是JavaScript和Node.js的一个广泛的数学库。支持数字，大数，复数，分数，单位和矩阵等数据类型的运算。官网：http://mathjs.org/GitHub：https://github.com/josdejong/math..
2021-05-24 11:01:50
441
原创 实用webpack插件之DefinePlugin
通过阅读这篇文章，可以学习到如何使用DefinePlugin插件使得前端项目更加工程化，说清晰点就是如何使用这个插件，在编译阶段根据NODE_ENV自动切换配置文件，提升前端开发效率。DefinePlugin的正确用法如何使用DefinePlugin添加配置文件，构建期间自动检测环境变化，也就是如何根据NODE_ENV引入配置文件？DefinePlugin的正确用法DefinePlugin中的每个键，是一个标识符或者通过.作为多个标识符。如果value是一个字符串，它将会被当做code片段.
2021-05-24 10:59:05
6389
原创 如何理解vue中的v-model？
说到v-model，就想到了双向数据绑定，而且往往最常见的是在表单元素<input>,<textarea>,<select>中的使用,在一些自定义组件中也使用到了v-model。那么为什么v-model双向数据绑定，自动更新元素呢？v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：text 和 textarea 元素使用 value 属性和 input 事件；checkbox 和 radio 使用 checked 属性和 change 事件.
2021-05-23 11:35:34
498
原创 如何理解vue中的v-bind？
如果你写过vue，对v-bind这个指令一定不陌生。下面我将从源码层面去带大家剖析一下v-bind背后的原理。会从以下几个方面去探索：v-bind关键源码分析v-bind化的属性统一存储在哪里：attrsMap与attrsList绑定属性获取函数 getBindingAttr 和 属性操作函数 getAndRemoveAttrv-bind如何处理不同的绑定属性v-bind:key源码分析v-bind:title源码分析v-bind:class源码分析v-bind:style源.
2021-05-23 11:33:44
417
原创 如何理解vue的computed？
这道考察computed属性的题蛮有意思的。不仅仅考察了computed，而且还考察了vue的依赖收集以及脏检查。computed : { foo() { if(this.a>0){ return this.a} else { return this.b + this.c } }}data() { a: 1, b: 1, c: 1,}众所周知，首次a，b，c均为1时，foo()返回值为1。以foo()返回值为1作.
2021-05-23 11:32:33
134
原创 HTTP之强缓存和协商缓存
关于强缓存和协商缓存的理论知识和express.js下的实践，政采云前端团队的这篇文章已经非常详尽了：图解 HTTP 缓存强缓存和协商缓存流程图图来自图解 HTTP 缓存刚好我最近也在对这一块的内容做补充和总结，受到这篇优质博文的启发，于是有了这篇博文。那么在这篇博文中会看到什么呢？强缓存和协商缓存需要注意的细节HTTP 强缓存和协商缓存之 Koa 实战Expires,Cache-Control,PragmaIf-Modified-Since&&Last-Modifi.
2021-05-23 11:30:58
145
原创 webpack3如何升级为webpack4？
这次webpack升级提升了不少构建速度：生产打包提升了30%；开发构建提升40%，开发热更新提升70%之前尝试过一些在webpack3的基础上做的构建优化，例如引入HappyPack优化构建速度，开启loader缓存和优化包查找路径等等，详情可以查看前端webpack构建优化但是随着时间的推移，这种优化产生的效果越来越弱化，手上的项目体积越来越大，对本地开发热更新速度和生产打包发布速度都有了很大的影响。webpack3升级到webpack4迫在眉睫，这篇博文将记录一些我在升级过程中遇到的坑。..
2021-05-23 11:29:29
652
原创 express中间件原理connect
不知道用了express.js的你有没有这样的疑问：app.use为什么可以添加一个又一个中间件？connect是如何区分普通中间件和错误中间件的？中间件处理函数中的next指代的又是什么？我简单看了一下connect源码，弄清楚了上面的这3个问题。app.use为什么可以添加一个又一个中间件？app.use(function middleware1(req, res, next) { // middleware 1 next();});app.use(function mid.
2021-05-23 11:27:12
228
原创 2020年冬季前端笔试题总结
原文地址：一些特别棒的面试题[4]最近面试了一些公司，拿了一些offer，不记录概念题目，仅记录coding类题目。小伙伴们空闲时间可以做这些题目练练手。涂鸦智能2021年大量招人 前端，Java，安卓，iOS，Go，测试都有空缺！还有很多其他岗位，可以在这个链接挑选岗位https://job.tuya.com/#carrers备注好岗位简历发我邮箱即可：[email protected] 微信了解详情：gaokai20100801只出现一次的数字汇总区间实现红绿灯效果数.
2021-05-23 11:25:36
251
原创 浅谈浏览器架构、单线程js、事件循环、消息队列、宏任务和微任务
关键词：多进程、单线程、事件循环、消息队列、宏任务、微任务看到这些词仿佛比较让人摸不着头脑，其实在我们的日常开发中，早就和他们打过交道了。我来举几个常见的例子：我执行了一段js，页面就卡了挺久才有响应我触发了一个按钮的click事件，click事件处理器做出了响应我用setTimeout(callback, 1000)给代码加了1s的延时，1秒里发生了很多事情，然后功能正常了我用setInterval(callback, 100)给代码加了100ms的时间轮训，直到期待的那个变量出现再执行后.
2021-05-23 11:23:09
245
原创 发现数据结构之美-栈
在代码的世界中，无论是什么语言，栈其实都是一种非常重要的数据结构。全球闻名的代码提问社区stack overflow就以栈（stack）溢出作为网站名的一个部分。在写代码或者是debug的过程中，相信你已经感受到了在函数调用栈的世界蹦蹦跳跳的快乐了。在学校里刷oj，刷LeetCode，进入社会参加笔试面试的过程中，相信你也感受到了栈的强大和易用。这篇博文非常适合数据结构基础非常薄弱的同学食用，也欢迎基础扎实的同学指正和交流。如果从未感受过stack的美妙和强大，这篇博文将非常适合你！什么是栈.
2021-05-23 11:18:18
131
原创 发现算法之美-双指针之对撞指针
什么是对撞指针？初识算法图对撞过程图JavaScript中的Array与对撞指针在js中，如何定义对撞指针？实现一个最简对撞指针leetcode 对撞指针 解法题目7.整数反转（easy）9.回文数（easy）27.移除元素（easy）125.验证回文串（easy）167.两数之II-输入有序数组（easy）190.颠倒二进制位（easy）344.反转字符串（easy）345.反转字符串中的元音字母（easy）11.盛水最多的容器（medium）什么..
2021-05-23 11:17:06
220
原创 写了3个月React，我学到了什么？
原文链接：React那些事儿React hooks那些事儿新环境从Vue转到了React技术栈，这个过程还是比较有趣的。在React中会看到与Vue很多相似的地方，也有一些不同的地方，学习过程中遇到一些疑惑，做了记录。useRef如何解决空指针问题？useEffect与useCallback(useMemo)的区别是什么？React除了可以通过props传递数据以外，如何通过context方式传递数据?React.createElement(Input, props)中的React.cr.
2021-05-21 17:59:06
208
原创 写了3个月TypeScript，我学到了什么？
原文链接:TypeScript入门之前阅读vue源码的时候发现有TypeScript，一脸懵逼，因此需要入个门。最近在新环境的日常工作中也需要用到TypeScript，学习过程中遇到一些疑惑，做了记录。个人觉得还是比较适合TypeScript入门的同学阅读的，因为我遇到的这些疑惑，可能你也会遇到。ts类型中的?，<>意思是什么？什么是duck typing？constructor之前的变量定义是什么？declare是什么？ts中unknown, void, null和unde.
2021-05-14 09:57:26
445
原创 发现算法之美-时间复杂度
正式工作也有3年的时间了，想要写出更加优雅的代码。所以最近在刷leetcode补充数据结构和算法方面的知识。学校里虽然学过，但是仅仅是有个大概的认识。只有实际工作过几年以后，才会明白数据结构和算法的重要性。如果是通信专业出身的同学，或者是硬件出身的同学一定知道：对于一个信号，我们可以从时域和频域两个方面去分析。那么计算机科学或者说软件开发中的算法怎么去分析呢？有两个衡量优劣的维度：时间复杂度和空间复杂度。时间复杂度：执行当前算法所消耗的’时间’。空间复杂度：执行当前算法所占用的内存。在.
2021-01-22 18:17:50
167
原创 发现算法之美-排序
什么是排序？初识算法图JavaScript中的排序普通排序复杂排序复杂排序函数封装lodash(v4.17.15)排序函数从V8源码看sort()必会经典排序算法冒泡排序（最大值置尾排序）选择排序（最小值置头排序）插入排序（寻找位置排序）归并排序（二分递归排序）快速排序（基分递归排序）leetcode 排序 解法题目35.搜索插入位置（easy）88.合并两个有序数组（easy）191.位1的个数（easy）581.最短无序连续子数组（easy）..
2021-01-22 18:13:59
213
原创 2020年冬季前端笔试题总结
原文地址：一些特别棒的面试题[4]最近面试了一些公司，拿了一些offer，不记录概念题目，仅记录coding类题目。小伙伴们空闲时间可以做这些题目练练手。只出现一次的数字汇总区间实现红绿灯效果数组去重返回 excel 表格列名检测空对象实现a+a+a打印’abc’实现一个Event模块大整数相加SuperPerson继承Person字符串隐藏部分内容只出现一次的数字给定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。示例.
2021-01-22 17:46:07
221
原创 前端通信那些事儿
在近两年996模式下的近乎疯狂的迭代需求打磨平台的锻炼下，积累了一些前端通信方面的一些实践经验，在这里做一个汇总。一来对自己做一个总结，二来也是给小伙伴们提供一些吸收。由于作者使用的是vue.js，所有主要对vue.js的组件通信做总结。而且是.vue单文件组件的形式。用react.js的小伙伴不要失望，文章中有很多通用的通信知识点：比如DOM通过自定义事件通信，基于nodejs的EventEmitter通信，多Window通信 / Tab间通信等等。这里只讨论前端内部的通信，不涉及前后端通信。前后端之
2021-01-22 17:05:17
234
原创 物联网宠儿mqtt.js那些事儿
常见的mq有Kafka，RocketMQ和RabbitMQ，大家也很常见。 前者很常见，属于微服务间的mq。那么MQTT是什么呢？MQTT属于IoT也就是物联网的概念。快来和使用mqtt.js开发IM功能2年的作者一探究竟吧~先来看下MQTT在物联网领域的应用场景：mqtt.js是MQTT在nodejs端的实现。通过npm package.json包管理，现代vue技术栈下的前端也可用，比如用vue-cli，create-react-app等等构建的项目。mqtt.js官方为微信小程序.
2021-01-22 16:48:13
1171
1
原创 如何处理浏览器的断网情况？
好的断网处理会让人很舒适：lol的断线重连，王者荣耀的断线重连 可以确保游戏的继续进行坏的断网处理甚至不处理会出bug：比如我手上的项目就出了个bug 业务人员表示非常苦恼网络问题一直是一个很值得关注的问题。比如在慢网情况下，增加loading避免重复发请求，使用promise顺序处理请求的返回结果，或者是增加一些友好的上传进度提示等等。那么大家有没有想过断网情况下该怎么做呢？比如说网络正常->断网->网络正常。其实我一直也没想过，直到组里的测试测出一个断网导致的bug，让我意识到重.
2021-01-22 14:31:23
788
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人