2024马上就要过去了，本命年呀，这一年真的太快太快了，发生了很多事情，记录一下，多年以后或许能够看到有一点点记录就足够了。

还记得2023年跨年的时候来北京跨年的，2024就真的到了北京工作，这一年算是集中发生了很多事情，比23年22年都精彩一些。

有一些错误的决定，也有一些正确的决定。总得来说差强人意，但是依旧悲观。

裸辞

上家公司是在上海，从本科毕业后就在这家公司工作，工作了两年吧，在这家公司认识了很多玩的很好很好的朋友，现在也时不时的会聚一下，群里总是会有各种话题
大家一起抱怨生活，一起玩乐，能在工作后认识这么要好的朋友实属幸运。

我们在上海的时候经常去唱歌，钓鱼，公园，晚上睡不着了在群里吆喝一声 喝点？ 下一分钟就到了酒桌上，大家很合得来，都是性情中人，有时候会喝的多一点，然后第二天都请假了哈哈哈。

大家经常约出去玩，我们去过宁波、苏州、乌镇、无锡、扬州等上海周边的城市玩了个遍，现在想想那时候确实挺开心的，大家单身的居多，都是没有什么羁绊，玩得很高兴，压力大了偶尔打打麻将，去酒吧喝喝酒，然后接着周一上班，妥妥打工人生活实录，就靠周末过日子呐

但是公司效益不好，开始陆续裁员，除了我之外都回去了老家所在地工作，之后在上海就不好玩了，没有朋友，也没有钱，在这家公司两年了没有涨过工资,工作也是没有什么乐趣，那时候离职的心到达了顶峰，得知公司今年也不会涨薪后，我选择了裸辞不要裸辞！辞职后压力很大

离开

提了离职后，和项目上的同事们一起吃了一个散伙饭，然后在上海最后3个玩的比较好的朋友吃了顿饭，差不多我就留了一周时间在上海再待一周，看看上海，以后估计来的就比较少了。

那一周是真的舒服，没有工作压力，那时候也不想找工作，一周就是放松，不想任何事情，辞职的事情没有告诉父母，所以没有任何羁绊，天天吃了玩，玩了睡，差不多持续了一周后

我收拾行李开始北漂了，收拾行李的时候回想到刚毕业到上海漂泊，孤身一人，谁也不认识，搬家3次，发烧生病不及其次，其实就是加班太多了，压力太大导致的

当时和我非常要好的哥们苏总，我俩都阳了好几次，发烧好几次，什么病流行，我俩就得什么病，你看我们多时髦，在上海的两年还是收获了很多很多，但是已经不适合现阶段的我了，那就走！下一站北京！

进京

还好有一个非常要好的好哥们在北京实习，租的房子有一个月的空窗期，没有人住，所以我就可以白嫖一个月的住宿了，这一个月的白嫖住宿对我来讲还是很重要的，给我提供了一个月的找工作面试学习的时间。

非常感谢我这位朋友的照顾，才使得我在偌大的北京有一个可以休息的地方。感谢飞哥

从上海坐高铁到北京，自己拖着行李，正好那天晚上还在下雨，我见到了飞哥，飞哥请我吃了一顿饭后，我到了他的出租屋，那天晚上迟迟睡不着觉，想了很多事情，也担心找不到工作之后怎么办，回老家？回老家干什么工作呐？这或许是当代年轻人的痛吧

第二天睡醒后，我就开始找工作之旅了，没有接着休息了

现在的工作是真的不好找，主要还是自己核心竞争力不够导致的，经济形势不容乐观。到北京后也没有怎么玩，直接开始复习找工作，疯狂面试投简历，那段时间还是很规律的每天都在面试学习。

经过小一个月的备战，拿到了几个offer，最终选择了现在的这家公司

入职

拿到offer后很快就入职了，准备入职体检，体检tmd尿酸高点，我一般体检指标都是正常的，这次是第一次有指标不正常，不禁感慨，工作两年后确实伤身体

约好入职时间后，就休息了一两天，然后入职了现在这家公司，挺喜欢现在这家公司的，氛围很好，是一个创业公司，也不加班

在这家公司学习了很多，未来打算学习一下外语 这家公司有美国员工，正好练习一下口语

恋爱

啊哈哈哈，来北京一段时间后，就谈恋爱了，这里就简单说一下，留一点个人隐私

买房

在北京半个月稳定了后，我告诉了父母，我换工作到了北京，父母很开心，老家是邯郸的，距离北京不算远，基本上可以每周末都回家，经过考虑后，决定在邯郸买一个房子

在北京是不太可能了，未来大概率是要离开北京的，或早或晚吧，具体时间随缘吧

我拿了30%的首付钱，爸妈拿了70%的首付钱，我在邯郸买了一个三居室，在大学对面，我很喜欢这个地段，以后没事了大学里面看看腿也挺好的

这里也不细讲了，留点隐私

你呐？

你们呐，过的好吗？过的开心吗？

祝大家2025，天天开心

2024-12-12 于北京出租屋

前言

前几天和前同事闲时聚餐，约了两个月的小聚终于达成了，程序员行业聚少离多，所幸大家的发量还坚挺着。

期间不可避免地聊到了自己的公司、行业状况以及对未来的看法，几杯老酒之后，大家畅所欲言，其中一位老哥侃起了他的职业生涯，既坎坷又无奈，饭后想起来挺有代表性的，征得他同意故记录在此。

以下是老哥的历程。

程序员的前半生

我今年35岁，有房有贷有妻女有老父母。

出生在90年代的农村，从小中规中矩，不惹事不喧哗不突出，三好学生没有我，德智体美没有全面发展。学习也算努力，不算小题做题家，因为只考了个本科。

大学学费全靠助学带款，勤工俭学补贴日用，埋头苦干成绩也只在年级中等偏下水平。有些同学早早就定下了大学的目标，比如考研、比如出国、比如考公，到了大三的时候大家基本都有了自己的目标。而我的目标就是尽早工作，争取早日还完带款，因此早早就开始准备找工作。

也许是上天眷顾，不知道怎么就被华为看重了（那会华为还没现在的如日中天，彼时是BAT的天下），稀里糊涂的接受了offer，没想到却是改变了后面十年的决定。

2013年，深圳的夏天阳光明媚，热气扑鼻，提着一个简单的箱子进入了坂田基地。

刚开始，工作上的一切都很新鲜，每个人都在忙碌，虽然不知道他们在忙什么，但感觉很高级的样子。同期入职的同事都比较厉害，很快就适应了工作，而自己还是没完全应对工作内容，于是下班之后继续留在公司学习，顺便蹭饭。

就这样，很快就一年过去了，自己也慢慢熟悉了工作节奏，但是加班也越来越多了。对于自己来说，为了过节点，6点是晚饭时间，9点是下班时间，12点正式下班。

平凡的日子没什么值得留恋，过一天、一个月、一年、四年都没什么两样，四年里学习到了不少的知识，也数了很多次深圳凌晨的路灯数。

作为深漂，没有遇到深圳爱情故事，也对高昂的房价绝望，于是决定回到二线城市，成为一名蓉漂。
2017年，还是和四年前一样的行李箱，出现在了老家的省会城市，只是那时的我没有了助学打款，怀里也攒下了一些血汗钱。

那时互联网行业发展还是如火如荼，前端的需求量也很大，也得益于华为公司发展越来越好，自己的华为经历很快就拿到了几个offer，选了一家初创公司，幻想着能有一番成就。

2018年底，眼看着房价越长越高，某链中介不断地灌输再不买明天就是另一个价了，错过这个村就没这个店了，也许是想有个家，也许是想着父母能到省会里一起住，拿出自己做牛马几年的积蓄加上父母一辈子辛苦攒的小十万的养老钱购买了城区里的新房，那会儿的价格已经比前两年涨了一倍多，妥妥的高位站岗，不过想着自己是刚需也不会卖，因此咬咬牙掏出了全部的积蓄怒而背上了三十年的房贷。

房子的事暂时落定了，全身心的投入到工作中，没想到老板只想骗投资人的钱，产品没弄好投资人不愿跟进了，坚持了三年，期间各种断臂求生，最终还是落了个司破人走的境地。

2020年，30岁的我第一次被动失业了，幸运的是也找到了另一半。为了尽可能节省支出，房子装修的事我们都是亲力亲为，最后花了十多万终于将房子装好了，虽然很简单但毕竟是自己在大城市里的第一套房子，那一刻，感觉十年的付出都是值得的。

背着沉重的房贷，期望能找到一份薪资稍微过得去的工作，于是在简历上优势那行写了：“可加班”。依稀记得有些HR对我进行了灵魂拷问：结婚了吗？有小孩了吗？你都30岁了还能加班吗？。我斩钉截铁地说：只要公司有需要，我定会全力以赴！

2022年，我们的孩子出世了，队友辞去了工作全心全意带小孩，而我更加努力了，毕竟有了四脚吞金兽，不得不肝。

虽然工作很努力，但成果一般，不是公司的技术担当，也不会是技术洼地。

2023年的某一天，和之前的364天一样的平淡，在座位上解Bug的我突然感觉到一阵心悸，呼吸不畅，实在不行了呼唤同事叫了120，去医院一套检查下来没发现什么大问题。医生询问是不是工作压力太大，平时加班很多？我说还好，平时也就加班到9点。医生笑了笑说你这种年轻人我见多了，都是压力大的毛病，平时工作不要久坐盯着屏幕多站起来走走。他让我回家多休息，回去后观察了几天还是偶尔会有心悸，再去了另一个医院进行检查，也是没有明确的诊断结果，只是说可能是这个问题，又可能是另一个问题。

过了1个月后，身体上的问题不见好转，我辞去了工作。

2023年末，找了一家小公司，也就是我现在的公司，工资没有涨，仔细算起来还变相下降了。

还是做的业务需求，也没有领导什么人，管好自己就行，直属上级还是个工作几年的小伙。这家公司主要的特点是不加班，技术难度不高，能做多少就是多少，前提是要报风险，领导也不会强迫加班。

就这样到了2024，神奇的是我已经很久没有心悸的感觉了，不知道是不加班还是心态转变的原因。
家里的小朋友也长大了，会说话了。我现在每天下班最温馨的的是她开着门期待我回家的那一刻，她的期盼的眼神就是我回家的动力。

公司在2024年也裁了不少人，领导也找我谈过问问我的想法，我说：我还是能胜任这份工作的。领导说：公司觉得你年级大了一些，工资虽然不是最高，但不太符合行情，你懂的。我说：我懂，可以接受适当的降薪。
就这样，我挺过了2024，然而过了一周领导走了。

2025年，我35周岁了。
现在的我已经彻底接受自己的平庸的事实了。在学生时代，从来都不出色，也不会垫底，就是那类最容易被忽略的人。在工作时代，不是技术大牛，也不是完全的水货，就是普普通通的程序员。

如果说上半生吃到了什么红利，只能说入坑了计算机这行业，技术给我带了收入，有了糊口的基础。没进股市，却被房价狠狠割了一道。

35岁的我，没有彻底躺平摆烂，也没有足够奋发进取。

35岁的我，有着24年的房贷，还好61岁的时候我还在工作，应该还能还房贷。

35岁的我，不吃海鲜不喝酒，尿酸500+。

35岁的我，人体工学椅也挽救不了腰椎间盘突出。

35岁的我，头发依然浓密，只是白发越来越多。

35岁的我，已经不打游戏，只是会看这各种小说聊以慰藉。

35岁的我，两点一线，每天挤着地铁，看众生百态。

35岁的我，早睡早起，放空自己。

35岁的我，暂时还没有领取毕业大礼包，希望今年还能苟过。

35岁的我，希望经济能够好起来，让如我一般平凡的人能够有活下去的勇气。

诸君，下一年再会~祝你平安喜乐，万事顺遂！

点赞 + 关注 + 收藏 = 学会了

🧨快过年了，该发红包了🧧

使用默认红包封面彰显不了个性，去「微信红包封面开放平台」定制一个吧。

👉 cover.weixin.qq.com 👈

我是用自己公众号注册的。没有公众号的话也可以用自己的视频号去注册一个。

登录后，点击页面右侧的“定制封面”就会跳转到创建红包封面的界面。

接下来就是填资料，上传你做好的封面图即可。

需要注意的是，「封面简称」建议填你的公众号或者视频号的名字，这样可以降低审核要求。如果你填其他内容就需要提交相关的材料「证明材料」给微信审核。

但！但！但！

现在没有免费的「微信红包封面」了，1元1个。

不懂设计又想弄个好看的红包封面怎么办？

交给AI吧😝

我已经写过好多篇「AI绘画」相关的教程，有条件（电脑配置足够高）的工友可以在自己电脑安装好 Stable Diffusion，在本地创作。

比如我这个封面（英雄联盟的金克丝）就是在自己电脑用 SD 做出来的。

电脑配置一般的工友可以用线上平台，比如哩布哩布（liblib.art/）。我这个封面就是用哩…

用哩布哩布的好处就是案例特别多，自己不懂怎么写提示词，可以先逛逛哩布哩布，看到喜欢的就选择“做同款”。也可以在“做同款”的基础上适当的修改一下提示词，按你的想法去创作。

在写本文时，哩布哩布每天会刷新300点算力值给你创作。简单来说，可以白嫖！

除了哩布哩布外，我之前还分享过数款AI绘画的平台，有需要的工友可以去看看 👉 mp.weixin.qq.com/s/nMZMfErDv…

「红包封面」微信收1元1个，那是不是可以帮别人定制封面赚点小钱呢🤔

‌金克丝的含义就是金克丝

工作两年多了，踩过了许多坑，希望大家不要踩，常常想如果我刚毕业就知道这些东西就好了，但是没有如果

一个人现在做了他多年以后认为正确的事情，他是很幸运的

永远不要期待领导主动加薪

不会还有人期待着领导某一天主动找你，小张，你来一下办公室，我有点事情给你说

到办公室后，领导：你最近表现不错，公司决定给你涨薪20%，下个月开始执行

你一脸春梦样子

大哥醒醒吧，梦里才有！

现在大部分公司不会主动给员工加薪，能不降薪就算不错了，没有领导无缘无故能给员工加薪，绝大部分都是这样的，老板和员工本身就是利益冲突的，你挣的钱多了，老板怎么买法拉利呐

所以永远不要期待领导给你主动加薪资，你需要有筹码，有底气，当然筹码与底气很重要，但是更重要的是：你要主动争取

主动权要始终掌握在自己手中

永远不要裸辞

少看网上的一句梦想仗剑走天涯，就裸辞冲到了318

裸辞只会导致你找工作的时候更加被动，和hr聊薪资的时候更加被动，徒增你的焦虑

从某种角度来说，裸辞百害无一利，除非你在这家公司非常非常非常不爽了，再裸辞，当然你有足够多的钱另当别论，但是你大概率没有，都tm干程序员了，你能有多有钱？

不要裸辞，动了辞职的念头，那就着手准备，公司的活干的说得过去就行

慢慢找，一定要找到比现在待遇好的再辞职，不要降低标准，除非一直拿不到理想的薪资，不然不要将就，怕就怕这一将就，后面都得将就了。

一开始干程序员你就得明白，你得走

这个走有两层意思

1、你得跳槽，刚开始的时候千万不能觉得安逸，不想走，不想跳槽， 懂得都懂，这行得跳槽涨薪
你可能说安逸，不累，不想走，行，你20多k，不累，不走，很好，你很聪明

怕就怕有哥们11-12k的贪图安逸不走，你说你这薪资安逸个吊毛啊，再安逸就废了

该走就走

2、你能干到40？
大部分都够呛吧，如果40还是一线大头兵程序员，嗯，，，，，，很难，

刚开始干程序员就得明白，得在短期内快速攒钱，年纪大了得谋求后路，别以为现在挣的还可以，就嘎嘎花钱，到你年纪大一点有的后悔，得攒钱留后路

要敢于要价格

这个世界从来都撑死胆大的，饿死胆小的

从某种角度来说，你值多少钱取决于你自己敢要多少钱，你说老板会觉得要10k的程序员有多大价值吗？

大胆点，敢于争取自己想要的价格才是正道

自信点，大家都那个b样

世界是一个巨大的草台班子，你以为别人牛逼的很，其实他也以为你牛逼的很，都一样，自信点，都挺傻逼的

现在这家公司的老板说过一句话，使我受益无穷

人一定要有自信，大家都那样，你以为他牛逼，其实也就那样，时刻问问自己，凭啥他行，我不行

问问自己有核心竞争力吗

大部分人都没有，程序员的竞争力无非这几种

1、名校学历

2、github 500star+项目作者

3、长期积累的博客

4、社区有知名度、影响力（掘金等）

5、项目有亮点、难度

6、大厂实习工作经历

7、竞赛奖牌

没事多更新简历，多投一下，知道自己在市场上还能混的下去不

踏踏实实卷一段时间

很多人都在说不要卷。开玩笑，市场资源有限，不卷怎么行

但是不要焦虑，踏踏实实的，认认真真的卷一段时间，自己有了提升后，在谋求发展。

自身没有价值之前，说再多都是瞎掰扯，没屌用

俗称，耐得住寂寞，踏踏实实的做学问，这一点我得深刻反思

以上纯属瞎扯，如有不赞同，那就是你对

前言

最近在中国电信app上销户一张中国电信山西区的电话卡，一打开销户界面我就惊了

点开一看，写入的本地变量、cookie一览无遗。

查看数据

存在采集用户手机型号、来源等数据行为产生的cookie

最引人注目的就是

