大家好，我是程序员晓博，目前从事前端行业已经有将近 6年。这六年，从最初的互联网鼎盛时期，到今年是未来十年内最好的一年，再到疫情时期的回暖，再到如今年年都喊寒冬的寒冬。从最初的 20k，到最近的一份 50k 的工作，再到如今的 “政府补贴” 2k，可谓是感悟颇多。

刚好最近 gap 一段时间，有所空闲，就整理下这几年的经历以及我所看到的行业的兴衰。

最近一直在阅读 《穷爸爸富爸爸》，里面关于财商的介绍，确实对我的思想造成了比较大冲击。正打算试玩一下他们的游戏来加深一下思考，但是苦于其游戏是英文的还要注册一直没有付诸行动。刚好在小区业主群里，看到关于财商的游戏，财富流沙盘。

打动我的一方面是最近刚好一直希望看更多财商相关的内容，而身边刚好就出现了这样一个游戏。另一方面是这个游戏的介绍：把错误犯在沙盘里，把觉察带回生活中。刚好最近也一直想找点事做，如果一定要犯错的画，那么不如在一场沙盘中来犯一点错，毕竟现实中的错，损失可就不是这游戏门票的几十几百了。

游戏规则其实很简单，掷骰子，抽机会卡。不太一样的地方，是多了一张资产负债表和起始的职业。

可以看出，这张表原始应该出自于穷爸爸富爸爸的资产负债表。下图是书中的资产负债表：

而下图则是游戏的资产负债表：

游戏沙盘的看起来更详细一点，但是也是四个区域，收入、支出、资产、负债。沙盘的表仅仅是把各个区域划分的更为详细，比如收入先划分为主动收入以及被动收入。而主动收入又包括了工作收入和副业收入。支出部分也是如此，生活支持，房租，税，贷款等等。

说实话，这个表基本涵盖了我的一些支出收入。在我工作的前几年，我和我老婆都是程序员，工作收入应该算是比较高的。月现金流也都是正的，但是实际上，没有任何其他收入来源，看似月薪很高挣了点钱，但是实则非常脆弱，支出也很高，而一旦进入逆流(失业)的时候，直接陷入泥潭。

而现实中，我和我老婆，也在 30岁之际失业。在此之前，收入不错，付了两套房的首付款，全款买了车，有一些存款，但是收入这一项：金融，企业投资，房产投资(一套自住纯支出，另一套还未交付也是)，都没有任何收入，只有单薄到微乎其微的存款利息。

游戏起始

一开始是分角色，选梦想。我选到角色是 hr，有房有车(均有贷款)，收入一般，但是支出也一般，月现金流并不算太差。我老婆选择的是 医生，收入很高，但是支出也很高，有房有车(均有贷款)，月现金流比 hr 稍微好一些。其他人也基本都大差不差，唯一一个苦难开局的就是客服，收入低，同时无房无车，导致支出也不低，从而在月现金流上相对差一些。

说实话，这个收入支出，大部分看起来都比较贴合实际。除了房贷这一项并不太符合当下一二线城市的国情(贷款额及月供偏低，实际月供往往是夫妻二人的收入的一半，首付可能也来自于六个钱包)但是也无伤大雅。

说回到选梦想，我和我老婆的梦想一直是一套市区内各方面条件都极佳的别墅，无贷款，我们量化出来是 1000w(但是实际可能还得有所取舍)，刚好游戏中有梦想是 1000w 的，私人海岛和私人庄园。我俩均选择了对应的梦想。

游戏整体分为平流层，也就是正常的工薪阶层的生活，顺流层，模拟富人的圈层，以及逆流层，模拟生活中的意外等。

初始大家都在平流层，在这一阶段，大家不约而同做的一件事都是，遇到机会，抓起副业，来增加自己的主动收入从而非常直观的增加月现金流，从而在领钱的时候，可以立竿见影的收到不错的一笔钱。

这一举动看似没有任何代价，无非就是付出一些精力值和相对较少的现金，就可以在结算日领到不错的一笔钱。但是也有性价比差的副业，有一位同学就选择了投入 2w，月 4000 的副业。

在游戏中，领取结算现金流的频次并不高，这就导致这个同学直到游戏结束，也没有收回投入。

除此之外，这一举动，还是有一定的隐形成本，精力值的消耗，会导致在后续遇到合适投资项目的时候没有精力来处理。同时选择副业，本身也丧失了一次进行企业投资或者房产投资的机会，也是一种隐形的成本。

当然，此处相比于现实，还是有些脱离了，实际领取结算的频次会比较高，相比如下，游戏中的频次低了 (实际在游戏后期，财富教练直接会发钱给到每一位同学的手中，也算是弥补了结算日的低频次)。

但是即便是这么低的频次，也能感受到每一位玩家对于结算日的期待，那种期待，和在现实中对工资日的期待一模一样。只要一瞬，就完全投入了沙盘模拟。

