《百闻技术周刊》049期

">
【实践经验】
【基础夯实】
【实用工具】
- 1、实时可视化Debug：VS Code 开源新神器
- 2、不用再等后端的接口啦！这个开源项目花 2 分钟就能模拟出后端接口
【动态与研究关注】
【程序之外】

【实践经验】

1、如何利用 JavaScript 实现并发控制

https://mp.weixin.qq.com/s/mYShpk7VZ-4QrNnhmbNS6w

在开发过程中，有时会遇到需要控制任务并发执行数量的需求。
例如一个爬虫程序，可以通过限制其并发任务数量来降低请求频率，从而避免由于请求过于频繁被封禁问题的发生。
接下来，本文介绍如何实现一个并发控制器。

2、如何精确统计页面停留时长

https://mp.weixin.qq.com/s/dimbM2v_TxvT1iZto4Ph0Q

页面停留时间（Time on Page）简称 Tp，是网站分析中很常见的一个指标，用于反映用户在某些页面上停留时间的长短，传统的Tp统计方法会存在一定的统计盲区，比如无法监控单页应用，没有考虑用户切换Tab、最小化窗口等操作场景。基于上述背景，重新调研和实现了精确统计页面停留时长的方案，需要兼容单页应用和多页应用，并且不耦合或入侵业务代码。

3、高级异步模式 - Promise 单例

https://mp.weixin.qq.com/s/DQeJ-H4va0zTlSAoNsgF1Q

在本文中，我们将研究如何使用我所说的 Singleton Promise 模式来改进并发的 JavaScript 代码。
首先我们会看一个常见的延迟初始化用例。然后我们将展示一个简单的解决方案，如何包含竞争条件错误。最后，我们将使用单例 Promise 来解决竞争条件并正确解决问题。

4、前端搞工程化：从零打造性能检测库「源码 + 视频」

https://juejin.cn/post/6919295789630455815?utm_source=gold_browser_extension

经常有读者问我什么是前端工程化？该怎么开始做前端工程化？

聊下来以后得出一些结论：这类读者普遍就职于中小型公司，前端人员个位数，平时疲于开发，团队内部几乎没有基础建设，工具很蛮荒。工程化对于这些读者来说很陌生，基本不知道这到底是什么，或者说认为 Webpack 就是前端工程化的全部了。

笔者目前就职于某厂的基础架构组，为百来号前端提供基础服务建设，对于这个领域有些许皮毛经验。因此有了一些想法，前端搞工程化会是笔者今年开坑的一个系列作品，每块内容会以文章 + 源码 + 视频的方式呈现。
这个系列的产出适用于以下群体：

中小厂前端，基建蛮荒，平时疲于业务，不知道业务外怎么做东西能提高自己的竞争力、丰富简历
公司暂时没有做基建计划，只能业余做一些低成本收益高的产品
想了解前端工程化

需要说明的是产出只会是一个低成本下的最小可用产品，你可以拿来按需增加功能、参考思路或者纯粹当学习一点知识。

5、从一个优质开源项目来看前端架构

https://mp.weixin.qq.com/s/f7tzRE0cgQxCP6MNQW5SxQ

6、使用Vue3的CompositionAPI来优化代码量

https://mp.weixin.qq.com/s/WSrO-vU6qHXx4aaWvTzmmQ

【基础夯实】

1、大型 web 前端架构设计-面向抽象编程入门

https://mp.weixin.qq.com/s/hqcWFluZ6Jaf6WukxjT1-w

面向抽象编程，是构建一个大型系统非常重要的参考原则。
但对于许多前端同学来说，对面向抽象编程的理解说不上很深刻。大部分同学的习惯是拿到需求单和设计稿之后就开始编写 UI 界面，UI 里哪个按钮需要调哪些方法，接下来再编写这些方法，很少去考虑复用性。当某天发生需求变更时，才发现目前的代码很难适应这些变更，只能重写。日复一日，如此循环。

2、从ES6到ES10的新特性万字大总结

https://zhuanlan.zhihu.com/p/342882092

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）在标准ECMA-262中定义的脚本语言规范。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。
历史版本
至发稿日为止有九个ECMA-262版本发表。其历史版本如下：