zhizhendata2015jssdkcross={

  "distinct_id": "MTkxOTZhYzk3YTAyMDItMDgxMjMwYmRlOTFhOWU4LTQ3NzE2ZTBmLTM2NzkyOC0xOTE5NmFjOTdhMWE5NQ==",

  "first_id": "",

  "props": {

    "$latest_traffic_source_type": "直接流量",

    "$latest_search_keyword": "未取到值_直接打开",

    "$latest_referrer": "",

    "_latest_utm_scha": "utm_ch-010001002009.utm_sch-hg_sy_pdkp-2-125971000001-10519100001.utm_af-1000000037.utm_as-0043300037.utm_sd1-default",

    "_latest_utm_sd1": "app-充流量-本地推荐",

    "_latest_utm_sd2": "",

    "_latest_shopid": "189.WAP.llrb-2079",

    "_latest_utm_ch": "hg_app",

    "_latest_utm_sch": "hg_sy_pdkp_kw02",

    "_latest_utm_as": "hg_19y15GBwxllb"

  },

  "login_type": "",

  "utms": {

    "shopid": "189.WAP.llrb-2079"

  },

  "$device_id": "19196ac97a0202-081230bde91a9e8-47716e0f-367928-19196ac97a1a95"

}

​

简单解释一下各种参数

很显然 ，这是一个用户行为追踪工具，记录你从那个平台点进来（广告投放）、你手机是啥样的（用户画像）、你搜索了什么。可能还会有你住哪里之类的数据

• 博主一下懵了，之前常听人说大数据时代没有什么秘密，还不以为然。今日一遇还真是阿

登录状态与服务取消cookie

SXH5_CANCEL_SERVICE_LOGINSTATUS=SXH5_CANCEL_SERVICE_a2d95a5a764d4744b1eb1e468b583287

SXH5_CANCEL_SERVICE_LOGINTYPE=fmknjikneolbnhclejikfnbggkmnookc

​

• 这两没什么好说的，看不出来啥

查看持久化数据

userInfo={"type":"object","data":{"userName":"","userId":"","userAddress":"","facePhoto":"","frontImage":"","phone":""}}

​

vConsole_switch_y=335

​

loginType=sjhocr

​

xhAccount={"type":"object","data":{"xhzkAccount":"15383404397","xhfkPhone":"","xhkdAccount":""}}

​

authorPlate=xh

​

vConsole_switch_x=92

​

orderId=SXSMRZH5XH202501042248308427503

​

__DC_STAT_UUID=17360018747207051970

• 这段数据也没啥好看的，有一些手机号、订单编号、和证明是微信小程序的__DC_STAT_UUID 项

• 更多就不继续探索了，这里的填写号码获取验证码控制台正常输出。。。。

问题可能产生原因

• 首先，得知道中国电信app现在的模式是怎样的。


• 据博主个人观察，电信app页面虽然都一样，但每个地区各自为营。如果你使用福州的电信手机卡登录，那么是跳转到福州电信负责的页面，如下图

• 所以本次app出现问题，是山西电信没有处理好app端

• 山西电信微信小程序是没什么问题的，而他的app没有做好对接，要么版本不一样……

吐槽

• 我有个朋友之前注销电信流量卡时，被告知要去号码归属地才能销户。。这归属地离他十万八千里，过去就为了销卡显然不划算。于是他去工信部12300（微信公众号 现改名为 电信用户投诉 ）投诉才成功线上销卡。


• 电信现在按省来处理业务，如果你电信卡丢了且忘记卡号、归属地，那只能通过线上投诉才能得知自己卡号、归属地，不然各省是无权查别省号码。


• 我线上销户时，客服A要求先交40元月租才能销户，但这张卡我从未使用，为何会产生月租？联系客服B后，他让我提供身-份-证照片、委托书及手持委托书照片，最终未交钱完成注销。但不同客服的说法不一，且身份信息完全暴露给客服，让人不安。

前言

对于一个sass项目，或者一个中后台项目来说，导出excel表格应该是家常便饭，本来最简单的实现方式是后端去做表格，前端请求接口拿到一个地址下载就行了。但是，因为我们这个项目之前就是前端做表格，加上这个表格相对比较复杂需要合并行和列，后端不会加上又有别的项目堆积没有时间研究，所以就是后端提供数据，前端来做表格。

那里复杂

可以看到，有二级标题，还有行的合并，如果仅仅是二级标题，倒是可以直接写死，但是行的合并是根据数据去计算该合并那些行的，再比如后面如果有三级标题，四级标题的需求呢？那不是又寄了，所以我选择将这个封装成一个方法，当然也是在网上找大佬们的解决方案实现的，东抄抄西抄抄就实现了我想要的功能。

传参

既然封装成一个方法，最好就是传入数据，表头，文件名后，就能自动下载一个excel表格，这才是封装的意义。代码并不是人，只能根据你设定好的路去走，所以数据的结构就显得很重要了，这个函数想要接收什么样的数据结构，要怎么去处理这些数据结构。

表头 header

表头接收一个数组，每一项有title，prop，children（如果有子级标题），title即为列名，prop为数据属性绑定名，children为子标题。

const header = [

    {

        'title': '券商(轉出方)',

        'prop': 'orgName',

        'width': '100px'

    },

    {

        'title': '存入股票',

         'children': [

                  {

                    'title': '存入股票名稱/代碼',

                    'prop': 'stockNameCode',

                    'width': '100'

                  },

                  {

                    'title': '股票數量(股)',

                    'prop': 'stockNum',

                     'width': '100'

                  },

                  {

                    'title': '成本價(HKD)',

                    'prop': 'stockPrice',

                    'width': '100'

                  }

           ]

​

    }

]

数据 dataSource

数据也是接收一个数组，但是这里需要做一个处理，因为每一项的children是一个数组，可能会有多个值，换句话来说，下面只有两条数据，分别是id为1和id为2，但实际上在excel表格中需要显示3行，所以需要处理一下。

const dataSource = [

    {

       id：1，

       orgName：‘a’,

       children:[

            {

                stockNameCode:'A1',

                stockNum:'A2',

                stockPrice:'A3'

            },

            {

                stockNameCode:'B1',

                stockNum:'B2',

                stockPrice:'B3'

            },

        ]

    },

    {

       id：2，

       orgName：'b',

       children:[

            {

                stockNameCode:'A1',

                stockNum:'A2',

                stockPrice:'A3'

            }

        ]   

    },

]

处理后的数据（也就是将children解构了，变成3条）

[

    {

       id：1，

       orgName：‘a’,

       stockNameCode:'A1',

       stockNum:'A2',

       stockPrice:'A3'

    },

    {    

       stockNameCode:'B1',

       stockNum:'B2',

       stockPrice:'B3'

​

    },

    {

       id：2，

       orgName：‘b’,

       stockNameCode:'A1',

       stockNum:'A2',

       stockPrice:'A3'   

    }

]

sheetjs前置知识

对于我们前端生成excel，基本都是使用基于sheetjs封装的第三包，最经常使用的是xlsx，我这里因为对表格做了一些样式所以使用的xlsx-js-style，xlsx-js-style是提供了很多样式的，比如字体，居中，填充，具体大家可以去看官网。因为可能有些人是没做过excel的需求的，所以这里简单说一下生成excel的一种主流程。

import XLSX from 'xlsx-js-style'

// 需要一个二维数组

var aoa = [

    ["S", "h", "e", "e", "t", "J", "S"],

    [  1,   2,    ,    ,   5,   6,   7],

    [  2,   3,    ,    ,   6,   7,   8],

    [  3,   4,    ,    ,   7,   8,   9],

    [  4,   5,   6,   7,   8,   9,   0]

];

// 将二维数组转成工作表

var ws = XLSX.utils.aoa_to_sheet(aoa);

// 创建一个工作簿

var wb = XLSX.utils.book_new();

// 将工作表添加到工作簿

XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

// 生成excel

XLSX.writeFile(wb, "SheetJSExportAOA.xlsx");

导出的表格，这是官网的demo: xlsx.nodejs.cn/docs/api/ut…

所以封装这个函数，主要流程也是和这个一样的，只不过我们要做的时候，将传入的参数处理成我们想要的二维数组，以及在这基础做一些合并，样式的操作，下面介绍了一些属性的作用，具体大家还是需要去官网查看的。

ws['!merges']

ws['!merges'] 是工作表对象 ws 的一个属性，用于存储工作表中的合并单元格信息，该属性的值是一个数组，其中每个元素都是一个对象，描述了一个合并单元格区域

// s是start e是end合并单元格区域的起始位置和结束位置，

// r是行 c是列

ws['!merges'] = [

  { s: { r: startRow, c: startCol }, e: { r: endRow, c: endCol } }

];

比如{ s: { r: 0, c: 0 }, e: { r: 0, c: 1 } } 表示合并从 A1（第 1 行第 1 列）到 B1（第 1 行第 2 列）的单元格。

ws['!ref']

ws['!ref'] 是工作表对象 ws 的一个属性，用于表示该工作表中数据的范围引用。这个范围引用是一个字符串，遵循 Excel 的单元格范围表示法，格式通常为 A1:B10，其中 A1 是范围的左上角单元格，B10 是范围的右下角单元格

ws['!cols']

ws['!cols'] 是工作表对象 ws 的一个属性，它用于存储工作表中列的相关信息，比如列的宽度、隐藏状态等

主函数

有了这些前置知识，相信你肯定是能看懂这个主函数的，我们先从主线上来看，不去研究这个函数做了什么，只需要看他得到了什么，某一个函数的细节我们后面会有介绍。

header 表头

dataSource 数据

fileName 文件名

import XLSX from 'xlsx-js-style'

function exportExcel (header, dataSource, fileName) {

  // 根据表头数组去计算行数和列数

  const {row: ROW, col: COL} = excelRoWCol(header)

  const aoa = []

  const mergeArr = []

  

  // 根据表头初始化aoa 二维数组

  for (let rowNum = 0; rowNum < ROW; rowNum++) {

    aoa[rowNum] = []

    for (let colNum = 0; colNum < COL; colNum++) {

      aoa[rowNum][colNum] = ''

    }

  }

    

  // 根据表头以及数据生成，去合并列和行，会处理mergeArr

  mergeArrFn(mergeArr, header, aoa, dataSource, ROW, COL)

    

  // 最后往aoa中 添加表格数据

  aoa.push(...jsonDataToArray(header, dataSource))

​

  const ws = XLSX.utils.aoa_to_sheet(aoa)

  // 添加样式

  ExcelStyle(ws, header， ROW)

  // 合并

  ws['!merges'] = mergeArr

  // 创建一个工作簿

  const wb = XLSX.utils.book_new()

  // // 将工作表添加到工作簿

  XLSX.utils.book_append_sheet(wb, ws, 'sheet1')

  // 生成excel

  XLSX.writeFile(wb, fileName + '.xlsx')

}

export default exportExcel

相对前面那个下载excel的demo来说，无非就多了根据传入的header和dataSource去初始化生成aoa以及mergeArr，aoa就是前面demo的二维数组，mergeArr表示我们需要合并的单元格，也就是前面提到的ws['!merges']，我们得到这个mergeArr也是为了赋值给它，还有就是给它添加样式了。

excelRoWCol

这个函数是根据表头去确认这个excel的表头有多少行，有多少列，因为我们传入的column，有children，children里可能还有chidren，是一个树的结构，所以我们想要知道有多少行和多少列，无非就是去求这颗树的深度和宽度，所以就是两个算法题了。

// 深度递归函数

function treeDeep (root) {

  if (root) {

    if (root.children && root.children.length !== 0) {

      let maxChildrenLen = 0

      for (const child of root.children) {

        maxChildrenLen = Math.max(maxChildrenLen, treeDeep(child))

      }

      return 1 + maxChildrenLen

    } else {

      return 1

    }

  } else {

    return 0

  }

}

// 宽度递归函数

function treeWidth (root) {

  if (!root) return 0

  if (!root.children || root.children.length === 0) return 1

  let width = 0

  for (const child of root.children) {

    width += treeWidth(child)

  }

  return width

}

​

function excelRoWCol(header) {

  let row = 0

  let col = 0

  for (const item of header) {

    row = Math.max(treeDeep(item), row)

    col += treeWidth(item)

  }

  return {

    row,

    col

  }

}

mergeArrFn

mergeArr 这个函数就是在修改这个值

header 表头

aoa 二维数组数

dataSource 数据

headerRowLen 表头行数

headerColLen 表头列数

这个函数有两个作用，第一就是将我们初始化的二维数组，用header进行赋值。第二，就是根据表头以及数据去生成mergeArr（赋值给ws['!merges']）。首先，对于header去遍历每一个表头去生成当前这一列的合并信息。假设一个只有二级表头的表头，如果当前这一列有二级标题，便根据子标题去合并主标题那一行所有的列，如果当前这一列没有子标题，便将这一列的第一行和第二行都和合并了。三级表头，四五级表头也是这样的思路。

function mergeArrFn(mergeArr, header, aoa, dataSource, headerRowLen) {

  // 根据header去生成一部分的 mergeArr

  let temCol = 0

  for (const item of header) {

    generateExcelColumn(aoa, 0, temCol, item, mergeArr)

    temCol += treeWidth(item)

  }

​

  // 根据dataSource去生成一部分的 mergeArr

  let rowStartIndex = headerRowLen

  for (const item of dataSource) {

    generateExcelRow(rowStartIndex, item, mergeArr, header)

    rowStartIndex += treeWidth(item)

  }

}

generateExcelColumn

这个函数简单来说就是前面所说的，假设一个只有二级表头的表头，如果当前这一列有二级标题，便根据子标题去合并主标题那一行所有的列，如果当前这一列没有子标题，便将这一列的第一行合第二行都和合并了。三级表头，四五级表头也是这样的思路。具体还是得自己理解代码，都有写注释。

aoa 就是那个aoa

row 就是行数

col 就是列数

curHeader 就是当前那一列

mergeArr 就是那个mergeArr

function generateExcelColumn(aoa, row, col, curHeader, mergeArr) {

  // 当前列的宽度

  const curHeaderWidth = treeWidth(curHeader)

  // 赋值

  aoa[row][col] = curHeader.title

  // 如果有子标题也就是说当前这一行就需要合并了

  if (curHeader.children) {

    // 举个例子，假设有一个表头两行两列，需要把他变成第一行只有一列，第二行依然是两列

    // 就需要变成 {s : { r:0,c:0 }, e : { r:0, c: 0+2-1 }}

    mergeArr.push({s: {r: row, c: col}, e: {r: row, c: col + curHeaderWidth - 1}})

​

    // 如果子标题还有子标题，就是递归了，要注意更新列数就行

    let tempCol = col

    for (const child of curHeader.children) {

      generateExcelColumn(aoa, row + 1, tempCol, child, mergeArr)

      tempCol += treeWidth(child)

    }

  } else {

    // 这里的逻辑就是 如果没有子标题，就正常显示

    // 举个例子，假设整个表头是有三级表头，三级表头也就是有3行，如果第5列是没有任何子级表头的那应该是

    // {s:{r:0,c:5}，e:{r:2,c:5}}

    if (row !== aoa.length - 1) {

      mergeArr.push({s: {r: row, c: col}, e: {r: aoa.length - 1, c: col}})

    }

  }

}

generateExcelRow

这个函数是根据datasource去生成mergeArr，从mergeArrFn看我们去遍历datasource的每一项，在外层维护rowStartIndex这个变量，我们假设某一项数据的children是一个长度为3的数组，那么通过treeWidth方法（寻找树的宽度）得到的数据就是3，也就是说这一项数据应该占表格3行，但是并不是所有列都是需要3行数据的，所以我们需要去获取到一个不用合并的列prop数组，我们通过这项数据的children的key值去获取，所以这就需要对数据格式有要求了！然后再通过header和getgetLeafProp去获取所有prop，最后遍历判断是否需要去合并行。合并的逻辑是这样的，还是以那个children是一个长度为3的数组为例，如果要合并肯定是3行合并成一行。以第一列为例子，就是 { s : { r : 0, c : 0 }, e : { r : 2 , c : 0 }}，下面去遍历props时，下标刚好就是当前的列数。

rowStartIndex 就是从表头的下一行开始

curitem 就是遍历dataSource当前的行

mergeArr 就是mergeArr

header 表头数组

// 合并行

function generateExcelRow(rowStartIndex, curitem, mergeArr, header) {

  // 当前行的高度

  const curHeaderWidth = treeWidth(curitem)

  // 不需要合并的列prop

  const noMerge = (curitem.children && curitem.children.length > 0) ? Object.keys(curitem.children[0]) : []

  // 找到所有prop

  const props = []

  for (const item of header) {

    props.push(...getLeafProp(item))

  }

  // 遍历props

  props.forEach((item, index) => {

    // 不是子元素就要合并

    if (!noMerge.includes(item)) {

      mergeArr.push({s: {r: rowStartIndex, c: index}, e: {r: rowStartIndex + curHeaderWidth - 1, c: index}})

    }

  })

}

jsonDataToArray

这个函数就是为了生成一个二维数组，因为有子标题，所以可能需要递归。逻辑上也比较简单，假设表头是header，数据源是data，header经过处理后变成了props数组，而data根据props处理后就得到了我们想要的数据。

const header = [

    {

        title: 'a'

        prop: 'aprop'

    },

    {

        title: 'b',

        children:[

            {

                title:'c',

                prop:'cprop'

            },

            {

                title:'d',

                prop:'dprop'

            }

        ]

    },

    {

        title:'e',

        prop:'eprop'

    }

]