游戏中期

随着游戏的进行，结婚，结算日发钱，逐渐玩家手里的钱就多起来了，这非常类似现实生活中，人们虽然拿着固定工资，但是随着时间的积累，都开始有一定的积蓄。

此时，大家开始了金融，房产的投资。我苦于副业对精力的消耗，错失了房产投资。被我老婆拿到，最终以 500/每月 的开支换来了 15w 的纯收入。

此时随着时间的推演，应该都发现了离梦想的距离还是很大，大家也开始了月息 10% 的贷款，无房的客服贷款买了房，从而少了房租的支出，但是增加了贷款的支出。而有一位同学贷款进行了企业的投资，为被动收入增加了 1w/月。

而我，一开始选择了副业损失了所有精力，对于所有的投资都无法进行，选择了 2000/月的健康保险，可以在结算日恢复一点活力。但是实际由于结算日的频次并不高，导致这一点活力可以说是收效甚微。

此时，我虽然从一开始都盯着我的目标，1000w 的庄园，内心虽然急切，但是机会总是抓不住，看着每个月不到 1w 的现金流，以及枯竭的精力值。内心已经开始打退堂鼓，这游戏简直没法玩啊这。怎么破局？

在离梦想越来越远的时候，我选择了干着急，没有去拆解这个目标，更不用提和周围的人寻求合作，其实实现方法从一开始就写在了这张纸上，第一阶段目标：被动收入超过总支出，进入顺流层。当然，还有一些其他条件，但是这一点就是最难的一点。

被动收入的组成，在游戏中有：企业投资，房地产和金融。

但是其中投入相对较小的企业投资，都需要大量金钱以及精力。

恰巧此时，我还进入了逆流层，得到的逆流，失业，直接导致月现金流为负，但是与此同时，我得到了大量的精力。但是面对为负的现金流，我已经打退堂鼓，这把游戏，看起来梦想是无望了。

已经心生放弃（这一点在现实中，更加可怕）。

游戏末尾

此时，时间接近尾声，游戏中的年龄来到了40多，50岁。

如果没有财富教练干预的话，我们几个人很有可能还是在平流层打拼，一个运气不好可能进入逆流层。

此时几乎每个玩家都有一些资本，但是大家都是靠着工资收入和副业收入，作为主要现金流来源。

进入顺流层的条件，是被动收入大于每月支出。此时医生的被动收入是0，而每月支出有将近 2w，另一个虽然有 1w 的被动收入，但是每月支出由于创办企业的投资，导致月支出也很大。

结果算下来，场上最容易进入顺流层的，竟然是我这个角色。他的月支出只有 4300，只需要大家合作，就可以让我出圈，从而直接获得 100倍的被动收入。

经过讨论，质问，在场几个同学都购买了企业并转让给我，而我将收益按照投入进行利润平摊后，顺利进入顺流程，直接平步青云，被动收入翻 100倍，达到了 160w/每月。

同时由于富人圈每次可以掷 3个筛子，导致每一步，其实大概率都会得到一次月结算日，160w/每次。

至此，我的人生可以说是一片坦途，财富也迅速积累。连财富教练，都发生了态度转变，每次领钱，也不必点头哈腰，富人不必。

而与此同时，和其他几位的合同，出现了理解偏差，而我也是直接毁约，说只能按我理解的来进行支付，也导致其他几位伙伴陷入了后悔的状态。

游戏也到此走向了尾声，失业人员在众人帮助下出圈后又违约众人，可以说是人生如戏，戏如人生啊。

事后思考

在游戏过程中，财富教练一直在局外观察，直接观察到了我的一个致命缺陷：嘴碎(这也是我在晋升为小组长之后，反而失业的一个原因)。

当有同学陷入逆流区，使用3颗骰子飞出逆流区的时候，我说了一句：三个一。虽然我是开玩笑，同时我也是想降低预期，但是听者有心。

第二次，还是同一个同学，由于骰子掷出瓶子外，需要付钱，而她刚好喜欢在外面摇一摇，我就说，投出去要发钱了。此时她的脸色有点不好了，但是我没有观察到(虽然我一直在观察所有人，但是可能是没有特别留意，或者潜意识里认为我这样说肯定不会让别人不开心)。虽然我的本意是想提醒，不要掷出去，但是实际听起来，就是我想要收钱。

除此之外，每次其他同学拿到一个机会，在读的过程中，我都会进行评判。不过这个我自己有所注意，后期就不太会评判了。

但是嘴碎，又或者说想要关心，但是话听起来像是讽刺和幸灾乐祸，这是我性格上的一个缺陷。可能闭嘴，或者直接说本意，而不是无意间在说话上隐藏自己的善意。就目前这个阶段而言，隐藏善意以讽刺或者幸灾乐祸的方式说话，已经形成了我的潜意识，对我而言，闭嘴 会是一个更好的选择。只有当我慢慢意识到当下自己是隐藏善意，以幸灾乐祸的方法说话时，才是我慢慢开口的时候。

