做前端中台业务一年多的时间，有一些心得体会，和大家分享分享。中台是什么中台业务的价值是什么做了哪些前端中台业务如何设计前端中台业务未来展望中台是什么百度百科的解释比较言简意赅：“中台，互联网术语，一般应用于大型企业。一般是指搭建一个灵活快速应对变化的架构，快速实现前端提的需求，避免重复建设，达到提...

模块化是一个老生常谈的问题了，打包工具层出不穷。那么，如何利用这些打包工具去打出既支持cjs，又支持esm的npm包呢。这篇文章不涉及概念，是一些打包实测。demo repo: [链接]可以clone下来，本地构建测试。tscrollupwebpackesbuildtsctsconfig.jsontsconfig-esm.jsonpackage.jsoncjstsconfig.json {代码...} esmtsconf...

github地址：musk-clonenpm地址：musk-clonemusk-clone生成具有相同数据结构的模拟影子克隆，速度与 Elon Musk 一样。特斯拉CEO马斯克生9个子女，说自己为提高美国生育率正在尽一份力为什么要用 musk-clone?当你想制作一个与现有的具有相同数据结构的新模拟项目时，你必须复制--> 逐一修改--> 粘贴，这个过程会花...

问题场景npm包改造前，仅支持esmnpm包改造后，既支持esm，又支持cjs为什么改造后，还是会报错？如何理解ts编译配置esModuleInterop？总结问题场景遇到一个很有趣的场景，cjs中需要引入原先打包方式为esm方式的模块。也就是想要通过require()，去引入一个export的模块。my-npm-package包的暴露方式为： {代码...} 支持的...

{代码...} Github地址：[链接]欢迎各位提PR，提issue！！！i18n-chain反向选择路径链多语言vscode插件。通过分析本地项目的多语言文件(js、ts、json)，生成snippet.json，帮助开发者实现多语言快速复用，提升开发效率。演示图[链接]两种方式i18n-json: 适用于locales文件类型为json的项目。i18n-ts: 适用于locales文件类...

TypeScript类型体操，核心思想是 通过类型生成新的类型！记录一下type-challenges的简单题题解，以及解题思路。仓库地址：[链接]博文地址：[链接]4 - 实现 Pickkeyof / extends / in {代码...} 解题思路其中的<T, K extends keyof T>：K是公共类型，意思是K类型是 keyof T结果的子集。这样做能保证Pick的第二个参...

最近准备一个技术分享，看到以前做的一个语音转文字的功能，放在slides上落灰了，索性整理到这里和大家分享下。从技术选型，到方案设计，到实际落地，可以说把全链路都覆盖到了。语音转写流程图PC端浏览器如何录音录音完毕后语音如何发送语音发送和实时转写通用录音组件总结语音转写流程图PC端浏览器如何录音 {代码...} ...

React大家都很熟悉，WebComponents估计也有所耳闻。那么React+WebComponents会碰撞出怎样的火花呢？其实有这样一个开源框架，支持React方式写组件，最终打包后的产物为WebComponents。它就是direflow，这个框架支持React方式写WebComponents。框架地址：[链接]为什么选择direflow开源社区有很多WebComponents框架，比如s...

开门见山，先来看一张bug图（状态下面有个00）。预期是：状态为0时，2个组件不做渲染。现状：状态为0时，2个组件不做渲染，但是渲染出了00。

If our parameter were an object (rather than a string, like it is above), we could use WeakMap instead of Map in modern browsers. The benefit of WeakMap is that it would automatically “clean up” the entries when our object key is no longer accessible.

刚毕业的时候用过极短时间的SVN，后面就一直在用Git来做代码的版本控制了，前前后后差不多4年的时间，期间做了一些在使用Git过程中的记录和心得，在这里分享给大家，大家或许可以从中吸收到一些有用的东西。

那么101（Switching Protocols）到底是什么意思呢？这篇文章将带你理解101交换协议是什么，以及101交换协议运用的协议升级机制。

原文链接：React那些事儿React hooks那些事儿新环境从Vue转到了React技术栈，这个过程还是比较有趣的。在React中会看到与Vue很多相似的地方，也有一些不同的地方，学习过程中遇到一些疑惑，做了记录。useRef如何解决空指针问题？useEffect与useCallback(useMemo)的区别是什么？React除了可以通过props传递数据以外，如何...

原文链接:TypeScript入门之前阅读vue源码的时候发现有TypeScript，一脸懵逼，因此需要入个门。最近在新环境的日常工作中也需要用到TypeScript，学习过程中遇到一些疑惑，做了记录。个人觉得还是比较适合TypeScript入门的同学阅读的，因为我遇到的这些疑惑，可能你也会遇到。ts类型中的?，<>意思是什么？什么是duck...