const data = [

    {

        aprop:'a1',

        b：{

            cprop:'c1',

            dprop:'d1'

        },

        e:'e1'

    },

    {

        aprop:'a2',

        b：{

            cprop:'c2',

            dprop:'d2'

        },

        eprop:'e2'

    },

]

// 得到的porps

['aprop','cprop','dprop','eprop']

​

// 最后得到的是这个

[

    ['a1','c1','d1','e1']

    ['a2','c2','d2','e2']

]

getLeafProp其实就是去找所有叶子节点的算法题，recursiveChildrenData就是根据我们得到的props去从data中拿到对应的值，然后如果遇到children就递归去拿，要注意的是就是children要第一条是不要的，children第一条是和这一项数据是一样的。

function jsonDataToArray (header, data) {

  const props = []

  for (const item of header) {

    props.push(...getLeafProp(item))

  }

  return recursiveChildrenData(props, data)

}

// 获取叶子节点所有的prop，也就是excel表格每一列的prop

function getLeafProp(root) {

  const result = []

  if (root.children) {

    for (const child of root.children) {

      result.push(...getLeafProp(child))

    }

  } else {

    result.push(root.prop)

  }

  return result

}

// 从数据中获取对应porps的值

function recursiveChildrenData(props, data) {

  const result = []

  for (const rowData of data) {

    const row = []

    for (const index of props) {

      row.push(rowData[index])

    }

    result.push(row)

    if (rowData.children) {

      result.push(...recursiveChildrenData(props, rowData.children).slice(1))

    }

  }

  return result

}

ExcelStyle

这个方法倒是简单，这里其实还可以将表头以及单元格样式抽离出去成为主函数exportExcel的配置项。这个函数干了啥呢，首先就是从columns中拿到每一列的宽度，处理成 ws['!cols']想要的格式，ws['!cols']这个就是sheetJS的配置表格列宽的一个属性。然后就是一些单元格样式，具体去看xslx-js-style的官网。decode_range和encode_cell这两个方法有简单介绍，具体大家去看sheetJS官网吧。

ws 就是 那个表格数据实例

columns 是表头数组

ROW 是表头有多少行

XLSX.utils.decode_range: 用于解析 Excel 工作表中的范围字符串并将其转换为结构化的对象

XLSX.utils.encode_cell：是将一个包含行号和列号的对象编码为 Excel 中常见的单元格地址表示形式

function ExcelStyle (ws, header, ROW) {

  // 列宽

  const widthes = []

  for (const item of header) {

    widthes.push(...getLeafwidth(item))

  }

  // 处理成 ws['!cols'] 想要的格式

  const wsCOLS = widthes.map(item => {

    return {

      wpx: item || 100

    }

  })

  ws['!cols'] = wsCOLS

  // 定义所需的单元格格式

  const cellStyle = {

    font: { name: '宋体', sz: 11, color: { auto: 1 } },

    // 单元格对齐方式

    alignment: {

      // / 自动换行

      wrapText: 1,

      // 水平居中

      horizontal: 'center',

      // 垂直居中

      vertical: 'center'

    }

  }

  // 定义表头

  const headerStyle = {

    border: {

      top: { style: 'thin', color: { rgb: '000000' } },

      left: { style: 'thin', color: { rgb: '000000' } },

      bottom: { style: 'thin', color: { rgb: '000000' } },

      right: { style: 'thin', color: { rgb: '000000' } }

    },

    fill: {

      patternType: 'solid',

      fgColor: { theme: 3, 'tint': 0.3999755851924192, rgb: 'DDD9C4' },

      bgColor: { theme: 7, 'tint': 0.3999755851924192, rgb: '8064A2' }

    }

  }

  // 添加样式

  const range = XLSX.utils.decode_range(ws['!ref'])

  for (let row = range.s.r; row <= range.e.r; row++) {

    for (let col = range.s.c; col <= range.e.c; col++) {

      // 找到属性名

      const cellAddress = XLSX.utils.encode_cell({ c: col, r: row })

      if (ws[cellAddress]) {

        // 前几行是表头，添加表头样式

        if (row < ROW) {

          ws[cellAddress].s = headerStyle

        }

        ws[cellAddress].s = {

          ...ws[cellAddress].s,

          ...cellStyle

        }

      }

    }

  }

}

​

// 和getLeafProp类似，只是找的字段不一样

function getLeafwidth(root) {

  const result = []

  if (root.children) {

    for (const child of root.children) {

      result.push(...getLeafwidth(child))

    }

  } else {

    result.push(root.width)

  }

  return result

}

总结

其实这次也是我第一次自己前端导出excel的需求，之前基本都是后端干的，给个地址直接模拟a标签下载就行了。本来呢，我看项目中也是有封装导出excel的方法的，但是有点晦涩难懂啊，看了下导出的效果，也并不能实现需求。我一直觉得在原有基础的去添加一些相似的功能逻辑，真不如直接重新封装一个方法。然后我测试过了将所有代码赋值到同一个js文件，正常引入传对应的数据结构是能跑通的。其实是有点问题的，就是在根据数据行合并的时候，如果是children里面还children，也就是也要递归，我有点不好拿捏判断递归的时机，加上本来对递归就是一知半解，搞得有点混乱，大家感兴趣的可以试试。

我二姨既养猪也养牛，收益是赔的时候更多。

如果你有投资猪肉股经验，一定知道猪周期。要是在猪肉下行周期中囤猪，那就等着赔吧，赔多少而已。

我年轻的时候就想，为啥二姨自己养的猪，自己却不能决定卖多少价格？多年过去这个问题总算是有点眉目。

本质是二姨在利用市场销售自己养的猪，而市场有其自身的规则，单一家庭养猪户是没有办法决定市场猪价的。

一 市场

市场准确的说是市场经济，自我国宋代就已诞生。

然而现代市场经济理论的奠基人是一位西方经济学家——亚当·斯密，就是写了《国富论》的作者。

在《国富论》中其详细阐述了自由市场经济的原理。他提出了“看不见的手”理论，认为在自由竞争的市场中，每个人都在追求自己的利益，这种追求会像一只“看不见的手”一样，引导市场资源向最有利于社会的方向分配。

在姚洋的《经济学的意义》中提到福利经济学第一定律：如果由市场自己去生产和交换，最后经济总会达到帕累托最优。提到福利经济学第二定律：任何的帕累托最优状态，通过调整初始的禀赋分配，最后都能在市场机制下实现。帕累托最优指的是不可能在不牺牲任何人利益的情况下改善其他人的福利的状态。

所以市场经济被认为是配置资源最好的方式，至少目前还没找到比她更好的方式。

曾经一位伟大的国人说，他所做的事情不过是对我们的国家做了一次市场化改革。

现在我们建设的是具有中国特色的市场经济。

二 边际与均衡价格

边际是一种思维方式，就是永远看市场中最后一个人的行为或者最后一个产品的情况。比如在劳动力市场上，工资不是市场中的平均水平的劳动者决定的，而是最后一个参加劳动的人决定的，要看给他多高的工资他才愿意去做这份工作，同时也要看他有多大的贡献工厂才雇用他，两者相等的时候才是市场里的均衡工资。

边际能够解释一些实际问题。比如高速费的收取，如果不收取高速费，会导致高速拥堵，收取高速费导致对高速使用价格敏感者退出，所以说高速价格不是由第一个人决定的，而是最后一些人决定的。

边际也是新商品上市后价格的演化，直到形成均衡价格。就生猪市场而言，其是成熟市场，均衡价格已经形成。在均衡价格下，价格决定于供求关系，决定于价值链，决定于生猪出厂价格和猪肉消费价格。

我的老家在河北，我从我妈那里了解到我们老家农村的猪肉价格是10/斤元上下；而我在北京小区超市看到的是13/斤元上下。这个价格我认为肯定不是大家口袋里没钱造成的。

我又看了下A股几家上规模的生猪养殖集团：牧原股份、温氏股份、正邦科技。三者在2023年都是大幅亏损，其中正邦科技更是st了。而2020年牧原股份大幅度盈利200多个亿，我还查到2020年河北9月份的平均生猪价格，为33.73元/公斤，这都赶上今年的猪肉价了。

这样的数据结果表明今年的猪肉或者生猪价格，主要是供给导致，是生猪太多，生猪养殖太卷，不得不低价销售导致。

总结一下，生猪养殖市场均衡价格由供求关系决定，供求关系就像是天平，只有其上的砝码发生较大变化时才会影响平衡。就生猪市场来说，供求关系可以被牧原股份这种千万生猪体量的养殖集团影响，可以被一场范围特别大的猪瘟影响。

单一家庭养猪户因为生猪体量非常非常小，影响力微乎其微，不可能影响供求关系，也就不可能决定生猪价格，这也就是我二姨不能决定卖猪价格的原因。

三 周期

这部分属于题外话。不仅猪市场存在周期；文明也有周期，表现为王朝的兴衰更替；经济本身也存在周期，比如加息周期和降息周期；现在更有万物皆周期一说。

一种解释是，周期的产生源于人的贪婪。有一句话著名的话：人们从历史中吸取的教训就是从不吸取教训。

文明周期源于王朝的后期统治者普遍开始奢侈，导致统治力衰弱，最终王朝灭亡，比如烽火戏诸侯。

经济周期源于债务，也是贪婪。债务越借越大，越借越不想还，就比如现在的美利坚，你看他的国债多大了，一年利息都1w多亿。

或许周期本源于人性，源于这个世界本身，且看那天地有四季，有日月更替。

尾声

现在二姨已经不养猪了。如果还养猪，我会建议要当有大猪场倒闭时再进入，这个时候市场上能卖猪的少了，而想买猪的没变，均衡价格该起来了。

抄袭是无法避免的，担心被抄袭是很正常的。

大部分情况下，我们要尽量将产品 藏 起来。

其实所谓的 藏，就是 尽量让产品被用户看到，尽量让产品不被同行看到。

那么这个时候呢，我们需要用不为人所知的账号，甚至可以伪装一些个人信息，去产品用户所在的平台进行推广。

藏 得好，推广 得好，那这个基本就成了，闷声赚钱吧。

如果没藏住怎么办呢？那就分为 及时雨 和 马后炮 了。

所谓 及时雨，就是不要把鸡蛋放在一个篮子里，狡兔三窟，不要在一根树上吊死，等等。

做多个产品，产生多份收益，把风险分摊。

那么 马后炮 呢，就是看产品的 护城河 有多深了。

也就是说，在产品被同行发现之后，你在这个产品的方向上，跑马圈地，扩展了多大的领土。

具体点来说的话就是，用户交流群有多少，产品社区，产品粉丝有多少。

其中最直观的就是用户交流群，这是你可以用光速传达给用户的最方便，最直接的一个方式。

你可以在群里发挥包括宣传，打压，贬低，超越等方式，来让自己的产品表现得技高一筹，来持续获得用户的青睐。

这是其他竞品短期无法达到的，也是我们自己产品的先发优势和使用惯性。

当然，最终呢，肯定要人无我有，人有我优，才能真正立于不败之地的。

这是适应于大部分产品的策略，记住，是大部分，不是所有。

那么还有另外一部分情况，把产品 藏 住反而不好。

比如你的产品本来就是给同行用的，还藏着掖着怎么行，同行知道得越多越好。

举个例子，我的 VSCode 编辑器插件，fnMap (函数地图)，目前已经有 1 万多次安装量，都是我同行，我巴不得知道的人更多一点，安装量越多越好。

问题来了，你不怕同行抄袭吗？

不怕。

为什么呢？这是一个概率问题。

抄袭你作品的人，一定是看过或者用过你作品的人。

这些人里面，对独立开发，对 VSCode 插件开发感兴趣的，不多。

刚兴趣的，有能力开发的，又要少一点。

有能力开发的，有时间，有精力，能坚持开发出来的，又要少一大部分。

能开发出来，能推广运营，能卖出去，能让人付费的，又再少一点。

盈利了，能在微薄的产品收入下，长期维护，更新，完善的人呢，还要再少一点。

总而言之呢，产品的抄袭不是一个 0 到 1 的过程就完事了，它是一个 0-1-100 的过程。

有 99%的人会结束于 99%的进度之前，你的爱好，你的兴趣，你的坚持，就是你最好的防具。

这就好像，你看别人做一个东西赚钱，如果你也抄一个，很有可能别人依旧在赚钱，你就是赚不到钱。

所以，抄袭问题可以担心，但不要过渡担心，用心做产品，就能产生抄袭屏障。

最后呢，产品的公开构建，其实也有好处，可以在项目从开发，到上线，到推广，到运营的过程中持续曝光。

有曝光就有流量，有流量就能产生成交。

很多时候，流量问题，远大于被抄袭的问题。

所以，不用太过于担心产品被抄袭，反而要持续地，不断地，换着花样地，去向全世界分享你的产品。

犹抱琵琶半遮面，千呼万唤始出来，pnpm v10 终于正式发布了。

众所周知，笔者有关注行业技术最新进展的爱好，这次的 pnpm v10 版本，也已经跟踪了好几个月了。

而这次，v10 正式版终于发布了。

以上是笔者整理的 pnpm v10 发布过程，从 草案，到 测试版，到 候选版，再到最后的 正式版，可谓是花了不少功夫啊。

也从侧面说明了，pnpm 团队对这次 v10 版本的重视程度，必然是有大事发生，那么话不多说，我们看看本次的更新内容吧。

依赖项的生命周期脚本不会在安装期间执行

这是一个重要变化，依赖包的 生命周期脚本 不会自动执行了。

那么问题来了，可能有些读者还不知道什么是 生命周期脚本？生命周期脚本 英文名叫做 Lifecycle scripts。

包括以下几种：

从 pnpnm v10 开始，这些依赖包中的生命周期脚本都不会自动执行了，这样可以进一步提高安全性。

官方也发起了一个投票：pnpm 可以在安装期间阻止依赖项的生命周期脚本。但这是一个可选功能。我们应该默认阻止它们吗？

最终赞成禁用生命周期脚本的占大多数。

那么我们要让某些依赖包的脚本可以自动执行的话，应怎么做呢？

{

    "pnpm": {

        "onlyBuiltDependencies": ["fsevents"]

    }

}

如上示例，pnpm 提供了一个 onlyBuiltDependencies 参数，所有可以自动执行生命周期脚本的包，都要手动写到里面。

这么一来呢，确实提高了安全性，但是对于开发者来说，也提高了不少复杂性。

因为，可能有些依赖包，或者说依赖包的依赖包，需要自动执行脚本才能生效。

如果采用手动模式，那就很可能很难找到，到底要执行哪个包的生命周期脚本，提高了安全性的同时，也降低了开发的便捷性。

pnpm link 行为更新

这个可能有很多人还没用过，主要用途有 2 个：

那么这次的主要变化有 2 个。

总而言之，就是能全局的就全局，把影响范围扩大化，免得抠抠搜搜的。

可能有读者不知道 override 是啥，这里也科普一下：

假设项目中有两个依赖 A 和 B，它们都依赖于同一个包 lodash，但是需要使用不同的版本。

那么可以使用 overrides 来指定使用 lodash 的特定版本：

{

    "dependencies": {

        "A": "^1.0.0",

        "B": "^2.0.0"

    },

    "pnpm": {

        "overrides": {

            "lodash": "^4.17.21"

        }

    }

}

这样就可以确保项目中使用的 lodash 版本是 4.17.21，而不管 A 和 B 各自需要的版本是什么。

如果某个依赖包存在问题，也可以使用 overrides 来替换它：

{

    "dependencies": {

        "problem-package": "^1.0.0"

    },

    "pnpm": {

        "overrides": {

            "problem-package": "my-forked-package@^1.0.1"

        }

    }

}

在这个例子中，我们将 problem-package 替换为 my-forked-package 的 1.0.1 版本。

可能我写的文章稍微啰嗦了点，主要是考虑到读者可能存在不同的经验水平，所以一些概念也扩展科普一下。

使用 SHA256 进行安全哈希处理

各种哈希算法已更新为 SHA256，以增强安全性和一致性：

• node_modules/.pnpm 内的长路径现在使用 SHA256 进行哈希处理。


• 锁定文件中的长对等依赖关系哈希现在使用 SHA256 而不是 MD5。


• pnpm-lock.yaml 的 packageExtensionsChecksum 字段中存储的哈希现在为 SHA256。


• 副作用缓存密钥现在使用 SHA256。


• 锁定文件中的 pnpmfile 校验和现在使用 SHA256。

配置更新

从现在开始，NODE_ENV=production 也会安装所有依赖，包括开发依赖，这对于像我这样的强迫症来说，有点难以接受，没有用到的依赖我为啥要安装？

查看官方文档，可以通过 pnpm add --prod 来只安装 dependencies 依赖。

全局存储更新

其他重大变化

• # 字符现在在 node_modules/.pnpm 内的目录名称中被转义。


• 运行 pnpm add --global pnpm 或 pnpm add --global @pnpm/exe 现在会失败并出现错误消息，指导您改用 pnpm 自我更新。


• 通过 URL 添加的依赖项现在在锁文件中记录最终解析的 URL，确保完全捕获任何重定向。


• pnpm deploy 命令现在仅适用于具有 inject-workspace-packages=true 的工作区。引入此限制是为了让我们能够使用工作区锁定文件为已部署的项目创建适当的锁定文件。


• 删除了从 lockfile v6 到 v9 的转换。如果您需要 v6 到 v9 的转换，请使用 pnpm CLI v9。