除此之外：

梦想大，是我的优势。

但是我以为我已经为它付出了很多，但是实际上并没有付出很多。

接下来，我应该对着梦想，拆解，脚踏实地，拆解，脚踏实地，拆解，一步一步，向它靠近，只要不放弃，就能实现。

在游戏中我就放弃了，结果最大的转机就在我这里。而现实生活中，可不会有这个天外祝福，只能靠自己。

永不放弃，终会迎来曙光。

而好运，从来都是在我身边。

碎碎念：领工资的人性真是一摸一样，等待，但是领工资的，永远就是低老板一等，富人才能赢得尊重。被动收入，要看清副业和被动收入的区别。永远都是被动收入才是最大的秘诀。

大家好，我是程序员马晓博，目前从事前端行业已有5年有余，而近期由于被裁员有一段时间，也开始回顾自己的过往，发现自己以前在职场中，做过不少傻事，这里就写篇文章来记录下。曾经的犯傻已不可避免，索性公之于众，坦然面对。

ps: 像一直戴工牌，故意露个工牌带子在外面就不说了，谁还没年轻过呢？还真谁也别笑话谁哈哈。

半年前，我第一次成为了二面面试官。这段经历不仅让我，一个曾经的候选人，对许多问题有了更新的理解，也逐渐澄清了我之前在面试过程中的那些困惑。高频次的面试，也使得我对于自己，对于面试这一行为本身，有了深刻的反思和新的认识。我也希望通过分享这些体会，能为那些即将踏上这段旅程的人提供一些启示和帮助。

明明聊的很开心，算法题也做出来了，却没有后续了？

这应该是很多同学在二面的时候遇到的问题。一般来讲，一面完成了基础知识的考察，二面就是你将来的直属上级。

也正是由于二面会是你入职之后的直属上级，这种情况才更容易发生，明明聊的很开心，算法题也做出来了，却没有后续。

从我担任二面面试官的经验来言，因为考虑到候选人入职之后，将是我的直接下属，所以，考察的关键点并不仅仅在于技术层面，性格是否匹配，处事风格如何，过往经历是否匹配，学习能力如何，也是决定是否通过的重点。

除此之外，聊的开心，也并不等于技术过关。

由于工作经验和年限不同，候选人和面试官，往往在技术视野上存在一定的 gap。而项目经验的不同，也会导致候选人和面试官在技术的了解上存在偏差，双方熟悉的领域并不相同。

碰到有类似的项目经验的面试官，那么在深度上，往往会深挖，这一过程中，候选人可能会感觉良好，觉得问对了，觉得聊的比较开心。

而在面试官的角度，可能并不会认同，由于技术视野和技术深度的偏差，一旦候选人达不到预期的深度或方案上没有自己的思考，可能会认为候选人在技术方案和深度上，都有待加强。

当然，除此之外，还有很多原因会导致没有后续(不过 hc 不足，有更好的候选人等，这些其实一般不会发生在二面，往往会发生在 hr 面之后)，上述也仅仅只是我个人作为面试官的一些想法。

这面试官问的问题怎么这么奇怪？这问题有答案吗？

不知道有没有同学遇到过，面试官在聊了项目之后，会抛出一个非常开放的问题，有可能是项目的延伸，有可能是项目的未来规划，也有可能是一个不好实现的问题。

比如：如何在 vue 里面使用 react 组件，react 能够使用 vuex 吗这种天马行空的问题 (当然，这个问题纯属示例，一般都会和项目相关，比如如果重构，你会多出哪些考虑，能不能用另一种方案实现它)。

这里的背后，作为面试官一般是这样的心理活动，和候选人这个项目聊的还不错，深度也还 ok，姑且问个开放性的问题，看看随机应变的能力和创新性吧。

遇到这样的情况，其实也很简单了，面试官要的并不是一个准确的答案，甚至有可能问题本身就有问题。

此时，就大开脑洞，也别管能不能实现，正确与否，按照你的想法，天马行空也好，讨论问题也罢，聊就对了。

你有遇到过什么困难或者有技术难度的问题吗？

我自己作为候选人被面试的时候，有时候会被问到这个问题。

当时的内心 os 真的是，你问这么虚的问题，真不靠谱，敢不敢问点实在的。

当我成为面试官之后，我才明白，这个问题背后的意思（当然，这仅仅代表部分情况并非全部）。

往往会在聊了一会项目之后，问出这个问题。

这里其实要注意了，问出这个问题，大概率意味着，前面的项目咱们都聊过了，在我的视角下，可能不是太有挑战性，技术上复杂度一般，当然，也可能是因为咱们项目经验的差别，导致我看不出你做的项目的复杂度。

此时，问出这个问题，让候选人自己把困难或者项目的复杂度抛出来，来避免由于我自己的判断导致错误估计了候选人的技术实力。

