FrankKai
FrankKai
 reduce()是一个js数组原型链上的高级函数，没个几年经验估计对这个方法的用法会很模糊。 我最常用的就是用recude()求和，但其实它还有很多值得挖掘的好用之处。 所以开这个issue来系统性学习下reduce()吧。 - 初识reduce() - 概念 - 最简reduce - reducer函数的4个参数 - 语法 - 参数 - 返回值 - 如何理解initialValue和acc，cur的关系？ - 没指定initialValue的空数组reduce，抛什么错？ - 描述 - reduce callback的四个参数 - reduce()是如何工作的？ -...
 通过阅读这篇文章，可以学习到如何使用DefinePlugin插件使得前端项目更加工程化，说清晰点就是如何使用这个插件，在编译阶段根据NODE_ENV自动切换配置文件，提升前端开发效率。 - DefinePlugin的正确用法 - 如何使用DefinePlugin添加配置文件，构建期间自动检测环境变化，也就是如何根据NODE_ENV引入配置文件？ #### DefinePlugin的正确用法 DefinePlugin中的每个键，是一个标识符或者通过`.`作为多个标识符。 - 如果value是一个字符串，它将会被当做code片段 - 如果value不是字符串，它将会被stringify(包括函数) - 如果value是一个对象，则所有key的定义方式相同。 - 如果key有`typeof`前缀，它只是对typeof 调用定义的。 这些值将内联到代码中，压缩减少冗余。 ```js new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true), VERSION: JSON.stringify('5fa3b9'), BROWSER_SUPPORTS_HTML5: true, TWO: '1+1',...
 在阅读[mqtt.js源码](https://github.com/FrankKai/FrankKai.github.io/issues/204)的时候，遇到一段很令人疑惑的代码。 nextTickWork中调用`process.nextTick(work)`，其中函数work又调用了nextTickWork。 这怎么这想递归呢？又有点像死循环？ 到底是怎么回事啊，下面我们来系统性学习一下`process.nextTick()`。 ```js writable._write = function (buf, enc, done) { completeParse = done parser.parse(buf) work() // 开始nextTick } function work () { var packet = packets.shift() if...
当我们在console里console.log(object)后，我们很难复制这个对象打印的结果，但是chrome devtool的copy()为我们提供了这样一个方法，它可以直接将内容复制到操作系统的剪贴板，但是这远远不够，于是有了这篇博客。 - copy()函数 - 如何debug css的pseudo - 如何debug 元素的class列表 - 如何快速提取一个网站的文字信息
- 为什么我选择用mermaid绘图 - 最简demo - 排序 - 线段 - 活动期 - 备注 - 循环 - 注释 ### 为什么我选择用mermaid绘图 有尝试过一些绘图软件，例如draw.io，processon等等，这些绘图软件虽然强大，但都有一个通病：需要手动拖拽元素、连接线条、调整繁琐。对于绘制一些简单的时序图或者流程图而言，mermaid是一个非常好的选择。 优点如下： - 无需关注线条链接，粗细等等UI细节 - 可以在markdown中用mermaid绘图，就好比用md写文档和用word写文档做对比 - 语法简单，结构清晰，便于维护和更新
原文链接：https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count - 从哪些方面对Composite做性能优化？ - 对animation使用transform和opacity - 提升你想要动画化的元素 - 管理layer并且避免layer爆发 - 使用Chrome DevTools理解我们的应用上的layer Compositing指的是将页面上全部的painted部分放在一起在屏幕上展示。 这个区域有两个很关键的影响页面性能的因素：1.compositor layer的数量需要被管理。2.用于动画的属性也是。 ### 从哪些方面对Composite做性能优化？ - 为animation坚持使用transform和opacity - 通过will-change和translateZ提升移动的元素 - 避免过度使用提升规则；layer需要内存和管理 ### 对animation使用transform和opacity 性能最好的pixel pipeline版本就是避免layout和paint的版本，仅仅触发compositing改变：  为了达到这个目的，你需要坚持使用只单独触发compositor改变的属性。目前只有两个属性可以做到：`transform`和`opacity`。 ...
做前端中台业务一年多的时间，有一些心得体会，和大家分享分享。 - 中台是什么 - 中台业务的价值是什么 - 做了哪些前端中台业务 - 如何设计前端中台业务 - 未来展望 ### 中台是什么 百度百科的解释比较言简意赅：“中台，互联网术语，一般应用于大型企业。一般是指搭建一个灵活快速应对变化的架构，快速实现前端提的需求，避免重复建设，达到提高工作效率目的。” 当公司发展到一定规模，就需要建设中台团队来提高工作效率。 在前后端分离的协作模式下，会分为后端中台、前端中台。 对于前端中台来讲，常见的有BFF中台、业务中台等等。 我今天要分享的，主要是业务中台的一些经验。 ### 中台业务的价值是什么 中台业务的大背景，诞生于“降本增效”的大号角下。 无论公司大小，无论业绩如何，“降本增效”一直都是一个不变的、可以挖掘的话题。 企业需要盈利，除去增加利润之外，经营成本也是需要考虑的重要部分。而人力成本或者说协作成本作为经营成本的重要组成，投入一定的时间和经历，产出服务或者工具，从而降低成本 ### 做了哪些前端中台业务 大致列举一下。 - 低代码加载器（xxx官网接低代码平台前端技术方案） - 统一登录页（xxx账号统一过渡页业务线对接）...
Add closeTypes('manual', 'auto') for onClose to distinguish between manual-close by click and auto-close by duration timer. 为onClose时间增加关闭类型：“手动关闭”和“自动关闭”，用于区分通过duration timer的关闭和通过用户click的关闭。 ```js notification.open({ ... onClose: (closeType) => { console.log(closeType) // "auto", "manual" },...