• pnpm test 现在将 test 关键字后的所有参数直接传递给底层脚本。这与 pnpm run test 的行为一致。以前您需要使用 -- 前缀。


• pnpm deploy 现在尝试从共享锁文件创建专用锁文件以进行部署。如果没有共享锁文件或 force-legacy-deploy 设置为 true，它将回退到没有锁文件的部署。

次要变化

添加了对一种名为 configurational dependencie 的新依赖项类型的支持

这些依赖项在所有其他类型的依赖项之前安装 (在 dependencies、devDependencies、optionalDependencies 之前)。

配置依赖项不能具有其自身或生命周期脚本的依赖项，应使用精确版本和完整性校验和添加它们。

示例：

{

    "pnpm": {

        "configDependencies": {

            "my-configs": "1.0.0+sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw=="

        }

    }

}

新的 verify-deps-before-run 设置

此设置控制 pnpm 在运行脚本之前如何检查 node_modules，有以下值：

• install：如果 node_modules 已过时，则自动运行 pnpm install。


• warn：如果 node_modules 已过时，则打印警告。


• prompt：如果 node_modules 已过时，则提示用户确认运行 pnpm install。


• error：如果 node_modules 已过时，则抛出错误。


• false：禁用依赖性检查。

新的 inject-workspace-packages 设置允许对所有本地工作区依赖项进行硬链接，而不是对其进行符号链接。

以前，这可以使用 dependencyMeta[].injected 来实现，现在仍然受支持。

更快的重复安装

在重复安装时，pnpm 会执行快速检查以确保 node_modules 是最新的。

pnpm add 与默认工作区目录集成

添加依赖项时，pnpm add 会检查默认工作区目录。

如果依赖项和版本要求与目录匹配，pnpm add 将使用 catalog: 协议。

如果没有指定版本，它将匹配目录的版本。

如果不匹配，它将恢复为标准行为。

pnpm dlx 解析调整

pnpm dlx 现在将软件包解析为其确切版本，并将这些确切版本用作缓存键。

这可确保 pnpm dlx 始终安装最新请求的软件包。

node_modules 验证

某些命令没有 node_modules 验证，不应修改 node_modules 的命令 (例如 pnpm install --lockfile-only) 不再验证或清除 node_modules。

以上就是本次 pnpm v10 的更新内容，感谢阅读，欢迎点赞，评论和转发。

二维水动力 HydroDynamic2D

二维水动力介绍

二维水动力模型对象 HydroDynamic2D，基于真实数据驱动生成水动力模型（根据不同时刻下每个网格的流向、流速、高程、水位）

二维水动力模型考虑了水流在平面上的变化，适用于河道弯曲、水流方向多变的情况。这种模型能够更准确地反映水流在平面上的分布情况，适用于需要精确模拟水流动态的场景，如城市排水系统设计、洪水模拟。二维模型的优势在于能够提供更详细的水流信息，但计算复杂度较高，需要更多的计算资源和时间。

本篇文章主要介绍在DTS 数字孪生引擎中实现二维水动力效果。在DTS SDK中开放了 HydroDynamic2D对象 添加二维水动力，并可以通过多种数据源进行添加，如 Bin、Sdb、Shp、Tif 的方式。

本文章主要介绍shp加载的方式，这种方式相对其他方式会更简单通用。

shp数据源添加方式

所需数据源

二维水动力是用数据驱动生成渲染效果的接口，所以数据源及其重要。

要利用shp为数据源进行添加，使用的是addByShp()方法，其与数据源相关的参数有两个：shpFilePath 、shpDataFilePath 。

shpFilePath其实就是水动力模型中水面网格的范围与高程，shpDataFilePath则代表每个网格的水深以及流速、流向

• shpFilePath： 添加二维水动力模型整体范围的shp文件路径，取值示例："C:/shpFile/xxx.shp"。
  
  
  
  
  • 此shp文件包含水动力模型所有网格的范围
  
  
  • shp类型为Polygon
  
  
  • 坐标系必须与工程坐标系保持一致
  
  
  • 必须包含 ID和Elev 两个字段：ID是网格ID；Elev是网格的高程值，单位是米
  
  
  
  

• shpDataFilePath： 可选参数，仅在update()方法执行生效。更新二维水动力模型时包含水面网格的dat类型文件路径，取值示例："C:/datFile/xxx.dat"。


• dat文件是一种二进制文件，它提取了某一时刻包含的所有水面网格的信息，并把这些信息依次写入了二进制文件dat。


• 一个水面网格信息包含如下一组四个值：id (int),h (double),u(double),v(double)，必须完全符合顺序以及数据类型。


• id对应shp属性表ID字段，h是网格对应的水深（单位是米），uv是流速和流向（单位米/秒，u朝东，v朝北）。


• 更新效果需要准备多个时刻的.dat文件，如下图所示
  
  

添加方法

1、准备测试数据

这里给大家准备好了一些数据资源，包括了实现的数据源、代码以及dat数据转换的程序，大家可以自行下载测试

百度网盘数据资源连接：pan.baidu.com/s/1XS3UDkrB…

• 【文件资源】@path ： 放到cloud文件资源路径


• 【示例代码】code ： demo源代码，直接用demo工程场景运行即可


• 【dat数据转换】jsonToDat ： json转dat代码，分别含有node.js、java、python示例代码

准备好两份数据分别是shpFilePath填写的shp文件，以及shpDataFilePath填写的dat文件集。文件可以直接用本地路径读取，建议放置到Cloud文件资源路径下，用@path的方式引用

这里可以用孪创启航营给大家准备的数据进行测试，在提供的文件夹的【文件资源】@path\【孪创启航营】HydroDynamic2D中

2、通过shp网格数据初始化水动力模型

通过add()初始化水动力模型，并使用focus()定位到网格位置，但没有具体内容，还需要调用update添加.dat数据驱动效果。

add()参数文章末尾有详解

//添加shp数据源

fdapi.hydrodynamic2d.clear()



let hydrodynamic2d_add = {

  id: 'hdm_shp', // HydroDynamic2D对象ID

  collision: false, //开启碰撞sd

  displayMode: 0, // 显示样式，取值范围：[0,1]，0水体样式（默认值），1热力样式

  waterMode: 0, // 水面显示模式，枚举类型 0 水动画模式 ,1水仿真模式,2 水流向模式

  arrowColor: [1, 1, 1, 0], //  箭头颜色和透明度

  speedFactor: 0.1, // 速度因子

  rippleDensity: 1, // 水波纹辐射强度

  rippleTiling: 3, // 水波纹辐射平铺系数

  shpFilePath: '@path:【孪创启航营】HydroDynamic2D/shp/grid.shp' // 添加二维水动力模型整体范围的shp文件路径

}

await fdapi.hydrodynamic2d.add(hydrodynamic2d_add)



await fdapi.hydrodynamic2d.focus('hdm_shp', 200)

3、根据.dat更新水动力模型

写一个定时器，根据不同时刻，调用hydrodynamic2d.update()更新shpDataFilePath路径，达到水动力更新的效果。

• 参数updateTime 是更新动画的插值时间，单位为秒，一般与更新定时器的时间一致即可。

let index = 0

let hydrodynamicModel_for_update = {

  id: 'hdm_shp', // HydroDynamic2D对象ID

  updateTime: 1, // 更新动画的插值时间

  shpDataFilePath: ''// 更新二维水动力模型时包含水面网格的dat类型文件路径

}



// 使用dat数据填充shp网格

let updateTimer = setInterval(async () => {

  hydrodynamicModel_for_update.shpDataFilePath = '@path:【孪创启航营】HydroDynamic2D/dat/hydrodynamic_' + index + '.dat'

	

  if (index > 9) {

    clearInterval(updateTimer)

  } else {

    await __g.hydrodynamic2d.update(hydrodynamicModel_for_update) // 水动力更新

    index = index + 1

  }

}, 1000)

通过以上就可以达成二维水动力的创建以及更新了。

4、实现二维水动力热力效果

二维水动力支持热力效果，可以根据.dat文件中的水深字段进行配色

仅需要把add()中的displayMode参数设置为1热力样式，再通过valueRange、colors进行热力样式的调整

• valueRange (array) ，二维水动力模型颜色插值对应的数值区间


• colors (object) 二维水动力模型自定义调色板对象，包含颜色渐变控制、无效像素颜色和调色板区间数组
  
  
  
  
  • gradient (boolean) 是否渐变
  
  
  • invalidColor (Color) 无效像素点的默认颜色，默认白色
  
  
  • colorStops (array) 调色板对象数组，每一个对象包含热力值和对应颜色值，结构示例：[{"value":0, "color":[0,0,1,1]}]，每一个调色板对象支持以下属性：
    
    
    
    • color (Color) 值对应的调色板颜色
    
    
    • value (number) 值
    
    
    
    
  
  
  
  

  const addHeat = async () => {
  
          fdapi.hydrodynamic2d.clear()
  
  
  
          let hydrodynamic2d_add = {
  
            id: 'hdm_shp_heat', // HydroDynamic2D对象ID
  
            offset: [0, 0, 0], // 二维水动力模型的整体偏移，默认值：[0, 0, 0]
  
            displayMode: 1, // 显示样式，取值范围：[0,1]，0水体样式（默认值），1热力样式
  
            waterMode: 2, // 水面显示模式，枚举类型 0 水动画模式 ,1水仿真模式,2 水流向模式
  
            arrowColor: [1, 1, 1, 0.5], //  箭头颜色和透明度
  
            collision: false, //开启碰撞sd
  
            arrowTiling: 3, //  箭头平铺系数
  
            speedFactor: 0.1, // 速度因子
  
            rippleDensity: 1, // 水波纹辐射强度
  
            rippleTiling: 2, // 水波纹辐射平铺系数
  
            shpFilePath: '@path:【孪创启航营】HydroDynamic2D/shp/grid_heat.shp',
  
  
  
            valueRange: [1, 1.3], // 二维水动力模型颜色插值对应的数值区间
  
            alphaMode: 1, //使用colors色带透明度
  
            colors: {
  
              gradient: true,
  
              invalidColor: [0, 0, 0, 1],
  
              colorStops: [
  
                {
  
                  value: 0,
  
                  color: [0, 0, 1, 0.2]
  
                },
  
                {
  
                  value: 0.25,
  
                  color: [0, 1, 1, 0.2]
  
                },
  
                {
  
                  value: 0.5,
  
                  color: [0, 1, 0, 0.2]
  
                },
  
                {
  
                  value: 0.75,
  
                  color: [1, 1, 0, 0.2]
  
                },
  
                {
  
                  value: 1,
  
                  color: [1, 0, 0, 0.2]
  
                }
  
              ]
  
            }
  
          }
  
          await fdapi.hydrodynamic2d.add(hydrodynamic2d_add)
  
  
  
          await fdapi.hydrodynamic2d.focus('hdm_shp_heat', 200)
  
  
  
          let index = 0
  
          let hydrodynamicModel_for_update = {
  
            id: 'hdm_shp_heat',
  
            updateTime: 1,
  
            shpDataFilePath: ''
  
          }
  
  
  
          //使用dat数据填充shp网格
  
          let updateTimer = setInterval(async () => {
  
            hydrodynamicModel_for_update.shpDataFilePath = '@path:【孪创启航营】HydroDynamic2D/dat/hydrodynamic_' + index + '.dat'
  
  
  
            if (index > 9) {
  
              clearInterval(updateTimer)
  
            } else {
  
              await __g.hydrodynamic2d.update(hydrodynamicModel_for_update)
  
              index = index + 1
  
            }
  
          }, 1000)
  
        }
  
  

  
  

demo运行

缺乏数据源的小伙伴可以尝试运行我们准备好的demo示例，感受一下水动力的效果与参数调用。

.dat 数据转换？

在数据源中，网格对应的水深、流速、流向数据，大家获取到可能不是标准的dat数据，有可能是json、csv甚至是excel数据。所以这里教大家如何把常见的数据转为dat二进制文件！

大象进冰箱需要三步，咱们转数据也需要三步

其中解析数据每份数据可能各不相同，都需要单独编写。这里我以一个json数据格式为例子，教大家如何转换为.dat，例如我们有一个data.json文件数据示例如下：

[

  {

    "index": 0,

    "time": "08:30:00",

    "data": [

      {

        "id": 0,

        "h": 2,

        "u": 0,

        "v": 0

      },

      {

        "id": 1,

        "h": 2,

        "u": 0,

        "v": 0

      }

    ]

  },

  {

    "index": 1,

    "time": "09:00:00",

    "data": [

      {

        "id": 0,

        "h": 2,

        "u": 0,

        "v": 0

      },

      {

        "id": 1,

        "h": 2.001,

        "u": 0.1,

        "v": 0.1

      }

    ]

  }

]

我们可以使用不同的编程手段来处理，如node.js、python、java，这里直接把转换的代码贴给大家~

注意：这三种编程手段都需要单独的安装对应的环境，如果没有环境可以选择一种自行百度安装

node官网：Node.js — 在任何地方运行 JavaScript

python官网：python.org

java官网：Java | Oracle

node.js

// 引入必要的模块

const fs = require('fs') // 用于文件的读写操作

const path = require('path') // 用于处理文件路径

const jsonData = require('./data.json') // 引入 JSON 数据文件



// 确保 ./dat 目录存在

const datDir = path.join(__dirname, 'dat')

if (!fs.existsSync(datDir)) {

  fs.mkdirSync(datDir)

}



// 遍历 JSON 数据 time_i 是当前时间点的索引

for (let time_i = 0; time_i < jsonData.length; time_i++) {

  // 创建 .dat 文件路径

  const datFilePath = path.join(datDir, `hydrodynamic_${time_i}.dat`)

  // 创建写入流

  const datStream = fs.createWriteStream(datFilePath)



  // 获取并遍历时间点的数据

  const timeData = jsonData[time_i].data

  for (let grid_i = 0; grid_i < timeData.length; grid_i++) {

    // 数据转换和写入

    const { id, h, u, v } = timeData[grid_i]

    const buffer = pamarToBuffer(id, h, u, v)

    datStream.write(buffer)

  }



  datStream.end()

}



function pamarToBuffer(id, h, u, v) {

  // 创建一个 Buffer 来存储二进制数据

  const buffer = Buffer.alloc(4 + 8 + 8 + 8) // 分配足够的空间：4 字节用于 id，3 个 8 字节用于 double 值

  // 向 Buffer 中写入数据

  buffer.writeInt32LE(id, 0) // 从索引 0 开始写入 id（32 位整数）

  buffer.writeDoubleLE(h, 4) // 从索引 4 开始写入 h（64 位浮点数）

  buffer.writeDoubleLE(u, 12) // 从索引 12 开始写入 u（64 位浮点数）

  buffer.writeDoubleLE(v, 20) // 从索引 20 开始写入 v（64 位浮点数）



  return buffer

}

python

import json

import os

import struct

 

# 读取JSON文件

json_file_path = './data.json'

with open(json_file_path, 'r') as f:

    json_data = json.load(f)

 

# 定义输出目录

output_dir = os.path.join(os.getcwd(), 'dat')

if not os.path.exists(output_dir):

    os.makedirs(output_dir)

 

# 遍历JSON数据

for time_i, time_node in enumerate(json_data):

    # 创建.dat文件路径

    dat_file_path = os.path.join(output_dir, f"hydrodynamic_{time_i}.dat")

    

    # 打开文件以二进制写入模式

    with open(dat_file_path, 'wb') as dat_file:

        # 获取并遍历时间点的数据

        time_data = time_node['data']

        for grid_i, data_element in enumerate(time_data):

            

            # 数据转换和写入

            id = int(data_element['id'])

            h = float(data_element['h'])

            u = float(data_element['u'])

            v = float(data_element['v'])

  

            # 使用struct模块将数据转换为二进制格式

            binary_data = struct.pack('=iddd', id, h, u, v)

            # 写入二进制数据到文件

            dat_file.write(binary_data)

 

print("Data processing complete.")

Java

java需要安装对应的 jackson json解析依赖才能使用，这里给大家提供了一个最简洁的版本，只需要有了对应的java环境运行目录下的start.bat文件即可生成dat文件。

import java.io.FileOutputStream;

import java.io.IOException;

import java.nio.ByteBuffer;

import java.nio.ByteOrder;

import java.nio.file.Files;

import java.nio.file.Path;

import java.nio.file.Paths;

import java.nio.file.StandardOpenOption;

import java.util.ArrayList;

import java.util.List;

import com.fasterxml.jackson.databind.JsonNode;

import com.fasterxml.jackson.databind.ObjectMapper;



class TimePointData {

  int id;

  double h;

  double u;

  double v;



  public TimePointData(int id, double h, double u, double v) {

    this.id = id;

    this.h = h;

    this.u = u;

    this.v = v;

  }



}



class TimePoint {

  List<TimePointData> data;



  public TimePoint(List<TimePointData> data) {

    this.data = data;

  }



}



public class JsonToDatConverter {