一般一到两年经验的同学，被问到这个问题还算正常，因为一般来讲，这个年限的同学做的事情都比较基础。而如果是三到五年的同学，那么就需要看看是否自己简历上的项目描述是否有突出复杂性和难度。

要应对这个问题，就必须上点技术复杂度了。如果业务复杂，可以讲述业务的情况和场景，如果技术复杂，那么可以看看有哪些你认为复杂的点没有聊到，可以再聊聊。

如果业务确实不复杂，那么可以聊聊看过的源码，或者自己平时钻研的一些问题或者当下热门的话题，比如之前 react18 的 renderToPipeableStream 和传统 ssr 的区别，或者前一段时间 vue 作者认为 react 文档存在让开发者自行 pua 的情况的讨论。

这里的核心，就在于突出自己的技术深度以及对各种方案背后的思考。

那到底什么算深度呢？

提到深度，如果是以前的我，必然会反驳，前端，就是画画页面，有什么深度可以说呢？

但是实际上，大家还是低估了自己工作的复杂度，画页面的简单，仅仅只是因为那些复杂的东西，其他同学在底层都处理掉了。

在一个成熟的前端团队中，工具层面的复杂度基本都在底层被一些同学或者一些组进行了解决。

比如：资源文件的缓存处理，html 文件一般进行协商缓存或者不缓存，而 js、css 文件一般使用强缓存。这些在部署平台就进行了处理，从我面试的候选人来讲，知道协商缓存强缓存的很多，涉及的几个头背的滚瓜烂熟，但是他们的具体用途，往往会含糊不清有所犹豫。

再比如组件库，基本上大家都在用，那么组件库是如何实现按需加载的？或者你的项目中，组件库是否是正常按需加载的吗？组件库的组件，应该提供哪些打包产物呢？你的项目中又是什么样的产物呢？对于样式文件，有哪些处理方案呢？各自的优劣如何？

再比如，项目的打包产物，是否还需要对 promise, async/await 这些语法进行 polyfill，2024 年了，我们的 babel 还有必要把 es6 语法转为 es5 吗？

而更底层的复杂度，从 Jquery, 到 react, vue，再到 svelte, solid 等声明式框架，被这些更底层的框架所掩盖。

那么回到深度，对于做业务的同学，确实不太会对构建打包，组件库、脚手架建设有那么多的了解。但是业务同学，是需要对整个项目的技术选型，性能优化，代码可维护性负一定的责任的。

这里我也只能结合我自己的经验聊一聊深度，并不具有代表性。

比如常见的 react 中的多次渲染如何优化，为什么需要全局状态管理，context 如何避免不必要的渲染，对于 redux 有多少了解，它的中间件思想可以拿出来用到项目中吗？这是我在给组内设计一款合适的状态管理时做的思考，在后来准备面试的时候就做了更多相关的了解。

再比如一些项目本身，就有一定的复杂度，比如我之前做的可视化埋点平台，涉及到一些生僻 api 使用，iframe 通信的设计，以及 babel 插件、webpack 插件等来稳定 xpath 的开发。而这个技术项目，本身也是在我们运营活动的场景下所演化出来的一个平台。

这里建议候选者，对自己的项目一定要进行深挖，涉及到的相关知识点，务必要吃透。比如写了在用 redux，那么势必就需要对其原理有比较多的了解。

本身面试双方信息就是不对等的，面试官一旦在你的优势项目中，发现深入度和思考还不如自己初看这个项目时的思考，将会是非常大的一个减分项。

结语

以上，便是我的一些感悟和思考。

其实这半年的时间，于我而言，也可以说是一场对面试去魅的过程。

站在面试官的角度去实际同候选人交流，有时候就像遇到过去的自己。也很快就理解了以前的我，单纯作为候选人的时候的诸多困惑。

希望本文的一些解答，能够帮助大家对与面试有更好的理解。也祝大家在新的一年里，都有更好的 offer！

我们所有人都被一只手推着，在一条名为人生的路上狂飙。 –不知名的小孩。

2023 年，我经历了两次裁员，一次是在网易，属于意料之中，一次是在前司，属于意料之外。说实话，可以说是打乱了我原本的职业规划，而今年也恰好是我的而立之年，所以写篇文章来分享记录下这一年的心路历程。

不得不说，时间过的是真的很快，去年的 年终随笔 都还历历在目。转瞬之间，就到了 2023 年结束的日子。

这篇文章主要记录下最近面试中，出现超高频次的异步流程控制题。这类型题目，没做过的很容易掉坑里，而做不出来，基本上面试就拜拜了。

本文主要分为三道题目(都是新鲜的题目哦)，前两题都是控制并发数量的题目，相对高频，第三道是控制并发执行的顺序题，相对低频但是很有实用价值。好了，直接上题。

前一段时间一直在面试，因为做过状态管理相关的事情，所以在聊到 redux 时，提到了一行代码实现 redux，所以就有了后续的问题：

