《百闻技术周刊》057期

">
【实践经验】
【基础夯实】
【实用工具】
【动态与研究关注】
【程序之外】
- 1、七个对我最重要的职业建议
- 2、熵增定律：为什么那么多人因此顿悟了

【实践经验】

1、深度 | 跨平台Web Canvas渲染引擎架构的设计与思考

https://mp.weixin.qq.com/s/4YXoSrYueQFWOC8sZH8LvQ
微信图片_20210410131947.jpg

2、TypeScript类型编写指南之上篇

https://mp.weixin.qq.com/s/pykw3eF5-ZFWUAmTUhTqZQ

本文是 Apache ECharts PMC 成员沈毅（GitHub ID：pissang）在 ECharts 5 重构过程中积累的关于 TypeScript 类型的经验之谈，对于通用的 TypeScript 项目以及从 JavaScript 迁移到 TypeScript 都能提供不少启发。

3、TypeScript类型编写指南之下篇

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

4、代码重构新手教程：如何将烂代码变成好代码？

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

作为有几年工作经验的程序员，都会对 bad code 不满意。如何将烂代码变成好代码，本文将由浅入深、一步步带你理解重构的奥秘，让你对重构有个基本的了解。本文基于文章《The Simple Ways to Refactor Terrible Code》编译整理而成。

5、CSS 实现优惠券的技巧

https://juejin.cn/post/6945023989555134494

本文介绍使用纯CSS方式绘制各种常见优惠券的技巧

6、现代前端工程化-基于 Monorepo 的 lerna 详解(从原理到实战)

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

看完本文后希望可以检查一下图中的内容是否都掌握了，文中的例子最好实际操作一下。

7、怎样写出可读性高的代码？

https://mp.weixin.qq.com/s/JRj7z7Hrk-qjgkwUUmYGdw

本文总结了写出可读性高的代码的多种方法，值得一读。

【基础夯实】

Web 标准并不是由一家标准组织制定，涉及 IETF、Ecma、W3C 和 WHATWG 等。本文按 Web 标准组织分别简述相关 Web 标准，为前端学习 Web 标准提供指导。

4、一文彻底搞懂JS前端5大模块化规范及其区别

https://www.tuicool.com/articles/FvIrInN

5、移动端开发的屏幕、图像、字体与布局的兼容适配

https://github.com/chokcoco/cnblogsArticle/issues/25

本文的主题是移动端开发的兼容适配与性能优化，希望能从一些常见的移动端开发问题出发，厘清 Web 移动端开发的前前后后，一些技术的发展过程，一些问题的优化手段以及给出一些常见的兼容性问题的解决方案。

6、你要知道的 Npm Script 都在这里

https://mp.weixin.qq.com/s/3o9TlY41AnLnv-T086wo0Q

在拿到一个项目之后，如何看入口文件，如何运行项目，我们都会找到 package.json 中的 script 。甚至在做项目做久之后，我们会自己写一些脚本来给开发提效，但你知道 NPM 脚本能做什么吗？你知道如何传递一个参数给脚本？你知道如何执行某个脚本文件么？在这篇文章中，你会找到一些答案。

7、我应该使用 Object 还是 Map？

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

本文将会探讨一下 Object 和 Map 的不同，从多个角度对比一下 Object 和 Map：

用法的区别：在某些情况下的用法会截然不同
句法的区别：创建以及增删查改的句法区别
性能的区别：速度和内存占用情况

希望读完本文的你可以在日后的项目中做出更为合适的选择。

【实用工具】

1、Charts.css：一个数据可视化开源神器

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

Charts.css 是用于数据可视化的开源 CSS 框架，帮助用户理解数据，帮助开发人员使用简单的 CSS 类将数据转换为漂亮的图表。

2、总结18个webpack插件，总会有你想要的！

https://juejin.cn/post/6844904193589772301

3、不会吧不会吧，都 1202 年了，你还不知道这些检查 CSS 的工具？？？

https://juejin.cn/post/6945794591513657358

检查 CSS 在开发者的日常生活中并不是一项常见的任务，但有时我们却不得不去做。也许这是性能检查的一部分，以确定有问题的 CSS 或删去未使用的选择器。也许是努力提高可访问性的一部分，在代码库中使用的所有颜色都要进行对比评估。甚至可能是为了加强一致性。本文介绍了几种常用的CSS检查工具。

4、一个基于 Vue2 / Vue3 的【大转盘 / 九宫格】抽奖插件

https://github.com/LuckDraw/vue-luck-draw

一个基于 Js + Canvas 的【大转盘 & 九宫格】抽奖，致力于为 web 前端提供一个功能强大且专业可靠的组件，只需要通过简单配置即可实现自由化定制，帮助你快速的完成产品需求。

5、Javascript 高效开发工具库

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

前端开发中经常会遇到Array、Object、String、Number等数据处理，或者是防抖节流函数等性能优化，抑或URL参数处理、类型判断等等操作，为了提高开发效率，笔者将这些常见公共方法进行抽离并封装好，发布在 npm 上，很实用的一个工具库～

【动态与研究关注】

1、2020 年前端技术发展盘点

https://juejin.cn/post/6945259393898250276

2、从 0 到 1 上手 bfcache 往返缓存

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

3、一个基于 Vue3 的类 Umi 的企业级解决框架 fes

https://github.com/WeBankFinTech/fes.js

Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。

【程序之外】

1、七个对我最重要的职业建议

http://www.ruanyifeng.com/blog/2015/09/career-advice.html

不要别人点什么，就做什么
推销自己
学会带领团队
生活才是最重要的
自己找到道路
把自己当成主人
找到水平更高的人

2、熵增定律：为什么那么多人因此顿悟了

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