原文地址：一些特别棒的面试题[4]最近面试了一些公司，拿了一些offer，不记录概念题目，仅记录coding类题目。小伙伴们空闲时间可以做这些题目练练手。只出现一次的数字汇总区间实现红绿灯效果数组去重返回 excel 表格列名检测空对象实现a+a+a打印'abc'实现一个Event模块大整数相加SuperPerson继承Person字符串隐藏部分内...

写过vue的同学都知道，单文件组件.vue在开发中使用频率是非常高的。如果不想再手写或者CV的话，不妨尝试一下我写的这个小工具，支持交互式生成.vue文件，生成的过程只需要回答一些小问题即可。目前仅支持vue2和部分属性，如果对这个项目感兴趣的话，欢迎提issue，欢迎提pr（合适的话我会第一时间merge），或者fork一份改...

不知道用了express.js的你有没有这样的疑问：app.use为什么可以添加一个又一个中间件？connect是如何区分普通中间件和错误中间件的？中间件处理函数中的next指代的又是什么？我简单看了一下connect源码，弄清楚了上面的这3个问题。app.use为什么可以添加一个又一个中间件？ {代码...} connect维护了一个中间件栈(middlew...

关键词：多进程、单线程、事件循环、消息队列、宏任务、微任务看到这些词仿佛比较让人摸不着头脑，其实在我们的日常开发中，早就和他们打过交道了。我来举几个常见的例子：我执行了一段js，页面就卡了挺久才有响应我触发了一个按钮的click事件，click事件处理器做出了响应我用setTimeout(callback, 1000)给代码加了1s的...

什么是排序？初识算法图JavaScript中的排序普通排序复杂排序复杂排序函数封装lodash(v4.17.15)排序函数从V8源码看sort()必会经典排序算法冒泡排序（最大值置尾排序）选择排序（最小值置头排序）插入排序（寻找位置排序）归并排序（二分递归排序）快速排序（基分递归排序）leetcode 排序 解法题目35.搜索插入位置（easy）...

什么是对撞指针？初识算法图对撞过程图JavaScript中的Array与对撞指针在js中，如何定义对撞指针？实现一个最简对撞指针leetcode 对撞指针 解法题目7.整数反转（easy）9.回文数（easy）27.移除元素（easy）125.验证回文串（easy）167.两数之II-输入有序数组（easy）190.颠倒二进制位（easy）344.反转字符串（easy）345.反...

在代码的世界中，无论是什么语言，栈其实都是一种非常重要的数据结构。全球闻名的代码提问社区stack overflow就以栈（stack）溢出作为网站名的一个部分。在写代码或者是debug的过程中，相信你已经感受到了在函数调用栈的世界蹦蹦跳跳的快乐了。在学校里刷oj，刷LeetCode，进入社会参加笔试面试的过程中，相信你也感受到...

之前尝试过一些在webpack3的基础上做的构建优化，例如引入HappyPack优化构建速度，开启loader缓存和优化包查找路径等等，详情可以查看前端webpack构建优化

关于强缓存和协商缓存的理论知识和express.js下的实践，政采云前端团队的这篇文章已经非常详尽了：图解 HTTP 缓存强缓存和协商缓存流程图图来自图解 HTTP 缓存刚好我最近也在对这一块的内容做补充和总结，受到这篇优质博文的启发，于是有了这篇博文。那么在这篇博文中会看到什么呢？强缓存和协商缓存需要注意的细节HTTP ...

几乎所有使用Vue的开发者都知道，Vue的双向绑定是通过Object.defineProperty()实现的，也知道在getter中收集依赖，在setter中通知更新。

在webpack中，我们可以在resolve的alias中定义一个层级较高的目录为一个自定义变量。例如resolve: { alias: { '@': path.join(__dirname, '..', 'src') }}。

众所周知，首次a，b，c均为1时，foo()返回值为1。以foo()返回值为1作为起始态，独立的执行下面以下3个操作，vue会如何计算foo呢？

canvas有一个非常常用的方法canvas.toDataURL()，它会将canvas转化为data URL的格式。通常情况下这个data URL的类型为image。看看下面的例子：

正式工作也有3年的时间了，想要写出更加优雅的代码。所以最近在刷leetcode补充数据结构和算法方面的知识。学校里虽然学过，但是仅仅是有个大概的认识。只有实际工作过几年以后，才会明白数据结构和算法的重要性。如果是通信专业出身的同学，或者是硬件出身的同学一定知道：对于一个信号，我们可以从时域和频域两个方面去...

在阅读mqtt.js源码的时候，遇到一段很令人疑惑的代码。nextTickWork中调用process.nextTick(work)，其中函数work又调用了nextTickWork。这怎么这想递归呢？又有点像死循环？到底是怎么回事啊，下面我们来系统性学习一下process.nextTick()。

常见的mq有Kafka，RocketMQ和RabbitMQ，大家也很常见。 前者很常见，属于微服务间的mq。那么MQTT是什么呢？MQTT属于IoT也就是物联网的概念。快来和使用mqtt.js开发IM功能2年的作者一探究竟吧~