能一行代码实现下 redux 吗？
能再实现下 redux 的中间件吗？
能说说怎么支持异步吗？
能让普通函数也享受下中间件吗？

由于 redux 也确实是比较久远但是经典的库了，事后我趁此机会也算是好好回顾了一下 redux，也发现了其中的一些优秀设计，故有了本篇文章。

这个问题来自于我在网上搜索的时候，基本上清一色的翻译官网的函数重载的章节的内容，对于我想要的箭头函数的重载没有太多帮助。包括官网，其实也没有非常明确的说明箭头函数该如何重载。

肝了一个月，刷了5遍 TS类型体操，输出了这份 TS 类型体操通关手册，应该是全网最详细的 TS 类型体操解题指南了。

本文的出发点是记录笔者在设计一款状态管理库时的心路历程和思考。起初笔者仅仅是想做一些粗浅的封装，但是实际思考后，非常希望能够开发一款用起来好用，让自己觉得赏心悦目的状态管理库。

概述

在之前的文章中提到一些 xpath 实战的边界场景，评论区小伙伴比较感兴趣，故写此篇文章进行记录。本文主要将 xpath 的稳定性分为三个环节（是足够涵盖之前文章提出的一些边界场景的）：

1. xpath 生成的边界场景：div[1] 与 div，svg 元素，id 的识别
2. 实际业务中，dom 结构不稳定的场景分析：逻辑与表达式，三元表达式，动态弹窗，动态组件
3. xpath 的特殊场景：列表标记。

在实现可视化埋点的过程中，元素圈选是其功能中不可或缺的一环，其能力具备一定的通用性，故将其逻辑从 可视化埋点平台 中剥离出来，单独作为一个独立的工具方法暴露出来，源代码及演示可直接在 github仓库中 查看。本文主要是对其实现的拆解和其中关键点的记录。

到年底了，网上陆陆续续年终总结也多了起来。每次当我在看年终总结的时候，其实或多或少都觉得无趣，因为别人的生活，其实我一点都不关心。看了几本书，写了几个需求，旅了几次游，说实话，和我一点关系也没有。当然，别人看我的年终总结也大抵如此。

近期一直在团队内开发可视化埋点平台，目前已经落地并成功在多个复杂业务中落地使用，在其中也踩了不少坑。故写此篇文章，给想要在团队内落地可视化埋点平台做一份参考，也是对笔者自己实现过程的一个记录。

最近一直在开发可视化埋点系统，其中元素的曝光埋点，就是借助了 intersectionObserver 这个原生 api。也是网上推荐度比较高的方案，同时 2022 年，该 api 兼容性也已经很高，同时也有 polyfill，基本上使用无虞。

intersectionObserver 本身 api 非常简单，但是在实际使用的过程中，由于可视化埋点的一些特殊性以及对埋点准确性的要求，还是遇到了一些 dom 变更后的边缘场景，本文便是对这些边缘场景的一个记录及实现背后的一些考虑。

在日常的开发中，开发通用组件的机会其实并不多，尤其是在各种组件库已经遍地都是的情况下。而作为一个通用组件库的使用者，经常会看到把 React 组件作为参数传递下去的场景，每当这个时候，其实或多或少都会有一些疑问，比如：有些组件传递下去的是组件名，而有些组件传递下去的是一个箭头函数返回一个组件，而有些直接传递一个 jsx 创建好的元素，这些传递方案的适用场景如何，有什么不同，是否会导致组件的 memo 失效，是否会引发组件的不必要渲染?

本文是笔者在阅读了 antd、mui, react-select 的 api 之后，结合自己日常业务中使用的组件 api 格式，对传递一个组件作为 React 组件参数的方式的思考和总结，如果有写的不到位的，欢迎补充和指点。

React Hooks已经有三年多的时间了，团队中也基本上已经很少看到class组件的身影，也很少再看到用不用hooks的争论，笔者认为，hooks优势确实明显，但是随之而来的心智负担也确实存在。就比如，按钮消个抖，非常常见的业务诉求，但是实际写起来，确实并不容易。

网上也确实有一些优秀的 hooks 库已经进行了实现，但是一些分析介绍的文章，或多或少有点问题。故写此文记录下，写的不好的地方也欢迎交流指出。

面试碰到智力题，低情商，太卷了，高情商，综合实力考察！

最近互联网裁员风头正盛，虽然真实的感觉是身边失业的朋友并不多，甚至有些同学的年终还超出预期，而且有些公司的坑位还逆势上涨。

说实话，时常感觉自己跟不上对这些现象的理解，故只能分享几道新鲜出炉的前端智力题，让大脑从业务代码的繁杂中抽离出来活动活动。

之前在团队中基于 theia，搭建了一套 CloudIDE（其相关介绍见此文章），其本质是将 IDE 的前端运行在浏览器 or 本地 electron，而文件系统，多语言服务等，运行在远端容器侧，中间通过 rpc 进行通信从而完成整个 IDE 的云端化。

