该功能在Vue、React版本实现起来思路一致。

核心思路

• 使用一个函数，可以创建组件实例
• 将新创建的实例，挂载到 DOM 上
• 如果有特殊场景，需要将上下文进行绑定（本文内实现的暂未绑定上下文）

TODO: ant-design 在新版本实现了可以绑定上下文的 hooks，Modal.useModal，具体还没细看👀，后续有空再看看。

背景

用户从输入 url 到打开页面，经历的步骤可以参考这里。现代前端应用程序通常使用 React、Vue、Angular、Solid 等框架进行开发，这些框架统一管理工程化内容。

这也导致了一个问题：通过这些框架开发的单页面应用（SPA）通常只包含一个 <div id="app"></div>，而其余内容都是在后续脚本运行时动态渲染。这使得用户加载的 HTML 页面往往呈现为白屏，只有等到脚本解析执行后，内容才会呈现。因此，服务端渲染（SSR）应运而生，它在服务器端就将内容渲染好并返回给前端，虽然这需要整体改造项目，成本较高。另一种方案是使用首屏骨架图渲染，以减少白屏现象。

最近在过 Next.js 文档 ，看到拦截路由这一章，感觉到惊喜（暂时没想到什么词可以形容了），这种设计在交互和代码上都着实可以称赞。同时联想了一下 Vue.js 如何实现。

举一个例子

路由定义

• /photo : 图片列表
• /photo/xxx : 具体某张图片的详情

在页面 /photo 单击图片时，路由发生变化，进入图片详情 /photo/123， 可以通过模态框( Modal )展示内容。（官方称这种行为拦截路由，屏蔽 URL）

此时，如果使用 /photo/123 直接进入图片详情，直接展示的是详情页面，而不是模态框。

此设计优势，参考 Next.js 官方

• 可通过URL分享
• 刷新时可保留上下文，而不是关闭 Modal
• 路由后退时关闭 Modal ，而不是真正的后退路由
• 后退后可以向前导航打开 Modal

实现效果如图，点击图片，路由已跳转，并且是已模态框形式展现；此时刷新，进入详情页。

一句话总结：通过配置 pitching-loader 实现按需打包，实现开发模式下打包加速。

本文摘录自是一位前辈的Blog

一般的生意人，都在反复评估，自己的贡献和回报的关系。如果贡献大于回报，就说是吃亏了。贡献小于回报，就说占了便宜。
而我看到的伟大的公司，或者成功的生意人，发现他们有一种惊人的相似之处，总结出来，就是：
对贡献有激情，对回报有信心。

贡献和回报
打个比方，一个作家，可以关注自己写的稿子的质量（就是自己的贡献），也可以关注自己的稿酬。
只对自己稿酬感兴趣的，却不关心如何提高自己写的文章的质量，他会是一个越来越失败的作家。相反的，如果把所有激情投入提高自己的文章质量，而不关心稿酬的话，他才可能成为伟大的作家。
有“理想”的公司，都是贡献真诚的感兴趣的公司。微软的任何产品，都在看怎样提高生产率；Google的两个创始人关心的是如何更好的组织世界的信息；皮埃尔关心让世界的任何人都有可能在互联网上实现交易，而爱迪生关心的是给人类光明。。。