  public static void main(String[] args) {

    String jsonFilePath = "data.json";

    String datDir = "dat";



    // 读取JSON文件

    ObjectMapper objectMapper = new ObjectMapper();

    try {

      JsonNode rootNode = objectMapper.readTree(Files.newInputStream(Paths.get(jsonFilePath), StandardOpenOption.READ));

      List<TimePoint> timePoints = parseJsonToTimePoints(rootNode);



      Path dirPath = Paths.get(datDir);

      if (!Files.exists(dirPath)) {

        Files.createDirectory(dirPath);

      }



      for (int time_i = 0; time_i < timePoints.size(); time_i++) {

        TimePoint timePoint = timePoints.get(time_i);

        String datFilePath = Paths.get(datDir, "hydrodynamic_" + time_i + ".dat").toString();



        try (FileOutputStream fos = new FileOutputStream(datFilePath)) {

          for (TimePointData data : timePoint.data) {

            byte[] bytes = convertToBytes(data.id, data.h, data.u, data.v);

            fos.write(bytes);

          }

        } catch (IOException e) {

          e.printStackTrace();

        }

      }

    } catch (IOException e) {

      e.printStackTrace();

    }

  }



  private static List<TimePoint> parseJsonToTimePoints(JsonNode rootNode) {

    if (rootNode == null || !rootNode.isArray()) {

      throw new IllegalArgumentException("Invalid JSON structure: 'timePoints' field is missing or not an array");

    }



    List<TimePoint> timePoints = new ArrayList<>();

    for (JsonNode timePointNode : rootNode) {

      JsonNode dataNode = timePointNode.get("data");

      if (dataNode == null || !dataNode.isArray()) {

        throw new IllegalArgumentException(

            "Invalid JSON structure: 'data' field is missing or not an array within a 'timePoints' object");

      }



      List<TimePointData> dataList = new ArrayList<>();

      for (JsonNode dataItemNode : dataNode) {

        int id = dataItemNode.get("id").asInt();

        double h = dataItemNode.get("h").asDouble();

        double u = dataItemNode.get("u").asDouble();

        double v = dataItemNode.get("v").asDouble();

        dataList.add(new TimePointData(id, h, u, v));

      }



      timePoints.add(new TimePoint(dataList));

    }



    return timePoints;

  }



  private static byte[] convertToBytes(int id, double h, double u, double v) {

    ByteBuffer buffer = ByteBuffer.allocate(4 + 8 + 8 + 8).order(ByteOrder.LITTLE_ENDIAN);

    buffer.putInt(id);

    buffer.putDouble(h);

    buffer.putDouble(u);

    buffer.putDouble(v);

    return buffer.array();

  }

}

二维水动力添加参数详解

通用参数

通用参数比较简单理解，这里就简单列举出来

• id (string) HydroDynamic2D对象ID


• groupId (string) 可选，Gr0up分组


• userData (string) 可选，用户自定义数据


• offset (array) 二维水动力模型的整体偏移，默认值：[0, 0, 0]


• collision (boolean) 是否开启碰撞，注意：开启后会影响加载效率

数据参数

数据参数前面介绍所需数据源已有详细介绍

• shpFilePath（string）添加二维水动力模型整体范围的shp文件路径，取值示例："C:/shpFile/xxx.shp"。
  
  
  
  • 此shp文件包含水动力模型所有网格的范围
  
  
  • shp类型为Polygon
  
  
  • 坐标系必须与工程坐标系保持一致
  
  
  • 必须包含 ID和Elev 两个字段：ID是网格ID；Elev是网格的高程值，单位是米
  
  
  
  


• shpDataFilePath （string）可选参数，仅在update()方法执行生效。更新二维水动力模型时包含水面网格的dat类型文件路径，取值示例："C:/datFile/xxx.dat"。
  
  
  
  • 注意：dat文件是一种二进制文件，它提取了某一时刻包含的所有水面网格的信息，并把这些信息依次写入了二进制文件dat，一个水面网格信息包含如下一组四个值：id,h,u,v。id对应shp属性表ID字段（int类型），h是网格对应的水深（double类型，单位是米），uv是流速和流向（double类型，单位米/秒，u朝东，v朝北）。
  
  
  
  

显示样式参数

• displayMode (number) 显示样式，取值范围：[0,1]，0水体样式（默认值），1热力样式
  
  
  
  
  • 当displayMode为0时，样式就只需要控制waterMode、waterColor设置水体样式
    
    
    
    
    • waterMode (number) 水面显示模型，枚举类型 0 水动画模式 ,1水仿真模式,2 水流向模式
    
    
    • waterColor (Color) 水体颜色和透明度，注意：仅在displayMode=0时生效
    
    
    
    
  
  
  • 当displayMode为1时，样式就需要通过valueRange、colors控制热力样式
    
    
    
    
    • valueRange (array) ，二维水动力模型颜色插值对应的数值区间
    
    
    • colors (object) 二维水动力模型自定义调色板对象，包含颜色渐变控制、无效像素颜色和调色板区间数组
      
      
      
      
      • gradient (boolean) 是否渐变
      
      
      • invalidColor (Color) 无效像素点的默认颜色，默认白色
      
      
      • colorStops (array) 调色板对象数组，每一个对象包含热力值和对应颜色值，结构示例：[{"value":0, "color":[0,0,1,1]}]，每一个调色板对象支持以下属性：
        
        
        
        • color (Color) 值对应的调色板颜色
        
        
        • value (number) 值
        
        
        
        
      
      
      
      
    
    
    • colors代码示例
      
      

      // colors示例
      
       		{
      
              gradient: true,// 是否渐变
      
              invalidColor: [0, 0, 0, 1],// 无效像素点的默认颜色
      
              colorStops: [
      
                {
      
                  value: 0,
      
                  color: [0, 0, 1, 1]
      
                },
      
                {
      
                  value: 0.25,
      
                  color: [0, 1, 1, 1]
      
                },
      
                {
      
                  value: 0.5,
      
                  color: [0, 1, 0, 1]
      
                },
      
                {
      
                  value: 0.75,
      
                  color: [1, 1, 0, 1]
      
                },
      
                {
      
                  value: 1,
      
                  color: [1, 0, 0, 0]
      
                }
      
              ]
      
            }
      
      

      
      
    
    
    
    
  
  
  
  


• alphaComposite (boolean) 是否使用混合透明度 取值：true / false 默认：true


• alphaMode (number) 透明模式，取值：[0,1]，0 : 使用colors调色板的不透明度值 1 : 使用系统默认值

箭头相关参数

箭头方向根据每个格网的uv流向决定

• arrowDisplayMode (number) 箭头显示模式 取值范围：[0,1]，0默认样式（受arrowColor参数影响），1热力样式（受arrowColors调色板参数影响）
  
  
  
  
  • 当arrowDisplayMode 为0，则设置arrowAlphaMode = 0，并通过arrowColor调整箭头的颜色和透明度
    
    
    
    • arrowColor (Color) 箭头颜色和透明度
    
    
    
    
  
  
  • 当arrowDisplayMode 为1，则设置arrowAlphaMode = 1，并通过arrowColors调整箭头的颜色和透明度
    
    
    
    • arrowColors (object)箭头颜色调色板 仅在arrowDisplayMode=1时生效，河道箭头热力样式下的调色板配色对象，包含颜色渐变控制、无效像素颜色和调色板区间数组
      
      
      
      • 格式同上方的显示样式参数colors
      
      
      
      
    
    
    
    
  
  
  
  


• arrowAlphaMode (number) 箭头透明度模式，仅在arrowDisplayMode=0时生效，取值：[0,1]，0使用arrowColor的透明度，1使用调色板的透明度


• arrowTiling (number) 箭头平铺系数 值越小则箭头越小越密集，反之则更大更疏松

水面效果参数

• foamWidth (number) 泡沫宽度取值范围：[0~10000]，默认值：1米


• foamIntensity (number) 泡沫强度 取值范围：[0~1]，默认值：0.5


• speedFactor (number) 速度因子

• flowThreshold (array) 水浪效果漫延的范围 即把水动力模型[minSpeed,maxSpeed]，最小最大流速的范围映射到[0~~1]，取值示例：[0.1,0.4]，取值范围[0-1]

• rippleDensity (number)水波纹辐射强度

• rippleTiling (number) 水波纹辐射平铺系数

以上就是本篇文章的所有内容，相信大家看完这篇文章后可以轻松的通过DTS实现二维水动力效果。

在DTS中还有各式各样的水分析相关接口，如FloodFill 水淹分析、Fluid 流体仿真对象、HydroDynamic1D 一维水动力、WaterFlowField 水流场，大家可以根据自身需求选择，这里给大家推荐一篇《开闸放水》的教程，后续也会陆续推出更多教程~

不再需要UE美术，前端轻松解决水利开闸放水难题！！！

在开发工作中，你是否遇到过这样的场景：

当你需要开发某个功能时，这个功能依赖一系列的点击或者选择操作，才能获取到最终的数据。而在开发和调试的过程中，你往往需要多次验证流程的正确性。早期的时候，这种验证通常非常繁琐——你可能需要反复提交表单、重新执行操作流程，才能完成一次完整的自测。

如今，这一切变得更加高效了。

现在，我们可以使用记录器（Recorder）来优化这一开发流程。这个工具允许你将整个操作过程录制下来，保存为一个可复现的操作记录。每次需要重新验证或提交流程时，只需一键执行这条记录，便能完成所有的重复性操作。

更棒的是，这个功能还支持二次编辑。如果你需要在某个步骤后面新增额外的操作，或者减少不必要的步骤，都可以轻松修改操作记录，而无需重新录制整个流程。

文章同步在公众号：萌萌哒草头将军，欢迎关注哦~

🚀 功能亮点与用途

1. 高效的开发与调试

对于开发者来说，这个功能不仅可以节省大量时间，还能确保操作流程的准确性，避免因手动操作而导致的遗漏或错误。

2. 性能监控的得力助手

谷歌推出这个功能的主要目的是为了帮助开发者更方便地监听用户在某些操作流程中的性能体验。例如，在查看录制的操作流程时，你可以直接点击某个步骤，跳转到性能面板（Performance Panel），并且工具会自动锁定当前帧的数据。这种体验优化相比以往手动查找性能问题，提升了不少效率。

3. 测试自动化的天然工具

如果你是一名测试人员，这个功能同样非常实用。操作流程录制完成后，你可以直接将其导出为Puppeteer脚本，方便地将其集成到你的自动化测试中，进一步提升测试的覆盖率和效率。

🚀 使用方法

我们以表单提交为例子展示

以下是如何使用记录器功能的步骤：

1. 💎 打开记录器

并点击创建新录制按钮

2. 💎 开始录制流程

可以重命名下，方便后续复用，然后点击最下方的开始录制按钮

我们在填写完表单，并且点击 sumbit按钮，然后点击控制台的结束录制按钮，可以看到我们的每个步骤都被记录下来

3. 💎 执行录制

点击这个地方展开就可以重新设置超时限制参数了

然后你点击播放按钮就一切正常了

4. 💎 查看和编辑录制

你可以在 记录器 面板中，看到录制的每个步骤，包含操作类型（如点击、输入、导航等）和目标元素。

你也可以点击每个步骤进行详细查看，也可以通过右键菜单进行编辑，例如增加新步骤、删除步骤或修改操作。

🚀 应用场景

1. 💎 表单提交及验证

录制复杂的表单提交流程，方便反复验证数据的提交逻辑是否正确。这个场景如上，相信你也感受它的便利性了。

2. 💎 性能优化

在模拟用户真实操作的同时，快速捕捉性能瓶颈，定位问题并优化。

点击性能面板按钮，等待自动回填数据，然后跳到性能面板，为了压缩我把很多帧去掉了

最终你可以在如下的性能面板开始分析了

3. 💎 自动化测试开发

如果需要将录制的流程用于自动化测试，可以点击 导出 按钮，将其导出为 Puppeteer 脚本或者 json数据，这样可以减少编写测试脚本的时间，通过导出的 Puppeteer 脚本直接复用操作流程。我不是测试人员就不多赘述了。

🚀 小结

“记录器”功能的出现，不仅让开发和调试更加高效，还为性能监控和测试自动化提供了重要支持。它减少了重复操作的浪费，让开发者和测试人员都能将更多精力集中在核心工作上。

是不是觉得这个功能非常有趣又实用？赶紧试试看吧！

如果有用记得关注我的公众号：萌萌哒草头将军

最近快速读完了《4点起床》这本书。

这本书很简单，主要内容就是为什么要4点起床、如何做到4点起床和起床后要做什么。

整体上给它打 3 颗星，可读可不读那种。

而这本书是我买其他书时，凑单顺手买的，目前已经挂在多抓鱼上卖掉了。

那为什么还是给大家分享呢？主要是它提供了一种生活方式。

几年前听说过日本留行过一阵“朝忙族”，指的是那些，选择早上早起工作，而不是晚上加班的人群。查看这本书的出版时间，正好是那个时候，可以确定这本书与这阵风潮有一定关系。

如今这股潮流已经过去，但这也说明了一些问题。毕竟对于大多数人来说，凌晨四点起床确实非常艰难。

不过，书中提倡的早睡早起理念，我还是很推荐的。在这里分享几点对我触动较大的内容。

为什么选择早起干活，而不是晚上加班干活

很多上班族有一个习惯：晚上加班才能完成任务。然而，作者更提倡早起干活，因为这是由人类的生理规律决定的。

事实上，研究表明大脑在下班后会逐渐进入休息状态，而早起则能够充分利用身体中荷尔蒙的激活，从而完成这些事情更轻松。

写作也是如此。虽然一些创作者可能认为灵感是他们工作的关键，但许多欧美作家已经开始提倡将写作日常化，使用具体方法来进行写作，而不是仅仅依靠灵感。中国也有不少作家开始模仿这一做法，例如已完成多部畅销小说的马伯庸先生，他每年完成几部小说，其著作量远超同行。

我个人观点认为，晚上工作的人往往需要一个没人打扰的环境，而早上同样可以实现这一目标。

我曾经问过一些早睡早起的朋友，他们都说有过一种平静的喜悦，这种感觉很难用言语描述，也许是来自于长期规律生活的多巴胺。我个人也是如此，在一段早睡早起的时间后，感到一种特殊的满足感。如果你也想尝试这种感觉，我建议你至少持续一个月（甚至更久）的早睡早起。

早起之后做什么？

早起之后可以进行哪些活动？

享用一顿营养均衡的早餐是必不可少的，这有助于确保一整天的精神饱满。如果你是有家庭的人，与家人共度一段早餐时光，还能够增进家庭成员之间的情感联系。

书中还提到很多建议都围绕着输入和输出的。例如，多读书、多写作等。虽然直接开始大量输出对许多人来说可能有些困难，但其实每天记录一些日志会更加可行。

这里所说的“日志”并非传统的个人日记，而是指一种记录日常活动的笔记形式。

通过撰写日志，您可以总结前一天所做的事情，并为当天制定详细的计划清单。明确哪些任务是重要的，哪些是非做不可的。这样做有助于您更好地管理自己的时间与工作安排，确保每一天都有条不紊地进行，有利于你告别无意义感和瞎忙的状态。

此外，这样的习惯还有助于推进那些重要但并非紧急的任务，避免它们被忽视或延误。

早起后，是否应该获取信息

早起后，是否应该获取信息？

自人类进入现代文明以来，报纸、收音机、电视和互联网的出现使得人们进入了信息过载的时代。如果我们仍然像以前一样被动地接收信息，最终只会接收到大量无用的信息。

书中提出的一个观点我认为颇有参考价值，即批判性阅读新闻。例如，在阅读股市财经类新闻时，应当质疑股价与该新闻的相关性。

当然，这种做法对个人的要求似乎较高，需要每次都能动用自己的大脑进行思考。

我个人的做法更为彻底，我删除了所有的新闻应用程序，甚至包括抖音在内的所有字节系应用。这些应用的推送机制非常奇怪，故意模糊了时间点，导致你看到的可能是几年前的旧闻。后来，许多应用都采用了类似的推送方式。

因此，我干脆屏蔽了所有的新闻客户端。

有人可能会问，那你的新闻资讯从哪里获取呢？实际上，在日常生活中，自然会有同事，在茶歇或饭间，讨论重要的新闻事件，所以根本不用担心自己会错过重要信息。

熬夜怎么办？

书中关于应对熬夜的方法，我个人觉得非常有参考价值。

我们都知道，作为程序员或白领，偶尔熬夜在所难免，而一次熬夜可能会导致接下来两到三天内精神状态不佳，感觉昏昏沉沉。

书中提供了一个很好的方法：如果知道自己要熬夜，可以先睡3个小时，然后再起来继续熬夜。这种方法能在一定程度上缓解因熬夜带来的负面影响。

这本书相关的内容就讲这么多。剩下的大部分都是讲职场的作者个人分享，不适合我，我感受也不深。所以就分享到这里。

谢谢大家的观看。

前言

接前一篇美女运营天天找我改配置，给她写了个脚本，终于安静了

之前只是写了一个脚本，本地运行，通过读取文件流获取文件数据，格式化对应数据，运营老师也不会安装node，还是需要我去操作。现在我用electron生成一个桌面应用直接生成后复制json，去配置，全程不需要我参与了。

之前的脚本

const fs = require('fs')

const csv = require('csv-parser');



const csvfilePath = './xxx.csv';

const uidsfilePath = './uids.json';



const results = [];

let newarr = [];

let lineCount = 0;



fs.createReadStream(csvfilePath)

	.pipe(csv({ headers: true }))

	.on('data', (data) => {

		results.push(data);

		lineCount++;

	})

	.on('end',async () => {

		console.log(results[0])

		await format(results);

		fs.writeFile(uidsfilePath, JSON.stringify(newarr), () => {

			console.log('done')

		})

	});

const format = (results) => {

	newarr = results.map(item => {

		if(item._0 === 'key' || item._1 === 'value') {

			return {}

		}

		return {

			label: `${item._1}-${item._0}`,

			value: item._1

		}

	})

}

electron

简介

