作为一个从事 Web 工作 8 年来的相关人员的一点心路历程，希望我的经历能给大家带来稍许乐趣。

迷茫，特别迷茫

俗话说得好：“岂能尽如人意，但求无愧于心”，工作 8 年来，我经常这样自我安慰。不过这并不影响我也经常感觉无所适从，烦闷与迷茫。尤其是到了一些特殊的年月节点，这种焦虑感总是更加强烈。

那到底有什么迷茫的呢？一言以蔽之，有了对比，就有了伤害。正如标题所言，女朋友和技术能力，换一个通俗的话，也可以叫“美女与金钱”，当然更常规的说法，是“家庭与事业”。

如果简单横向对比起来，我迷茫确实看起来不意外：

• 我好歹也是正儿八经 985 大学软件工程方向本科毕业，也算是科班出身；


• 工作了 8 年，不仅是被同学、绝大部分同行从业人员从薪资水平、发展前景、人际交往、生活质量等各方向甩在身后，甚至都比不上复读一年考上不知名二本学校、去年才毕业的表弟；


• 没房没车，没有成婚，还背井离乡，漂泊千里之外；


• 日子看起来浑浑噩噩，没有什么远大志向，也没什么乐衷的兴趣……

怎么就变成这样了呢，我觉得我有老老实实、脚踏实地地做事情啊。回想自己从业这些年：

• 从一开始的 JSP + Spring MVC + MySQL 这套原始的 Java Web 开发;


• 到当时外面还比较时髦的 MEAN(MongoDB、Express.js、Angular 和 Node.js);


• 后来回归到 Angular + Spring 这套，然后改为现在常用的 Vue + Spring，其中还一度以为 WebFlux 会有大用;


• 当然前几年除了做些全栈开发，还不得不兼备 K8s 相关一大套的运维技能；


• TiDB、Redis、ES、Prometheus 什么的都要搞一搞，Flink 什么的也得弄一弄，加上一大堆第三方自动化、监控等工具的使用配置；


• 现在没事时用 Python 写个脚本处理一些批量任务，自己搞搞 Flutter 练手自己用的 APP。

我都觉得自己还是挺厉害的，因为这些就没一个是学校里教的东西，都是出来挨打自学的。

但实际上的现状呢，我还是呆在一个电子厂里面，拿着千把块，做着鸡毛蒜皮的事情，下班就回到公司的宿舍，龟缩起来。这样 855 毫无意义的日子，居然一呆就是 8 年了。

“可怜之人必有可恨之处？”

那我当然是自以为是的可怜了，毕竟如果真得像我说的那样出色，是金子自然会发光了，也怎么可能愿意继续呆在这种地方，离最近的地铁站、火车站都要30多分钟公交的制造业工厂里面？

确实，扯开嘴巴滋哇乱叫谁不会，有什么因就有什么果了。

• 大四的时候，跨专业自学准备心理学方向的考研，错过了秋招；没考上之后，当时的技术能力，已经不支撑找个满意的工作了。


• 做中学，两年后的 18 年正是行业发展高潮，准备出去看看。结果年轻，血气方刚，在领导的 PUA 和自以为是没能干出一点功绩就离开，不满意，然后留下来。


• 又之后的一年之余，已经发现技术水平和人生阅历和同行差距过大，还是骑驴找马。在得到几个 offer 之后，却不知原因突然想回老家城市，这些深圳广州的机会就莫名其妙放弃了，重庆的眼高手低又没找到满意的。


• 之后疫情时代，在一些大城市比如 SH、SZ 等出现强烈的排外现象之后，越发想要回家。但重庆的互联网行业，和主流城市差距可太大了。当时当地政府甚至在大力发展实体制造业，老家区县招商建工厂，租 100 亩送 100 亩。


• 疫情尾期和这两年，什么“前端已死”、行业落寞，找工作难度陡升，试想，什么样的公司会找一个 8 年工作经验的初中级前端?全栈?运维?……

去年我找工作从 5 月份找到 10 月份，沟通了 200 多个岗位，只有 20 多个接收了简历，约到 3 个网上面试，最后一个没过。除了一些需要线下面试的没法去，也有面试的匹配度也不够、岁数不够年轻等其他因素。8 年来最多就管理过不到 10 人的小团队，当然不到一年就结束了，也没有能力发展管理岗。

与自己和解是不是自欺欺人？

会不会有种“咎由自取”的感觉，我偶尔也会想：

• 如果 18 年我去了深圳而不是听信领导的话留在了东莞这里，我的发展轨迹会不会有所改善？


• 更有甚，如果大学不是脑袋一热为了自救去考什么心理学专业的研究生，好好学习技能找工作或者考本校，会不会又是另一番风景？


• 甚至更早，如果当年高考没有发挥失常，或者要是考得更差一点，去个师范，实现我儿时的理想，成为一名教师，情感上是不是更能自洽？

有句网络流行语是这样说的：有人看段子，有人照镜子。曾几何时，我也这样觉得：

• 反正现在没车没房没女友，离家又远没外债；


• 物质能力虽不高，但消费欲望不强；


• 不能为国家做大贡献，但也还没有给社会添乱；


• 下班回宿舍看看视频、打打游戏、玩玩手机，偶尔出去打打球，散散步……

没有复杂的人际关系，没有太大的家庭工作压力，清闲时间也比较充足，简简单单三餐一宿，我明明很惬意的，也明明已经惬意了 8 年来。

——“你一个月多少工资？” 、“怎么才这点？”

——“你现在什么级别？” 、“怎么才这个级别？”

——“你开什么车？” 、“什么？你连驾-照都没有？”

——“你孩子几岁了？” 、“啊，你还单身？”

——“天啦，你怎么混成这样了？”
……

“人的悲喜并不相通，我只觉得他们吵闹”。“墨镜一带，谁都不爱”，我脑袋摇成螺旋桨，我飞走咯，千里之外~

未立，缺少的是女朋友？

我的看法认为：可能不是。

没有什么是一成不变的，比如年龄。我这个年纪可能不仅和更年轻的同行抢岗位抢不过，也可能在另一个相亲市场也抢不过。

虽然嘴巴上可能有的人觉得单身好，而且现在这个男女关系和社会认同比较复杂的时代。前段时候和老同学聊天聊到近况，他们都一直以为我是一个不婚主义者。当然，这并不影响我们老一辈甚至再老一辈亲戚的期盼，他们偶尔也会认为，结婚之后，一个人才成长了，他们才会放心。

你别说，你还真别说。这半年我没有写博客，也没有太多了解“行业寒冬”的发展情况，有一部分原因还真是因为年初聊见了个相亲对象。这对我是一个完全没有经历过的赛道，难得的是我感觉还不差，虽然发展极为缓慢，但还没有遇到网上那样的“悲惨经历”，当然，也可能是异地的原因。

我要经历这种事，只能是亲戚朋友帮忙，加上微信之后聊了聊，整体氛围很好，就这么聊了一个多月。本来过年的时候约个见面的，但没想到升级了，直接他们父母到我家来坐了坐，然后又邀请我父母去她家吃了饭。这在农村的意思就是老一辈的过场已经走完了，双方家长没有意见，我们能不能成、就全看自己了。

这半年虽然几乎天天都有聊，绝大多数情况下都很愉快，我也变得有些期待每次的聊天；平时也有礼尚往来，偶尔互有一些小惊喜小礼物；五一节我也回去见了面，牵牵小手，后来得知当天她出门之后才发现来例假、身体不适但还是陪我走了将近三万步的路、甚至没让我发现异样……

但问题的关键在于，似乎都没有聊到什么重点和关键的问题，没有实际的发展，感觉温度没有理想上升。仔细想想，把这每天和她相关的一两个小时删除掉，那和我这些年的日子几乎没什么区别，好像一样是挺自在惬意的，她甚至都没有给我一些需要我去翻视频学点“人情世故”才能处理的问题和情景。

本来以为是好事，但我的榆木脑袋才终于不得不承认异地一定是个大问题。所以到现在，我这股子想回家的心情就变成了内因和外因相结合的无懈可击的推力。但是却还没有热切到一拍脑袋裸辞先回家，再看天的程度。

未立，缺少的是技术能力？

我的看法认为：可能也不是。

虽然我个人学的东西有一点点乱，但怎么说呢，并不影响我自娱自乐。偶尔开发一个自用的小玩意儿，还盲目觉得挺有成就感。

而且，从实际情况来讲，现在的“技术能力”真的不是那么的重要，如果是做产品，可能一些经验能力也不可或缺，但会写代码的人，可是一抓一大把。

比如说，现在的 AI 大模型几乎是热到爆的话题，也算是百花齐放，也各自杀红了眼，现在的新东西，不说自己有个 AI，都不好意思大声讲话，新出的 PC 都挂上 AI PC，魅族都不做手机，改名为 AI 终端了。

作为普通用户和普通个人开发者角度来讲，现在使用这些大模型 API 其实非常便宜了。价格战百万 token 才几十块甚至几块钱，文本对话、文生图、图生文，也都有一定的可用性了。

但是呢，但是呢，能拿来做什么呢？有创造性的同行都已经借着东风，扶摇直上九万里了，我还在感慨好便宜啊，除了BAT平台，这两天还去零一万物、深度求索等平台注册了账号，部分也少少充值了些。但是，虽然好便宜啊，可是能用来做点什么呢？我还真的没有创造性。

既然都说到这里，也厚脸皮顺便说一句，最近弄了个比较简陋的，使用Flutter开发，支持诸多AI大模型API调用的，假装类似智能工作生活助手应用。顺带加上之前的极简记账、随机菜品、猫狗写真，放在 Github 上 Sanotsu/swmate ，虽然很简陋也不完善，但感兴趣的朋友可以看看。

生活不需要别人来定义

可能“三十而立”意思是指人在三十岁前后有所成就。少年老成的例子很多，大器晚成的人物也不少，但到最后，这都是别人来定义的这个“立”的含义。

就如见世面，有的人是“周游列国、追求自由”，有的人是“四体勤、五谷分”，有的人的成就是“成家立业，香车美女环绕”，有的人是“著作等身”，也有的人却是成为“艾尔登之王”……外面的人看到的或许不同，但那份自己内心的快乐，是为了、也是应该能够取悦自己的。

今天是我三十岁生日，大概500天前我列了三十岁前想要完成的 10 件小事，结果当然只完成了小部分:

• 体重减到正常 BMI 值；


• 开发一个能自用的 APP/入门一门外语；


• LOL 上个白金/LOLM 上个宗师;


• 谈一次恋爱；


• 出去旅游一次；


• 换一份工作，换一个城市；


• 补上自己的网站博客，整理自己的硬盘；


• 看 10 本名著，并写下每本不多于 5000 字的读后感；


• 完成一部中篇小说；


• 完成 50 篇用心写的博文，可包含那 10 篇读后感。

人生是一条连续的时间线，除了起止点，中间这段旅程，并不会因为某一刻的变化而停下来，最多是慢下来；三十岁之前没有完成的事情，三十岁之后依旧可以去做；以前看得太重的东西，以后还可以改变很多；珍惜的事情太多，抱怨的时间太少；人生这段路，就这么些年，就该为自己走走看；路虽然走得不同，但走路的心情，却可以自己来定。

取悦自己真的比迎合他人要轻松和快乐许多。

共勉吧诸君，感谢垂阅。

上周许久未见的大学学长叫我出去喝酒，他这次来贵阳是为开分店的事情而来的，他比我高一个年级，在我毕业的时候，他就自己开始做生意了，短短两三年，到现在他已经开了七八个分店了，还在不断发展，并且加盟的人也不少，平均下来，现在每个月的收入也是很可观的。

对于我们这种末流二本院校毕业的学生，特别还是在贵州这个经济相对比较落后的地区，拿到这个成绩还是挺厉害的，并且这个收入并不是固定的，还是不断增长。

学长是学市场营销的，这也算是个天坑专业，所以那会他就知道自己将来肯定是从事不了这个行业的，所以自己就在宿舍开了一个小卖部，每天下课后就骑着电瓶车去送货，虽然每个月赚不了多少钱，但是对于做生意这一块，他的思维肯定是得到了锻炼。

因为我们是在广西读书，所以螺蛳粉就比较多，在毕业后，他就去柳州考察做螺蛳粉，联系好各种渠道后，回到贵州就直接开干。

因为那会贵州的各个市里面卖螺蛳粉的还很少，并且没有特色和品牌效应，所以自己就先设计名称，logo，最后先开了一个店铺，自己亲自下厨，因为比较有特色，一个月直接干到了全市螺蛳粉餐饮销量的第二名。

随后又开了第二家，第三家......别人在看到他赚了钱后，其它市区的人也纷纷向他学习，他自己就收加盟费用，现在他要做的事情就是玩，还有考察门店，然后扩展。

从他的事迹中，我说两个点。

勇于放弃

对于很多人而言，读书的目的就是为了找一份稳定的工作，最好是体制内。

如果你读完大学后出去做销售，做生意，那么对于你身边的很多人而言，他们会觉得你这个大学白读了，因为在他们眼中，只有坐在办公室里面才是最体面了。

你和他说做生意，创业这些东西，他会给你说：这些不稳，以后没有退休工资。

但是如果你真听他们的，那么后面后悔的一定是你。

就像学长，如果他也和别人一样毕业后回到自己那地方加入考编大军，那么他现在肯定和别人一样，也在背书，焦虑，但是他选择了其它的路。

这时候有些人就会抬杠：考上了就能吃一辈子，而你做生意如果运气不好那么就直接亏光，到时候你就知道编制的香了。

这也是很多人的通病。

我觉得如果一件事情你看不到希望，就别过于去迷恋它，舍不得它，不然会被它束缚，比如学历，经验等等。

敢想敢干

可能你会觉得他家里应该有底子的，不然毕业后怎么就能开店。

但是我们问一下自己，就算你家里有底子，毕业后就给你十万块让你开店，你觉得你行吗？恐怕大部分人都不知道自己该做什么吧。

首先躬身入局本身就是一件很难的事情，我们多数人能够拼命上班，但是如果让你脱离平台去自己干一件事就比登天还难。

因为你在公司有别人给你安排好，你去做就行了，换句话来说，你就是个干苦力的，真让你去谈判，去闯市场，大多数人是没这个能力的。

这也是一种损失厌恶心态，因为你怕自己花时间去做，到后面不仅亏了钱，还把自己弄得很累，而安安稳稳打工不一样，它是“稳赚不赔”的。

但是这个世界上很难有稳赚不赔的东西，就说安安稳稳打工拿工资，但是工资不高，那一定是在亏着走的，除非你觉得自己的时间毫无价值，那么就是赚的。

感觉等不到35岁AI就把我裁了

哥们干前端，刚过34周岁生日，请有缘的老哥兄弟们在评论区里祝哥们生日快乐先。

让我焦虑的不是年纪，是这个叫Windsurf Editor的东西

之前用过他们家的AI工具，感觉和市面上卷的AI工具相差无几。但自从Cursor出了个编辑器想要取代vs code，这事儿就逐渐不对劲了。

Codeium他们家也出了个编辑器叫Windsurf Editor，今天体验了一下，突然开始焦虑了。体验下来就一个感受：我想过这一天会来，没想到来的这么快。