而目前团队在低代码平台的建设中，发现还是需要一些简单的 IDE 场景，如果采用容器化的方案，那么每一个 IDE 可能就需要一个容器，不论是启动速度，还是资源的占用，都不太合适。

团队急需一款轻量级的 IDE 来嵌入低代码平台中，故近期着手开发了一款基于 monaco-editor 的轻量级且不依赖后端容器的 IDE。

开始之前，简单聊聊我自己。双非本科，211硕士，先后在腾讯(实习)、51信用卡、阿里巴巴、网易工作。目前一共打工3.5年，不爱加班，不爱内卷的非科班前端开发工程师。

写这篇文章，其实更多的还是自己在内卷大环境下的一些默默的抗争及闲暇之余的一些思考，仅供参考。

前言

在我们团队目前的业务中，随着移动端h5页面复杂度增加以及需要长期维护的项目增多，初期选择多页无数据管理的一些弊端就暴露出来。页面内多个轮询，消息监听、各种优化交互的loading态、倒计时，导致一个h5中，往往有几十个核心的状态，组件嵌套的层级也较多。代码往往也是开头十几个useState的定义，而这些state通过组件一层层传递下去，让后来的维护者，可以说是如履薄冰。

而在组内推行数据流管理时，大家往往会觉得，redux太重，而mobx、基于rxjs的状态流管理等工具又有学习成本，就很难整。

但是从维护角度来看，一次性的活动页面也就算了，多次反复修改的页面，后期维护成本非常高。

所以，花了点时间，用100行代码写了一个类redux的、生产环境完全可用的数据流管理工具，暂且称为 tinysm, 也就是tiny state manage的缩写。本文便是介绍其实现过程及用法。

在云音乐团队内部的WebIDE终于落地了。目前功能上覆盖前端正常的业务开发已无问题，期间也踩了不少坑，故写此篇文章，给想要在团队落地WebIDE做一份参考。当然，一些很细节的问题的处理，一篇文章是不好涵盖的，本文更多的是设计的方案及落地的方向的参考。

chrome 94之后，将禁用命令行参数对SameSiteByDefaultCookies提供，届时，本地localhost下，直接访问测试环境接口将成为问题。本文先介绍这一策略的历史及曾经的解决方案，并会针对此问题，提出一个chrome 94之后的解决方案作为参考。让大家尽量少走弯路，放心大胆的升级chrome。

我开发了一款chrome插件–imgmaker（插件地址及仓库地址见文末），可以根据指定的尺寸、指定的关键字，生成想要的图片。可以在占位图的时候，输入想要的关键字，比如妹子、美女，动漫等等，生成一张赏心悦目的图片放上去，解决问题的同时没准还能提高工具效率（毕竟，好看的meizi图片 = 第一生产力）

在实际开发过程中，经常会用到webpack的别名，来缩短我们在项目中的各种相对路径的引入，方便开发也方便阅读。

但是vscode在不做配置的情况下，本身并不能识别别名，故无法自动跳转，一定程度上降低了使用的便捷性。要解决也很简单，在项目根目录下建立jsconfig.json，配置baseUrl和path即可，但是也还是会有一些问题其他的细节问题，配置起来也比较机械化，在需要配置多个alias时，会显得有些重复化。

最近一直在学习Rxjs，在学习过程中，踩了不少坑，也发现网上的文章都或多或少存在些问题，要么是内容过时了（现在已经Rxjs6），要么就是上来就讲原理（让我一脸懵逼），要么就是讲的不清楚，感觉踩了非常多的坑，学习曲线相对比较陡峭。理解基本概念之后再回头来看，其实并不难理解，但是确实走了很多弯路，所以整理下，同为打工人，能少踩点坑就少踩点坑把。

问题描述

在新接手的项目中，存在vscode点击无法跳转到对应文件的情况，具体如下：
相对路径引入的xxx.jsx文件无法自动跳转，但是.js文件可以

针对这个问题，做了一个非常简单的demo来进行演示和问题的复现：github

在该项目的入口文件src/test.js中就存在这样的问题

解决方案

经过对vscode源码debug，基本了解了大致流程。得到的正确解法如下：

解法1:

删除项目目录下的jsconfig.js，可以实现jsx，js文件的自动跳转

解法2:

jsconfig.json中配置如下：

{
    "compilerOptions": {
      "jsx": "preserve", // 共有三种枚举： react, react-native, preserve，实测均可
   },
    "exclude": ["node_modules"]
}

改进解法2:

一般来讲，jsconfig.json的存在都是配合webpack alias进行快速跳转，故可以参考如下配置：

{
    "compilerOptions": {
      "jsx": "react-native",
      "baseUrl": "./",
      "paths": {
        "@/*": ["src/*"]
      }
    },
    "exclude": ["node_modules"]
}