Electron 是一个用于使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它由 GitHub 开发，基于 Chromium 和 Node.js。这意味着开发者可以利用他们熟悉的 Web 开发技术来创建桌面应用。

优势

• 跨平台开发


• 快速开发迭代


• 丰富的生态系统

架构与核心概念

• 主进程和渲染进程：

主进程：主进程是整个 Electron 应用的核心，它负责创建和管理应用程序的窗口。主进程通过BrowserWindow模块来创建浏览器窗口，这个窗口就是用户看到的应用界面的载体。

渲染进程：渲染进程主要负责渲染应用的用户界面。每个BrowserWindow都有自己独立的渲染进程，它使用 Chromium 浏览器内核来解析 HTML 和 CSS 文件，执行 JavaScript 代码。

• 进程间通信（IPC）：
  由于 Electron 应用有主进程和渲染进程之分，进程间通信就显得尤为重要。Electron 提供了ipcMain（用于主进程）和ipcRenderer（用于渲染进程）模块来实现进程间的消息传递。

使用vue3和vite创建vue的项目然后引入electron

安装vite

npm create vite@latest electron-desktop-tool

安装 引入electron&插件

npm install -D electron // electron

npm install -D electron-builder //用于打包可安装exe程序和绿色版免安装exe程序

npm install -D electron-devtools-installer // 调试

npm install -D vite-plugin-electron // vite构建插件

创建主进程

在vue 同级src目录下，创建src-electron 文件夹 新建main.js

// src-electron/main.js

const { app, BrowserWindow } = require('electron')

const { join } = require('path')



// 屏蔽安全警告

// ectron Security Warning (Insecure Content-Security-Policy)

process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'



// 创建浏览器窗口时，调用这个函数。

const createWindow = () => {

    const win = new BrowserWindow({

        width: 800,

        height: 600,

        title: 'electron-vite',

        // icon: join(__dirname, '../public/logo.ico'),

    })



    // win.loadURL('http://localhost:3000')

    // development模式

    if(process.env.VITE_DEV_SERVER_URL) {

        win.loadURL(process.env.VITE_DEV_SERVER_URL)

        // 开启调试台

        win.webContents.openDevTools()

    }else {

        win.loadFile(join(__dirname, '../dist/index.html'))

    }

}



// Electron 会在初始化后并准备

app.whenReady().then(() => {

    createWindow()

    app.on('activate', () => {

        if (BrowserWindow.getAllWindows().length === 0) createWindow()

    })

})



app.on('window-all-closed', () => {

    if (process.platform !== 'darwin') app.quit()

})

配置插件入口

在vite.config.ts中配置vite-plugin-electron 插件入口

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import electron from 'vite-plugin-electron'



// https://vitejs.dev/config/

export default defineConfig({

    plugins: [

        vue(),

        electron({

            // 主进程入口文件

            entry: './src-electron/main.js'

        })

    ],

    /*开发服务器选项*/

    server: {

        // 端口

        port: 3000,

    }

})

配置package.json

在package.json 新增入口文件 "main": "./src-electron/main.js",

原神启动 emmm electron启动

运行 npm run dev 启动项目

打包配置

首先配置一下打包的命令,在package.json "scripts"里面配置这个打包命令

  "scripts": {

    "dev": "vite",

    "build": "vite build",

    "preview": "vite preview",

    "postinstall": "patch-package",

    "electron:build": "vite build && electron-builder",

    "pack32": "vite build && electron-builder --win --ia32",

    "pack64": "vite build && electron-builder --win --x64"

  },

同样package.json 需要添加打包配置

  "scripts": {

      ...

  },

  "build": {

    "productName": "ElectronDeskTopTool",

    "appId": "dyy.dongyuanwai",

    "copyright": "dyy.dongyuanwai © 2024",

    "compression": "maximum",

    "asar": true,

    "directories": {

      "output": "release/"

    },

    "nsis": {

      "oneClick": false,

      "allowToChangeInstallationDirectory": true,

      "perMachine": true,

      "deleteAppDataOnUninstall": true,

      "createDesktopShortcut": true,

      "createStartMenuShortcut": true,

      "shortcutName": "ElectronDeskTopTool"

    },

    "win": {

      "icon": "./public/logo.ico",

      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}",

      "target": [

        {

          "target": "nsis"

        }

      ]

    },

    "mac": {

      "icon": "./public/logo.ico",

      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"

    },

    "linux": {

      "icon": "./public/logo.ico",

      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"

    }

  },

然后npm run electron:build

页面效果

github地址

后续还会继续更新~

1. offer收割机，就职新公司

5年前的就业环境非常好，当时面试了很多家公司，收到了很多 offer。最终我决定入职一家互联网教育公司，新的公司福利非常好，各种零食随便吃，据说还能正点下班，一切都超出我的期望，“可算让我找着神仙公司了”，我的心里一阵窃喜。

在熟悉环境之后，我趁着上厕所的时候，顺便去旁边的零食摊挑了点零食。接下来的一天里，我专注地配置开发环境、阅读新人文档，当然我也不忘兼顾手边的零食。

入职几天后 ，领导给安排了一个小需求，我和同事沟通完技术方案后，就开始开发了。

2. 单元测试有点奇怪

完成开发后，我决定写个单元测试验证下，在研究单元测试代码后，我发现这种单测写法和我之前的写法不太一样。

这家公司的单测好像没有启动整个项目，仅加载了部分类，而且不能访问测试环境数据库~ 于是我决定按照前东家写单测的方式重新写单元测试。

于是我新增了一个单测基类，在单测中启动整个SpringBoot，直接访问测试环境数据库。然而也并不是很顺利，启动阶段总是会遇到各种异常报错，需要一个一个排查…… 所幸项目排期不紧张，还有充足时间。

我做梦也没有想到，此刻，已经铸成大错。

3. 故障现场

我身边的工位旁慢慢地聚集了越来越多的人，本来我还在安安静静的调试单元测试，注意力不自觉的被吸引了过去。

“测试环境为什么这么多异常，访问不通啊。到处都是 500 报错”，不知道谁在说话。

“嗯，我们还在排查，稍等一下”，我旁边的同事一边认真排查日志，一边轻声回复道。

“为什么数据库报的异常是， 查不到数据呢？” ，同事在小声嘀咕，然后打开 命令行，立即登上 MySQL。

我亲眼看着他在操作，奇怪的是数据库表里的数据全部被删掉了，其他的几个表数据也都被删除了。

简直太奇怪了，此刻的我还处于吃瓜心态。

有一个瞬间我在考虑，是否和我执行的单元测试有关系？ 但我很快就否决掉了这个想法，因为我只是在调试单元测试，我没有删数据库啊，单测里也不可能删库啊。 我还在笑话自己 胡思乱想……

很快 DBA 就抱着电脑过来，指着电脑说，你们看这些日志，确实有人把这些表删除了。

"有 IP 吗，定位下是谁删除的， 另外线上环境有问题吗？”，旁边的大组长过来和 DBA 说。

“嗯，我找到ip 了，我找运维看下，这个ip是谁的”。DBA 回复道。

4. 庭审现场

当 DBA 找到我的时候，我感到无辜和无助，我懵逼了，我寻思我啥也没干啊，我怎么可能删库呢。 （他们知道我刚入职，我现在怀疑：那一刻他们可能会怀疑 我是友商派过来的卧底、间谍，执行删库的秘密任务）

经过一系列的掰扯和分析，最终定位 确实是我新增的单元测试把数据库删了。

5. 故障原因

需要明确的是，原单元测试执行时不会删除数据库；测试环境启动时也不会删除数据库。

只要在单元测试中连接测试数据库，就会删除掉数据库的所有数据。为什么呢？

5.1 为什么单元测试删除了所有数据？

原单元测试 使用的是 H2 内存数据库，即Java 开发的嵌入式(内存级别)数据库，它本身只是一个类库，也就是只有一个 jar 文件，可以直接嵌入到项目中。H2数据库又被称为内存数据库，因为它支持在内存中创建数据库和表。所以如果我们使用H2数据库的内存模式，那么我们创建的数据库和表都只是保存在内存中，一旦应用重启，那么内存中的数据库和表就不存在了。 所以非常适合用来做单元测试。

H2 数据库在启动阶段，需要执行用户指定的 SQL 脚本，脚本中一般包含表创建语句，用来构建需要使用的表。

但是我司的 SQL 脚本除了创建表语句，还包含了删除表语句。即在创建表之前先删除表。 为什么呢？ 据他们说，是因为这个 SQL 脚本可能会重复执行，当重复执行时创建表语句 会报错。所以他们在创建表之前，先尝试删除表。这样确保 SQL 脚本可重复执行。（ 其实可以用 Create if not exists ）

故障的原因就是：测试数据库执行了这个删表再建表的 SQL 脚本，导致所有数据都被清除了。

5.2 为什么测试数据库会执行这条 SQL 脚本呢？

1） 我新建的单元测试把H2 内存数据库换成了测试数据库。

2） spring.data.initialize=默认值为 true； 默认情况下，会自动执行 sql 脚本。

所以测试数据库 执行了 SQL 脚本。

5.3 为什么在测试环境正常启动时，没有问题，不会删除所有数据呢？

只有单测引入测试数据库才会出问题，在测试环境正常启动项目是没问题的。

当编译项目时，测试目录下的文件、代码和正式代码编译后的结果不会放到一起。因为 SQL脚本被放在了 测试目录下， 所以正式代码在测试环境启动时，不会执行到这个 SQL脚本，自然不会有问题。

6. 深刻教训

最终数据被修复了，DBA有测试数据库的备份，然而快照并非实时的，不可避免地还是丢失了一部分数据。

所幸的是出问题的是测试环境，并非线上环境。 否则，我会不会被起诉，也未可知。

后续的改进措施包括

这可能是程序员们在技术上越来越保守的原因……不经意的一个调整可能引发无法承受的滔天巨浪

前端开发者应该对 Ant Design 不陌生，特别是 React 开发者，antd 应该是组件库的标配了。

近年来随着 AI 的爆火，凡是想要接入 AI 的都想搞一套自己的 AI 交互界面。专注于 AI 场景组件库的开源项目倒不是很多见，近日 antd 宣布推出 Ant Design X 1.0 🚀 ，这是一个基于 Ant Design 的全新 AGI 组件库，使用 React 构建 AI 驱动的用户交互变得更简单了，它可以无缝集成 AI 聊天组件和 API 服务，简化 AI 界面的开发流程。

该项目已在 Github 开源，拥有 1.6K Star！

看了网友的评论，看来大家还是需要的！当前的 Ant Design X 只支持 React 项目，看来 Vue 开发者要羡慕了...

ant-design-x 特性

• 🌈 源自企业级 AI 产品的最佳实践：基于 RICH 交互范式，提供卓越的 AI 交互体验


• 🧩 灵活多样的原子组件：覆盖绝大部分 AI 对话场景，助力快速构建个性化 AI 交互页面


• ⚡ 开箱即用的模型对接能力：轻松对接符合 OpenAI 标准的模型推理服务


• 🔄 高效管理对话数据流：提供好用的数据流管理功能，让开发更高效


• 📦 丰富的样板间支持：提供多种模板，快速启动 LUI 应用开发


• 🛡 TypeScript 全覆盖：采用 TypeScript 开发，提供完整类型支持，提升开发体验与可靠性


• 🎨 深度主题定制能力：支持细粒度的样式调整，满足各种场景的个性化需求

支持组件

以下圈中的部分为 ant-design-x 支持的组件。可以看到主要都是基于 AI Chat 场景的组件设计。现在你可以基于这些组件自由组装搭建一个自己的 AI 界面。

ant-design-x 也提供了一个完整 AI Chat 的 Demo 演示，可以查看 Demo 的代码并直接使用。

更多组件详细内容可参考 组件文档

使用

以下命令安装 @ant-design/x 依赖。

注意，ant-design-x 是基于 Ant Design，因此还需要安装依赖 antd。

yarn add antd @ant-design/x

import React from 'react';

import {

  // 消息气泡

  Bubble,

  // 发送框

  Sender,

} from '@ant-design/x';



const messages = [

  {

    content: 'Hello, Ant Design X!',

    role: 'user',

  },

];

const App = () => (

  <div>

    <Bubble.List items={messages} />

    <Sender />

  </div>

);



export default App;

Ant Design X 前生 ProChat

不知道有没有小伙伴们使用过 ProChat，这个库后面的维护可能会有些不确定性，其维护者表示 “24 年下半年后就没有更多精力来维护这个项目了，Github 上的 Issue 存留了很多，这边只能尽量把一些恶性 Bug 修复”

如上所示，也回答了其和 Ant Design X 的关系：ProChat 是 x 的前生，新用户请直接使用 x，老用户也请尽快迁移到 x。

感兴趣的朋友们可以去试试哦！

背景

纯血鸿蒙OS Next系统最近出现了两款热门应用：出境易、卓易通，其功能是：让你在出境后可以方便安装到各种Android应用。

发生了什么？

「出境易」这款应用可以在纯血鸿蒙OS NEXT里直接安装&运行Android应用！

纯血鸿蒙官方声称：「不支持运行Android应用」！

于是：

• 很多正在努力开发、兼容纯血鸿蒙应用的开发者都在议论：是不是可以停鸿蒙开发、继续写回Android了?


• 也有很多粉丝后台私信Carson，问：目前继续学鸿蒙开发到底还有没意义？

本文意图

今天Carson来带大家扒扒「出境易」、「卓易通」到底是怎么能在纯血鸿蒙OS NEXT里运行Android应用的。具体包括：「出境易」、「卓易通」这两款Android应用

问题1：在纯血鸿蒙系统里运行的底层支持是什么？

• 无论黑科技有多 “黑”，总需要底层给与相关支持才有运行的可能。


• 在初次安装「出境易」、「卓易通」时需下载一个环境，抓包&解包可得到：

其中最为关键的文件：anco_hmos.img，从字面解释来看：

• anco：AndroidCompatible = 安卓兼容


• hmos：HarmonyOS = 鸿蒙OS系统


• 整体看，即**「鸿蒙OS系统里的安卓兼容」**

实际上，这其实是一个安卓镜像文件，是一个嵌入到鸿蒙OS系统层面的安卓运行环境（类似虚拟机的作用，但实际不是虚拟机）。

其实是类似wsl技术，即Windows Subsystem for Linux = Windows的Linux子系统，能让开发者在Windows操作系统中直接运行Linux环境，而无需任何虚拟机。

所以，要在纯血鸿蒙OS 上安装「出境易」、「卓易通」不仅需要下载很大的安卓镜像资源包，还需要重启系统，因为「出境易」和 「卓易通」是单独的“运行环境”。

值得一提的是：

• 因为本身鸿蒙OS内核就兼容了Linux ABI（应用程序二进制接口），即鸿蒙OS内核本身就可以运行为Linux设计的应用。


• 所以，虽然这是一个安卓镜像，但这个属于鸿蒙的安卓镜像并没有包含Linux 内核，只是包含运行时（Runtime）部分。 以下是鸿蒙内核架构图：
  

问题2：在纯血鸿蒙系统里的运行环境是什么？

那么，这类Android应用到底是运行在什么环境上的呢？打开「出境易」内的app后，通过执行shell ps -ef会出现以下进程：

• 即其运行环境是：通过lxc-start命令启动了一个基于iSulad的容器的进程。


• iSulad 是华为自研的容器引擎，是一个非常通用的容器引擎，具有轻、快、 易、灵的特点。以下是其架构图：

iSulad官网介绍：http://www.openeuler.org/zh/other/pr…

问题3：「出境易」、「卓易通」本质是什么？

二者的功能都是：让你在出境后可以方便安装到各种app。听起来是不是有点类似国内的应用商店？

• 实际上，二者在鸿蒙next商店下载的是一层壳，负责与纯血鸿蒙OS进行权限交互（图片、文件IO等）


• 本体也是Android应用的apk，即出境易.apk、卓易通.apk。拿出来也是可以在Android手机上安装的。（如下图）
  

除此以外，「出境易」还含有一个「文件共享.apk」、「卓易通」还有一个「搜应用.apk」、「文件共享.apk」。

这里值得一提的是，两个“应用商店”可搜到的应用原理不同：

• 出境易：白名单方式，即只有与其合作的Android应用可以安装；


• 卓易通：黑名单方式，即只有纯血鸿蒙OS上架的应用不可以安装；

下面附上视频：纯血鸿蒙OS 「出境易」、「卓易通」安装Android应用实机演示

http://www.bilibili.com/video/BV1Q9…

性能如何？

既然能跑了，那么用户体验如何呢？网友们已经开始跑分了：

• 测试环境：麒麟9000s；


• 结论：单核心正常跑分1000，目前「出境易」是930分左右，效率是93%；

• 分析：上面提到其底层支持是类似wsl的技术，同时运行环境是采用华为自研的iSulad 容器引擎的方式，并非所谓的虚拟机环境。这种嵌入方式可以使得安卓应用能够在鸿蒙系统上运行，但又不会占用过多的资源或影响系统的稳定性；


• 结合业界常见容器水平93%左右，华为的iSulad容器达到了业界水平，可理解为：GPU性能几乎无损。

但是对于内存使用就不太友好了，容器本身内存占用极大，基本一个容器进程就是8GB，随便开两个应用12GB就没了。

同时结合网上使用的评价：手机容易发烫（功耗高）、应用Bug较多等等，可以总结为：以这种方式在纯血鸿蒙OS上运行的Android应用 「能用」，但是「不好用」，与原生体验还是存在很大差距。

