closertb.github.io
closertb.github.io copied to clipboard
closertb
浏览issue 或 我的网站，即可查看我的所有博客
Bumps [terser](https://github.com/terser/terser) from 4.7.0 to 4.8.1. Changelog Sourced from terser's changelog. v4.8.1 (backport) Security fix for RegExps that should not be evaluated (regexp DDOS) v4.8.0 Support for numeric separators (million...
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot] avatar"){kind=avatar}
## 匆匆过客：React17 React17 新增特性：对使用者来说，无新特性, 官方原话： > The React 17 release is unusual because it doesn’t add any new developer-facing features. Instead, this release is primarily focused on making it easier...
Bumps [eventsource](https://github.com/EventSource/eventsource) from 1.0.7 to 1.1.1. Changelog Sourced from eventsource's changelog. 1.1.1 Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal) 1.1.0 Improve performance...
Bumps [async](https://github.com/caolan/async) from 2.6.3 to 2.6.4. Changelog Sourced from async's changelog. v2.6.4 Fix potential prototype pollution exploit (#1828) Commits c6bdaca Version 2.6.4 8870da9 Update built files 4df6754 update changelog 8f7f903...
Bumps [url-parse](https://github.com/unshiftio/url-parse) from 1.4.7 to 1.5.10. Commits 8cd4c6c 1.5.10 ce7a01f [fix] Improve handling of empty port 0071490 [doc] Update JSDoc comment a7044e3 [minor] Use more descriptive variable name d547792 [security]...
Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.11.0 to 1.14.8. Commits 3d81dc3 Release version 1.14.8 of the npm package. 62e546a Drop confidential headers across schemes. 2ede36d Release version 1.14.7 of the npm package. 8b347cb...
 2021年生活很苦，苦得抓头挠腮。但还好头发少了，人也成熟不少，懂的了为生活加糖。 ## 感悟 今年走过一些地方，看过一些电影，读过几本小书，听过几个故事，觉得是好鸡汤，原与君共饮。 ### 电影：《对不起，我们错过了你》  今年国家一直在整治平台经济，扼制平台垄断，开始我不懂，后来我偶然在佳片有约看了这部电影，里面讲的故事却让我恍然大悟，也了解到一个词：`零工经济`。 随着互联网技术的发展，劳力市场的供需通过网络进行匹配，对于那些期望能自主分配工作时间，不愿从事单调乏味的重复工作的人来说，零工经济无疑是转换生活和工作方式的最佳选择，但这只是事情的A面。电影演出了B面，平台一家独大，虽然给自由职业者提供了职业，貌似多劳多得；但平台也有很多限制，且未给任何保障，多劳不一定多得；貌似就业者有选择，但其实就是平台的一颗棋子。 或许这也是去年美团外卖员没有保险，闹得沸沸扬扬的一个原因。 ### 书：《毛泽东传》  以前大学时，对主席甚是崇拜，来来回回看过一些关于他的介绍，今年初看《大决战》，又激起了我对他的兴趣，下载了罗斯·特里尔的《毛泽东传》。 全书感觉非常客观，角度也非常多样，也让我看到了很多不曾预料的剧情。原来主席和总理（包括朱将军）不是一开始就是志趣相投的，这种信任是后面慢慢积累的；原来不止小平爷爷有三起三落，主席曾经也有，相同的是，他们从未放弃；主席也是一个乐于分享的人，教工人农民认字，培养自己的警卫员；还有一些说不出道不明的，但我读完后就觉得，主席不再是神话，广泛的阅读造就了他非凡的见识和格局；但牛皮的人确实是有一些异于常人的性格。 ### 故事：奋斗的夜大毕业生  我有一个表弟，我小舅的儿子，小时候和我一样勤奋懂事（略超过我）,但在读书这件事确实不如我顺利。高中读完，没考上大学。先是半工半读读完西南财大的在职专科，然后又专升本读了财大的成人班（反正就不是统招被社会认可的那种）。凭借着自己的踏实肯定和专业能力，这两年在成都买了房和结完婚，也算是着陆成功。 有一次吃饭，我了解到桌上另一个他盆友也是他财大的同学，现在在四大上班，还有一个同学，在一个银行里当大堂经理，他们三个当时在班上是出了名的拼命三郎。当时我听完非常惊讶，完全不敢相信，这是三个夜大毕业生能做到的。毕竟我身边好多本科生，甚至985还在为工作发愁；还听过，很多进银行的毕业生进银行，都是带着资源进的。 大学毕业以来，我深谙好学校很重要，但最近我才觉得氛围更重要，周围的同学更重要。我的初中同学、高中同学、大学同学都有非常优秀的这种，他们比我懂事更早，更聪明，更有理想，现在想想，感到非常荣幸。 所以出生不重要，学历一般重要，最重要的就是选择好你的战友和你自己的努力。 ## 生活 今年因为疫情依然在延续，生活基本还是局限在大成都范围内，很多好的安排因为突然的疫情被打断，不过还是完成了两件大事： 我和媳妇的婚礼在劳动节终于办完了，中午敬完酒的那一刻我如释重负，真的很麻烦，特别忙，非常对不起那天来参加的朋友同学亲人们，都没好好招呼到位。 在成都的第二套房子终于买下了，一直想换个大一点的三居。但等签完合同，就后悔了，因为国家开始整治房地产市场了，我们成功被挂在了旗杆上。但好在元旦节房贷办下来，我又麻利的把他租了出去，这样可以减轻一点房贷压力。 今年自己的鼻炎和媳妇的慢性胃炎成了我们家的杀手，虽然不重，但还是影响了生活，人过30，身体确实不如以前，看看朋友圈，这些兆头越发的明显。所以，接近年底时，我开始重新跑步（上一次放弃，是威海的大风），让身体规律性的出汗，让吃药成为一种自由，这似乎还是有点效果。 回到家里，也和父母分享了这些想法，带他们去学习使用社区的健身设施，督促他们形成锻炼的习惯。...
## 背景 在干了大半年增删查改后（node，mysql，serverless），业务端人手短缺，老板开恩让我支持其他团队写几个页面。 久了不摸手生，除了react依稀记得，antd基本只能看着官方demo一行一行写，感觉一天能写完的，结果两天了还没联调完。中间还遇到一些似曾相识的问题，可惜以前的经验已经不管用了。 demo地址: https://codesandbox.io/s/antd-about-resetfields-tjcns 这些问题在antd的[仓库issue](https://github.com/ant-design/ant-design/issues?q=resetFields)都反复被提及，看了下文，包括但不限于以下问题都将得到答案：  概括一下： - Form表单，React hooks 组件，initialValues初始化数据时候，第二次、第三次……传递新值，表单没有更新，永远显示第一次数据？ - 弹出层新建表单重新设置值不起作用？ - Modal 用了destroyOnClose，里面有 Form，并使用 form.resetFields，为什么会失效？ - Modal中initialValues更新了，使用了form.resetFields，要连续打开两次才生效？ ## 有事说事 语言描述显得太苍白，所以直接看动图吧：  这是一个简单的增删查改页面，新增和编辑共享了同一个组件，期望在打开弹窗编辑表单关闭后，重新打开时，能根据initialValues重新渲染表单, 但得到的结果是，第二次打开，编辑框没有刷新. 实现的伪代码大致是这样： ```js...
## 背景 来公司一年多，业务之余一直在参与做BU自己的前端发布平台；以前我们的构建底层（CI/CD）大多依赖于集团的能力，所以经常一个应用某个迭代发布之后，其他迭代再构建部署，就会报错，这时就需要打开集团系统的构建日志,会看到类似下面的报错提示： > master 分支有新的提交，请合并分支后再继续部署 今年由于有新的业务系统要对接，我们需要有自己的CI/CD底层，而集成这个能力，在最初我也是走了很多弯路，故记录一下。 ## 为什么落后检测很重要 目前多数简单的前端构建部署，都是以分支来打理；比如我们完成一个需求时：我们会从master主干拉一个迭代分支，然后我们会用这个分支在`开发-测试`等环境做构建部署，线上发布前，我们再将更改合并回主干。 上面的流程，是一个很通用的流程，但有可能也有其他的做法，比如做的特别前沿的：部署分支每次都是从master主干拉取，然后合并迭代分支，然后再部署。这种情况不在今天的讨论范围之内，因为这种策略不会有这个落后的烦劳。 回到前面，为什么我们需要做落后检测？因为很多时候，一个应用会存在多个人维护，存在多个迭代（A，B），这里我们假设10.10号这两个分支都是从主干同一节点拉取。A，B自己正常开发部署，然后A的迭代在10.22号上线了，发布完时，代码合并到了master；然而B 迭代10.24号上线，但并不知道A有发布，如果这时部署系统没有master分支落后检测，B就顺顺利利的用分支B上线了，这会造成什么后果？ - B上线后，分支合并回主干报错(大概率)，后面的迭代没有这个功能，导致后面会有故障发生； - A迭代上的功能没了，线上事故（重一点，3.25）。这锅算谁的？A的？B的？还是平台的？在我看来，这个锅就是平台的 可能你会问，为什么上线前不先合master，然后再构建部署上线？我们平台侧，有这样两个考虑： - 上线前有灰度阶段，如果先合了master，如果灰度发现有bug，或者其他迭代要先上，退出灰度就很麻烦，这时主干分支也会被污染； - 从master重新拉分支，合并代码构建部署，如果是手动操作，这样对开发者而言，会显得很麻烦；如果平台自己来做这个操作，会有代价，而且都集成这个能力了，就可以直接再往前建设一点，走前面提到的前沿方案 ## 我们的做法 首先要明白，什么情况，我们称之为落后master，上个图:   由于feat/1.0.0 发布后merge到了master，导致feat/1.0.1 落后master分支,...
## 前奏 一个前端，成家之时，需要一份婚礼邀请函。用网上哪些网站（婚礼纪、易企秀）生成出来的，样式、动画效果感觉很赞，但公司logo、广告弹窗、加载速度、自定义版图都让我这个职（qiang）业（po）前（zheng）端（huanzhe）感觉，这需求肯定过不了产品验收。 除了这是一份简单的婚礼邀请函架构之外，这更多是一个前端入门H5性能优化的开胃菜。  查看效果，可点击: [演示demo](https://closertb.site/static/invitation/index.html) 仓库地址：[Invitation-Demo](https://github.com/closertb/invitation-demo) 图片均来源于网络，如有侵权，请联系删除； ## 架构设计 ### 框架选型 市面上哪些低代码输出的邀请函，基本都是基于juery的；对于我这种没有经历过juery，IE摧残的年轻前端，什么jquery的架构设计，基本不会;原生JS，那也是不可能的；React一把梭，才是我的最优解，写起来顺手，自己的积累也最多； 基本就纯react，没有依赖什么其他第三方库，就外加了个React-Router 和 动画库； ```js ``` ### 架构设计 传统设计，如婚礼纪、易企秀这些，大多采用基于锚点的单页设计，和SPA有所区别, 是以前那种很纯正的单页, 可以理解为SPA的前身，就是所有的页面内容都同时存在于一个html中,通过可见性或滚动来展示某个或多个页面, 来个代码直观点。 ```html 1 2 3 这是第一页...