事情是这样的，我让AI帮我创建了一个前端项目，其中要用到xxx技术。然后全程我除了accept它给我生成的指令，我没有敲一行代码。

我自己不喜欢读长篇文字，所以直接看图吧。

可以看出它已经具备分析整个项目和整合项目代码的能力。

然后我让它帮我封装了一个RESTFUL式的基于axios的单例请求文件。结果我发现它在request文件中用到了状态管理中的数据(pinia)以及UI组件(ElementPlus)，于是让它帮我修改。

最后还不忘给个使用示例

结语：这是一场程序员和技术的自我革新，不仅是我们这个领域，新的时代真的来临，大家一起努力吧，共勉之。

作者：fhf
来源：juejin.cn/post/7441543396979097610

事情是这样的。

Business Insider 最近获得了特斯拉内部薪酬数据库（截至 2021 年 12 月）的访问权限，里面有 10 万名员工的薪酬数据。

然后他们发现了有关特斯拉薪酬的一系列猛料：

• 面试 9 轮只为招聘特斯拉铁粉；


• 采用低底薪 + 股票奖励策略，打出 “高风险、高回报” 口号；


• 特斯拉底薪低于同行，不及苹果、谷歌、英伟达、Meta、福特等科技公司和传统汽车制造商；


• 工程师更有可能获得股票奖励；


• 仅有 4% 的员工通过激励股票期权（ISOs） 获得股票，且通常授予高管；


• ……

更多爆料细节如下——

马斯克招人策略：低底薪 + 股票奖励

透过这份曝光的内部薪酬文件，我们看到特斯拉向员工喊出的是 “高风险、高回报” 这一口号。

why？？

一切的一切，还是归于特斯拉想要招聘自身铁粉。据一位了解招聘的内部员工透露：

他们可能在别处得到更好的报酬，但我们想要的是铁杆的特斯拉人。

而为了实现这一目标，特斯拉主要靠 “低底薪 + 股票奖励” 这一策略以及配套的招聘系统。

对于前者，一位特斯拉前销售经理将其比喻为 “金手铐”：

股票是主要的钩子…… 我要低下头再等几个月，直到我获得股权。

至于后者，一位特斯拉前招聘人员表示，前司的招聘流程极为严格，通常需要几个月时间来考察面试候选人。

比如面试一位工程师，通常至少包括九次面试，可能需要数月时间。

这是一件文化上的事情，一切都是为了排除掉只想 “打卡上下班” 的员工。

那么，特斯拉到底给员工们开了多少薪酬呢？

这里需要补充一个员工人数数据。在这份文件里，我们可以看到 10 万名员工的薪酬情况，而据 CNBC 报道，截至今年 6 月，特斯拉雇佣了大约 12 万名员工（包括正式员工和临时工）。

下面具体来看。

第一，先从公司内部来看。

首先，Business Insider 分析了大约 13,000 名全职、有薪、美国本土员工的平均基本工资（年薪），这些员工分属特斯拉的各个业务部门（如工程、制造或数据管理），而且排除了无法准确计算平均年薪的小时工。

可以看出，这些员工的基本工资中位数（年薪）大多在 10 万美元和 15 万美元之间。

接下来，Business Insider 进一步将数据细分，并查看特斯拉管理岗（全职、美国本土员工、有薪且手下至少有五名员工）的基本工资情况。

结果显示，包括工程总监和在特斯拉服务中心维修车辆的经理在内，这些人的基本工资中位数（年薪）从大约 35,000 美元到 324,000 美元不等。

而且据 9 位现任和前员工透露，自 2021 年 12 月以来，特斯拉的薪酬结构基本保持不变。

换句话说，虽然上述数据看起来老旧，但特斯拉目前仍在延续这些薪酬方案。

不过，只看内部情况，我们可能无法直观感受特斯拉的 “低底薪”。

别急，Business Insider 还另外使用了来自证券交易委员会的数据，将特斯拉的基本工资与传统汽车制造商以及市值最大的六家科技公司进行了比较。

可以看出，除了亚马逊，特斯拉均处于落后地位。

而且我们知道，像亚马逊和苹果这样的公司，它们还拥有庞大的仓库劳动力和零售劳动力，这些因素也会影响公司的平均工资。

因此，一个基本情况浮出水面：

特斯拉的基本工资通常低于竞争对手

那么，接下来的问题是：员工为什么愿意接受低底薪呢？

最大原因还是在于股票。

9 位现任和前工程师及销售人员表示，特斯拉的股票授予计划使得他们更容易接受较低的底薪。

据悉，过去 5 年，特斯拉的股价飙升超过 1000%；而今年，虽然特斯拉股价经历了显著波动（4 月中旬跌至年初价格的 44%），但在川普成功竞选后，特斯拉收获重大利好，其股价至今累计上涨近 30%。

so，又有多少员工能享受到特斯拉的股票奖励呢？

据内部文件显示，2020 年和 2021 年，有 44 名美国本土员工获得了价值超过 100 万美元的股票。

为了了解哪些员工更有可能获得股票奖励，Business Insider 根据职位类别对股票奖励进行了拆分。

结果显示，大多数工程师收到的股票奖励超过 25,000 美元。（股票的价值基于授予时的股价，但会根据特斯拉的股价变动而变化）

不过需要注意的是，特斯拉将限制性股票单位（RSUs）作为薪酬结构中的主要组成部分，约占薪资发放的 75%。

解释一下，RSUs 指授予时并不立即转化为实际的股票，而是在一定时间锁定期后，以公司股票的形式提供给员工。

换句话说，员工在满足特定条件（如服务年限或公司业绩目标）后才能获得 RSUs 股票。

同时，特斯拉将非合格股票期权（NQSOs） 作为基于业绩的薪酬的一部分，占薪资发放的 21%。

最终，仅有 4% 的员工通过激励股票期权（ISOs） 获得股票，且通常授予高管和其他高级员工。

而对于这一部分，内部文件显示，特斯拉高管中，除一名未列出持股数量的员工外，其余人收到的股票价值在 95 万美元至 2000 万美元之间。

除了股票，另一大原因在于特斯拉的公司形象。

按照招聘公司 Stanton Chase 一位总监的说法：

它包含一个以使命为导向的元素…… 这些人正在努力实现地球的脱碳。

更不必说，还有 CEO 马斯克这位顶流的卖力宣传（doge）：

我们给每个人股票期权，我们让许多只是在工作一线的人——甚至不知道股票是什么的人——变成了百万富翁。

马斯克 560 亿美元天价薪酬案将于年底见分晓

那么，老马本人在特斯拉的薪酬水平如何呢？

事实上，“马斯克 560 亿美元天价薪酬案” 一直引人关注：

2018 年，特斯拉为马斯克制定了一项为期 10 年的激励计划，方案核心是通过股票期权的方式，将马斯克的个人利益与公司的市值和业绩紧密绑定。

简单说，一旦老马能完成 KPI，他将累计获得特斯拉 12% 的股票期权作为奖励，总价值约为 560 亿美元，这一方案也被外媒认为是美国有史以来规模最大的高管薪酬方案。

当然了，当时来看公司定的 KPI 非常难，结果没想到后来特斯拉一路起飞，市值大涨（目前已来到 1.12 万亿美元）。

这下就有股东跳出来，觉得不公平了。

2022 年，特斯拉的部分股东将马斯克告上法庭，称他将大部分精力花在 SpaceX 等其他公司上，同时利用其对公司及董事会的控制敲定了长期薪酬计划，因此希望废除该方案。

紧接着，特拉华州的法官便以 “对股东不公平” 为由，宣布马斯克的长期薪酬方案无效。

面对这一判决，老马一怒之下宣称将特斯拉的注册地从特拉华州迁至得克萨斯州。（后来确实迁了）

并进行了上诉。

而最终结果，将在今年年底前得到裁决。

就在上周四，负责审理此案的特拉华州衡平法院大法官凯瑟琳・麦考密克（Kathaleen McCormick）表示，她将在 2024 年年底前作出最终决定。

不过，尽管之前的法院判决不利于老马，但特斯拉股东在 2024 年 6 月 13 日的年度股东大会上，已经以较大优势批准了这一薪酬方案。

参考链接：

x.com/BusinessIns…

— 完 —

23 年 11 月末，拼多多市值超过了阿里。我想写一篇《百亿补贴为什么用 H5》，没有动笔；24 年新年，我想写一篇《新的一年，H5 会如何发展》，也没有动笔。

眼看着灵感烂在手里，我决定把两篇文章合为一篇，与你分享。提前说明，我并非百亿补贴的开发人员，本文的内容是我的推理。

拳打 H5，脚踢小程序。我是「小霖家的混江龙」，关注我，带你了解更多实用的 H5、小程序武学。

我的证据

在 Android 开发者模式下，开启显示布局边界，你可以看到「百亿补贴」是一个完整大框，这说明「百亿补贴」在 App 内是 H5。拷贝分享链接，在浏览器打开，可以看到资源中有 React，说明「百亿补贴」技术栈是 React。

不只是拼多多，利用同样的方法，你可以发现京东、淘宝的「百亿补贴」技术栈也是 H5。

那么，为什么电商巨头会选择做「百亿补贴」时会选择 H5 呢？

我的推理逻辑

解答问题前，我先说明下推理逻辑。巨头可能选择 H5 的原因千千万万，但最有说服力的原因，肯定具有排他性。

什么是排他性？

举个例子，成功人物为什么成功，如果我回答「成功人士会喝水」，你肯定不满意。如果我回答「成功人士坚持不懈」，你会更满意一些。喝水分明是成功人士成功的原因，不喝水人会渴死，没办法成功。你为什么对这个答案不满意呢？

因为「喝水」不具备排他性，普通人也会喝水；而「坚持不懈」比「喝水」更具排他性，大部分普通人没有这个特质。

按照排他性，我需要说明百亿补贴只有 H5 能干，其他技术栈不能干，这样才有说服力。

百亿补贴为什么用 H5？

现在进入正题。粗略来看，大前端的技术栈分为 Native 和跨平台两大类。前者包括 3 小类，分别是 Android、iOS、纯血鸿蒙；后者也包括 3 小类，分别是基于 Web 的方案、基于系统 UI 框架的方案（比如 React Native）、自己绘制 UI 的方案（比如 Flutter）。

其中，基于 Web 的方案，又可以细分为纯 H5 和 DSL 转 H5（比如 Taro）。

graph TB;

大前端 --> Native;

Native --> Android;

Native --> iOS;

Native --> 纯血鸿蒙;

大前端 --> 跨平台;

跨平台 --> 基于Web的方案;

跨平台 --> 基于系统UI框架的方案;

跨平台 --> 自己绘制UI的方案;

基于Web的方案 --> H5;

基于Web的方案 --> DSL转H5;

我们需要排除 H5 外的其他方案。

原因一：百亿补贴迭代频繁

百亿补贴的业务形式，是一个常住 H5，搭配上多个流动 H5。（「常住」和「流动」是我借鉴「常住人口」和「流动人口」造的词）

• 常住 H5 链接保持不变，方便用户二次访问。


• 流动 H5 链接位于常住 H5 的不同位置，方便分发用户流量。

具体到拼多多，它至少有 3 个流量的分发点，可点击的头图、列表上方的活动模块和侧边栏，3 者可以投放不同链接。下图分别投放了 3.8 女神节链接、新人链接和品牌链接：

可以想到，几乎每到一个节日、每换一个品牌，「百亿补贴」就需要更新一次。

这样频繁的迭代，框架必须满足快速开发、快速部署、一次开发多端复用条件。因此可以排除掉 Native 技术栈，留下动态化技术栈。

原因二：百亿补贴需要投放小程序和其他 App

如图所示，你可以在微信上搜索拼多多，可以看到百亿补贴不仅在 App 上投放，还在微信小程序里投放。

此时我们几乎可以排除掉 React Native 和 Flutter 技术栈。因为社区虽然有方案让 React Native、Flutter 适配小程序，但并不成熟，不适合用到生产项目中。

此外，如果你在抖音、B 站和小红书搜索百亿补贴，你可以看到百亿补贴在这些 App 上都有投放广告。

这点可以完全排除 React Native 和 Flutter 技术栈。据我所知，目前没有主流 App，会愿意让第三方在自己的 App 里运行 React Native 和 Flutter。

原因三：百亿补贴核心流量在 APP

现在只剩下了基于 Web 的 2 种技术方案，也就是 H5 和 DSL 转出来的 H5（比如 Taro）。

百亿补贴的 HTML 结果，更符合原生 H5 的组织结构，而不是 Taro 这种 DSL 转出来的结构。

我对此的解释是，百亿补贴的核心流量在 App。核心流量在 APP 时。投放小程序是锦上添花，把 H5 嵌入到小程序 Webview 就能满足要求，不需要卷性能。

如果百亿补贴的核心流量在小程序，那么大概率就会使用 DSL 框架，转出来小程序代码和 H5 代码。

综上所述，迭代频繁、需要投放小程序和其他 App，核心流量在 App，是百亿补贴选择 H5 的 3 个主要原因。

H5 未来会如何发展

知道百亿补贴选择 H5 的 3 个原因后，我们可以得到结论，如果 3 个前提不变，未来很长一段时间内，H5 依然是电商活动的主流方案。

不过，主流方案并不意味着一成不变，我认为未来 H5 会有 2 个发展趋势：

趋势一：离线包、SSR 比例增加

H5 有诸多优势的同时，也有着先天缺陷，那就是下载成功率低、容易白屏。

解决这个问题，社区主流的两个方案是离线包和 SSR。

离线包可以将网页的静态资源（如 HTML、CSS、JS、图片等）缓存到本地，用户访问 H5 页面时，可以直接读取本地的离线资源，从而提升页面的加载速度。阿里云和腾讯云等云服务商都有自己的离线包方案。

SSR 即服务器端渲染，它可以减少白屏时间，让用户更快看到页面。传统的 CSR（客户端渲染）初始时只渲染空白的 HTML 框架，然后再去获取数据并渲染内容。而在 SSR 中，服务器在接收到客户端请求时，会在服务器端利用数据和模板生成完整的 HTML 页面，再把页面发送给客户端浏览器。

不难想到，业务陷入瓶颈后，企业开始看中性能，大部分前端开发者都会来卷一卷离线包、 SSR，它们的比例会进一步增加。

趋势二：定制化要求苛刻

近年 C 端市场增长缓慢，企业重点从扩张新客，变成留存老客。

这个背景下，定制化要求变得越来越苛刻，目的是让用户区分各种活动。用互联网黑话来说，就是「建立用户心智」。

下面是拼多多、京东、淘宝、12306、中国移动和招商银行的活动 H5，尽管它们结构都差不多，但长得是千奇百怪。

我估计未来，电商活动 H5 的外观将变得极具个性，各位前端同学可以在卷卷 CSS、动效方向。

总结

本文介绍了我认为「百亿补贴」会选用 H5 的 3 大原因：

• 百亿补贴迭代频繁


• 百亿补贴需要投放小程序、其他 App


• 百亿补贴核心流量是自己的 App

以及我 H5 未来发展趋势的 2 个预测：

• 离线包、SSR 比例增加


• 定制化要求苛刻

拳打 H5，脚踢小程序。我是「小霖家的混江龙」，关注我，带你了解更多实用的 H5、小程序武学。