回报和坚持
如果一件事情是为了回报，这件事情很难持久。这和一个人的毅力无关。
当一个人还没有真正意识到自己做这件事情的意义的时候，常常会为了显而易见的回报来坚持做一些事情。但很少有事情可以让你立刻看到回报，于是会选择放弃。放弃，多半不是因为无法坚持而放弃，而是因为感觉到自己做这件事失去了意义，所以放弃。
写blog就是这样。如果只是很希望别人来看，来评论，就会一天访问十次自己的blog，看一看有没有人回复。不久就会精疲力尽，而且会发现，自己的努力并不会直接换来多少人回复（像我每天一篇写了第四个年头了，也不会有多少回复的）。这时，就会怀疑自己做这件事情的意义，于是就不写了。不用埋怨自己的毅力，这件事本来和毅力毫无关系。
而凡是能坚持的blogger，要么是把blog写给自己的，意识到每天的记录是帮助自己来整理思路，为了自己生活得更好，要么是为了兴趣，写BLOG仅仅是为了帮助别人，只关心分享，而不关心评论或者浏览量的。无论什么样的动机，只要能看到自己的努力是为了贡献，而不是回报，就会坚持。
只有对贡献有激情，不在乎回报的时候，你才能坚持做一件事情，就像伟大的公司因为有一个贡献的理念，才可以持久的保持激情，在取得巨大的成功以后，接着日复一日的寻找更大的贡献。
需要说明回报，绝不仅仅是钱，它可以是各种你追求的东西，甚至仅仅是一个指标。比如，锻炼身体，身体健康就是回报。如果不享受锻炼的过程，而是苦巴巴的咬着牙，说只要我坚持，就一定会身体好。。。八成，这种坚持不会超过一个月。这就是为了回报而坚持的例子。减肥不成功，不用怀疑自己的毅力。当你对一种新的生活方式本身没有兴趣而只是为了这种方式带来的回报来勒紧裤腰带不吃东西，又怎能让你长期的坚持？

网站的贡献和回报
网站如何提供给用户更多的价值，这就是贡献；如何提高访问量，这是回报。
我个人的体会是，回报这个东西，就像一个电闸。当你把手摸上去的话，就像摸到了高压电一样，瞬间就会感觉的迷茫，压力，并看到投机取巧的办法看起来很有吸引力，就会像一个商人一样买卖流量。但如果把手抽回来，不去碰那一个电闸，感觉立刻好了很多，开始思考比如如何帮助用户，如何给予更多，贡献更多。世界于是又回到了鸟语花香，海阔天空的状态。
彻底想明白自己努力到底是为了贡献了，还是为了回报，是是否可以持久的，优秀的做好一件事情的关键。

对贡献有激情的时候，还要对回报有信心
和对贡献的激情同等重要的是，对回报的信心，而不是置之不理。历史上成功的企业和个人，不但做出了巨大的贡献，也取得了与之相应的巨额的报酬，以及电影明星般的盛名。并不是每一个对贡献有激情的人都做得到这一点。
比如历史上有一个伟大的发明家（或许是最伟大的发明家之一），却鲜为人知。他就是Nikola Tesla。他发现或者开发了一系列伟大创新的基础技术，从无线电信号传输，到交流电，从特斯拉变压器到X光，荧光灯直到现代电网。他和爱迪生一起工作，却相比之下，却回报寥寥。不但老年穷困潦倒，也很少有人听说过他。1943年，这位为人类迎来电力时代的天才去世的时候，身边只有几只他捡来的病鸽子。
这是一个对贡献的激情却没有回报的例子。John Battelle在最近一本新书《The Search》里面就提到，Google的创始人Page就是一个深受这个故事感染的年轻人。Page说“Nikola是个伟大的发明家，但他没有取得他应该取得的成就。我喜欢发明，但同时也希望改变世界。我希望能把我的发明带到人们的手里，这样他们就可以使用我的发明，因为只有这才是真正重要的”。在发明了PageRank算法以后，到底是按照学术传统分享自己的成果，还是像商业公司一样保护自己的知识产权，是两个创办者在1997年夏天最大的问题。
当然，结果证明了，他们可以在像Tesla一样贡献的同时，用一种方式，来保证自己的回报。这种把贡献转换为回报方法给了他们信心，可以更专注的在贡献部分。

回报是贡献的影子
回报是贡献影子。我是说，如果安排得得当的话。
当一个人奔向太阳的时候，影子会跟着你。
当他追随影子的时候，他将远离太阳，远离光明，最终失去影子。

2023 年度总结

凡事先从本质开始思考，然后再从本质一层层往回反推。在这样的思维模式下，你不会因为暂时的困难而对结果失去信心，也不会因为好高骛远而做出徒劳的努力——因为你非常清楚自己的目标是“第一原理”推导出的必然结果。这种理性的思维方式尤其值得我们学习。

—来自《硅谷钢铁侠：埃隆马斯克》

百度百科

六顶思考帽，是指使用六种不同颜色的帽子代表六种不同的思维模式。任何人都有能力使用以下六种基本思维模式：