结论

• 从技术角度 分析：基于anco_hmos，采用类似wsl的方式同时结合iSulad容器引擎，使得在纯血鸿蒙OS上运行Android应用成为了板上钉钉的现实。


• 从性能角度 实践：在CPU性能可认为几乎无损的情况下，内存跟功耗问题短时间内还是无法解决；


• 从用户体验 观察：应用Bug较多，结合性能内存问题，目前暂时仅处于一个**「能用」**的状态。

基于上述分析 & 问题表现，在纯血鸿蒙OS上运行Android应用在国内大范围使用短时间内几乎不可能，更多的是在一些小众、边缘、尝试探索的场景，比如一些使用频率较低的小众app、尝试出海境外的场景（如本文提到的「出境易」等）。

最后

如何看待这次在纯血鸿蒙OS上运行Android应用的事件呢？评论区留言你的看法！

参考文章：

• http://www.bilibili.com/video/BV1Q9…


• zhuanlan.zhihu.com/p/105768126…


• cn.club.vmall.com/mhw/consume…

2024 年，我离开了待了两年的互联网公司，来到了一家聚焦教育机器人和激光切割机的公司，没错，是一家硬件公司，从未接触过的领域，但这还不是我今年最重要的里程碑事件

5 月份的时候，正式提出了离职，没有骑驴找马，完全裸辞。对于 gap 的这段时间，做了简单的规划，先去旅游一趟，然后用一个半个月时间备考雅思，九月、十月重新找工作

随后的两个月，公司找到接替我的新同学，站好最好一班岗，跟同事做了告别。7 月 5 号，拿着离职证明，收拾好东西，离开了西丽。隔天就参加 VueConf 大会，见到了尤雨溪和 Anthony Fu

做了这么多年精神股东，终于来支持一回，希望 React 越办越好 👏

VueConf 结束之后，就去流放岭南，在广西桂林，体会到了什么叫做“江作青罗带，山如碧玉簪”

这里的山水真的很美，养得蚊子珠圆玉润，也感受到喀斯特地貌对于经济发展的阻碍，拔地而起的峭壁山峰，割裂了交通，住房和经济

在去到九马画山的偏方小路上，看到一路上种植着柚子，玉米等等，这是属于亚热带季风气候的回馈，光照充足，雨水充沛，水果种植，也成了当地人除旅游业之外的另一条生计

这一次是 p 人之旅，没有特种兵定点打卡，而是更多感受地理，人文。嗦了三天的桂林米粉之后，又回到了深圳，开启了雅思备考

关于考雅思，一个是本身对英语感兴趣，另一个是看过许多老前辈的经验之谈，学好英语对于程序员职业发展来说，是长期利好的事情

在这段时间，还学会做饭，个人以为，做饭和编程一样，都是属于创造的艺术

心血来潮还买了一个小米空气炸锅，第一次用觉得超级神奇的，仅仅依靠空气就能够把鸡米花烤得 tree tree 的

接下来的一个半月的时间，把自己当成高考生，按部就班地学习

8 月 30 号早上踏入考场，上午听力阅读写作，下午口语。成绩出得很快，三天后如期而至，得到了一个非常低的分数，这给了我当头一棒

付出了大量的时间精力，并不意味着有美好的收获，我花了三天时间做了痛苦而又深刻的复盘，是能力基础问题？是自律问题？是备考策略问题？是心态问题？最后结论是出来的是备考策略出现重大失误，罔顾实际情况，按照自己天真烂漫的想法去复习

复盘这几天我似乎有点“龙场悟道”，这个“道”后来我把它总结了「成长型思维」，关于成长型思维具象表现是，对于雅思考试的折戟失败，我没有消沉，在这段经历中，让我学会了第一件事情是——做人、做事需要符合物理、客观的规律，也就是雷军所说的「顺势而为」

无业 gap 的时期，并不美好，每天处于没有收入、消耗积蓄的焦虑，所以到了 9 月份，我需要重新开始找工作，自媒体和独立开发被我 pass 掉了，这两者现下并不能带来稳定的收入

又回到了起点，这一次我反而更加自信，充分吸取教训，我需要做好正确的求职策略，搜集各路面试资料，结合自身的实际情况，并且在 AI 的辅助下，写了一份《前端求职大攻略》

把自己求职涉及到的方方面都罗列出来，同时使用 PDCJ 模型，P = Plan（计划），D = Do （执行），C = Check（检查），J = Just（调整），也就是阶段性地计划、施行，再不断地检查、调整，确保自己的面试正确而又高效地进行

就业环境并不会因为你认真做好求职攻略、努力复习就给到丰厚机会，相反，每天投递的数十份简历都石沉大海，一个星期可能都约不到面试机会，这大概就是铜九铁十了吧

求职遇冷，那就好好抓住每一个来之不易面试机会，比如大学舍友的朋友内推了的转转前端岗位，面试前两天，刷完了转转的前端面经，一遍一遍地背前端面试题宝典的八股文，甚至于上厕所，也会拿着小程序刷题

但是，转转还是把我挂了，二面都没进

沮丧是没有用的，迅速复盘转转的整场面试，重听了当时的录音，把自己回答不上的问题找补，犯错的点做具体的纠正，为下一次面试做好准备

不久，意外接到了童心制物 HR 的简历邀请，是一个 Nodejs 的岗位，我拒绝了，如实说目前仅接受前端岗位，HR 却跟我要了简历转发给他们前端部门，没想到还通过了简历筛选，得到了一面的机会

一面发挥的很好，其中问到了一个难题，“如果不用 eval，还有其他方式去执行 js 函数吗”，刚好之前研究过 laf 的源码，知道可以用 vm 模块可以实现。之后又是二面和 HR 面，都顺利通过了，拿到了最终的 offer

童心制物涉及教育方向，这也是我很看重的一个点，大学的时候参加过支教，一直对教育这一块感兴趣，另外，这家公司给的薪资和福利都比较合理，所以……我入职啦

求职告一段落，顺便写了一篇博客作为输出，感兴趣可以查看——《前端开发实用的面试备考分享（内含资料 + 内推）》

这一段求职经历，总体上算是成功的，找到了理想的公司，理想的职位，但人不可能躺在功劳簿上过一辈子，新阶段会有新挑战，需要重新改变，重新努力

入职之后，体验了公司的激光设备，感受到了巨大的创造力：

用 F1 Ultra 雕刻的金属卡片，用 P2S 切割+雕刻的木板：

用 M1 Ultra 和热压机做的工服：

加入了心心念念的篮球社，开启了每周打篮球的固定活动，没想到老板也是篮球迷，现在每周都会一起打，看着他能明显感受身上的年轻、务实，身边的同事也是对他好评，我相信这些称赞不是人情世故

公司没有设立职称体系，转而实行扁平化管理，此举弱化了上下级概念。此外，公司还推行 AMA（Ask Me Anything，即问我任何事）活动，所有员工均可匿名提出任意问题，老板会逐一进行解答。可以看到，公司正在着力打造更为平等、透明、高效的职场环境，这也促使我对自身与企业之间的关系展开深入思考。

思考的结果为：作为员工，其行为与目标应当与公司的发展相契合。基于这一思考，我察觉到自己过往存在一些不良习惯，有时为了维护同事关系，或是顾及上下级的地位差异，对问题视而不见，对待工作打折妥协。

知行合一，慢慢将思考转化为行动，比如与同事协作后，即时给予反馈，对于公司内部平台出现的 bug，立即同步给相应负责人，尽量做到事事有反馈、发挥 owner 精神等等

童心制物很开放，有很多的活动可以参加，比如 Factory Day 工厂日，在周四那天乘着大巴，去到惠州工厂，参观了整条产线，看到了机器从零到一的生产过程

还有 MakeX 机器人挑战赛，这是一个具有重要影响力的国际化机器人赛事和教育平台，今年是第七年了，MakeX 总决赛又回到了深圳举办，立即报名了技术支持，参与了一天的活动现场

场馆设有各个国家的文化摊位，期间还被俄罗斯的大朋友投喂了巧克力零食

看大朋友、小朋友们激烈比赛：

以及让我难过了一天的创客马拉松，这是公司的特色活动，参与的最新的一期比赛，在决赛路演输了，作为队长很自责，忙碌了一周并没有好的结果，促使我进行反思，是带队伍问题？是项目推进问题？是质量问题？还是路演问题？

失败或许不是一件坏事，让我刻骨铭心，反而推着我进步

回头来看，今年最大的里程碑节点是备考雅思失败后的悟“道”，也就是成长性思维，这种认知层面的巨大改变，进而影响了我的工作、生活

我似乎不再害怕去面对我从未遇到的难题，我知道肯定方法、有途径能够去解决它，即使事与愿违，这过程中我也能收获到经验、智慧和勇气

我不再陷入完美主义，先做一个垃圾出来，再慢慢去迭代、优化，不要幻想一下子就能得到 100 分，但先拿到 60 分，再一点点进步，日拱一卒，等待那个增长拐点

我也变得更加正向，“世上只有一种英雄主义，就是在认清生活真相之后依然热爱生活”，坚持开放、乐观的心态，拒绝被悲观、消极所同化

或许我的所谓悟“道”、成长型思维，这些认知只是浅薄的，缺乏更多实践和经历，但是没有关系，做时间的朋友，随着年岁和阅历的增长，这套成长型思维也会随之”成长“

碎碎念的年终总结到此为止，写完之后还是很感慨，今年发生了很多事情，但在当时，只觉得是一个风平浪静的日子，或许此时此刻，也觉得是风平浪静的深夜。弱智吧有一句话，“有人看不到未来，其实是看到了未来”，初看的时候不理解，后来明白了，未来是动态的、不确定的，这就是未来的真面目，以为的看不到，其实恰恰是看到了，所以 2025，未来见。

没错！95年，还剩几个月就奔三了。2024年，注定是人生中意义非凡的一年，忐忑、裁员、出书、求职、转正这几个词贯穿了一整年。

忐忑

在上一家公司时，我从面试开始和到入职半年转正后，其实内心对于公司的状况一直保持一种忐忑不安的心情，这种感觉跟我老婆说过几次，我们一致认为应当有心理准备。原因在于薪资与公司的组织架构、基础建设、日常工作量安排和人员扩充速度都让人感到迷惑。

公司是在一个包括高层话事人不断更换，高层（副总裁）突然接受停止调查；技术部门仅仅作为辅助，技术氛围低沉，基建缺失，直属leader作用甚微；工作量与人员匹配失常，人多活少，尽管如此年初还在不断扩招中，泡沫感极强，伴随着薪酬发放日漂浮不定，每到月底像是在开盲盒，你永远不知道银彳亍卡何时会有一笔款到账。

裁员

一系列薪酬制度改革和薪酬拖欠不得不怀疑高层战略的正确性，直到四月某一天CTO私聊我，泡沫破裂，裁员尘埃落定。

我被归属于第一批裁员名单中，与CTO交谈中，似乎也流露一丝对高层决策的不满，但没有明说，给我的理由是当前工作任务都很简单，匹配不了我的能力，所以给了我一个名额。

这放在当时听上去有些许意外，但我接受了这种措辞，并不是因为CTO说了几句好听的话，更多是我作为一个技术人的直觉认为这个CTO靠谱。离职过程中对人事提出的补偿计算方式以及分期发放，我都拒绝了，最后经过与人事反复讨论之后拿到了补偿，少不了他的协助，所以内心表示感谢。从现在的视角看来，似乎是他已经意料到公司的发展趋势，以致于后来被裁员的人有很大一部分都没有赔偿。

出书

离职后我在家休息了一个月，期间也为了帮一个粉丝忙，接手了他工作的一部分任务，主要是做游戏业务的动画。期间有被一个后端恶心到，业务不熟悉，接口一直不通就算了，关键还理直气壮说是前端问题；我佩服那个粉丝能够忍气吞声这么久，换做其他人也很难不高血压，为此特意发圈宣泄。

由于后端提供的接口迟迟不通，需求没有预期上线，为此他们老板还大发雷霆，最后把锅推给了这个前端粉丝，声称把他给炒了。没过一个月，粉丝的这个公司被帽子叔叔查封，业务涉及到了灰产，老板和负责人进去了。员工的工资都没发，但我的报酬是因为签了合约，在deadline之前要求他们打款，对我没有影响，这是苦了这个粉丝。

在此之后我便全职写书，《NestJS全栈开发解析：快速上手与实践》 这本书临近结尾，我一鼓作气完成了并在5.1号劳动节那天交稿；写书的想法也有一部分是来源于CTO的启发，后面图书审阅也是找了CTO帮忙，熬夜帮我看完并给了这个评语，为此我很感谢他。

经过几个月的审批和改稿，图书在9月份正式发布了各大平台，这是一件值得高兴的事情。

而对于前司的后续，据说后面还搬到一个CBD进行办公，但当时员工已经欠薪几个月，以至于到年底，公司被迫全员原地解散，很遗憾这不是一个好结果。

求职

交稿完成后，花了一个月左右时间求职，拿到了3个offer，最后选择了去深圳的美图，这是凭借NestJS的图书写作获得的一个岗位。之后由于组织架构变化，我在转正前夕面临选择继续从事Node全栈还是Go语言开发，考虑一番后我选择了后者，顺利转到了后端架构组，负责go语言开发，这对我来说又是一个新的尝试和挑战，我选择了这种变化，与框架和语言无关，只不过是践行我的人生哲学：【不断变化】，让自己处于一种长期乐观、短期痛苦、当下快乐的舒适区边缘中。

觉醒

关于成长，过去我一直不喜欢看历史，或许归根于上学时代对于历史学科的厌倦，没看过基本历史文献。2024年底，我看了教员的《毛选》、《实践论》、《矛盾论》、《寻乌调查》，第一种感受是成功绝不是偶然，环环相扣的逻辑能力令人惊叹。我想这些书籍回答了我一直以来的问题：

如何成为一个独立、深度思考的人？

我们人生中做了一个坏的决定，在股市中选择了不争气的股票，最坏的结果无非是让自己从头再来。但革命不同，选择错了就有可能让整个民族处于被毁灭的境地中，每一步都步履蹒跚，这该有怎样的智慧与思维？

第二种感受是遗憾没有早点开悟，在临近30岁时才开始阅读这些书籍，当然也很庆幸没有太晚，一切都来得及！

特别的是，《寻乌调查》报告里面的细节，应该是我人生中读过的一本最详细的一本书籍，里面还记载了寻乌与我老家（兴宁）相关的历史宜了，没有一句多余的，都是干货。第一次感受原来伟人离我这么近。

教员做了这个调查报告之后，便留下一句千古格言：没有调查，就没有发言权！反观自身，何尝不是应该这样呢？

关于家庭，今年整个过程中家里的大大小小的事基本上都是我老婆操办，为我们的小家默默付出了很多，加上我去了深圳之后，我的衣食住大部分也是她来打理，一个人照顾小孩，现在甜筒一岁半了，如我们所愿健康成长，这隶属她的功劳。

一个家庭要想变好，靠一个人努力不行，需要“拉拢”有能力的人一起，话事人脑子要清醒，能够明辨是非，唯唯诺诺绝对是会出问题的。

一个家族要想变好，靠一两个人不行，得靠一两个家庭真正向好，大家庭才会有希望。

最后，没有Flag，年度总结中对未来进行遐想没有意义，沉浸于自己完成所有Todo List的那种兴奋是虚构的，而实践中那种痛苦、无助才是我们最真实的感受，人不能总活在无限遐想的递归当中。

我看过那些在新年Flag列举诸多愿望，买了一堆书籍想要读完的，来年能真正落地完成的少之又少，毕竟我亦如此。

2025年，爱自己，爱家人，步步为营，不负将来！祝所有支持我的粉丝朋友们，一切如意，事业感情双丰收~

引言

什么是博弈论（Game Theory）？百度百科的介绍如下

博弈论，又称为对策论（Game Theory）、赛局理论等，既是现代数学的一个新分支，也是运筹学的一个重要学科。

博弈论主要研究公式化了的激励结构间的相互作用，是研究具有斗争或竞争性质现象的数学理论和方法。博弈论考虑游戏中的个体的预测行为和实际行为，并研究它们的优化策略。生物学家使用博弈理论来理解和预测进化论的某些结果。

博弈论已经成为经济学的标准分析工具之一。在金融学、证券学、生物学、经济学、国际关系、计算机科学、政治学、军事战略和其他很多学科都有广泛的应用。

博弈论在生活中的影响无处不在，比如许多朋友会面临一种选择选择，两家公司给你发了offer，一家公司薪资高，职位高，但可能需要频繁加班，压力很大。另一家公司薪资比你现在低一些，但是可以保证你准时下班，让你有充足的业余时间。对于单身的人来说这个并不难选择，但是当你结婚生子，这个问题就会瞬间变得复杂。

还有一个现象，为什么当团队内有一个人下班晚，整个团队的下班平均时间就都会往后延。

学习博弈论，只为了一件事情：拥有识别博弈格局的眼光，拥有改变规则的意识。简单来说，先理解长期存在的现象，并能够去改变不好的局面。

看完这篇文章，你或许就会拥有一个全新的视角去看这个世界。

介绍博弈论，我们先从三个基本概念开始，分别是帕累托最优，囚徒困境和纳什均衡。

帕累托最优

每一个成家、有孩子的人，再找工作时都会考虑如何平衡工作、收入、家庭三者之间的关系，说白了就是钱多事少离家近。