12月今年最后一个月了,相逢的人已走散, Q4的OKR已经定型了, 很平淡无味, 闲的无聊 提前写个年终总结吧。00年, 再过一个月就25岁了，一个人来杭州也已经3年多了 每天有时间写一点 周六了 写到凌晨1点了 看直播/打麻将到凌晨5点才睡。 去年也写了一篇 2023年总结:日渐清醒，得失随意 //TODO DDL 应该是在月中完结吧。

工作

我大概回忆一下 我今年在工作上应该干了这些事情吧

• 自己申请换项目组,日常维护新品App版本迭代 2周一个版本 多个app同时进行


• 完成所有App 苹果服务器接口Storekit2 升级上线


• Google 支付/订阅 SDK 重构原生API调用代码


• RocketMQ优化多数据中心用户数据同步/webhook/推送


• RocketMQ-Exporter 搭建 监控相关性能指标


• SSE+服务器GRPC流式 推送消息


• us机器 内存优化 切换到jemalloc内存分配器


• RocketMQ 单机 升级为Dledger 集群模式 Q4 任务

从22年3月毕业到现在 再度过一个季度 在这家公司呆三年了(3年之约)，整个过程就是升级打怪，看着人来人往 合作的人 离职一个又来一个, 每个季度干着重复的工作,技术框架还是那一套 SpringBoot+GRPC 经过一年熟悉后 就觉得没有新鲜感了, C端产品App 在用户基数不大情况下 基本的重心在客户端的ui/操作体验上 后端嘛就是一个数据存储的地方 存取能有什么难度 大家都会，每个季度任务就是 基本的版本迭代+一些服务器内部的优化，如果你想要拿到高的绩效 那干这点是远远不够的, 基本规则在无告警的版本迭代下 做一些对团队贡献大 有价值的事情 拿A/季度优秀员工，三年期间升了两次小级别 p5-1->p5-2->p5-3 还是一个初级开发 今年估计也悬了 没有两次A的绩效 跨段位升没机会,没有owner过项目, 和旁边人朋友/同学工作/升职对比下 只能说自己像个废物 躺的太平了 每天965的生活 除了偶尔上线 需要加班留下来 大家都不加班 也没有那么多活需要加班来干的活。

• 你说工作上需求迭代的实现难度吧，喂给ChatGPT 技术方案/数据库表都给你生成好了 微改代码就行了，各种数据脚本go/python也是利用AI，主要难点还是在需求评审/需求理解/产品测试开发的沟通上面吧 组内的高级/资深开发 看了下他们的OKR也没有什么特别的 对自己也没有参考价值。CodeReview 去年还是有的 到今年直接提pr和leader讲下 也不会看的直接合进去了 组内其他人也是这样 他们的代码你也可以看 但你看的时候基本都是merged, 还有一个点 组内的信息同步很差 只有你问了xxx 原来xx项目做过。相对于22/23年和客户端那边对接起来很累,身份位置放的很低, 沟通下来都是无效沟通 他不理解你的想法 不想听你的方案，今年换了一个项目组 合作起来比较顺利，你的想法都会被接受 还会给你优化的意见 整体的体验还是不错的。


• 在工作中，除了技术能力，还需要考验为人处事的能力，获取信息和与人打交道的能力, 这点我解决不了 公司没有同龄人 他们基本都有自己的家庭 找个抽烟的人都没有 今年午饭也没有和他们吃过 还是住在旁边小区 公司午休一刻呆不下去,回家坐着都比在公司舒服，我现在基本是只谈工作不谈生活,可能他们都有自己的圈子/群吧, 其实很多时候都不想干了 每天定点上班下班的生活真的很无趣和累，上班成天坐在那里，一句话都憋不出来，是个人都会崩溃的，再看看自己的实力 也很难找到一份比现在965更满意的工作了,💰的话在杭州能活 先🐶着吧 看看base能不能提一下 拿个年终奖。
  
  

  
  

  在Q2/Q3其实是收获最大的 对个人成长的点 (版本迭代真拿不出手)

  
  

  
  
  
  
  • (Q2)RocketMQ业务接入优化 2024 Q2 OKR 完结 RocketMQ优化Webhook处理等业务场景 (已上线)最近需要使用MQ优化相关业务 - 掘金
  
  
  • (Q1/Q2)Apple订阅 storeki2升级 文档阅读/资料收集理解/官方库阅读参与简单的贡献Apple Storekit2 服务器API升级 (Apple开源内购库) (已上线)在今年Q1季度 组内进行服务器新技 - 掘金。
  
  
  • (Q3)内存问题排查 Java服务 堆内-> 堆外-> Glibc内存 异常排查 最佳实践, 形成自己的方法论💥-线上环境临时解决方案: 先重 - 掘金
  
  
  • (Q2)Google支付订阅 跨境支付 Google Pay(购买/订阅) SDK优化重构 原生API-V1/V2代码 (已上线)最近转新品组了,没有 - 掘金
  
  
  
  

生活

去年立的flag 也是一腔鸡血

• 软考 系统架构师 +软著 拿到杭州E类人才


• 健身/减肥


• 骑车 vlog (杭州景点全部骑完 影石360 ace pro)


• 摄影佳能rp/视频剪辑学习


• 日语/英语学习


• leetcode 上Knight


• 考D驾-照 骑防赛


• 日麻线下雀庄体验 参加各种线上日麻比赛


• ClickHouse hangzhou 线下沙龙


• 掘金bolg 更新 技术日常


• 千岛湖


• 抽烟+喝酒


• B站 直播 日麻

软考 系统架构师+软著 拿到杭州E类人才

• 系统架构师 运气挺好的 去年第一次考没过 今年5月份第二次考 压着分数线通过 (52/46/45) E类通过之后 把应届生租房补贴5000/半年 改为2500/月 相当于每个月的租房不要钱了,共有产权房子不考虑 没有在杭州落户的想法, 具体的就不多说 看这篇blog总结都有了 想了解流程可以私聊我解答 (杭州e类人才) 软考-系统架构师 (52/46/45)—浙江树人学院/浙江工业大学2024/05/25 软考-系统架构 - 掘金

骑车 vlog (杭州景点全部骑完 影石360 ace pro)

• 一个人走走停停 骑过很多地方, 最多的还是钱塘江到彭浦大桥->复兴大桥路线 不知道骑了多少遍，西湖/湘湖/九溪这些地方都去过了，车子是青春款只在线上售卖 后期毛病很多 链条蹭盘/刹车无效 自己不知道维修了多少次，最近这两个月很少骑了，放在地下室发霉 后续准备卖掉了这车 还买了那么多骑行装备，买的insta 360 ace pro 3000多降价到2k左右 当时在大疆和insta中选择了好久 最后还是踩坑了 实体店体验了大疆action 画质比insta360好太多了，有必要考虑再买一台大疆action5了, 一个人的骑行之路也该结束了 开始新的玩具 仿赛摩托车 芜湖起飞。

健身/减肥

• 怎么说呢 三天打鱼两天晒网的行动 体脂没什么变化,饮食更不会控制 每天外卖外卖外卖, Q1/Q2两个季度挺积极的 基本工作日晚上有时间就去健身房 周末白天也去, 在健身房的时间也能让自身感受到轻松, 这个小区有个百姓健身房在地下室 24小时 刷脸进去 设备齐全 没什么人 每个季度的话300块RMB, 我主要后面可能没有看到短期效果+活着很累 有一段时间没有去了, 偶尔下楼抽烟去逛逛, 最后得到的只是自己的一个心里安慰，没有合理的计划和坚持下去的心 我现在已经懒连手表都不戴了。

摄影佳能rp/视频剪辑学习

• 怎么说呢 周末放假就是宅 已经吃灰了 除了9月1号 拿到免费的门票 杭州植物园专门去了一趟拍彼岸花，其他时间不出手。视频剪辑也是一坨屎 目前就用剪映弄一些雀魂麻将抽角色的视频，后续还是想学一下专业的剪辑工具 这个也看需求吧。

考D驾-照 骑防赛

• 为什么要去骑摩托车，主要是中秋节回家一趟，隔壁邻居已经买了一辆机车, 当时他让我试试 我没试 后面就一直关注摩托车这个事 抖音一直给我推视频。才有了考D驾-照驾-照,周末练半天,工作日考试半天就好了,4科联考 比C1驾-照周期短 速度快，驾-照到手后面周末直接找附近最近的租车平台试试水，萧山那边的之江路/美女坝路险,本田500 手震麻了 1个小时 干了100公里, 最后一个半小时就还车了 跑了150km，整体的体验感是非常好的，无论是去骑车的路上 还是过程中 都能够忘记生活/工作上的烦心事，最尴尬的是红绿灯起步熄火了，后续周末继续出行租车，找个有缘人一起。

日麻线上比赛/线下雀庄体验

• 每天下班就是点外卖 开始打麻将，水各种日麻群 打友人赛/团队赛，每天晚上达到2 3点 菜就爱多玩 和群友打比赛 对个人的实力也是有了认知 学习别人的打法 从野猪冲击 也慢慢在意铳率了，前一天打完线上比赛, 这个月周日也是马上跟着一个大哥去杭州线下的湖滨牌浪屋体验完线下日麻，今年干的最多的事情就是打麻将，下班除了打麻将还是打麻将。

leetcode 上Knight

• 基本上是原地没动，比赛一场没打，为什么要刷？为了什么？能带给自己什么收益？呆在舒适圈里久了 不想出去，算法也是提不上一点兴趣了 估计只有到时候找工作之前才会接触到了 其实也制定了计划 刷灵神的清单 还是自己懒吧 动不起来，最后一个月 要不开始发力？算了 打麻将吧。

其他

• 今年参加了ClickHouse hangzhou 线下沙龙, 虽然没有使用过clickhouse这款db,去听听别人公司的落地方案,去阿里园区转了转。


• 掘金bolg 更新 技术日常 主要是参加创作者训练营吧 锻炼一点自己的文本输出能力，总结的过程中也能知道问题的本质是什么，解决的过程/方式以及别人是怎么解决的，收获还是有的。


• 和同学五一去了千岛湖一趟 结局不是很好 过程体验不错。


• 在日语/英语学习上面投入的时间 ，无论是日常工作上英语的使用 还是各种文档阅读能力，在逛各种项目/看论文的时候 就能体现出来, 日语兴趣的话 纯粹是打日麻和旁边的日麻群友影响/看番剧而来的 每天用多邻国完成任务,买了4本书《标准日语》+《大家的日语》,在B站上看圆圆姐的视频教程【京大博士带你学日语】新标日初级上册全新课程！必能学会！超详细讲解！轻松搞定日语学习！（课本内容完结！）哔哩哔哩bilibili。


• 抽烟+喝酒已经是家常便饭一样的事情了 上半年是沉迷于喝酒消愁 下半年就抽烟打发时间，每天下班又不知道干什么 找点打发时间的乐趣，天天熬夜看直播 打麻将 2点3点睡觉已经是常态了,每天晚上看陈伯/刘刘江直播 带来的乐趣, 工作日每天基本8点50的闹钟吵醒，拖着尸体去上班，周末基本睡到自然醒中午/下午 除了楼上楼下装修 直接被震醒了。


• 这样一回想2024年还是干了很多无意义的事。

虽然只有15篇文章 文章的阅读数也有3w 其实数据对我来说也是无所谓的，主要还是方便以后回忆吧,分享出去 可能有人和你遇到相同问题,带给解决思路 明年要不要继续写？还是把时间投入在别的地方？都是未知

个人技术学习

• AI 知识点拓展学习


• 部门分享


• 推荐系统&&RAG


• 前端


• 第三方支付订阅


• 分布式论文学习总结


• 《计算机网络-自顶向下方法第七版》


• 《CSAPP 深入理解计算机系统(第3版)》


• 《设计数据密集型应用》


• 技术拓展/深挖(RocketMq源码/go-redis源码/Netty源码/Mycat2源码)

看个锤子 没心思学习 下半年天天打麻将

• AI的话主要是身边环境影响，自己的项目组一直在利用AI做业务，从2023年开始 公司一直对接的是openai 提供的chat 能力，公司内部举行了ai相关的比赛，业务想要搭建自己的知识库和RAG搜索 主要是用AWS上的Redrock封装好的知识库 ，项目组一些APP一直在使用微软的TTS进行语言转音频的操作，部门,组内和项目组 大家一直在内部分享和ai相关的知识点，产品会使用cursor提前将需求写完 自己进部署上线。


• 跟着项目组业务走，最近在支付方面的功能进行了改动，对于web网页上的购买消耗型商品/续费型商品的购买，主要对接的平台是Stripe信用卡visa支付 和paypal支付。appstore 支付的话 最近负责组内storekit2 服务器接口升级重构代码 用的官方开源库 github.com/apple/app-s…。Alipay 支付宝和Wechat 对于中国环境的用户提供的一种支付方式, 代码很粗糙 很久没有相关需求迭代了。Google 支付 来的两年时间接触的业务还是比较少，整个支付逻辑和appstore是一致的，有时间把代码逻辑和官方文档进行学习总结一下。


• 现在只会个后端远远不够了，替代性太强了，除非是中大厂那样细分工作岗位/业务内容，如果你有自己的想法 后续做一些自己的产品/独立开发者 一人一公司 全栈只能是无敌路。我这边对前端也是零零散散的学习 没有整个的大项目使用，github.com/lobehub/lob… 前端React开源项目学习 TSX+TS 认知冲击 原来前端已经进化到这个地步了，没有html+css全部被封装了，我们内部的数据平台还是原生html+django搭建的，每次加新功能ai生成的代码 能跑就行。

在下半年 觉得基础知识很重要 技术跟着业务走 没必要太追求新技术 就往计算机基础知识+算法+基础论文投入时间

• 中间一段也是将《计算机网络-自顶向下方法第七版》 计算机网络-自顶向下方法第七版 · 语雀和《CSAPP 深入理解计算机系统(第3版)》CSAPP 深入理解计算机系统(第3版) · 语雀 细看了一遍 , 书籍买了很多 都是吃灰的 没有去年那个干劲了。


• 看论文 可以学习技术理论的基础 还有重要一点是学英语, 主要是看一个up在学习这方面的知识点 就跟着看了一段时间，谷歌三大剑客 GFS/MapReduce/BigTable 看论文不看分布式论文 就像四大名著不读红楼梦，唐诗不读李杜，吃泡面不加调料包 Raft/Paxos 那一块真的一看就是几天 深陷进去 每次看硬核课堂的文章 Raft -论文导读 与 ETCD源码解读。


• 参与开源项目任务也没有达成 往里面投入的时间太少了，最后下班/上班有时间 也没深入去学习业务上用到的组件源码, 最近的话 负责RocketMQ集群Dledger搭建/MQ优化业务 ,RocketMQ-exporter+herzbeat+prometheus监控指标, 遇到的异常信息太多 每次都是网上找案例解决，上班利用ai 深入在看看RocketMQ源码吧github.com/apache/rock… 边看边总结RocketMQ 源码 5.2.0 - 生产者 Producer

杂学杂记