白色思考帽：白色是中立而客观的。戴上白色思考帽，人们思考的是关注客观的事实和数据。
绿色思考帽：绿色代表茵茵芳草，象征勃勃生机。绿色思考帽寓意创造力和想象力。具有创造性思考、头脑风暴、求异思维等功能。
黄色思考帽：黄色代表价值与肯定。戴上黄色思考帽，人们从正面考虑问题，表达乐观的、满怀希望的、建设性的观点。
黑色思考帽：戴上黑色思考帽，人们可以运用否定、怀疑、质疑的看法，合乎逻辑的进行批判，尽情发表负面的意见，找出逻辑上的错误。
红色思考帽：红色是情感的色彩。戴上红色思考帽，人们可以表现自己的情绪，人们还可以表达直觉、感受、预感等方面的看法。
蓝色思考帽：蓝色思考帽负责控制和调节思维过程。负责控制各种思考帽的使用顺序，规划和管理整个思考过程，并负责做出结论。

不同场合、场景下使用不同的思考帽。

https://baike.baidu.com/item/OKR

TypeScript 相关收藏

入门文章类

TypeScript 入门教程: github 10k star, author xcatliu.

Typescript 类型编程，从入门到通达

Learn Advanced TypeScript Types

TypeScript Cheat Sheets

通关挑战类

Typescript Exercises：一共16关

type-fest

type-challenges

typehero

打开自己的“乔哈里窗”

分为几个维度

自己知道: 开放区, 知道自己喜欢和擅长，快速打造自己核心竞争力
自己不知道: 盲目区, 找好友列出优缺点，自己列出优缺点；比较发现自己的盲区
他人知道: 隐藏区, 选定1-2个天赋可以练习，主动给自己创造外化输出的机会
他人不知道: 未知区，多尝试开发和探索多种可能

自我认识的五大误区

误区一：自己最了解自己

成熟的自我认知，不会因为一时的成败而撼动自信心，从而产生自我的价值怀疑。

误区二：盲目复制

不能盲目的活在过去的成功模式中。

自我认知的难点在于如何剖析自己在面对“未知世界”的生存能力，分析以往的经历中做到锐意进取、思而奋进。

误区三：成王败寇的过山车心态

自我认知的历程实际是一个对自己的价值逐步建立内部评测体系的过程，成熟的自我认知使得领导者不会因为一时的成败而撼动自信心，从而产生对自己价值的怀疑。

误区四：排斥扩展个人领导风格

成功的领导者都能采取两种以上不同的领导风格。

领导风格：领跑、辅助、指令、民主、亲和

领导风格因地制宜与坚定个人价值观并不冲突。

误区五：战略思维与生俱来

战略思维是可以通过实战获取经验

自我认知是一切管理的基石，只有了解自己才能根据自身特点选择适合的管理方式，才能成为一个合格的管理者。

打破职业发展误区

误区一：成长过程中，人的个性会不断改变

• 真相：价值观、自我意识、技能等会变，但个性中最为核心的部分却永远不会变

误区二：在最弱的方面才会去的最大的进步

• 真相：在最强的方面，才会获得最大的进步

误区三：一个优秀的团队成员为了团队利益是愿意做任何事

• 真相：一个优秀的成员会主动发挥自己的优势，不需要为团队愿意做任何事

想要摒除这些误区，问自己三个问题：

1. 是什么原因让你相信，xxx
2. 如果不再相信，xxx，会有什么损失
3. 如果相信xxx，你会得到什么好处

打破职业发展误区，发展优势是应对竞争的最佳方式

如何使自己的成长不跑偏

导致偏离的原因

1. 外部环境影响，如周围的人都不学习和成长
2. 自身原因，如心情不好、没动力

TPA 三步法：

1. Timing 发现时机

   • 设定d定期反思时间，如每三个月时间反思
   • 状态不好时
   • 他人反馈时

2. Problem 直面问题

   • 觉得自己没问题，有问题都是他人的问题
   • 知道自己又问题，承认问题会让自己很不舒服
   • 直面问题，拖的越久，后果越大，直面问题，写出来

3. Action 找出方案

   • 针对主要原因，写出简单的解决方案

愿意主动反思的人都是强者，真正的强者是敢于面对自己的问题，并超越自己的问题。