1997年6月：第一版
1998年6月：修改格式，使其与ISO/IEC16262国际标准一样
1999年12月：强大的正则表达式，更好的词法作用域链处理，新的控制指令，异常处理，错误定义更加明确，数据输出的格式化及其它改变
2009年12月：添加严格模式(“use strict”)。修改了前面版本模糊不清的概念。增加了getters，setters，JSON以及在对象属性上更完整的反射。
2011年6月：ECMAScript标5.1版形式上完全一致于国际标准ISO/IEC 16262:2011。
2015年6月：ECMAScript 2015（ES2015），第 6 版，最早被称作是 ECMAScript 6（ES6），添加了类和模块的语法，其他特性包括迭代器，Python风格的生成器和生成器表达式，箭头函数，二进制数据，静态类型数组，集合（maps，sets 和 weak maps），promise，reflection 和 proxies。作为最早的 ECMAScript Harmony 版本，也被叫做ES6 Harmony。
2016年6月：ECMAScript 2016（ES2016），第 7 版，多个新的概念和语言特性。
2017年6月：ECMAScript 2017（ES2017），第 8 版，多个新的概念和语言特性。
2018年6月：ECMAScript 2018 （ES2018），第 9 版，包含了异步循环，生成器，新的正则表达式特性和 rest/spread 语法。
2019年6月：ECMAScript 2019 （ES2019），第 10 版。

3、你不知道的 DOM 变动观察器：Mutation observer

https://mp.weixin.qq.com/s/_ovaLe4-THWwfEU3-ZCBfQ

DOM 变动观察器（Mutation observer）
MutationObserver 是一个内建对象，它观察 DOM 元素，并在检测到更改时触发回调。
我们将首先看一下语法，然后探究一个实际的用例，以了解它在什么地方有用。

4、Promise原理&宏微任务

https://mp.weixin.qq.com/s/BlD9HgXM9hqRGf3Ep9UYEw

读完这篇文章，你的收获有：

Promise简史
Promise的关键概念
可以手写符合标准的Promise
可以清楚宏任务/微任务的执行顺序

5、TypeScript 中提升幸福感的 10 个高级技巧

https://juejin.cn/post/6919478002925453320

用了一年时间的 TypeScript 了，项目中用到的技术是 Vue + TypeScript 的，深感中大型项目中 TypeScript 的必要性，特别是生命周期比较长的大型项目中更应该使用 TypeScript。

文中是笔者在工作中总结到的经常会用到的 TypeScript 技巧。

6、CSS 奇思妙想边框动画

https://juejin.cn/post/6918921604160290830

逛博客网站 — shoptalkshow，看到这样一个界面，非常有意思：
《百闻技术周刊》049期 - 图3

觉得它的风格很独特，尤其是其中一些边框。
嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。

【实用工具】

1、实时可视化Debug：VS Code 开源新神器

https://mp.weixin.qq.com/s/ktw5BDCFH9EHvyZmAxlt_w

用于在调试期间可视化数据结构的 VS Code 扩展。

2、不用再等后端的接口啦！这个开源项目花 2 分钟就能模拟出后端接口

https://juejin.cn/post/6918905415677771790

【动态与研究关注】

1、2021 年 JS 框架预测和 IT 领域技术趋势

https://mp.weixin.qq.com/s/BLdhewh6abX-7uNQ8nFGNQ

JavaScript 在 GitHub 和 StackOverflow 上仍然占据着主导地位。提示 1：大家应该学习 JavaScript，尤其是学习 JavaScript 中的函数式编程。JavaScript 的大多数顶级框架（包括 React、Redux、Lodash 和 Ramda）都基于函数式编程理念。
TypeScript 超越 PHP 和 C# 跃居第四位，仅次于 Java、Python 和 JavaScript。Python 超越 Java 排名第二，这也许是因为人们对 AI 的兴趣迅速增长，以及用于 GPU 加速的动态深度神经网络的 PyTorch 库带来的推动作用——这种库使人们可以更加轻松便捷地完成针对网络结构的实验。