• 中间又去了解了下机器学习/深度学习相关的内容，又看了大数据开发Spark/Flink等等组件，前端看了React+TS相关知识点/demo/Flutter开源项目, 背单词的时候发现墨墨背单词是node+ts写的,有个软考刷题的app是Flutter写的 作者是独立开发者 最近公司客户端也在用flutter开发新品app 代码我这边也是有权限的, 也去了解了一下技术栈，中间又有一段时间去了解了下亚马逊运营的工作，也看了AIGC/agent/图像/音频/向量数据库milvus等相关的方向 RAG 知识库增强式搜索，在推荐系统领域 推荐 广告 搜索 也花了一段时间去了解/学习 因为我们这边没有算法工程师 推荐功能很粗糙 没有用户画像的概念,有一段时间被cloudwego社区的kitex/hertz吸引 当时想去上海站的线下沙龙 可惜正好那周软考考试, 因为有个麻将牌谱工具是rust写的 github.com/Equim-chan/… 所以又去了解了一下rust，我记得有段时间投入在系统设计/业务场景思考方向(IM/Feed流/本地消息表/分布式限流等等), 都是一点毛皮，Q2服务器服务的内存问题 每天上班想下班想 把互联网的文章都翻烂了 从堆内到堆外到Glibc 询问各种技术大佬场景异常 组内成员给不了你任何帮助 全靠自己，所有的东西没有实质性的收获 也没有在项目中使用到 过了一段时间基本全忘了(不做笔记/总结) 。

现在往回看 在技术学习的时长投入的太少了 对技术没有追求 什么都知道一点 什么都不精通 啥也没学会 离开了Java/Spring 我还能干什么，我能干的 找个会使用AI的人来都能干，天天熬夜 不知道熬的是什么 碌碌无为。最近一年 代码写的很少了 基本靠ai生成 微改/设计一下 写的自己也看不懂了。生活/工作迷茫 现在都是活一天是一天, 想回家。

后续规划 待定

• 英语/日语


• 独立开发者

打麻将去咯 一起玩雀魂的可以加我

今天研究了一下 pnpm 的机制，发现它确实很强大，甚至可以说对 yarn 和 npm 形成了降维打击

我们从包管理工具的发展历史，一起看下到底好在哪里？

npm2

在 npm 3.0 版本之前，项目的 node_modules 会呈现出嵌套结构，也就是说，我安装的依赖、依赖的依赖、依赖的依赖的依赖...，都是递归嵌套的

node_modules

├─ express

│  ├─ index.js

│  ├─ package.json

│  └─ node_modules

│     ├─ accepts

│     │  ├─ index.js

│     │  ├─ package.json

│     │  └─ node_modules

│     │     ├─ mime-types

|     |     |   └─ node_modules

|     |     |      └─ mime-db

|     │     └─ negotiator

│     ├─ array-flatten

│ 		├─ ...

│  		└─ ...

└─ A

   ├─ index.js

   ├─ package.json

   └─ node_modules

      └─ accepts

         ├─ index.js

         ├─ package.json

         └─ node_modules

            ├─ mime-types

            |   └─ node_modules

            |      └─ mime-db

            └─ negotiator

设计缺陷

这种嵌套依赖树的设计确实存在几个严重的问题

当时 npm 还没解决这些问题， 社区便推出了新的解决方案 ，就是 yarn。 它引入了一种新的依赖管理方式——扁平化依赖。

看到 yarn 的成功，npm 在 3.0 版本中也引入了类似的扁平化依赖结构

yarn

yarn 的主要改进之一就是通过扁平化依赖结构来解决嵌套依赖树的问题

具体来说铺平，yarn 尽量将所有依赖包安装在项目的顶层 node_modules 目录下，而不是嵌套在各自的 node_modules 目录中。

这样一来，减少了目录的深度，避免了路径过长的问题 ，也尽可能避免了依赖被多次重复安装的问题

我们可以在 yarn-example 看到整个目录，全部铺平在了顶层 node_modules 目录下，展开下面的包大部分是没有二层 node_modules 的

然而，有些依赖包还是会在自己的目录下有一个 node_modules 文件夹，出现嵌套的情况，例如 yarn-example 下的http-errors 依赖包就有自己的 node_modules，原因是：

当一个项目的多个依赖包需要同一个库的不同版本时，yarn 只能将一个版本的库提升到顶层 node_modules 目录中。 对于需要这个库其他版本的依赖，yarn 仍然需要在这些依赖包的目录下创建一个嵌套的 node_modules 来存放不同版本的包

比如，包 A 依赖于 lodash@4.0.0，而包 B 依赖于 lodash@3.0.0。由于这两个版本的 lodash 不能合并，yarn 会将 lodash@4.0.0 提升到顶层 node_modules，而 lodash@3.0.0 则被嵌套在包 B 的 node_modules 目录下。

幽灵依赖

虽然 yarn 和 npm 都采用了扁平化的方案来解决依赖嵌套的问题，但这种方案本身也有一些缺陷，其中幽灵依赖是一个主要问题。

幽灵依赖，也就是你明明没有在 package.json 文件中声明的依赖项，但在项目代码里却可以 require 进来
这个也很容易理解，因为依赖的依赖被扁平化安装在顶层 node_modules 中，所以我们能访问到依赖的依赖

但是这样是有隐患的，因为没有显式依赖，未来某个时候这些包可能会因为某些原因消失（例如新版本库不再引用这个包了，然后我们更新了库），就会引发代码运行错误

浪费磁盘空间

而且还有一个问题，就是上面提到的依赖包有多个版本的时候，只会提升一个，那其余版本的包不还是复制了很多次么，依然有浪费磁盘空间的问题

那社区有没有解决这俩问题的思路呢？ pnpm 就是其中最成功的一个

pnpm

pnpm 通过全局存储和符号链接机制从根源上解决了依赖重复安装和路径长度问题，同时也避免了扁平化依赖结构带来的幽灵依赖问题
pnpm 的优势概括来说就是“快、准、狠”：

• 快：安装速度快


• 准：安装过的依赖会准确复用缓存，甚至包版本升级带来的变化都只 diff，绝不浪费一点空间


• 狠：直接废掉了幽灵依赖

执行 npm add express，我们可以在 pnpm-example 看到整个目录，由于只安装了 express，那 node_modules 下就只有 express

那么所有的（次级）依赖去哪了呢？ binggo，在node_modules/.pnpm/目录下，.pnpm/ 以平铺的形式储存着所有的包

三层寻址

软硬链接

也就是说，所有的依赖都是从全局 store 硬连接到了 node_modules/.pnpm 下，然后之间通过软链接来相互依赖。

那么，这里的软连接、硬链接到底是什么东西？

硬链接是指向磁盘上原始文件所在的同一位置 （直接指向相同的数据块）

软连接可以理解为新建一个文件，它包含一个指向另一个文件或目录的路径 （指向目标路径）

总结

npm2 的嵌套结构： 每个依赖项都会有自己的 node_modules 目录，导致了依赖被重复安装，严重浪费了磁盘空间💣；在依赖层级比较深的项目中，甚至会超出 windows 系统的文件路径长度💣

npm3+ 和 Yarn 的扁平化策略： 尽量将所有依赖包安装在项目的顶层 node_modules 目录下，解决了 npm2 嵌套依赖的问题。但是该方案有一个重大缺陷就是“幽灵依赖”💣；而且依赖包有多个版本时，只会提升一个，那其余版本依然会被重复安装，还是有浪费磁盘空间的问题💣

pnpm全局存储和符号链接机制： 结合软硬链和三层寻址，解决了依赖被重复安装的问题，更加变态的是，同一盘符下的不同项目都可以共用一个全局 pnpm store。节省了磁盘空间，并且根本不存在“幽灵依赖”，安装速度还贼快💪💪💪

唯有读书和赚钱，才是一个人最好的修行，前者使人不惑，后者使人不屈！

世界上任何一种能力，只要你迫切想学，真心想学，无论身边有没有人教你，你都可以想办法找人，找资源，学会自我学习，自我教育才是最好的教育。

事实上，不管学历怎么样，你一生中绝大部分的东西都是自学的。

一定要聚焦到自己想做的事情上，并且在头脑里想象自己正在做，而且做得越来越好。

当你的思想，注意力，意识集中在某一个领域，某一件事，某一个行业，某些人身上时，与此相关的大量人，事，物全会被你吸引过来。

对于成年人来说，每个人的时间都是有限的，2025，千万不要再给自己树立太多的目标。

百门通不如一门精，一个人终其一生不如专注一件事，做到极致，朝着一个既定的方向不懈努力的人，几乎都成为社会各界的成功人士。

如果你能只深挖一个点，把事情做到极致，只要肯下功夫，在六个月内你能掌握任何一门学问。

但这不是让你去挑战别人的天赋，深思读书4个月能涨粉10万，只要肯下功夫，你也可以。

因为每门学问所包含的信息量大约是五万个信息块，一个人一分半钟可以记一个信息块。那么五万个大约需要一千小时，以每星期学习40小时计算。

要掌握一门学问，大约需要六个月。

反过来，如果不能专注聚焦于一件事，经不住其他事和人的干扰和诱惑，于是什么都做不精，做不透。

知识是无限的，专业能力有无数种细分领域，行业的经验无穷无尽。

每个都了解一点表面信息，一辈子也不会有成就，每一个专业能力，每一个细分领域赛道，每一个行业都有挖不尽的信息、知识、理论、经验，要用专注和时间去钻研一件事，最容易成为专家有结果的人。

很多人忙碌一生，却不明白真正的优先级是什么！

余认为：

家庭的核心是经济，而不是感情。

职场的准则是价值，而不是努力。

社交的关键是利益互换，而不是单纯的友谊。

教育的目的是培养能力，而不是追求分数。

健康的要素是自律，而不是医疗。

爱情的基础是理解，而不是激情。

创业的要点是市场需求，而不是个人喜好。

投资的原则是风险控制，而不是高回报。

人生的追求是幸福，而不是成功。

养老的保障是提前规划，而不是依赖子女。

成长的动力是反思，而不是经历。

学习的意义是应用，而不是积累知识。

旅行的收获是见识，而不是拍照打卡。

婚姻的支撑是责任，而不是浪漫。

生活的智慧是知足，而不是无尽的欲望。 

与君共勉！愿2025活成理想的自己！

前言

周饼伦在街头摊煎饼，摊后人群熙熙攘攘。他忙得不可开交，既要记住面前小哥要加的培根，又要记住身后奶奶要加的生菜，这时又来了个小妹妹，点的煎饼既要培根又要腊肠。他把鸡蛋打进煎饼后，竟突然忘了前面光头大叔要加的料，是火腿还是鸡柳？一时记不清，好像是火腿，对。然而当把煎饼交给大叔，大叔却怒了，说要的是鸡柳。😡

这可咋办？周饼伦赶忙道歉，大叔却语重心长地说：“试试用小程序云开发吧！最近的数据模型新功能好用得很！” 周饼伦亮出祖传手艺，边摊煎饼边开发小程序，把新开发的小程序点餐页面二维码贴在摊前。从此再没出过错，终于能安心摊煎饼啦！

设计思路

客户扫摊子上面贴的二维码后，会进入点餐页面，在选好要加的配料之后，点击确定就可以点餐，随后，即可在云后台上看到食客提交的数据

实现过程

周饼伦就把当前摊位的主食、配菜，以及各自相应的价格贴在了摊位上，也要把食客的点餐内容记在脑里或者用笔写在纸上。

点餐页要实现两个功能：1.展示当前摊位有的主食、配菜、口味 2.提交订单到周饼伦的订单页面。

煎饼摊子主食（staple food）目前只有摊饼、青菜饼，主食下面有的配菜（side dish），有鸡柳、生菜、鸡蛋、火腿、腊肠。

同理，数据库里面也需要呈现相应的结构。

数据表的实现

数据模型现在提供了一种便捷的能力来，可以快速创建一套可用的数据表来记录摊煎饼的相关数据。

在云后台中新增了一个基于 MySQL 的数据模型，数据模型相当于一张纸，可以在上面记录任何想要记录的数据，比如周饼伦摊位的提供的菜品

创建了基于云开发MySQL数据库的主食表，主食表中包含主食名称，主食价格

字段的详细设置如下

现在就实现了记录当前摊子的主食和配菜。还需要一个订单表，来记录用户的点餐数据

配菜的类型是一个数组文本，用来记录配菜的类型，结构如下

接着需要分别设置每个数据模型的权限。在使用小程序查看订单时，也是以用户的身份来读取的，所以，需要配置用户权限，通过页面访问来控制用户能够访问到哪些页面

至此，数据表就已经大功告成！现在完全可以使用三个表来记录当前摊子的菜品、营业情况。

但是，别忘了周饼伦的目的不止于此，为了周饼伦实现早日暴富，当上CEO，所以，还要利用小程序实现一个界面，来给”上帝“们点餐，并且提供各位CEO查看订单

小程序实现过程

一. 初始化 SDK

在云后台的数据管理中的右侧中，可以方便的查询到使用的文档

新建一个基于云开发的小程序，删除不必要的页面，并且按照文档的步骤进行初始化👇

1.按照指引在 miniprogram 目录下初始化 npm 环境并安装 npm 包

请注意，这里需要在 miniprogram 目录下初始化 npm ，不然需要编辑 project.config.json 手动指定 npm 包的位置

在 miniprogram 目录下打开终端

2.初始化当前 npm 并且安装 @cloudbase/wx-cloud-client-sdk npm 包

npm init -y & npm install @cloudbase/wx-cloud-client-sdk --save

3.在小程序中构建 npm

4.在小程序 app.js 中初始化环境

// app.js

App({

  globalData: {

    // 在这里提供全局变量 models 数据模型方法，方便给页面使用

    models: null

  },

  onLaunch: async function () {

    const {

      init

    } = require('@cloudbase/wx-cloud-client-sdk')

    // 指定云开发环境 ID

    wx.cloud.init({

      env: "ju-9g1guvph88886b02",

    });

    const client = init(wx.cloud);

    const models = client.models;

    // 可以取消注释查看效果

    // const { data } = await models.stapleFood.list({

    //   filter: {

    //     where: {}

    //   },

    //   pageSize: 10,

    //   pageNumber: 1,

    //   getCount: true,

    // });

    // console.log('当前的主食数据：');

    // console.log(data.records);

  }

});

二. 下单页面的实现

首先创建一个页面 goods-list 页面作为首页

顾客如果浏览下单页面，那么就需要看到当前可以选择的主食、配菜，还有他们分别的价格。所以首先我们需要把主食、配菜加载进来

// 加载主食

const stapleFood = (await models.stapleFood.list({

  filter: {

    where: {}

  },

  pageSize: 100, // 一次性加载完，

  pageNumber: 1,

  getCount: true,

})).data.records;



// 加载配菜

const sideDish = (await models.sideDish.list({

  filter: {

    where: {}

  },

  pageSize: 100, // 一次性加载完，

  pageNumber: 1,

  getCount: true,

})).data.records;

// pages/goods-list/index.js