你现在有一份不错的工作，有一份稳定的收入，到了下班时间，你回家陪伴家人，辅导孩子写作业，顺便还能做做家务。公司、家人对你很满意，有房有车，收入足以满足日常花销，甚至有点小积蓄。

其实外面有其他公司给你抛来了橄榄枝，有的公司承诺如果你过去，会给你升值加薪。当然也有别的机会，你工作可能更清闲，但你的收入也会下降。

你很难做出抉择，你不是一个个体，你还需要考虑别人的选择。因为你一旦选择更高收入，就意味着要做更多的工作，没法按时下班，家人会对你有意见。新工作压力可能很大，你的状态也会变差，你不但没法照顾家人，可能家人还要额外提供给你情绪价值，家人一定会不满意。

此时，你在工作、收入、家庭取得了平衡，你无法在不影响收入和家人满意度的情况下去换另一份工作，此时的局面就叫做“帕累托最优”。

我们都希望工作和家庭最理想的状态是帕累托最优的，可我们都知道，生活中似乎很难达到这个状态，帕累托最优这个状态很理想化，因为它是不稳定的。

博弈论要求我们需要考虑竞争对手怎么做，虽然我不想把工作称之为竞争对手，但是在这个三角关系中，这里的竞争对手就是你的工作。

工作中公司一定要求你尽职尽责的完成本质工作，你要能够承担一定的责任，最好你要有一点创新，能够给公司带来一定改变，带来额外的价值。

一直以来你自己负责一个项目，这时候你的工作由你自己安排，要做的事情有很多，但你有没有三头六臂，那你只能一件一件来。当天既然没法做完所有工作，那到点下班就好。

可你的项目越来越有前景，公司决定增加人手，公司招进来了另一位同事，我们叫他小齐。现在你俩需要一起负责这个项目，你们既是合作关系，又是竞争关系。

那工作还是这么多，却有两个人来干了。如果你按点下班，可同事还想“承担”，他多做一点，你就少做一点，时间长了对你可不是一个好消息，你不得不选择加班。

这也就解释了为什么有时候一个团队只要有一个人加班，大家普遍的下边时间都会变晚，也称之为内卷。

这时候你想了一个办法，你请同事吃了一顿饭，你说你还单身，你得丰富一下业余生活。我认识一个单身的女同事，听说你俩爱好挺像，我把她微信推给你，以后你们下班可以一起约着出去玩。

后来你们都不加班了，你们依然是平等竞争，而且你又可以按时回家陪娃了，这就叫“帕累托改进”。

压倒性策略

或许你听过囚徒困境的故事，囚徒困境的故事最适合解释这个概念，但你和小齐的故事还在继续。

（注：下面的例子纯属虚构，如有雷同，纯属巧合）

你和小齐接手了全新的项目，有大量的代码开发工作，你俩的技术水平相当。可之前你给他介绍的单身女同事，后来找了男朋友，可惜那个人不是他。他感觉被套路了，给你说在你没有给他介绍下一个对象之前，他暂时决定和你势不两立。

可工作还得继续，你们都可以选择写出高质量的代码，需要花费更多的精力，但很明显你的口碑会变好。也可以得过且过，写出质量一般的代码，工作量明显变少，但项目质量可能一般。

根据两人的选择，存在几种情况

• 两人都贡献高质量代码，项目质量得到广泛认可和领导称赞，声誉增加了


• 如果一人费心费力提供了高质量代码，而另一个人敷衍了事，代码不规范、质量差。那么项目依然会正常上线，写低质量代码的人可以说是被大佬带飞（+7），而高质量代码因为加班、熬夜，所获的收益变少了（+2）


• 如果两人都敷衍了事，上线之后问题频发，虽然工作完成了，可产品运营会不停的和你领导吐槽，领导对你们的印象大打折扣（+3）

注意：我们这个例子不考虑这个工作对于后续年终奖或职业生涯发展如何。就只针对这个工作，我们来分析一下你和小齐的博弈策略。首先我们把不同的策略和结果画在下面这个矩阵图里。多说一句，这种画法是美国经济学家托马斯·谢林发明的。

其实你明显看可以看出，最好的结果就是两个人都贡献高质量的代码，然后项目稳定，还能收获良好的口碑。

但是，博弈论要求我们每次做判断都要考虑对方-----并不是说怎么样对对方好，而是对方会如何选择，然后你根据对方的选择再考虑怎么做。

我们具体看看你的收益分析：

• 如果小齐开源高质量代码：你选择开源高质量代码，收益为 +5。你选择写低质量代码，收益为 +7。 （低质量代码收益更高）


• 如果小齐开源低质量代码： 你选择开源高质量代码，收益为 +2。你选择开源低质量代码，收益为 +3。 （低质量代码收益更高）

你发现，无论小齐怎么做，你选择写一些低质量的代码，你的收益都会更高！于是你来说，选择写份低质量的代码，就是一个压倒性策略。

可反过来对小齐来说呢，这就是一个被压倒策略！但博弈论的前提是大家都是理性人，小齐也聪明的很，于是他也意识到选择写低质量代码，是一个压倒性策略。

对理性人来说，在博弈中一定要选择压倒性策略，任何情况下都不要选择被压倒性策略。

你俩同时这样选择，这就引出接下来的一个最重要的概念，纳什均衡。

纳什均衡

上面说到你俩同时放松了对自己的要求，写的代码缺乏设计，代码不健壮，上线之后问题频发，领导对你俩很不满。

这个结果可不是帕累托最优，但这个结果是稳定的，不管我们是否喜欢这个局面，但我们认可这个局面了。

线上一直报警，产品运营一直来找我们排查问题，这些都惹人心烦。我们或许都想把项目做好，但在这个组合里，没有一个人愿意单方面改变自己的策略。

因为无论对谁来说，此时选择去写高质量代码，都会让自己的利益受损，谁不想更轻松一点呢？

这种没有任何一方愿意单方面改变策略的局面，就是纳什均衡。

纳什均衡的概念由约翰·纳什提出，他是著名数学家、经济学家，还是《美丽心灵》男主角原型，他与另外两位数学家在非合作博弈的均衡分析理论方面做出了开创性的贡献，对博弈论和经济学产生了重大影响，而获得1994年诺贝尔经济学奖。

文章开头的对于找工作和家庭的例子就是一个纳什均衡，要记住纳什均衡不是最优的局面，如果你观察到身边的人在一家公司干了5年甚至10年以上，他的薪资或许会落后于市场平均水平，但对他来说，这份工作对于工作、生活、收入来说，大概就是一个纳什均衡。当然有的工作也可能不让你准时下班，甚至可能让你没有业余时间，就像一个在大厂996，忙到没有时间顾家和看娃的人来说，这也是一个纳什均衡。

如果你观察到社会上的一个现场长期稳定的存在，它对于所有参与方来说就是一个纳什均衡。纳什均衡告诉我们评价一个事情不能看它是不是对整体最好，它必须要让所有参与者都不愿单方面改变才行。

说在最后

公司领导发现项目问题不断，悄悄从HR那里调出了你和小齐的打卡记录，赫然发现你们天天5:30准时打卡，项目问题这么多，你俩准时下班，难怪运营天天说问题解决不及时，他决定宣布，在这个项目结束之前，项目组实行996工作制。

本来还想平衡好工作和家庭，这下可好了，不但日常加班，还损失了周六的时间。

那你说，这该怎么办呢？欢迎你在评论区说出你的看法，也希望你点赞、评论、收藏，让我知道对你有所收获，这对我来说很重要。也欢迎你加我的wx：Ldhrlhy10，一起交流～

本篇文章是第65篇原创文章，2024目标进度65/100，欢迎有趣的你，关注我。

token-bucket-limiter-redis 是一个令牌桶算法 + redis 的高效限流器，用于Node服务接口限流。

当然作为一个前端你可能很少接触Node接口开发，用的接口应该都是后端同学提供的，他们有自己的限流策略，但是你一定使用过SSR框架来开发服务端渲染项目，那么此时你的项目就只能靠我们自己来做限流了，否则遇到突发流量时，你的项目可能很容易崩溃。

• 使用令牌桶算法实现


• 支持基于内存和基于 redis 存储的两种选择，满足分布式限流需要


• 高性能，令牌生产的方式为每次请求进来时一次性生产上一次请求到本次请求这一段时间内的令牌，而不是定时器生成令牌


• 快速，使用 lua 脚本与redis通讯，lua 支持将多个请求通过脚本的形式一次发送到服务器，减少通讯，并且脚本支持缓存，多客户端可以复用


• 安全，lua 脚本保证redis命令执行的原子性


• 内存效率高，键过期后自动删除，不占用过多内存


• 提供多种极端场景下的降级和容错措施

其他限流方法的对比，大家可以自行搜索，这里就不赘述了，令牌桶算法是更适合大部分场景的限流方案。

令牌桶算法：按照一定的速率生产令牌并放入令牌桶中，最大容量为桶的容量，如果桶中令牌已满，则丢弃令牌，请求过来时先到桶中拿令牌，拿到令牌则放行通过，否则拒绝请求。这种算法能够把请求均匀的分配在时间区间内，又能接受服务可承受范围内的突发请求。所以令牌桶算法在业内较为常用。

该项目github地址：token-bucket-limiter-redis

安装

npm i --save token-bucket-limiter-redis

引入

import { RateLimiterTokenBucket, RateLimiterTokenBucketRedis } from 'token-bucket-limiter-redis';

使用

限流方案我们分为无状态限流器和有状态限流器两种：

有状态的限流器（区分key的限流器）：这种限流器会根据某种标识（如IP地址、用户ID、url等）来进行区分，并对每个标识进行单独的限流。可以更精细地控制每个用户或者每个IP的访问频率。

无状态的限流器（不区分key的限流器）：这种限流器不会区分请求的来源，只是简单地对所有请求进行统一的限制。

基于内存的无状态限流器

const globalRateLimiter = new RateLimiterTokenBucket({

    tokenPerSecond: 100,

    capacity: 1000,

  });



const globalTokens = globalRateLimiter.getToken();



if(globalTokens > 0){

  // pass

}

基于内存的有状态限流器，自定义key

const globalRateLimiter = new RateLimiterTokenBucket({

    tokenPerSecond: 5,

    capacity: 5,

    keyPrefix: 'test', // 指定限流器所属项目或模块

  });



const key = ip + uid; // 标识用户信息的key



const globalTokens = globalRateLimiter.getToken(key);



if(globalTokens > 0){

  // pass

}

这里附上 node 端获取ip的方法

function getClientIp(req) {

  // 获取 X-Real-IP 头部字段

  const xRealIP = req.headers['x-real-ip'];



  // 优先使用 X-Real-IP 头部字段

  if (xRealIP) {

    return xRealIP;

  }



  // 获取 X-Forwarded-For 头部字段，通常包含一个或多个IP地址，最左侧的是最初的客户端IP

  const xForwardedFor = req.headers['x-forwarded-for'];



  // 如果 X-Real-IP 不存在，但 X-Forwarded-For 存在，则使用最左侧的IP地址

  if (xForwardedFor) {

    const ipList = xForwardedFor.split(',');

    return ipList[0].trim();

  }



  // 获取连接的远程IP地址

  const remoteAddress = req.connection?.remoteAddress;

  // 如果都不存在，使用连接的远程IP地址

  if (remoteAddress) {

    return remoteAddress;

  }



  return '';

}

基于内存的有状态限流器，使用ip作为默认key

const globalRateLimiter = new RateLimiterTokenBucket({

    tokenPerSecond: 5,

    capacity: 5,

    keyPrefix: 'test', // 指定限流器所属项目或模块

  });



// 使用 ip 作为key，无需传入，自动获取ip

const globalTokens = globalRateLimiter.getTokenUseIp(req);



// 使用 ip 加上自定义的其他key，如传入则组合在ip后 ip+uid

const globalTokens = globalRateLimiter.getTokenUseIp(req, uid);



if(globalTokens > 0){

  // pass

}

注意，单纯使用ip作为限流key可能会有问题，有以下几种可能过个机器的外网ip相同的情况：

• 使用共享的公共 IP 地址： 在一些特殊的网络环境下，多个设备可能共享同一个公共 IP 地址，如咖啡馆、图书馆等提供 Wi-Fi 服务的地方。在这种情况下，所有连接到同一网络的设备都会共享相同的公共 IP。


• 使用代理服务器： 如果多个机器通过相同的代理服务器访问互联网，它们可能会在外网上表现为相同的 IP 地址，因为代理服务器向互联网发起请求，而不是直接来自每个终端设备。


• 使用 NAT（网络地址转换）： 在家庭或企业网络中，使用了 NAT 技术的路由器可能会导致多个内部设备共享同一个外网 IP 地址，同一公司下的内网设备公网ip可能是同一个。

综上，如果你需要考虑以上集中情况的话，你需要结合其他可以标识用户身份的key，如uid，浏览器指纹等：

// 使用 ip 加上自定义的其他key，如传入则组合在ip后 ip+uid

const globalTokens = globalRateLimiter.getTokenUseIp(req, uid);

附上浏览器指纹获取方法：

function generateFingerprint() {

  try {

    // 收集一些浏览器属性

    const userAgent = navigator.userAgent || '';

    const screenResolution = `${window.screen.width}x${window.screen.height}`;

    const language = navigator.language || '';

    const platform = navigator.platform || '';



    // 将这些属性组合成一个简单的指纹

    const fingerprint = userAgent + screenResolution + language + platform;



    // 返回指纹

    return fingerprint;

  } catch (error) {

    return '';

  }

}

在 express 中使用

const express = require('express');

const app = express();



const globalRateLimiter = new RateLimiterTokenBucket({

    tokenPerSecond: 5,

    capacity: 5,

    keyPrefix: 'test', // 指定限流器所属项目或模块

  });



// 全局中间件

app.use((req, res, next) => {

  console.log('Express global middleware');

  // 使用 ip 作为key，无需传入，自动获取ip

  const tokens = globalRateLimiter.getTokenUseIp(req);



  if(tokens > 0){

      next();

  }else {

    res.status(429).send({ message: 'Too Many Requests' })

  }

});



app.listen(3000, () => {

  console.log('Express app listening on port 3000');

});

在 koa 中使用

const Koa = require('koa');

const app = new Koa();



const globalRateLimiter = new RateLimiterTokenBucket({

  tokenPerSecond: 5,

  capacity: 5,

  keyPrefix: 'test',

});



// 全局中间件

app.use(async (ctx, next) => {

  console.log('Koa global middleware');

  // 使用 ip 作为 key，无需传入，自动获取 ip

  const tokens = globalRateLimiter.getTokenUseIp(ctx.req);



  if (tokens > 0) {

    await next();

  } else {

    ctx.status = 429;

    ctx.body = { message: 'Too Many Requests' };

  }

});



app.listen(3000, () => {

  console.log('Koa app listening on port 3000');

});

在 fastify 中使用

const fastify = require('fastify')();



const globalRateLimiter = new RateLimiterTokenBucket({

  tokenPerSecond: 5,

  capacity: 5,

  keyPrefix: 'test',

});



// 全局中间件

fastify.addHook('onRequest', (request, reply, done) => {

  console.log('Fastify global middleware');

  // 使用 ip 作为 key，无需传入，自动获取 ip

  const tokens = globalRateLimiter.getTokenUseIp(request);



  if (tokens > 0) {

    done();

  } else {

    reply.status(429).send({ message: 'Too Many Requests' });

  }

});



fastify.listen(3000, (err) => {

  if (err) throw err;

  console.log('Fastify app listening on port 3000');

});

基于redis的无状态限流器，传入redis客户端

支持分布式限流，外部传入redis客户端 (由ioredis包创建)

import Redis from 'ioredis';



const redis = new Redis({});



const globalRateLimiter = new RateLimiterTokenBucketRedis({

    tokenPerSecond: 100,

    capacity: 1000,

    keyPrefix: 'test', // 指定限流器所属项目或模块

    redisClient: redis,

  });



const key = 'myproject'; // 使用全局唯一key (当key省略时，默认为RateLimiterTokenBucketGlobalKey)



const globalTokens = globalRateLimiter.getToken(key);



if(globalTokens > 0){

  // pass

}

基于redis的有状态限流器，传入redis客户端

支持分布式限流，外部传入redis客户端 (ioredis)

import Redis from 'ioredis';



const redis = new Redis({});



const globalRateLimiter = new RateLimiterTokenBucketRedis({

    tokenPerSecond: 5,

    capacity: 5,

    keyPrefix: 'test', // 指定限流器所属项目或模块

    redisClient: redis,

  });



const key = ip + uid; // 标识用户信息的key

const globalTokens = globalRateLimiter.getToken(key);



// 使用 ip 作为key

const globalTokens = globalRateLimiter.getTokenUseIp(req);



// 使用 ip + 自定义key

const globalTokens = globalRateLimiter.getTokenUseIp(req, key);



if(globalTokens > 0){

  // pass

}

基于redis的有状态限流器，使用内置redis

外部仅需传入redis配置（ioredis）

const redisOptions = {

  port: 6379,          // Redis 端口

  host: 'localhost',   // Redis 主机名

  password: 'password' // 如果有的话，你的 Redis 密码

  db: 0,

};



const globalRateLimiter = new RateLimiterTokenBucketRedis({

    tokenPerSecond: 5,

    capacity: 5,

    keyPrefix: 'test', // 指定限流器所属项目或模块

    redisOptions: redis,

  });



const key = ip + uid; // 标识用户信息的key



const globalTokens = globalRateLimiter.getToken(key);



if(globalTokens > 0){

  // pass

}