来源：GitHub 2020 年度 Octoverse 报告
JavaScript 在 StackOverflow 上已经连续 8 年排名第一了。Python、Java、C#、PHP 和 TypeScript 则击败了 C++、C、Go、Kotlin 和 Ruby 等语言。

2、React、Vue2、Vue3的三种Diff算法

https://juejin.cn/post/6919376064833667080

本文章不讲解vDom实现，mount挂载，以及render函数。只讨论三种diff算法。VNode类型不考虑component、functional-component、Fragment、Teleport。只考虑Element和Text。

3、2020 年的 JavaScript 后起之秀

https://mp.weixin.qq.com/s/LmMU6wlmGJ3B0vgSYmzdXg

近年来，前端领域迅猛发展，而在技术的不断发展下，开发者们会根据项目的需求和工具更新的功能来判断自己需要使用的工具，也就导致了很多工具和项目虽然发布时间较晚，却拥有极高人气。本文将为大家整理 2020 年前端领域那些备受瞩目的项目，看看你使用的框架排在第几位吧。

4、登上 Github 趋势榜，iMove 原理技术大揭秘!

https://mp.weixin.qq.com/s/cfGdGp1VAVn_bUqXUspvJg

逻辑复用真正能够在技术层面解藕，一个可视化逻辑编辑器 imove的原理技术揭秘～

5、闲鱼是如何实践一套完整的埋点自动化验证方案的？

https://www.infoq.cn/article/EmWjojhZubIvBDNQdrvx

过去的一年闲鱼客户端在首页、搜索、商品发布等核心场景下进行 App 体验优化与升级，在客户端快速迭代过程中经常会出现 UI 改版之后某些关键埋点没有上报、埋点关键字段缺失、埋点字段值不正确等问题，而这些问题在线下测试的时候由于不影响用户体感而被忽略，往往客户端版本发布之后算法或者数据同学察觉到数据异常才会回过头来定位埋点问题，问题修复代价很高，通常会追加客户端版本或者开关降级来解决埋点异常的问题。通过对迭代过程中出现的问题复盘得出来主要有以下的急需解决的问题

哪些是我们需要重点保障的核心埋点
如何开展有效的线下埋点测试
如何提高埋点问题的排除效率

针对以上问题，闲鱼技术质量团队结合自身业务特点提供了一套低侵入埋点质量保障方案

6、TypeScript 4.2 Beta版本发布：带来诸多更新，营造更好的开发体验

https://mp.weixin.qq.com/s/cL6y7VLOBule-Dx4I7OHQg

【程序之外】

1、Ant Design 设计工程化

https://zhuanlan.zhihu.com/p/344336425

我们取了一个题目叫做 Invisible Design System，隐形的设计体系，主要是想和大家分享，我们对可见的设计体系背后隐形的设计规则的思考，以及如何通过设计工程化的方式，让这些复杂的规则可用而不可见。

2、腾讯文档 | 数据化设计

https://mp.weixin.qq.com/s/uqpyMH5pj97Y2VxgDA6rMw

数据化设计不是对“精心打磨体验”的否定。恰恰相反，对设计工匠来说，数据分析能力是一种新的“打磨工具”，提倡在设计实施和决策过程中更科学和客观。UX和数据的关系，就像我们期望鞋子被量产之前能够有数据佐证“这款鞋好看好穿好卖”，而不是否定“好看又好穿的鞋子能带来更好的销量”。最后，“价值-设计-数据”是一个动态课题，必然随着业界经验的沉淀和数据工具的发展，不断迭代。

3、如何做好一个跨团队协作项目

https://mp.weixin.qq.com/s/Ewn1f93mCw6aGKRwhJdRlw

先简单定义什么是跨团队协作项目：跨团队协作是指在给指定时间约束规范内，不同部门与部门之间、个人与个人之间的协调与配合完成一项明确目标的独立的工作任务。
大体上来说一次项目的的流程分五个阶段“项目启动”->“需求评审”->“开发”->“测试（验收）”->“发布上线”，中间涉及的角色有“PD(and 业务)”、“PM”、“设计”、“开发”、“测试”，具体的流程可以看下图