Page({

  data: {

    // 总价格

    totalPrize: 0,

    // 选中的主食

    selectedStapleFoodName: '',

    // 选中的配菜

    selectedSideDishName: [],

    // 所有的主食

    stapleFood: [],

    // 所有的配菜

    sideDish: [],

以下是全部的js代码

// pages/goods-list/index.js

Page({

  data: {

    // 总价格

    totalPrize: 0,

    // 选中的主食

    selectedStapleFoodName: '',

    // 选中的配菜

    selectedSideDishName: [],

    // 所有的主食

    stapleFood: [],

    // 所有的配菜

    sideDish: [],

  },



  async onLoad(options) {

    const models = getApp().globalData.models;

    console.log('models', models)



    // 加载主食

    const stapleFood = (await models.stapleFood.list({

      filter: {

        where: {}

      },

      pageSize: 100, // 一次性加载完，

      pageNumber: 1,

      getCount: true,

    })).data.records;



    // 加载配菜

    const sideDish = (await models.sideDish.list({

      filter: {

        where: {}

      },

      pageSize: 100, // 一次性加载完，

      pageNumber: 1,

      getCount: true,

    })).data.records;



    console.log({

      stapleFood,

      sideDish

    });



    this.setData({

      stapleFood: stapleFood,

      sideDish: sideDish

    })

  },



  // 选中主食

  onSelectStapleFood(event) {

    this.setData({

      selectedStapleFoodName: event.currentTarget.dataset.data.name

    });



    this.computeTotalPrize();

  },



  // 选中配菜

  onSelectedSideDish(event) {

    console.log(event);

    // 选中配菜名字

    const sideDishName = event.currentTarget.dataset.data.name;



    // 如果已经选中，则取消选中

    if (this.data.selectedSideDishName.includes(sideDishName)) {

      this.setData({

        selectedSideDishName: this.data.selectedSideDishName.filter((name) => (name !== sideDishName))

      });

    } else {

      // 未选中，则选中

      this.setData({

        selectedSideDishName: this.data.selectedSideDishName.concat(sideDishName)

      });

    }



    this.computeTotalPrize();

  },



  // 重新计算价格

  computeTotalPrize() {

    // 主食价格

    let staplePrize = 0;

    if (this.data.selectedStapleFoodName) {

      staplePrize = this.data.stapleFood.find((staple) => staple.name === this.data.selectedStapleFoodName).prize;

    }



    // 配菜价格

    let sideDish = 0;

    this.data.selectedSideDishName.forEach((sideDishName) => {

      sideDish += this.data.sideDish.find((sideDishItem) => (

        sideDishItem.name === sideDishName

      )).prize;

    });



    // 总价格

    this.setData({

      totalPrize: staplePrize + sideDish

    })

  },



  // 提交

  async onSubmit() {

    // 提示正在加载中

    wx.showLoading({

      title: '正在提交订单',

    });



    const models = getApp().globalData.models;

    const { data } = await models.order.create({

      data: {

          served: false,  // 是否已出餐

          sideDish: this.data.selectedSideDishName,  // 配菜

          stapleFoodName: this.data.selectedStapleFoodName,  // 主食名称

          prize: this.data.totalPrize,  // 订单总价格

        }

    });



    console.log(data);

    wx.hideLoading();

  }

});

接着来实现页面

<!--pages/goods-list/index.wxml-->

<view>

  <view class="title">

    <image src='/asset/pancake.png'></image>

    <text class="title">请选择主食</text>

  </view>



  <!-- 主食展示 -->

  <view class="staple-food">

    <view wx:for="{{stapleFood}}" wx:key="_id">

      <view bindtap="onSelectStapleFood" data-data="{{item}}" class="staple-food-item {{selectedStapleFoodName === item.name ? 'selected' : ''}}">

        <image src="{{item.imageUrl}}"></image>

        <view class="prize">{{item.prize}}￥</view>

      </view>

    </view>

  </view>



  <!-- 选择配菜 -->

  <view class="title">

    <image src='/asset/sideDish.png'></image>

    请选择配菜

  </view>



  <!-- 配菜展示 -->

  <view class="side-dish">

    <view wx:for="{{sideDish}}" wx:key="_id">

      <!-- 使得class动态绑定支持 includes 语法 -->

      <wxs module="tool">

        var includes = function (array, text) {

          return array.indexOf(text) !== -1

        }

        module.exports.includes = includes;

      </wxs>

      <view class="side-dish-item {{tool.includes(selectedSideDishName, item.name) ? 'selected' : ''}}" bindtap="onSelectedSideDish" data-data="{{item}}">

        <image src="{{item.imageUrl}}"></image>

        <view class="prize">{{item.prize}}￥</view>

      </view>

    </view>

  </view>



  <!-- 底部菜单 -->

  <view class="bottom-content">

    <view class='bottom-info'>

      <view wx:if="{{!!selectedStapleFoodName}}">主食：{{selectedStapleFoodName}}</view>

      <view wx:if="{{selectedSideDishName.length !== 0}}">配菜：{{selectedSideDishName}}</view>

    </view>



    <view class="bottom-operate">

      <view class="total-prize">当前价格<text class="prize">{{totalPrize}}￥</text></view>

      <view class="submit-button {{!selectedStapleFoodName ? 'disabled' : ''}}" bind:tap="onSubmit">下单</view>

    </view>

  </view>

</view>

再添加一点点的样式

/* pages/goods-list/index.wxss */

.title {

  display: flex;

  align-items: center;

  gap: 16rpx;

  padding: 0 20rpx;

}



.title image {

  height: 46rpx;

  width: 46rpx;

}



.staple-food {

  display: flex;

  margin-bottom: 60rpx;

  overflow: auto;

}



.staple-food-item {

  margin: 20rpx 10rpx;

  display: flex;

  flex-direction: column;

  border: 1px solid #f3f0ee;

  box-shadow: 6rpx 6rpx 6rpx #dfdfdf, -6rpx -6rpx 6rpx #dfdfdf;

  border-radius: 6rpx;

  padding: 8rpx;

}



.staple-food-item.selected, .side-dish-item.selected {

  box-shadow: 6rpx 6rpx 6rpx #58b566, -6rpx -6rpx 6rpx #58b566, 6rpx -6rpx 6rpx #58b566, -6rpx 6rpx 6rpx #58b566;

}



.staple-food-item image {

  border-radius: 6rpx;

  width: 300rpx;

  height: 300rpx;

}



.prize {

  padding: 6rpx 6rpx 0;

  text-align: right;

  color: orangered

}



.side-dish {

  padding: 20rpx 12rpx;

  display: flex;

  gap: 12rpx;

  overflow: auto;

}



.side-dish image {

  height: 200rpx;

  width: 200rpx;

}



.side-dish-item {

  border-radius: 8px;

  padding: 16rpx;

  box-shadow: 6rpx 6rpx 6rpx #dfdfdf, -6rpx -6rpx 6rpx #dfdfdf;

}



.bottom-content {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

}



.bottom-info {

  padding: 30rpx;

  display: flex;

  flex-direction: column;

  color: grey;

  font-size: 0.5em;

}



.bottom-content .total-prize {

  padding: 0 30rpx;

}



.bottom-operate {

  border-top: 1px solid #dfdfdf;

  display: flex;

  width: 100%;

  justify-content: space-between;

  align-items: center;

  height: 100rpx;

}



.submit-button {

  width: 350rpx;

  color: white;

  background: #22b85c;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.submit-button.disabled {

  background: grey;

  /* 注意，这里设置了当按钮置灰的时候，不可点击 */

  pointer-events: none;

}

于是，煎饼摊的小程序就大功告成了！

接着就可以在云后台管理订单了，在将订单完成之后，即可在云后台将订单的状态修改成已完成。

我们还可以做的更多…

是否可以在订单中新增一个点餐号，这样就知道是哪个顾客点的餐？是否可以使用数据模型的关联关系将配菜、主食和订单关联起来？

是否可以在小程序中创建一个管理订单的页面？是否可以添加优惠券数据表，来给客户一些限时优惠？

期待大家的体验反馈！

代码地址：github.com/vancece/qiL…

点击体验：tcb.cloud.tencent.com/cloud-admin…

运维打工人，周末兼职送外卖的一天

在那个不经意的周末，我决定尝试一份新的工作——为美团外卖做兼职配送员。这份工作对于一向规律生活的我来说，既是突破也是挑战。

早晨，城市的喧嚣还未完全苏醒，空气中带着几分凉意和宁静。准备好出发时，线上生产环境出现问题，协助处理。

收拾好后，戴上头盔，骑上踏板车，开始了自己的第一次外卖配送之旅。

刚开始，我的心情既紧张又兴奋。手机里的订单提示声是今日的任务号角。第一份订单来自一公里外的一家外卖便利店。我快速地在地图上规划路线，开启高德导航，发动踏板车，朝着目的地出发。

由于便利店在园区里面，转了两圈没找到，这是就慌张了，这找不到店咋办了，没办法赶紧问下旁边的老手骑手，也就顺利找到了，便利店，进门问老板，美团104号好了嘛？老板手一指，在架子上自己看。核对没问题，点击已达到店，然后在点击已取货。

然后在导航去收获目的地，找到C栋，找到107门牌号，紧接敲门，说您好，美团外卖到了，并顺利的送达，然后点击已送达，第一单顺利完成，4.8元顺利到手。

其中的小插曲，送给一个顾客时，手机导航提示目的地，结果一看，周围都拆了。没办法给顾客打电话，加微信确认位置具体在哪里，送达时，还差三分钟，这单就要超时了。

配送过程中，我遇到了第一个难题：找不到店家在哪里，我的内心不禁生出些许焦虑。但很快，我调整心态，不懂不知道的地方，需要多多问人。

紧接着，第二份、第三份订单接踵而至。每一次出发和到达，每一条街道和巷弄，我开始逐渐熟悉。

日落时分，我结束了一天的工作。虽然身体有些疲惫，但内心充满了前所未有的充实感。这份工作让我体验到了不一样的人生角色，感受到了城市节奏背后的种种辛劳与甘甜。

周末的兼职跑美团外卖，对我来说不仅是一份简单的工作，更是一段特别的人生经历。它教会了我坚持与责任，让我在忙碌中找到了属于自己的节奏，在逆风中学会了更加珍惜每一次到达。

最后实际周六跑了4个小时，周天跑了7个小时，一共跑了71公里，合计收获了137.80，已提现到账。

前言

最近在开发新需求，按照蓝湖的ui图进行开发，但是在开发完部署后发现做出来的页面部分元素的颜色和设计图有出入，有色差！经过一步步的排查最终破案，解决。仅以此篇记录自己踩坑、学习的过程，也希望可以帮助到其他同学。

发现问题

事情是这样的，那是一个愉快的周五的下午，和往常一样我开心的提交了代码后进行打包发版，然后通知负责人查看我的工作成果。

但是，过了不久后，负责人找到了我，说我做出来的效果和ui有点出入，有的颜色有点不一样。我一脸懵逼，心想怎么可能呢，我是根据ui图来的，ui的颜色可是手把手从蓝湖复制到代码中的啊。

随后他就把页面和ui的对比效果图发了出来:

上图中左侧是蓝湖ui图，右侧是页面效果图。我定睛一看，哇趣！！！好像是有点不一样啊。 感觉右侧的比左侧的更亮一些。于是我赶紧本地查看我的页面和ui，果然也是同样问题！ 开发时真的没注意，没发现这个问题！！！

排查问题

于是，我迅速开始进行问题排查，看看到底是什么问题，是值写错了？还是那里的问题。

ui、页面、代码对比

下图中：最上面部分是蓝湖ui图、下面左侧是我的页面、右侧是我的页面代码样式

仔细检查后发现颜色的值没错啊，我的代码中背景颜色、边框颜色的值都和ui的颜色值是一致的！ 但这是什么问题呢？？？ 值都一样为什么渲染到页面会出现色差？

起初，我想到的是屏幕的问题，因为不同分辨率下展示出来的页面效果是会有差距的。但是经过查看发现同事的win10笔记本、我的mac笔记本、外接显示器上都存在颜色有色差这个问题！！！

ui、页面、源文件对比

通过对比ui、页面、颜色值，不同设备展示效果可以初步确认：和显示器关系不大。当我在百思不解的时候，我突然想到了ui设计师！ui提供的ui图是蓝湖上切出来的，那么她的源文件颜色是什么呢？

于是我火急火燎的联系到了公司ui小姐姐，让她发我源文件该元素的颜色值，结果值确实是一样的，但是！！！ 源文件展示出来的效果好像和蓝湖上的不太一样！

然后我进行了对比(左侧蓝湖、右上页面、右下源文件)：

可以看到源文件和我页面的效果基本一致！到这一步基本可以确定我的代码是没问题的！

尝试解决

首先去网上找了半天没有找到想要的答案，于是我灵光一现，想到了蓝湖客服！然后就询问了客服，为什么上传后的ui图内容和源文件有色差？

沟通了很久，期间我又和ui小姐姐在询问她的软件版本、电脑版本、源文件效果、设置等内容就不贴了，最终得到如下解答：

解决方式

下载最新版蓝湖插件，由于我们的ui小姐姐用的 sketch 切图工具，然后操作如下：

1.下载安装最新版蓝湖插件： lanhuapp.com/mac?formHea…

2.安装新版插件后--插件重置

3.后台程序退出 sketch，重新启动再次尝试打开蓝湖插件.

4.插件设置打开高清导出上传（重要！）

5.重新切图上传蓝湖

最终效果

左侧ui源文件、右侧蓝湖ui：

页面效果：

可以看到我的页面元素的border好像比ui粗一些，感觉设置0.5px就可以了，字体效果的话是因为我还没来得及下载ui对应的字体文件。

但是走到这一步发现整体效果已经和ui图到达了95%以上相似了，不至于和开始有那么明显的色差。

总结

至此，问题已经基本是解决。遇到问题不能怕，多想一想，然后有思路后就一步一步排查、尝试解决问题。当解决完问题后会发现心情舒畅！整个人都好起来了，也会增加自信心！

今天就让我们来使用 Vue.js 和高德地图开放平台提供的 API，实现一个关于天气预报的小demo，实时查询当前城市的天气以及未来三天的天气预测，且实现切换城市查询。实现效果如下；

准备工作

既然要使用真实的数据，那么就需要用到高德地图开放平台提供的天气查询 API，先高德地图api注册为开发者。然后点击文档与支持，选择JS API。

然后登录到控制台创建一个应用并且添加一个key，服务平台为Web端（JS API）。

终端npm create vite@latest使用vite创建项目，npm install下载该项目需要用的包，npm run dev运行项目。

将天气预报的功能全部开发在weather.vue里面，再将这个组件import weather from "./components/weather.vue"引入到app.vue中。

js代码概览

具体代码步骤实现

开始weather.vue里面的代码了。

html 部分；

<div>

    // 头部

    <div class="head">

      <div class="city-name">

        <i class="iconfont icon-dingwei"></i>

        {{ state.city }}

      </div>

      <div @click="toggle" class="city-change">

        <i class="iconfont icon-24gf-city3"></i>

        切换城市

      </div>

    </div>

    

    // 中间部分实时温度

    <div class="main">

      <div class="weather-info">

        <p class="temp">{{ state.weather.temperature }}℃</p>

        <div class="info">{{ state.weather.weather }}</div>

        <div class="detail">

          <div class="item">

            <i class="iconfont icon-shuidi"></i>

            <span>湿度</span>

            <span>{{ state.weather.humidity }}</span>

          </div>

          <div class="item">

            <i class="iconfont icon-feng"></i>

            <span>风向</span>

            <span>{{ state.weather.windDirection }}</span>

          </div>

          <div class="item">

            <i class="iconfont icon-fengli"></i>

            <span>风力</span>

            <span>{{ state.weather.windPower }}</span>

          </div>

        </div>

      </div>

      

      // 未来三日的天气预报

      <div class="future">

        <div class="future-title">三日天气预报</div>

        <div class="future-content">

          <div v-for="(item,i) in state.future" class="forecast">

            <p class="week">周{{ chinese[Number(item.week)-1] }}</p>

            <i :class="getWeatherIcon(item.dayWeather)"></i>

            <p><span class="left">{{ item.dayTemp }}℃</span>  <span class="right"> / {{ item.nightTemp }}℃</span></p>

          </div>

        </div>

      </div>

    </div>

    

     // 切换城市input框

    <div v-show="state.isVisible" >

      <input id="newCity" @keydown.enter="handle" type="text" v-model="state.newCity" placeholder="请输入你要查询的城市">

    </div>

  </div>

然后使用css样式美化成如下界面；

js部分

接下来就是渲染其中的数据了，首先使用高德 api 来获取定位数据，查看官方文档，JS API结合 Vue 使用，首先安装Loader，如下所示，复制到当前文件终端安装。

然后复制代码粘贴；

AMapLoader 是高德地图 js API 的加载器，它可以在前端项目中加载和初始化高德地图的 js API。

import AMapLoader from '@amap/amap-jsapi-loader';

import { onMounted, reactive } from 'vue'

onMounted(() => {   // 在浏览器上出现内容时候触发

  // 加载官方提供的方法

  window._AMapSecurityConfig = {

    securityJsCode: "", // 密钥

  };

  AMapLoader.load({

    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填

    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']

  })

  

    // 加载完上面代码高德提供的服务后，执行then后面的操作

    .then((AMap) => {

      // 获取定位

      getLocalCity(AMap)  // 使用一个函数，将获取地址信息放到这个函数中

    })

})

获取城市信息

官方文档：

const getLocalCity = (AMap) => {

  AMap.plugin('AMap.CitySearch', function () {

    var citySearch = new AMap.CitySearch()

    citySearch.getLocalCity(function (status, result) {

      if (status === 'complete' && result.info === 'OK') {

        // 查询成功，result即为当前所在城市信息

        console.log(result.city);  // 会打印当前城市

        state.city = result.city  //将城市改为定位获取到的城市

        getWeather(AMap)   // 获取天气

      }

    })

  })

}

利用该地址获取实时天气数据

const getWeather = (AMap) => {

  //加载天气查询插件

  AMap.plugin("AMap.Weather", function () {

    //创建天气查询实例

    var weather = new AMap.Weather();

    //执行实时天气信息查询

    weather.getLive(state.city, function (err, data) {  // 将城市替换成state.city

      console.log(err, data);  // 获取天气数据，详情见下表

      state.weather = data     // 将数据赋值给 state.weather

      getForecast(AMap)     //  后面用来获取未来三天的天气

    });

  });

}

将这一整个对象赋值给state.weather然后再state.weather.渲染到页面上。

获取未来三天天气

const getForecast = (AMap) => {

  AMap.plugin("AMap.Weather", function () {

  //创建天气查询实例

  var weather = new AMap.Weather();

  //执行实时天气信息查询

  weather.getForecast(state.city, function (err, data) {

    console.log(err, data);  

    state.future = data.forecasts // 获取天气预报数据

    

    //err 正确时返回 null

    //data 返回天气预报数据，返回数据见下表

  });

});

}

最后就是切换城市中的input框的实现；

<div v-show="state.isVisible" >

      <input id="newCity" @keydown.enter="handle" type="text" v-model="state.newCity" placeholder="请输入你要查询的城市">

</div>

添加以一个v-show方法，然后绑定一个键盘敲击事件触发handle，并用v-model获取输入的数据并将其存储到state.newCity。

const handle = () => {

  state.isVisible =!state.isVisible    // 回车键将框不显示

  state.city = state.newCity    // 城市变为输入的城市

  getWeather(AMap)   // 重新获取该城市天气以及该城市未来天气

}



const toggle = () => {

  state.isVisible =!state.isVisible   // 使得点击切换城市框会显示和消失

}

以上就是实现获取定位城市，该城市的实时天气，以及未来三天的天气预测，切换查询其它城市的功能具体代码了。

总结

以上使用了Vue.js 组件化的方式来构建界面，利用高德地图 API 获取定位和天气数据，利用 Vue 的响应式机制来实时更新页面数据，通过使用官方文档中 AMapLoader 加载高德地图的JS API，使得我们能高效处理地图相关功能，希望这个小 demo 能够对你的前端开发有所帮助，同时记得给文章点点赞哦🤗。

致工作三年即将27岁的自己

这是一篇自己的碎碎念、即回顾自己以前的成长经历、也小小的持有一下对未来的期待。

我是一个双非本科从事于Java开发的一名普普通通的码农、不同于大多数人的27岁、大部分人在这个年龄都已经工作了4/5年、而我也恰恰刚刚满三年而已。

读书

小时候的记忆很模糊、很少关于有父母的记忆、从小的印象就是他们在很远的地方打工、那边还有一个从未谋面的哥哥、小时候的记忆更多是和爷爷奶奶在一起，爷爷在我记事起、他就很忙、很少在家里也或许是我不记事或者缺少了这部分的记忆。

在小时候的记忆里、住在茅草屋里面、那个时候家里还没有完全通电、印象里经常点煤油灯、这个时间段应该是02/03年的时候、记忆里这个时候家里养了一头牛、是一头老黄牛。家里在需要耕田播种的时候、不管风吹日晒、都能看见爷爷在田里一边驾驭着黄牛、嘴边一直在说什么、应该是教导牛牛该怎么走以便使的犁田犁的更好。记不清了、只知道每次遇到下雨的时候、爷爷披着蓑衣带着一个草帽、颇有一些武林大侠的气息。

那个时候家里有一条很凶很凶的狗、幺爷爷家里还是一条白猫、年龄比我那个时候都大。这条很凶的狗已经不记得长啥样了、甚至什么时候去世的都没有印象。

关于这条狗不多的记忆就是、它很凶、但凡看见我们在地坝(四川话：门前小院的意思、通常用于晒一些农作物的地方、或者夜晚乘凉的地方)里面打闹。它都会狂吠不止、这是对它的一个记忆。

还有一个记忆就是，记得是在某一个夏天、在屋后发现了一只野兔、这个时候不记得是不是爸妈在家了、全家都在追这个野兔、追了好久、这条狗也在追、有一个画面就是在我小时候的眼里那个农田的岸边很高、这个直接就从岸边往下面的田里跳下去、连续跳了好几个这样的梯田、那个姿势在我眼里好帅好帅、现在都记得很清楚。最后这个野兔是被抓住了、炸了酥肉、那个味道真的很香、现在都记忆深刻。毕竟小时候家里都是吃猪油、用很小很小的一块、煎出油炒菜。

幺爷爷在的猫是条白猫，印象里是一条抓老鼠的好手、但是不知道它什么死的、只记得大概有十三岁左右。

奶奶有风湿心脏病、那个时候总会吃一些药和一些偏方、记忆里有这么一幕、爷爷把刚出生的小狗狗杀掉、给奶奶治病、嘴馋的我也要吃、结果吃了一口就闷住了。

奶奶在我的记忆里有个画面就是我不想去读书、在上学的路上跑到了一个斜坡上、就如同那个时候黑白电视机上播放的游击战争片一样、以为自己躲在这里他们指定找不到、当然了最后肯定少不了一顿打。印象里只被奶奶打了这一次。

奶奶是在06年走的、不到六十岁。记忆特别深，当时哥哥从东北回老家也快一年了、那是在一个夜晚、哥哥先去睡了、我和其他堂哥堂姐在家里看电视、电视里播放的是洪金宝主演的、是一部战争片、大概就是他们去越南救什么人、有一个人在飞机上跳伞的时候说要倒数十个数、然后打开伞、结果这个嘴吃的人没数到就摔死了。里面有个画面用草杀人、后面还依葫芦画瓢学过这个东西。

奶奶走的时候、爷爷是第一个发现的、我记得爷爷发现之后、我去把哥哥喊醒了、然后我就一直在哭。虽然当时不知道死亡意味着什么、就是在哭、那个时候我上三年级了。奶奶走的那天的天气很好、我还记得我捡了一个螺母回家、后来我把这个螺母扔掉了、当时就想如果不捡这个螺母就好了、奶奶就不会走了。

第一次见哥哥的时候是在一个夏天、爸妈把他从东北送了回来、打算让他家里面读书、当然读书的地方现在已经垮掉了。那个时候家里的公路还是泥巴路、泥巴路大概还是前一年挖机采挖的、挖坏了几个秧田。他们在回来的前一年、写了一封信寄回来、内容是什么记不住了、只记得有一封信、分别向爷爷奶奶以及我都写了点东西。初次见面的时候很陌生、眼前这个和我差不多高有点黑的就是我哥、我的关注并没有在他的身上、更多的是他们提的袋子里面、因为有一袋子糖。

当然了小时候的记忆还有几个画面、就埋藏在心里吧、为什么说上面的狗狗很凶、因为他在我堂姐的脸上留下了印子、现在都能看见。

奶奶走掉之后、我和我哥就去了东北、因为家里没人会做饭了。就去东北读书、东北的记忆说不上多好、校园霸凌是一个很常见的事情。

在东北这三年、父母总是在吵架打架、住在平房里面、附近都是和父母一样的体力劳动者、他们一闹附近的人都会知道。我们的右边住了一个也是一个外出务工者、他们的有个女儿、比我和我哥都大、长得很白。在我们的左边也是一户外地务工者、不过是东三省的、不是四川的、这家的女主人好像很贤惠很好看、长得也很白。

在这期间、四川发生了很大的一件事、汶川地震、当时我记得我和附近的小孩偷偷跑去上网、结果附近的网吧都没网、然后回家就看到电视上到处都在播放新闻、去上学的时候、学校组织了捐款、我捐了五块钱。

小学结束之后、过完了六年级的暑假我就被送回到了老家、走的时候是和爸爸在工地上的工友一路的、正好他要回家。他和我们是一个地方的，记得大概是午饭后、叫了一辆出租车、我就和这个工友上了车、爸爸的这个工友坐在了副驾、我坐在了后排、送行的人有几个、车窗升起、行驶了一段路后、眼泪就落下了、大概知道了以后又不会在爸妈身边了、也不知道为什么没有哭出声、就和电视里面一样。这就是小学的记忆。

大概走了三四天、回到家了、就开始上初中了。

报名的时候见到了很多小学同学、他们很容易就认出我来了、然而我并没有很快的认出他们、他们说我五官没什么变化、很好认。

初中是在一所民办初中读的、我们这边的公立学校很水、很乱、上课打牌抽烟都存在、老师也不会管。而且离我们也很远。民办学校离我家很近、这里的校长和附近的家长都很熟悉、自然而然的就去读了、自然而然的也会听到这样的交代、娃儿不听话不好好读书就整哦。初中的算是目前为止的小高光、因为那个时候自己还算聪明、成绩也还算可以、被当着升学的苗子重点关注。当然最后也还算争气、以A+1的成绩考进县一中、我们这一届也还算争气、有一个去了同济大学、算是历史最好的一届了，当然这个学校现在也垮了。

高中的时候流传出了一个梗、你的数学不会是体育老师教的吧、那个时候会自嘲、我初中的时候、不止是数学是体育老师教的、历史和物理也是体育老师教的、这个老师还没上过高中。

高中是lol很火的时候、那个时候脱离了棍棒教育的我、理所当然的沉迷了进去、高一上学期还好、棍棒教育的习惯还在、期末考试全年级2000多人我考了200名左右、班上第五名好像。

学习态度的变化不止是因为lol、还记得当时班上有个人说我很努力、所以成绩这样、当时不知道是脑子抽了还是咋了就认为别人在说我笨、然后就慢慢放弃了之前的学习方式、再加上联盟的影响、自然而然的成绩一落千丈、后来也就去复读了。

复读这一年没什么特别的记忆、涨了几十分、去了一所双非学校。还是没有做到高一班主任说的那样、你好好读上个一本不成问题。当时学校的升学率是前60名可以上川大的程度、200名左右上一个一本好像确实不是什么问题。但也确实没做到。

上了大学就和大部分人一样、加部门、当班干部、实际上就是混吃等死。不同的是大二那年、由于初中埋下的病因、做了双侧股骨头置换手术、这一下就把家里面掏空了、手术是在北京做的、花了20+、是在18年、三月一号做的左腿三月14号下午14:17做的右腿、刚检测出来的时候很崩溃、出了诊室就哭了、因为知道这么大笔钱家里出不起、当时借住在北京的姐姐家，在十五楼窗口处、恐惧战胜了勇气、没有跳下去。

查出来的时候就告知了父母、父母当时在深圳上班、我一个人去的北京找的姐姐、父亲先赶过来、看见父亲憔悴的面庞、自己也彻底取消了跳下去的想法、太憔悴了、没见过这个样子的父亲、也无法去想象如果跳了父亲会咋样、只知道那个时候父亲的头发白了很多、然后开始秃头了。

做手术的那几天恰逢过年期间、医院的人很多、见识了人生百态、有的人痛苦呻吟着想活下去，有的人沉默不语想离开人世，坐在轮椅上的时候、被推出去透透风、看见了一个和我一般大的人、少了一条腿，那个时候心里想着都是苦命人。不同于大一暑假工被晒的黢黑的我，在学校看到一个老外、老外的黑衬托出我的白，那个时候由于被晒的黢黑心情很糟糕，见到这个交换生之后得到了极大的安慰。

因为这个手术需要人照顾、学校是上下铺、因此休学一年、手术很顺利、在我们眼里是一个天大的事情、在医生眼里如果一个小手术一般、就和普通的感冒差不多。术后也会恢复的很好、有一段时间是长短腿、走路一瘸一拐的、过了两个多月吧就彻底正常了。到目前为止至少没什么问题。唱跳rap不打篮球。

后面的大学时光就很平平无奇、本以为就和之前的师兄师姐一样正常大学然后毕业、后面就遇到了口罩事件、在学校都没有好好学习、在家里怎么可能会好好学习、真的是在混吃等死、大学期间没有什么特别的记忆、唯一的印象就是大一老校区是一群室友、大二搬到新校区、又换了一批室友、寝室从原来和其他专业的混寝、变成了同专业的混寝、但是由于休学一年、复学的时候又被安排到新的寝室、又换了一批室友、读了一年这一批室友毕业了、我大四的时候又换了一批室友。也就是一年一批室友。也算是独一份了。不过后面的都没怎么联系了。

这就是整个读书生涯了。还有很多画面就埋藏在心底吧。

工作

毕业之后、第一年认识了一个老师、养鱼达人、第一次约她出来玩、就问我用什么去接他、给了刚毕业的我一个暴击。于是呼在工作上加把力，从刚毕业的几千块不到一年的时间就破万了。也就是在22年左右吧。这个时候总觉得自己谈恋爱应该有点底气了。可在24年又给了我一个暴击。也就是今年。

在整个22年里面、由于工作还行、有大量的自由时间、在b上学习了尚硅谷的mysql和jvm课程、在慕课网上学习Java高并发课程、还算充实、虽然工作上用到的不多。

在22年、养了一只猫取名壹贰、是只三花、很粘人，也很喜欢、但我把它放在老家了。我的头像就是它很可爱吧。

在23年里、由于之前的学习累积、总觉得要记录一下、避免用的时候又到处找、就开始了写博客这个过程、博客更新的速度很稳定、生活节奏也很稳定、每天下班之后、买菜回家做晚饭和第二天中午的午餐、厨艺和刀工得到了大涨，每天晚上还能学习两小时、从周末开始选题、工作日开始编码、验证写博客、一切都有条不紊的进行着，生活节奏很稳定、窗外的阳光也很温暖。

23年发生了一件事、就是爷爷走了、遗憾的是没有带个孙媳妇回去让他看一眼、爷爷是五月份走的、守灵的那个晚上、睡在爷爷旁边、没有丝毫的害怕、下葬的那一天、没有哭但全是遗憾。至此带我长大的两个人都离开了人世。

在23年11月份的时候、认识了一个菇凉、她的名字很好听、长得也很好看、她的生活多姿多彩、现在都觉得她活得很多姿多彩。就和大家想的那样、慢慢的喜欢上了这个人、好巧不巧的是她对我也有点点意思吧、然后就约着出来玩、一起看电影、一起跨年等等、初期总是美好的、回忆也是。她不会做饭、总是吃外卖、我会让她点菜然后我做好了带给她吃、无论什么时候会送她回家然后自己再回家、每次见面都会给她准备一点零食或者小惊喜、理所当然的我们在一起了、直到过完年之后的某一个周末、我朋友约我们出去玩、在晚上回来的时候、我朋友买了房子(和女朋友一起买的)、刚好又说到这个问题、我就说了一句以后我们也一起买、用公积金带款、然后就因为这个问题讨论了一周、直到最后的分手。

具体的细节问题就不说了。我工作三年攒了一些钱、家里修房子我出了一点钱。一时间我家肯定是拿不出来的、我想让他给我点时间、结果不愿意、她之前有过很长一段时间的恋情被分手、大概是害怕再浪费时间、也能理解。

刚分手那段时间、感觉像是丢了半条命。心态很崩溃、觉得自己很差劲、一眼望到了头、好像也成不了家。掘金的更新速度就能看出来影响，虽然在一起的时间不长、三月份分的手、到现在为止有些时候都会因为这件事emo。

分手之前很喜欢做饭、分手之后再也没做过饭、看着那些为了给她做菜买的调味品以及打包盒、总是别有一番滋味、有时候总觉得自己要是当时做的再好一点就好了。在这期间看了一些心理学相关的书、也学会了一些调整自己的方法。

分手这段时间里、激情消费买了辆车、自驾去了一趟若尔盖大草原、草原很好看、自此身上的积蓄被自己花得差不多了。不止如此、由于工作上没有任何发展、总是干一些和Java无关的事情、甚至打算让我做嵌入式开发和大模型这一类工作，职业发展也看到了头。

整理生活这段时间丢了很多东西、总感觉自己也把自己丢了、好在慢慢的把自己拼好重新捡起来了。

下一个月也就马上27岁了、看着身边同龄的人要么成家、要么即将成家、要么事业有成、自己还是孤家寡人，多多少少也很羡慕。

站在生活这条十字路口、迷茫、彷徨、不安、焦虑每隔一段时间都会出现在自己身边、好在自己的调整能力得到了极大的提升、看书总归是有用的。

古人云：三十而立、至少现在看来、在这有限的时间里很难立起来了、但总要去试试、说不定就成了呢。

未来会是什么样子的呢？不知道，能把自己的生活过好就已经很不错了。感知幸福是一种能力、感知焦虑也是。

对生活的感悟如同总有千言万语、却有一种如鲠在喉的感觉。不知道命运会给我带来什么样的生活？不管怎么样都坦然接受吧。期待吗？期待吧。

写到这里、感受万千、内心细腻的人总是容易伤春悲秋。

回顾过往、就如同这篇文字一样、普普通通平平无奇、都无法用鸡肋来形容。但相信生活不会辜负每一个好好生活的人、始终对未来抱有期待与憧憬。不管最终如何、终将相信我们都会过上自己想要的生活。

最后给自己定一个目标吧：

• 坚持写博客、写到35岁，我相信自己会一直从事计算机行业的！


• 健健康康的活到退休。

窗外的天空很蓝、阳光很温暖、最近的心情也很好、希望您也是。

谢谢您能看到这里，祝君心想事成、万事顺遂。

大家好，我是凌览 。

同样是程序员靠手艺吃饭，为啥外包却是过街老鼠人人喊打，这里我精选了几位网友的回答让我们一起来看看。

第一位网友

其实我觉得，国家应当立法禁止外包驻场。应当规定只有在外包公司所在办公场所工作才能算外包，驻场外包一律必须与目标公司签订劳务合同。否则，驻场外包本质上相当于公司钻劳动法漏洞雇人。

你请外包公司开发软件，给需求给预算给时间给报酬，对方开发了给你验收，这叫外包。没毛病。

你给外包公司钱，人家直接把人派到你办公室，这叫什么玩意的外包？这不就是逃避责任，规避劳动法么？——你是个公司，又不是个人。

当然了，其实确实有些情况，需要不同公司去同一个办公地点合作做项目的，大家觉得说不清楚这与外包的区别。但其实区别还是很明显，区别在于，这些员工遵守谁家的工作制度。

我是A公司人，去客户B那里出差，帮客户B解决问题，这段时间虽然在客户B公司上班，但我不用打他们的卡，不用给他们汇报工作，不用交他们周报，我只对自己公司负责，这是出差，因为我还是A公司员工。

如果我在A公司签订合同然后去B公司工作，由他们（B公司）给分配任务，由他们考核计划完成情况，由他们收我周报，由他们定我KPI，我向他们汇报工作，这性质就完全变了。

这除了劳务关系以外，难道不是实质上B公司员工么？如果允许这样的形态存在，那不就等于是B公司的金蝉脱壳方式规避劳动法么？

所以我的看法是这样：外包可以，B公司写好需求人力时间，签合同，包项目，A公司直接交付最终成果，A公司的员工不受B公司管理，这是外包，这样的外包我觉得很合理。——A公司直接把人派出去给B公司，让B公司管理A公司的人，这不叫外包，这叫买卖人口，这叫A公司帮B公司规避劳动法，这是对外包的侮辱。

第二位网友

我其实一直本着给钱做事的风格，所以外包我并不歧视，直到有一天。

今年我面试了一个外包，行情不好，所以不怎么敢开薪资，比离职前低了一丢丢的样子，喊了12K

甲方面试，问的那一个细，从日常工作到项目数据流，到接口全问了一个遍，还好大差不多，聊了半个多小时。

面试结果是过的。

但是但是面试官和我介绍项目时候就说了，上半个月加班会少一点，可能到8点9点，下半个月可能会到1点2点，偶尔周六还要加班，是一个新项目。

我懂了。

我就问外包公司有加班费吗？他们说没有，只能调休，我算了一下按照面试官介绍，这加班一个月得加班120个小时打底，这没加班费，还只能调休，我直接裂开。

五险一金有，最低的

试用期全薪，这个除了小公司基本上是全的。

剩下啥福利没有，没餐补，没车补，啥也没有。

我直接就拒了。。

第三位网友

外包的活尽量别干，比如培训班入行，或换城市发展着急找工作，或者刚毕业想积累经验，这些情况下可能不得不找外包积累经验，但外包的活尽量别超过2年，干3年都嫌多，原因如下：

总之，甲方人员对外包员工可能真是客客气气的，但在各种工作中，总不免会想，我是甲方，他是外包，也就是说，甲方和外包之间的鸿沟是天然存在的。

引言

在流程图中，边（Edge） 的主要作用是连接两个节点，表示从一个节点到另一个节点的关系或流程。在业务系统中，边通常代表某种逻辑连接，比如状态转移、事件触发、任务流动等。对于复杂的流程图，边不仅仅是两点之间的连接，它还可以传递信息、约束流程的顺序，并通过不同的样式或标记来表达不同的含义。

不同的场景下，边可能需要具备丰富的样式或交互，比如箭头表示方向、虚线表示条件判断、动画表示动态效果等。因此，灵活定义和实现自定义边对于流程图的可视化设计尤为重要。

LogicFlow的边

为了灵活适配不同场景下的需求，LogicFlow的边模型是由 线条、箭头、文本、调整点五个模块组成。用户可以继承基础边类，对边的线条、箭头、文本和调整点进行自定义。

在技术实现上，LogicFlow设计了一个基础边模型BaseEdge，它定义了LogicFlow边的基本属性，如起点、终点、路径、样式等，并提供了操作这些属性的基本方法，提供逻辑处理和渲染的基础，通过继承基础边的数据类BaseEdgeModel和视图类BaseEdge，可以实现自定义边的逻辑和交互。

基础边：BaseEdge

属性方法简介

BaseEdgeModel中定义了一些核心属性，用于描述边的几何结构和样式。

围绕着这些核心属性，LogicFlow设计了支撑边运转的核心方法

还有一些渲染使用的样式方法

运转过程

边实例化时，数据层Model类内部会先调用initeEdgeData方法，将无需处理的属性直接存储下来，设置为监听属性然后触发setAnchors、initPoints和formatText方法，生成边起终点、路径和文本信息存储并监听。

视图层渲染时，Model中存储的数据会以外部参数的形式传给组件，由不同渲染方法消费。每个渲染方法都是从Model存储的核心数据中获取图形信息、从样式方法中获取图形渲染样式，组装到svg图形上。最终由render函数将不同模块方法返回的内容呈现出来。

内置衍生边

LogicFlow内部基于基础边衍生提供三种边：直线边、折线边和曲线边。

直线边

在基础边的之上做简单的定制：

View	Model

直线边数据层和视图层源码逻辑

折线边

折线边在Model类的实现上针对边路径计算做了比较多的处理，会根据两个节点的位置、重叠情况，使用 A*查找 结合 曼哈顿距离 计算路径，实时自动生成pointsList数据。在View类中则重写了getEdge方法，使用svg polyline元素渲染路径。

曲线边

曲线边和折线边类似，Model类针对边路径计算做了较多处理，不一样的是，为了调整曲线边的弧度，曲线边额外还提供了两个调整点，边路径也是根据边起终点和两个调整点的位置和距离计算得出，View类里使用svg的path元素渲染路径。

一起实现一条自定义动画边

自定义边的实现思路和内置边的实现类似：继承基础边 → 重写Model类/View类的方法 → 按需增加自定义方法 → 命名并导出成模块

今天就带大家一起实现一条复杂动画边，话不多说，先看效果：

要实现这样效果的边，我们核心只需要做一件事：重新定义边的渲染内容。

在实际写代码时，主要需要继承视图类，重写getEdge方法。

实现基础边

那我们先声明自定义边，并向getEdge方法中增加逻辑，让它返回基础的折线边。

为了方便预览效果，我们在画布上增加节点和边数据。

自定义边实现

import { h, PolylineEdge, PolylineEdgeModel } from '@logicflow/core'



class CustomAnimateEdge extends PolylineEdge {

  // 重写 getEdge 方法，定义边的渲染

  getEdge() {

    const { model } = this.props

    const { points, arrowConfig } = model

    const style = model.getEdgeStyle()

    return h('g', {}, [

      h('polyline', {

        points,

        ...style,

        ...arrowConfig,

        fill: 'none',

        strokeLinecap: 'round',

      }),

    ])

  }

}



class CustomAnimateEdgeModel extends PolylineEdgeModel {}



export default {

  type: 'customAnimatePolyline',

  model: CustomAnimateEdgeModel,

  view: CustomAnimateEdge,

}

定义画布渲染内容

lf.render({

  nodes: [

    {

      id: '1',

      type: 'rect',

      x: 150,

      y: 320,

      properties: {},

    },

    {

      id: '2',

      type: 'rect',

      x: 630,

      y: 320,

      properties: {},

    },

  ],

  edges: [

    {

      id: '1-2-1',

      type: 'customPolyline',

      sourceNodeId: '1',

      targetNodeId: '2',

      startPoint: { x: 200, y: 320 },

      endPoint: { x: 580, y: 320 },

      properties: {

        textPosition: 'center',

        style: {

          strokeWidth: 10,

        },

      },

      text: { x: 390, y: 320, value: '边文本3' },

      pointsList: [

        { x: 200, y: 320 },

        { x: 580, y: 320 },

      ],

    },

    {

      id: '1-2-2',

      type: 'customPolyline',

      sourceNodeId: '1',

      targetNodeId: '2',

      startPoint: { x: 150, y: 280 },

      endPoint: { x: 630, y: 280 },

      properties: {

        textPosition: 'center',

        style: {

          strokeWidth: 10,

        },

      },

      text: { x: 390, y: 197, value: '边文本2' },

      pointsList: [

        { x: 150, y: 280 },

        { x: 150, y: 197 },

        { x: 630, y: 197 },

        { x: 630, y: 280 },

      ],

    },

    {

      id: '1-2-3',

      type: 'customPolyline',

      sourceNodeId: '2',

      targetNodeId: '1',

      startPoint: { x: 630, y: 360 },

      endPoint: { x: 150, y: 360 },

      properties: {

        textPosition: 'center',

        style: {

          strokeWidth: 10,

        },

      },

      text: { x: 390, y: 458, value: '边文本4' },

      pointsList: [

        { x: 630, y: 360 },

        { x: 630, y: 458 },

        { x: 150, y: 458 },

        { x: 150, y: 360 },

      ],

    },

    {

      id: '1-2-4',

      type: 'customPolyline',

      sourceNodeId: '1',

      targetNodeId: '2',

      startPoint: { x: 100, y: 320 },

      endPoint: { x: 680, y: 320 },

      properties: {

        textPosition: 'center',

        style: {

          strokeWidth: 10,

        },

      },

      text: { x: 390, y: 114, value: '边文本1' },

      pointsList: [

        { x: 100, y: 320 },

        { x: 70, y: 320 },

        { x: 70, y: 114 },

        { x: 760, y: 114 },

        { x: 760, y: 320 },

        { x: 680, y: 320 },

      ],

    },

  ],

})

然后我们就能获得一个这样内容的画布：

添加动画

LogicFlow提供的边动画能力其实是svg 属性和css属性的集合，目前主要支持了下述这些属性。

type EdgeAnimation = {

    stroke?: Color; // 边颜色, 本质是svg stroke属性

    strokeDasharray?: string; // 虚线长度与间隔设置, 本质是svg strokeDasharray属性

    strokeDashoffset?: NumberOrPercent; // 虚线偏移量, 本质是svg strokeDashoffset属性

    animationName?: string; // 动画名称，能力等同于css animation-name

    animationDuration?: `${number}s` | `${number}ms`; // 动画周期时间，能力等同于css animation-duration

    animationIterationCount?: 'infinite' | number; // 动画播放次数，能力等同于css animation-iteration-count

    animationTimingFunction?: string; // 动画在周期内的执行方式，能力等同于css animation-timing-function

    animationDirection?: string; // 动画播放顺序，能力等同于css animation-direction

};

接下来我们就使用这些属性实现虚线滚动效果。

边的动画样式是取的 model.getEdgeAnimationStyle() 方法的返回值，在内部这个方法是取全局主题的edgeAnimation属性的值作为返回的，默认情况下默认的动画是这样的效果：

开发者可以通过修改全局样式来设置边动画样式；但如果是只是指定类型边需要设置动画部分，则需要重写getEdgeAnimationStyle方法做自定义，就像下面这样：

class ConveyorBeltEdgeModel extends PolylineEdgeModel {

  // 自定义动画

  getEdgeAnimationStyle() {

    const style = super.getEdgeAnimationStyle()

    style.strokeDasharray = '40 160' // 虚线长度和间隔

    style.animationDuration = '10s' // 动画时长

    style.stroke = 'rgb(130, 179, 102)' // 边颜色

    return style

  }

}

然后在getEdge方法中加上各个动画属性

// 改写getEdge方法内容

const animationStyle = model.getEdgeAnimationStyle()

const {

  stroke,

  strokeDasharray,

  strokeDashoffset,

  animationName,

  animationDuration,

  animationIterationCount,

  animationTimingFunction,

  animationDirection,

} = animationStyle



return h('g', {}, [

  h('polyline', {

    // ...

    strokeDasharray,

    stroke,

    style: {

      strokeDashoffset: strokeDashoffset,

      animationName,

      animationDuration,

      animationIterationCount,

      animationTimingFunction,

      animationDirection,

    },

  }),

])

我们就得到了定制样式的动画边：

添加渐变颜色和阴影

最后来增加样式效果，我们需要给这些边增加渐变颜色和阴影。
SVG提供了元素linearGradient定义线性渐变，我们只需要在getEdge返回的内容里增加linearGradient元素，就能实现边颜色线性变化的效果。
实现阴影则是使用了SVG的滤镜能力实现。

// 继续改写getEdge方法内容

return h('g', {}, [

  h('linearGradient', { // svg 线性渐变元素

    id: 'linearGradient-1',

    x1: '0%',

    y1: '0%',

    x2: '100%',

    y2: '100%',

    spreadMethod: 'repeat',

  }, [

    h('stop', { // 坡度1，0%颜色为#36bbce

      offset: '0%',

      stopColor: '#36bbce'

    }),

    h('stop', { // 坡度2，100%颜色为#e6399b

      offset: '100%',

      stopColor: '#e6399b'

    })

  ]),

  h('defs', {}, [

    h('filter', { // 定义滤镜

      id: 'filter-1',

      x: '-0.2',

      y: '-0.2',

      width: '200%',

      height: '200%',

    }, [

      h('feOffset', { // 定义输入图像和偏移量

        result: 'offOut',

        in: 'SourceGraphic',

        dx: 0,

        dy: 10,

      }),

      h('feGaussianBlur', { // 设置高斯模糊

        result: 'blurOut',

        in: 'offOut',

        stdDeviation: 10,

      }),

      h('feBlend', { // 设置图像和阴影的混合模式

        mode: 'normal',

        in: 'SourceGraphic',

        in2: 'blurOut',

      }),

    ]),

  ]),

  h('polyline', {

    points,

    ...style,

    ...arrowConfig,

    strokeDasharray,

    stroke: 'url(#linearGradient-1)', // 边颜色指向渐变元素

    filter: 'url(#filter-1)', // 滤镜指向前面定义的滤镜内容

    fill: 'none',

    strokeLinecap: 'round',

    style: {

      strokeDashoffset: strokeDashoffset,

      animationName,

      animationDuration,

      animationIterationCount,

      animationTimingFunction,

      animationDirection,

    },

  }),

])

就得到了我们的自定义动画边

结尾

在流程图中，边不仅仅是节点之间的连接，更是传递信息、表达逻辑关系的重要工具。通过 LogicFlow，开发者可以轻松地创建和自定义边，以满足不同的业务场景需求。从基础的直线边到复杂的曲线边，甚至动画边，LogicFlow 都为开发者提供了高度的灵活性和定制能力。

希望能通过这篇文章抛砖引玉，帮助你了解在 LogicFlow 中创建和定制边的核心技巧，打造出符合你业务需求的流程图效果。

如果这篇文章对你有帮助，请为我们的项目点上star，非常感谢ღ( ´･ᴗ･` )

项目传送门：github.com/didi/LogicF…

作为程序员，肯定都深受加班的痛苦。

❝那每天加班很晚的情况下，该通过怎样的锻炼来保持身体健康呢？

我觉得还是得先把觉睡够，然后才是锻炼。

❝睡眠不足情况下高强度锻炼，容易猝死。

如果睡觉的时间都不够，建议辞，换个不太卷的地方。

把特别卷的岗位，留给那些更年轻的，特别需要钱买房结婚的，拼几年，把生存问题解决掉之后，就不要再用命赚钱了。

人生几十年，钱是赚不完的，基本生活需求之外，多赚到的钱，对生活质量提升作用有限。

睡眠的优先级，不但高于锻炼，甚至高于洗脸洗澡。

❝而且睡前三小时不要吃太多东西。

对于经常晚上加班很晚的人来说，戒掉睡觉前玩手机的不良习惯，尽量减少晚上的一切活动，争分夺秒地保证睡眠。

健身，足够的营养和休息，都比身体锻炼本身更重要。

❝所以如果长期生活不规律，饮食习惯不好，休息睡眠不能保证。

如果已经很累了，就不要考虑上高强度的训练了，夸张一点有可能做个俯卧撑都有可能把人送进医院。

有位网友总结得好：

❝去健身，你会得到强壮的身体，过度劳累，你会得到猝死的尸体，过度劳累还去健身，你会得到强壮的尸体。

所以：下班晚，好好休息就是你最好的健身！

程序员在工作空闲之余也可以通过以下方式来锻炼身体：

❝通过走路或骑自行车的方式出门活动，可以锻炼身体的同时享受户外的新鲜空气。

在家里可以做一些简单的，如俯卧撑、仰卧起坐等，这些操作都可以锻炼身体的同时不需要太多的器材。

每日一题

题目描述

❝

给你一个二叉树的根节点 root ， 检查它是否轴对称。

解题思路

❝递归实现

递归结束条件：

• 都为空指针则返回 true


• 只有一个为空则返回 false

递归过程：

• 判断两个指针当前节点值是否相等


• 判断 A 的右子树与 B 的左子树是否对称


• 判断 A 的左子树与 B 的右子树是否对称

代码实现

Java代码：

 class Solution {

     public boolean isSymmetric(TreeNode root) {

         if(root == null) {

           return true;

         }

         return dfs(root.left,root.right);

     }

     public boolean dfs(TreeNode p,TreeNode q){

         if (p == null && q == null) {

           return true;

         } else if (p == null||q == null) {

           return false; //只有一个为空

         }

         if(p.val != q.val) {

           return false;

         }

         //第一棵子树的左子树和第二棵子树的右子树对称，且第一棵子树的右子树和第二棵子树的左子树对称

         return dfs(p.left,q.right) && dfs(p.right,q.left);

     }

 }

Python代码：

class Solution(object):

 def isSymmetric(self, root):

  """

  :type root: TreeNode

  :rtype: bool

  """

  if not root:

   return True

  def dfs(left,right):

   # 递归的终止条件是两个节点都为空

   # 或者两个节点中有一个为空

   # 或者两个节点的值不相等

   if not (left or right):

    return True

   if not (left and right):

    return False

   if left.val!=right.val:

    return False

   return dfs(left.left,right.right) and dfs(left.right,right.left)

  # 用递归函数，比较左节点，右节点

  return dfs(root.left,root.right)

Go代码：

func isSymmetric(root *TreeNode) bool {

 // 递归-对称二叉树

 var dfs func(left, right *TreeNode) bool

 dfs = func(left, right *TreeNode) bool {

  if left == nil && right == nil {

   return true

  }

  if left ==nil || right == nil || left.Val != right.Val {

   return false

  }

  // 左右子节点都存在且val等，递归其子树

  return dfs(left.Left, right.Right) && dfs(left.Right, right.Left)

 }

 return dfs(root.Left, root.Right)

}

复杂度分析

❝假设树上一共 n 个节点。

时间复杂度：

• 这里遍历了这棵树，时间复杂度为 O(n)。

空间复杂度：

• 这里的空间复杂度和递归使用的栈空间有关，这里递归层数不超过 n，故空间复杂度为 O(n)。

简介

最近学习了svg,想着使用svg实现地铁线路图

 其中黄色是1号线，蓝色是2号线，橙色是3号线

实现：react+svg+数据结构-图。

考虑范围包括了每站时间，但未包括了换站时间。考虑到换站时间可以加到每2个交换站的路程里

功能

功能：选择2个地铁站，标出最短路程。

求最少换站路线，暂未做

实现思路

1. 简化问题，先将所有地铁站分2类，交换站和非交换站。那么交换站可以充当图中的。那么从a=>b, 变成a=>交换站=>交换站=>b的问题,需要写死的是非交换站（a,b）能到达的交换站（下面的adjcent数组）, 其中a=>交换站 和b=>交换站 相对静止,但是我这里也考虑到了非交换站到交换站需要的时间（time）

地铁线路图

图

2. 首先根据每条地铁图数据绘制出地铁线路图，并添加上点击事件，这里要处理好地铁线路图的数据，数据需要相对准确，因为后面需要计算出最短路径。

3. 求最短距离，使用的是Floyd最短路算法（全局/多源最短路）。 其中原理：计算a->b的最短路径，遍历所有，查找是否有最捷径路径 a->x x->b

for(k=1;k<=n;k++) 

    for(i=1;i<=n;i++) 

        for(j=1;j<=n;j++) 

        if(e[i][j]>e[i][k]+e[k][j]) // i->j  i->k  k->j

            e[i][j]=e[i][k]+e[k][j]; 

然而拿到最短路程后，但是并未拿到路程，拿到的是比如，a点到所有点的最短路程。你们可以思考一下如果获取最短路径。

大概长这样

4. 求最短路径 使用一个对象，存储每次找到较短路径。 changeRodePath[${is}to${js}] = [ [is, ks], [ks, js], ]

  function getAllPointShortest(n, e) {

    let changeRodePath = {};

    for (let k = 0; k < n; k++) {

      for (let i = 0; i < n; i++) {

        for (let j = 0; j < n; j++) {

          if (e[i][j] > e[i][k] + e[k][j]) {

            e[i][j] = e[i][k] + e[k][j];

            console.log("-------------------------");

            const is = changeStation[i];

            const ks = changeStation[k];

            const js = changeStation[j];

            changeRodePath[`${is}to${js}`] = [

              [is, ks],

              [ks, js],

            ];

            console.log(changeStation[i], changeStation[j]);

            console.log(changeStation[i], changeStation[k]);

            console.log(changeStation[k], changeStation[j]);

                // 2_2 2_5

                 //2_2 1_2

                   //1_2 2_5

          }

        }

      }

    }

    setChangeRodePath(changeRodePath);

    return e;

  }

当选中2个站时，先取出adjacent，然后求出最短路程，

         let path = {};

        adjacent0.forEach((p0,i1) => {

          adjacent1.forEach((p1,i2) => {

            const index0 = changeStation.indexOf(p0);

            const index1 = changeStation.indexOf(p1);

            let t=time0[i1]+time1[i2]

            if ((rodePath[index0][index1]+t) < minPath) {

              minPath = rodePath[index0][index1];

              path = { p0, p1};

            }

          });

        });

具体多少不重要，重要的是通过 let pathm = changeRodePath[${path.p0}to${path.p1}]，递归查找是否有更短的捷径，因为，2_1 =>3_9 的路径是：2_1 =>1_3=>1_5=>1_8，所以不一定有捷径a->c c—b, 可能是 a->c c->b， 然后发现有更短路径，c->d d->b,那么a-b 路程就变成了a->c->d->b。回到正题，递归之后就能取到最短路径了，然后通过2个交换点取得路径。

没有就更简单了

5.取对应的line,去渲染，这里分2类，交换站之间的路径（最短路径），头和尾。然后分别渲染polyline（使用对应line 的颜色）

function getPl(item, attr, listen) {

    return (

      <g {...attr} {...listen}>  

        <polyline   //绘制line

          {...item}

          fill="none"

          color={item.colorH}

          strokeWidth="5"

          strokeLinecap="round"

          strokeLinejoin="round"

        />

        {item.usePointn.map((point) => { // line 上的站

          return (

            <use

              x={point.x}

              onClick={() => choosePoint(point)}

              y={point.y}

              fill={point.color}

              href="#point"

            >use>

          );

        })}

      g>

    );

  }

代码准备

// 上图所示，数据随便造，需要合理时间，不然得到的路程奇奇怪怪的

代码部分

html

  
width: "80vw", height: "100vh" }}>

        <svg

          id="passWay"

          viewBox="0 0 800 600"

          xmlns="http://www.w3.org/2000/svg"

        >

          <defs>

            <g id="point">

              <circle r="4">circle>

              <circle r="3" fill="#fff">circle>

            g>          

          defs>

        // 所有地铁线路图

          {polyline.map((item) => {

            return getPl(

              item,

              {},

              {

                onMouseEnter: (e) => onMouseEnterShow(e, item),

                onMouseOut: () => {

                  clearTimeout(t1.current);

                  t1.current = null;

                },

              }

            );

          })}

          // mask

          { choosePoints.length==2 && (

            <rect

              x="0"

              y="0"

              width={"100%"}

              height={"100%"}

              fillOpacity={0.9}

              fill="white"

            >rect>

          )}

              // 最短路程

          {choosePoints && choosePoints.length==2 && showReduLine.map(line=>{

            return  getPl(line, {}, {})

          })

         }

        svg>

      

通过line 获取 polyline

  function getLineP(line) {

    const usePointn = [];

    let path = "";

    line.points.forEach((item, index) => {

      const { x, y, isStart, isChange, isEnd } = item;



      usePointn.push({ ...item, color: line.color });

      if (index == 0) {

        path = `${x},${y} `;

      } else {

        path += `${x},${y} `;

      }

    });

    const polylinen = {

      usePointn,

      stroke: line.color,

      ...line,

      pointStation: line.points,

      points: path,

    };

    return polylinen;

  }

选出2站绘制路程

  function comfirPath(point0, point1, p0, p1, pathm) {

   

    let pShow0= getLines(point0,p0)

    let pShow1= getLines(point1,p1)

    let pathsCenter=[]

    if (pathm) {

      function recursion(pathm){

         pathm.map(([p0,p1])=>{

          let pathn = changeRodePath[`${p0}to${p1}`];

          if(pathn){

            recursion(pathn)

          }else{

            // 中间的line 不用按顺序

            pathsCenter.push(getChangeStationLine(p0,p1))

          }

       })

      }

      recursion(pathm)

    }else{

      pathsCenter=[getChangeStationLine(p0,p1)]

    }

    const pyAll= [pShow0,pShow1,...pathsCenter].map(line=>{

      const py= getLineP({

        points:line,

      })

      py.stroke=line.color

      return py

    })

    setShowReduLine(pyAll); // 绘制

  }

参考： 1.# [数据结构拾遗]图的最短路径算法

作者：无名小兵
来源：juejin.cn/post/7445208959151767604