增加了baseUrl和paths，此时代码中可以进行如下引入：

原理探究

vscode源码本地启动

此部分可以参考vscode的contribute文档。文档写的比较详尽，此处补两个点：

1. yarn配置淘宝源，等待时间会短很多
2. 一部分资源需要从github拉取，一般公司的命令行都会配置成gitlab的名称，可以局部修改成github的姓名邮箱。不然有部分资源会403。

vscode相关代码定位

vscode源码主要分为两部分：src, extensions。由于本身对源码不熟悉，而且也只是为了定位问题，故没有仔细查看调用链路，最终得出以下结论：
寻找jsx文件是由内置扩展: typescript-language-features提供的，具体代码可以见definitions.ts。如果想编写支持其他文件的扩展，只需要注册registerDefinitionProvider这样的方法即可，可以参考jump-definition。
此处再往下追的话，会是一份typescript经过打包后的代码，故没有深究。看到这里的时候，其实可以推测进入js文件之后，左下角会出现这一个状态：

等该内置扩展加载之后，才能使用点击跳转的功能。这里可以参考该扩展的package.json:

当检测到当前文件语言是js/jsx的时候，该扩展会被激活，从而出现左下角的加载状态。

小结

这个问题解决方案是非常简单的，不过之前在网上查了很久也没有得出结论（因为我的项目下有个jsconfig.json，即便什么配置都没有也还是找不到jsx文件），迫不得已去本地debug vscode的源代码。
不过还好，最终拿到了结果，顺利解决问题。希望能够让遇到类似问题的同学少走弯路。

引言

这一段时间研究生生涯已经走进了尾声，也一直忙于论文没有关注前端方面的工作。偶然的机会，在知乎上看到了一篇文章前端人工智能？TensorFlow.js 学会游戏通关。我的内心是很激动的，终于，也能在前端直接搭神经网络，跑分类了。不过该文章，对于tensorflowjs的介绍太少，直观的游戏ai应用确实很好，但是对于初次接触的人，还是从最基础的框架使用开始更好，于是就有了这篇文章。本文抛开了复杂的实际问题，选择曲线拟合这个最简单易懂的情景，使用3种逐步深入的方法来完成目标问题的解决。从最基础的数学方法，到借助底层api构建神经网络，再到最终借助高层次api构建神经网络，一步步熟悉框架的使用，希望能够帮助后来者快速上手。 demo地址(目测手机版后面两个方法训练不出来，建议pc版访问)

5.3-8.18，在腾讯mig呆了将近3个月，有很多做的好的地方，也有很多做的不好的地方，记录下来，反思自己，希望能够在下一份工作中做到更好！

10.13，终于可以结束秋招了，学到了很多，也认识了很多童鞋及面试官，很感谢自己，坚持到现在，写一篇文章，纪念拼搏的自己。

之前在面试的时候，有些公司直接问我写过什么组件，而当时的我的回答是：封装ajax，封装事件处理（兼容性），前端路由，这些方法组件，而并没有一个比如下拉加载，轮播，加载中，拖拽这样的配合css以及js的这种组件。当时最后的结果就是现场思考：一个轮播组件，该有哪些方法，应该暴露什么方法，暴露什么属性。所以最近静下心来，也刚好在自己做的一个前后端分离的小项目中用到了下拉加载，就顺带把这个给抽离出来。记录一下写组件的过程，希望能够加深自己的感悟。

本人目前到了该找工作的年纪，所以在寒假之初就开始准备暑期的实习，一个好的实习，不仅能给之后秋招加分，同时还有转正机会，能在校招中更好的掌握主动权。这篇文章主要介绍我这将近一个月来的面试经历，希望能给后来的一些学弟学妹们一些帮助。我准备找的是前端岗位。

关于继承，其实写js将近一年，平时其实是几乎不怎么使用继承的，但是最近面试的时候遇到了继承的问题，所以查找了一些资料之后做一个总结。主要总结的点有：

1. 原型链继承
2. 组合继承
3. 寄生组合继承

最近在看一些博客的时候，内容经常是来自javascript忍者秘籍，最近虽然一直在面试实习，但是不能把注意力一直放在应付面试上，提升自己的能力也很重要，所以一直抽空看看忍者秘籍。总体来说，这本书，初学者就不用看了，有一定基础之后来看，感悟会比较多。我在这一遍阅读3-5章的过程中，其实并没有很难，有些概念，之前就懂了，这次的阅读，其实更多程度上是对js一个系统的梳理过程。

之前对预加载的实现方案做了介绍，这一篇文章主要是我对图片的懒加载的实现的一个总结。主要包括：

1. 视区检测
2. 图片懒加载及延迟显示

最近面试遇到了一个问题：快速排序是稳定的吗？。我当时想了想稳定的定义：相同元素在排序前和排序后的顺序不会发生改变，就成为稳定的。否则就是不稳定的。在简单形式化一下，如果Ai = Aj, Ai原来在位置前，排序后Ai还是要在Aj位置前。
那么快速排序是否稳定？教科书上的答案是不稳定。。。我还是打算自己探索一下。

最近看了很多关于无限滚动的文章，也在面试中被问到了，优化方案很多，本次针对其中一条优化方案做了一个实际的优化：预加载。

之前第一遍看javascript高级程序设计教程，看到函数作用域的概念，感觉终于可以解释之前程序中出现的种种关于闭包，作用域的奇怪现象了，这个假象一直维持到最近。

you don’t know js。

no,I think i know.

but the truth is: I really don’t know

要找实习了，要准备面试了。拿出之前积攒的一些问题点一个一个进行深入的研究，就碰到了这个，一个微信面试题引发的血案 –[译] 什么阻塞了 DOM？。浏览器是怎么样加载css,js,图片的？这个问题卡在这里，当我在写html的时候，引入一个css,script标签，不禁会想到，这个东西会不会阻塞我页面的展示，放在这个位置行吗？困扰了我很久，狠下心来一定要把这个问题搞清楚，不然写代码迷迷糊糊的。

最近学习了一下高阶函数，其中印象比较深刻的有函数消抖，函数节流以及函数柯里化（curry），在学习中也是从一头雾水到逐渐明了，所以写一篇文章对柯里化进行总结。

最近遇到了跨域问题，有很多种解决方案，本文主要对其中的CORS进行演示，本文使用node编写服务器端代码进行验证。在解决该问题的时候，顺带对cookie的操作进行了一定的说明。

最近遇到了跨域问题，有很多种解决方案，本文主要对其中的jsonp进行演示，本文使用node编写服务器端代码进行测试。

一些实际使用中经常会碰到的es6的语法,慢慢更新.
(2017.01.30更新)

这几天在写代码的时候一直想到一个问题，内存的问题，这个问题解决不了，始终不能安安心心写代码（我这里又又又定义了一个变量，闭包能访问到它，但是我在闭包函数中并没有访问他，闭包一直存在，不占内存吗？之前也一直有一个问题，不解决也是寝食难安，见事件处理函数中this的指向以及函数上下文的继承），以前写c,c++的时候，似乎每次全局作用域有数组我不用了，我就手动给它删除了（局部变量出了作用域就自行销毁），而写javascript的时候意识到，虽然避免使用了全局变量，可是因为闭包的存在难道不会导致内存的泄漏（只要闭包函数存在，就始终拥有对外部函数的作用域的访问权限）？

最近重新看《javascript高级程序设计》，突然看到了ajax，想起来之前学习的各种坑，又想着结合最近学习的模块化编程、面向对象式编程，所以用原生的js采用面向对象的设计思路对ajax进行了一个封装，同时，想起之前学习ajax的最大困难：没有服务器端代码，不好测试，所以这次用原生node写了一个简单的服务器，用于处理ajax的测试。

最近一直在研究前后端分离，ajax可以很好的解决前后端分离的问题，但是又存在着浏览器无法前进后退，这个问题比较尴尬。但是采用前端路由的方式可以很好的解决这个问题。

对事件绑定函数的this指向以及作用域进行简单的总结

最近心情有点波动，不是很稳定，写一篇文章，试图分析自己。

es6的学习笔记(六)：一些内在的提升

es6的学习笔记(五)：generator

学会使用es6的箭头函数之后，在几乎所有需要用到匿名函数的地方都改为了箭头函数，this绑定外部函数的this无往不利，但是最近遇到了一个问题。

es6的学习笔记(四)：iterators and iterable

es6的学习笔记(三)

最近在学习es6的promise，已经看了第2遍了，这次看过感觉有点懂了，去阮一峰的es6教程上又看了一下，有两个例子，一个是异步加载图片，一个是ajax。对异步加载图片还是不太懂，但是ajax我总会吧，就尝试用promise+ajax试下笔，结果。。。。
发个文章，记录今天苦逼的一天。

es6的学习笔记

前端学了半年，学了html+css+js+react+node+bootstrap，写下自己的一些心情体会。

总结了一道昨天面试明略数据前端的一道js面试题。

之前没有系统的对javascript进行学习，主要用来操作DOM，每次看js的书，也就是看到变量类型和语句就停下来了。因为这一块跟c语言还是很像，就没什么兴趣继续读下去,最近写了一个比较长的js，发现变量，函数的作用域很重要，虽然看懂了问题，但是没有理解到位，今天看了《javascript高级程序设计》，提到的执行环境和作用域，才总算是弄明白了问题的来龙去脉。

记录我在hexo制作主题时学到的知识点

记录我当前的进展以及需要解决的问题

对目前的完成情况进行记录

hexo变量的作用域
问题：page变量在archive.ejs和post.ejs中的含义不同，不好在post页面访问整个博客的所有文章列表