前言

👳‍♂️产品大哥（怒气冲冲跑过来）： “大哥你这查询列表有问题啊，每次点一下查询，返回的数据不一样呢”

👦我：“FKY 之前不是说好的吗，加了排序查询很卡，就取消了”

🧔技术经理：“卡主要是因为分页查询加了排序之后，mybatisPlus 生成的 count 也会有Order by就 很慢，自己实现一个count 就行了”

👦我：“分页插件在执行统计操作的时候，一般都会对Sql 简单的优化，会去掉排序的”

今天就来看看分页插件处理 count 的时候的优化逻辑，是否能去除order by；

同时 简单阐述一下 order by、limit 的运行原理

往期好文：最近发现一些同事的代码问题

mybatisPlus分页插件count 运行原理

分页插件都是基于MyBatis 的拦截器接口Interceptor实现，这个就不用多说了。下面看一下分页插件的处理count的代码，以及优化的逻辑。

详细代码见：com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor.class

count sql 从获取到执行的主要流程

1.确认count sql MappedStatement 对象:

先查询Page对象中 是否有countId（countId 为mapper sql id）,有的话就用自定义的count sql,没有的话就自己通过查询语句构建一个count MappedStatement

2.优化count sql：

得到countMs构建成功之后对count SQL进行优化，最后 执行count SQL，将结果 set 到page对象中。

public boolean willDoQuery(Executor executor, MappedStatement ms, Object parameter, RowBounds rowBounds, ResultHandler resultHandler, BoundSql boundSql) throws SQLException {

    IPage<?> page = ParameterUtils.findPage(parameter).orElse(null);

    if (page == null || page.getSize() < 0 || !page.searchCount()) {

        return true;

    }



    BoundSql countSql;

    // -------------------------------- 根据“countId”获取自定义的count MappedStatement

    MappedStatement countMs = buildCountMappedStatement(ms, page.countId());

    if (countMs != null) {

        countSql = countMs.getBoundSql(parameter);

    } else {

        //-------------------------------------------根据查询ms 构建统计SQL的MS

        countMs = buildAutoCountMappedStatement(ms);

        //-------------------------------------------优化count SQL

        String countSqlStr = autoCountSql(page, boundSql.getSql());

        PluginUtils.MPBoundSql mpBoundSql = PluginUtils.mpBoundSql(boundSql);

        countSql = new BoundSql(countMs.getConfiguration(), countSqlStr, mpBoundSql.parameterMappings(), parameter);

        PluginUtils.setAdditionalParameter(countSql, mpBoundSql.additionalParameters());

    }



    CacheKey cacheKey = executor.createCacheKey(countMs, parameter, rowBounds, countSql);

    //----------------------------------------------- 统计SQL

    List<Object> result = executor.query(countMs, parameter, rowBounds, resultHandler, cacheKey, countSql);

    long total = 0;

    if (CollectionUtils.isNotEmpty(result)) {

        // 个别数据库 count 没数据不会返回 0

        Object o = result.get(0);

        if (o != null) {

            total = Long.parseLong(o.toString());

        }

    }

    // ---------------------------------------set count ret

    page.setTotal(total);

    return continuePage(page);

}

count SQL 优化逻辑

主要优化的是以下两点：

哪些情况count 优化限制：

详情可阅读一下代码：

/**

 * 获取自动优化的 countSql

 *

 * @param page 参数

 * @param sql  sql

 * @return countSql

 */

protected String autoCountSql(IPage<?> page, String sql) {

    if (!page.optimizeCountSql()) {

        return lowLevelCountSql(sql);

    }

    try {

        Select select = (Select) CCJSqlParserUtil.parse(sql);

        SelectBody selectBody = select.getSelectBody();

        // https://github.com/baomidou/mybatis-plus/issues/3920  分页增加union语法支持

        //----------- SQL 中 有 这些集合操作的 INTERSECT,EXCEPT,MINUS,UNION 直接不优化count



        if (selectBody instanceof SetOperationList) {

            // ----lowLevelCountSql 具体实现: String.format("SELECT COUNT(*) FROM (%s) TOTAL", originalSql)

            return lowLevelCountSql(sql);

        }

        ....................省略.....................

        if (CollectionUtils.isNotEmpty(orderBy)) {

            boolean canClean = true;

            if (groupBy != null) {

                // 包含groupBy 不去除orderBy

                canClean = false;

            }

            if (canClean) {

                for (OrderByElement order : orderBy) {

                    //-------------- order by 里带参数,不去除order by

                    Expression expression = order.getExpression();

                    if (!(expression instanceof Column) && expression.toString().contains(StringPool.QUESTION_MARK)) {

                        canClean = false;

                        break;

                    }

                }

            }

            //-------- 清除order by

            if (canClean) {

                plainSelect.setOrderByElements(null);

            }

        }

        //#95 Github, selectItems contains #{} ${}, which will be translated to ?, and it may be in a function: power(#{myInt},2)

        // ----- 查看select 字段中是否动态条件，如果有条件字段，则不会优化 Count SQL

        for (SelectItem item : plainSelect.getSelectItems()) {

            if (item.toString().contains(StringPool.QUESTION_MARK)) {

                return lowLevelCountSql(select.toString());

            }

        }

        // ---------------包含 distinct、groupBy不优化

        if (distinct != null || null != groupBy) {

            return lowLevelCountSql(select.toString());

        }

        // ------------包含 join 连表,进行判断是否移除 join 连表

        if (optimizeJoin && page.optimizeJoinOfCountSql()) {

            List<Join> joins = plainSelect.getJoins();

            if (CollectionUtils.isNotEmpty(joins)) {

                boolean canRemoveJoin = true;

                String whereS = Optional.ofNullable(plainSelect.getWhere()).map(Expression::toString).orElse(StringPool.EMPTY);

                // 不区分大小写

                whereS = whereS.toLowerCase();

                for (Join join : joins) {

                    if (!join.isLeft()) {

                        canRemoveJoin = false;

                        break;

                    }

                     .........................省略..............

                    } else if (rightItem instanceof SubSelect) {

                        SubSelect subSelect = (SubSelect) rightItem;

                        /* ---------如果 left join 是子查询，并且子查询里包含 ?(代表有入参) 或者 where 条件里包含使用 join 的表的字段作条件,就不移除 join */

                        if (subSelect.toString().contains(StringPool.QUESTION_MARK)) {

                            canRemoveJoin = false;

                            break;

                        }

                        str = subSelect.getAlias().getName() + StringPool.DOT;

                    }

                    // 不区分大小写

                    str = str.toLowerCase();

                    if (whereS.contains(str)) {

                        /*--------------- 如果 where 条件里包含使用 join 的表的字段作条件,就不移除 join */

                        canRemoveJoin = false;

                        break;

                    }



                    for (Expression expression : join.getOnExpressions()) {

                        if (expression.toString().contains(StringPool.QUESTION_MARK)) {

                            /* 如果 join 里包含 ?(代表有入参) 就不移除 join */

                            canRemoveJoin = false;

                            break;

                        }

                    }

                }

                // ------------------ 移除join

                if (canRemoveJoin) {

                    plainSelect.setJoins(null);

                }

            }

        }

        // 优化 SQL-------------

        plainSelect.setSelectItems(COUNT_SELECT_ITEM);

        return select.toString();

    } catch (JSQLParserException e) {

      ..............

    }

    return lowLevelCountSql(sql);

}

order by 运行原理

order by 排序，具体怎么排取决于优化器的选择，如果优化器认为走索引更快，那么就会用索引排序，否则，就会使用filesort (执行计划中extra中提示：using filesort），但是能走索引排序的情况并不多，并且确定性也没有那么强，很多时候，还是走的filesort

索引排序

索引排序，效率是最高的，就算order by 后面的字段是 索引列，也不一定就是通过索引排序。这个过程是否一定用索引，完全取决于优化器的选择。

filesort 排序

如果不能走索引排序， MySQL 会执行filesort操作以读取表中的行并对它们进行排序。

在进行排序时，MySQL 会给每个线程分配一块内存用于排序，称为 sort_buffer，它的大小是由sort_buffer_size控制的。

sort_buffer_size的大小不同，会在不同的地方进行排序操作：

• 如果要排序的数据量小于 sort_buffer_size，那么排序就在内存中完成。


• 如果排序数据量大于sort_buffer_size，则需要利用磁盘临时文件辅助排序。
  

  
  

  采用多路归并排序的方式将磁盘上的多个有序子文件合并成一个有序的结果集

  
  

  
  

filesort 排序 具体实现方式

FileSort是MySQL中用于对数据进行排序的一种机制，主要有以下几种实现方式：

全字段排序

• 原理：将查询所需的所有字段，包括用于排序的字段以及其他SELECT列表中的字段，都读取到排序缓冲区中进行排序。这样可以在排序的同时获取到完整的行数据，减少访问原表数据的次数。


• 适用场景：当排序字段和查询返回字段较少，并且排序缓冲区能够容纳这些数据时，全字段排序效率较高。

行指针排序

• 原理：只将排序字段和行指针（指向原表中数据行的指针）读取到排序缓冲区中进行排序。排序完成后，再根据行指针回表读取所需的其他字段数据。


• 适用场景：当查询返回的字段较多，而排序缓冲区无法容纳全字段数据时，行指针排序可以减少排序缓冲区的占用，提高排序效率。但由于需要回表操作，可能会增加一定的I/O开销。

多趟排序

• 原理：如果数据量非常大，即使采用行指针排序，排序缓冲区也无法一次容纳所有数据，MySQL会将数据分成多个较小的部分，分别在排序缓冲区中进行排序，生成多个有序的临时文件。然后再将这些临时文件进行多路归并，最终得到完整的有序结果。


• 适用场景：适用于处理超大数据量的排序操作，能够在有限的内存资源下完成排序任务，但会产生较多的磁盘I/O操作，性能相对较低。

优先队列排序

• 原理：结合优先队列数据结构进行排序。对于带有LIMIT子句的查询，MySQL会创建一个大小为LIMIT值的优先队列。在读取数据时，将数据放入优先队列中，根据排序条件进行比较和调整。当读取完所有数据或达到一定条件后，优先队列中的数据就是满足LIMIT条件的有序结果。


• 适用场景：特别适用于需要获取少量排序后数据的情况，如查询排名前几的数据。可以避免对大量数据进行全量排序，提高查询效率。

❗所以减少查询字段 ,以及 减少 返回的行数，对于排序SQL 的优化也是非常重要

❗以及order by 后面尽量使用索引字段，以及行数限制

limit 运行原理

limit执行过程
对于 SQL 查询中 LIMIT 的使用，像 LIMIT 10000, 100 这种形式，MySQL 的执行顺序大致如下：

所以，LIMIT 是先检索所有符合条件的数据，然后丢弃掉前面的行，再返回指定的行数。这解释了为什么如果数据集很大，LIMIT 会带来性能上的一些问题，尤其是在有很大的偏移量（比如 LIMIT 10000, 100）时。

总结

本篇文章分析，mybatisPlus 分页插件处理count sql 的逻辑，以及优化过程，同时也简单分析order by 和 limit 执行原理。

希望这篇文章能够让你对SQL优化 有不一样的认知，最后感谢各位老铁一键三连！

ps: 云服务器找我返点；面试宝典私；收徒ING；

昨天，美国科技界发生了一件大事：美国新任总统特朗普联合 OpenAI CEO 奥特曼、软银 CEO 孙正义宣布了一个名为「星际之门」（Stargate Project）的人工智能项目。

该项目将成立一家公司，计划未来四年内投资 5000 亿美元，并立即开始部署 1000 亿美元，为 OpenAI 在美国建设新的人工智能基础设施。此举旨在确保美国在人工智能领域的领导地位，同时创造数十万个新就业岗位。

图源：the Verge

星际之门项目公布之后，围绕着它的讨论便开始了，有力挺者，也有泼冷水的。

近来风头正盛的马斯克来了波贴脸开大，「他们根本就没有这么多钱。并且根据可靠的消息来源，软银现在的资金远低于 100 亿美元。」

数小时之后，奥特曼进行了回击。他一方面肯定了马斯克是我们这个时代最鼓舞人心的企业家，并真诚地尊重他的成就。

另一方面反驳道，「马斯克你是错的，你肯定也知道。你要不要来参观一下已经在建设中的第一个站点呢？星际之门项目对国家来说是件好事。我觉得有利于国家的事情并不总是对你们公司最有利。在你的新角色中，我希望你能把国家放在第一位。」

在另一位推特博主、软件工程师 Jason DeBolt 的帖子（他表示奥特曼不值得信任，直觉告诉他奥特曼应该远离人工智能，星际之门项目不会有好结果）下面，马斯克又嘲讽「奥特曼是个骗子」。

而就在马斯克与奥特曼在推特对线的同时，人工智能独角兽 Anthropic 的 CEO Dario Amodei 也加入了战局。另外，据多方可靠消息，谷歌昨日向 Anthropic 追加了 10 亿美元投资。

在达沃斯世界经济论坛接受彭博社采访时，Dario Amodei 认为，星际之门看起来「有点混乱」，目前既不清楚该项目实际涉及多少资金以及其中多少资金能承诺到位，也不清楚政府将如何参与进来。

Dario Amodei。图源：bloomberg

此外，微软 CEO 纳德拉在接受 CNBC 采访时，也被问及对星际之门以及马斯克嘲讽 OpenAI 等没这么多钱的看法。

纳德拉没有选择正面回答，只是表示微软 2025 财年将投入的 800 亿美元会到位，这些钱将用于扩建 Azure 服务，世界各地的客户可以在其上使用 OpenAI 以及其他厂商的大模型。

你觉得星际之门项目会草草收场吗？

参考链接：

x.com/ns123abc/st…

techcrunch.com/2025/01/22/…

http://www.bloomberg.com/news/articl…

前言

前两天看到一个评论 ，答主说 ： 代码写了几年 ，已经没有刚毕业时候的热情了，不想深入，没有欲望。

这其实是一个很普遍的现象 ： 当一件事情成了工作 ，那必然有麻木的一天。

关于自我内耗

当 写代码 和工作挂钩了 ，那他就会离生活越来越远。 我们去做这件事情的时候，就会自然的和 收入 ，未来 等要素进行强绑定。

• 工作压力大了 ，兴趣度 - 1


• 每加一次班 ，兴趣度 - 1


• 每和产品打一架 ， 兴趣度 -1


• 不涨工资不升职 ， 兴趣度 -1


• 。。。。。

每一次工作上的不如意 ，都会让你对编码的兴趣降低！！

久而久之 ，你可能会想 ： 你是不是不喜欢编码 ，你可能根本不喜欢写代码 ， 你不想再为这个你不喜欢的兴趣花精力了。

而这篇文章的目的 ，就是为了给大家一个方向 ： 如何维持自己的兴趣 ，找回初心。

关于我的一年

发布的文章 - Java 部分 ：

今年和往年大差不差 ，发布了 40+ 篇文章。其中 Java 只针对一些特定领域进行了加强 ：

加上一些零零散散的 JVM 文章 ，总共应该15篇左右。 但是这些其实已经够了 ，到了5-10年这个年限 , 单纯编码技术上已经没有太大的空间了。

年轻的时候硬吃底层 ，是为了提高自己的代码水平。年限大了就会发现 ，底层代码其实都差不多 ，哪怕看过了流程 ，转头就忘 ，就算不忘 ，大多数地方一辈子也用不上。

📍 总结 ： 所以我现在对自己的规划是针对于特定场景， 进行深度的思考 ，更偏向与架构层面。

寻求突破 - 其他部分 ：

其他的大部分精力 ，都没有局限当前的语言上面 ， 一直在研究新的东西。

@ gitee.com/antblack/an…

重要的精力都放在了 Python 和 大数据 ， AI 层面。 他们针对的目的性都是不同的。

• ❤️ Python 的目的是为了开辟自己的副业


• ❤️ 大数据是当前行业的升级 ，大数据能让我在当前领域尝试更多的创新模式


• ❤️ AI 是未来 ，记住 ， 人工智能是未来

这3个方向都没有把自己局限在编码层面了 ，而这3个模块都有可能让我在脱离工作后 ，也能拥有更多的出路， 不管是创业还是寻求更好的工作，他们都能有所帮助。

📍 总结 ： 所以没必要把自己限制在一行行代码之间，CURD 已经在工作中写的够多了，去看看一些关联的领域。

给自己一点奖励吧

写代码 6-7 年了 ， 我对编程还是一如初心， 其实只是对自己经常进行一些小奖励 ， 这里我也许可以给苦恼的朋友们一些小方向 ：

每年奖励自己一门新语言 ：

这些年来 ，我陆陆续续尝试了 JavaScript , Android , Lua （这个不算大， 算是偷懒了） ， 到今年用 Python 写了一个开源工具。

我每年都会让自己去了解一下其他的语言， 他们都不会学的太深 ，主要的定位是能用他们产生一个生产力的应用。

比如 JavaScript 主要用来写了一个小程序 （最后不好玩都没上架）。 Lua 是为了自己实现一个 Nginx 的工具。

Android 是为了实现一个简单的 App ， Python 是为了能炒股。

👉 奇奇怪怪的想法和思路 ，以及实现后的一点点成就感 ，是维持兴趣的一大核心。

每年奖励一些新东西 ：

年初 AIGC 大火的时候 ，就一直在尝试 AIGC 转换成生产力，最简单的实现就是帮我老婆实现了一个 SD 的文生图服务器 ，不过后面太贵了就下了（真老贵）。

然后又陆陆续续的尝试各种 AIGC 的直接使用 ，当你切实的做出一点什么后 ，成就感老多了。

AIGC : 真的要失业了 , 让 ControlNet 带来一点小震撼

然后这一年都在让 AI 帮我提高生产力 ，可以说非常成功。 比如我的 Python 项目 ，其中80% 的代码都是 AI 实现的， 这让我最后落地的压力大大减轻，成功率提高了很多。

👉 新的东西 ，总能让我感觉到我还很年轻 ，未来还有无限可能。

时不时的让自己彻底放松一次 ：

不要去思考工作 ，不要去思考未来 ，就彻彻底底的为了去玩。

一开始是黑神话大火 ，那是真的下班准时走 ，技术是一天不带看的 ，就是为了玩， 连续玩了大半个月 ，通关后整个人都舒服了，谁也别想让我学。

然后后面又给自己奖励了一台小相机 ，那每周拖着家人出去拍照 ，学 ？ 学个屁学，那不拿个摄影奖 ，学什么学。

👉 玩的不多 ，每年也就2-3次 ，但是真的能让人压力降低很多。

总结

2024 已经过去了 ，2025 也将到来 ，计划年初就已经定完了 ， 又是充满期待的一年。

希望各位都能在生活中找到自己的节奏 ，不要有了工作失去生活。

祝大家新年快乐。

最后的最后 ❤️❤️❤️👇👇👇

• 👈 欢迎关注 ，超200篇优质文章，未来持续高质量输出 🎉🎉


• 🔥🔥🔥 系列文章集合，高并发，源码应有尽有 👍👍


• 走过路过不要错过 ，知识无价还不收钱 ❗❗

前言

前两天看到一个评论 ，答主说 ： 代码写了几年 ，已经没有刚毕业时候的热情了，不想深入，没有欲望。

这其实是一个很普遍的现象 ： 当一件事情成了工作 ，那必然有麻木的一天。

关于自我内耗

当 写代码 和工作挂钩了 ，那他就会离生活越来越远。 我们去做这件事情的时候，就会自然的和 收入 ，未来 等要素进行强绑定。

• 工作压力大了 ，兴趣度 - 1


• 每加一次班 ，兴趣度 - 1


• 每和产品打一架 ， 兴趣度 -1


• 不涨工资不升职 ， 兴趣度 -1


• 。。。。。

每一次工作上的不如意 ，都会让你对编码的兴趣降低！！

久而久之 ，你可能会想 ： 你是不是不喜欢编码 ，你可能根本不喜欢写代码 ， 你不想再为这个你不喜欢的兴趣花精力了。

而这篇文章的目的 ，就是为了给大家一个方向 ： 如何维持自己的兴趣 ，找回初心。

关于我的一年

发布的文章 - Java 部分 ：

今年和往年大差不差 ，发布了 40+ 篇文章。其中 Java 只针对一些特定领域进行了加强 ：

加上一些零零散散的 JVM 文章 ，总共应该15篇左右。 但是这些其实已经够了 ，到了5-10年这个年限 , 单纯编码技术上已经没有太大的空间了。

年轻的时候硬吃底层 ，是为了提高自己的代码水平。年限大了就会发现 ，底层代码其实都差不多 ，哪怕看过了流程 ，转头就忘 ，就算不忘 ，大多数地方一辈子也用不上。

📍 总结 ： 所以我现在对自己的规划是针对于特定场景， 进行深度的思考 ，更偏向与架构层面。

寻求突破 - 其他部分 ：

其他的大部分精力 ，都没有局限当前的语言上面 ， 一直在研究新的东西。

@ gitee.com/antblack/an…

重要的精力都放在了 Python 和 大数据 ， AI 层面。 他们针对的目的性都是不同的。

• ❤️ Python 的目的是为了开辟自己的副业


• ❤️ 大数据是当前行业的升级 ，大数据能让我在当前领域尝试更多的创新模式


• ❤️ AI 是未来 ，记住 ， 人工智能是未来

这3个方向都没有把自己局限在编码层面了 ，而这3个模块都有可能让我在脱离工作后 ，也能拥有更多的出路， 不管是创业还是寻求更好的工作，他们都能有所帮助。

📍 总结 ： 所以没必要把自己限制在一行行代码之间，CURD 已经在工作中写的够多了，去看看一些关联的领域。

给自己一点奖励吧

写代码 6-7 年了 ， 我对编程还是一如初心， 其实只是对自己经常进行一些小奖励 ， 这里我也许可以给苦恼的朋友们一些小方向 ：

每年奖励自己一门新语言 ：

这些年来 ，我陆陆续续尝试了 JavaScript , Android , Lua （这个不算大， 算是偷懒了） ， 到今年用 Python 写了一个开源工具。

我每年都会让自己去了解一下其他的语言， 他们都不会学的太深 ，主要的定位是能用他们产生一个生产力的应用。

比如 JavaScript 主要用来写了一个小程序 （最后不好玩都没上架）。 Lua 是为了自己实现一个 Nginx 的工具。

Android 是为了实现一个简单的 App ， Python 是为了能炒股。

👉 奇奇怪怪的想法和思路 ，以及实现后的一点点成就感 ，是维持兴趣的一大核心。

每年奖励一些新东西 ：

年初 AIGC 大火的时候 ，就一直在尝试 AIGC 转换成生产力，最简单的实现就是帮我老婆实现了一个 SD 的文生图服务器 ，不过后面太贵了就下了（真老贵）。

然后又陆陆续续的尝试各种 AIGC 的直接使用 ，当你切实的做出一点什么后 ，成就感老多了。

AIGC : 真的要失业了 , 让 ControlNet 带来一点小震撼

然后这一年都在让 AI 帮我提高生产力 ，可以说非常成功。 比如我的 Python 项目 ，其中80% 的代码都是 AI 实现的， 这让我最后落地的压力大大减轻，成功率提高了很多。

👉 新的东西 ，总能让我感觉到我还很年轻 ，未来还有无限可能。

时不时的让自己彻底放松一次 ：

不要去思考工作 ，不要去思考未来 ，就彻彻底底的为了去玩。

一开始是黑神话大火 ，那是真的下班准时走 ，技术是一天不带看的 ，就是为了玩， 连续玩了大半个月 ，通关后整个人都舒服了，谁也别想让我学。

然后后面又给自己奖励了一台小相机 ，那每周拖着家人出去拍照 ，学 ？ 学个屁学，那不拿个摄影奖 ，学什么学。

👉 玩的不多 ，每年也就2-3次 ，但是真的能让人压力降低很多。

总结

2024 已经过去了 ，2025 也将到来 ，计划年初就已经定完了 ， 又是充满期待的一年。

希望各位都能在生活中找到自己的节奏 ，不要有了工作失去生活。

祝大家新年快乐。

最后的最后 ❤️❤️❤️👇👇👇

• 👈 欢迎关注 ，超200篇优质文章，未来持续高质量输出 🎉🎉


• 🔥🔥🔥 系列文章集合，高并发，源码应有尽有 👍👍


• 走过路过不要错过 ，知识无价还不收钱 ❗❗

一、布丁的出生

2024-9-19，我儿子布丁顺顺利利来到这个世界。

1.1 出生那一刻

一开始觉得没什么，但是当微信收到老婆发的信息，那一瞬间感动的热泪盈眶😭。生完还需要在产房观察2小时，我在外面等的这段时间，描述不清楚是什么感受。当时找了个角落，给自己录了几段视频，想说的话，巴巴拉拉啥都说说，不过现在也没看过😂

1.2 费用

全部费用没算过，就生娃住院那4天，自费部分差不多6500左右，包含1350的护工费（450*3），包含48天后产妇体检的费用。

因为是一胎，咱也没啥经验，害怕很多意外的出现，所以就选了杭州产科最强的医院：市一。 因为医院比较老，附近停车贼困难，而且还很贵，10块一小时。SUV停了几次机械车位，差点把后视镜干掉了。

实际生产还是挺顺利的，宝宝在妈妈肚子里多待了5天，出生之后做的各项目检查都正常。现在看，选着最近的医院才是比较好的选择。

1.3 为什么要生

和一部分人一样，家长催生占一部分，但不是决定性的。去年结婚，对我们而言就是生娃的信号。35岁以上会被定义为大龄产妇，大龄产妇又会面临着各种危险。同条件下，越年轻，生完恢复的也越好。

再加上我姐姐也还没生，我这个家庭相对来说缺一个娃来让整个大家庭更有目标感。所以现在布丁出生后，会有超级多的人来爱他，特别是妈妈和姑姑

偶然在xhs看到一句话：养娃能看到过去自己长大的过程，会把自己认为父母亏欠的部分加倍补偿给自己的孩子，或许是在治愈自己，也或许是在满足自己

1.4 养娃

太多攻略要做了，这里要非常感谢一位朋友的帮助，比我先生宝宝，然后经验都分享给我了，经常问他各种问题😭帮了巨多忙。

养娃不仅仅要研究育儿知识，每个月伺候宝宝的方法还是不同的，宝宝的变化非常非常快。针对宝宝的不同反应，要做出不同的应对。因为媳妇快要上班了，这些东西不能仅仅是我们自己会，还得教他奶奶。但是他奶奶也五十几了，很多东西学不会，记不住，就很困难，也没啥办法。

然后中间还要调解婆媳关系，我日常还要上班，中间有段时间，中午不吃饭，时间全部用来睡觉。。。

现在处于教学痛苦期，观察好宝宝的反应，其实很好哄。但是他奶奶学不会，导致现在给奶奶带，就往死里哭😭。但是我们又不得不依赖他奶奶，不然上班就没人管了。
但是，有时候他奶奶不觉得是自己的问题，就觉得是宝宝的问题，就是要闹人，也不知道找原因，所以我现在是非常痛苦的。有时候只能安慰媳妇，没办法，让宝宝自己适应。。。

1.5 拍拍拍

3个多月了，回头看过去的样子，感觉自己还拍少了😂

1.6 男宝女宝

就身边的现象来说

• 高中同学
  
  
  
  • 目前已知3个女宝
  
  
  
  


• 微信网友
  
  
  
  • 同一天出生的，1个女宝
  
  
  • 去年兔年生的，1个女宝
  
  
  
  


• 村里
  
  
  
  • 目前已知3个女宝
  
  
  
  


• 公司同事
  
  
  
  • 1男宝1女宝
  
  
  • 媳妇同事生1女宝
  
  
  
  


• 同产房
  
  
  
  • 1男宝3女宝
  
  
  
  

15个宝宝，只有2个男宝，13个女宝。 生男生女，概率不是差不多吗？
我倒是无所谓，生男生女，各有各的好处。你们身边男宝多还是女宝多？

二、工作

去年武汉被裁后，就来杭州这家了，当时还有点小插曲。因为武汉一家公司在我入职这家后又给了offer，我很纠结要不要去，当时处于这也想要，那也想要的状态，精神差点崩溃。

2.1 极越（集度）

关注新能源的应该都知道这个事吧，12月直接宣布原地解散了。去年在武汉可是大规模招聘，开的也算武汉Top几了。当时面了4轮，战线拉一个月，后面HC收紧被待定，然后一个月以后又联系给offer，蜜汁操作。要是早给，我肯定就去了。。。

去了的话，现在又是找工作的时间。我媳妇就认为是她的功劳，不是她在杭州，不是她对房子没有那么大执念了，我肯定又回武汉了。当初想去集度，就想赌一把百度智驾。我想着百度都干那么久了，对其他车企不得是降维打击，结果啊，百度还是那个百度。

间接躲过一劫，差点失业

2.2 晋升

虽然结果没出，但是我觉得是个伤心事

2.3 面试

帮忙面试

最近帮着公司招外包，收到一些十年以上经验的简历，很尴尬。简历潦草的，让人感觉他们自己也没抱什么希望，上次招聘给了几个大龄的面试机会，结果一个不如一个。第一次9月份，第二次就是最近。9月份也面了挺多的，过了几个，但是当时卡的严，最后一面基本都被毙了，卡着卡着，HC就变成了0

还有个现象就是异地简历贼多，很多都不是在本地工作的，可见大家都在海投，市场情况就是这样

今年又出1个外包HC，我有时候面1面，有时候面2面，给过了几个，不知道能不能来入职。

前端分类

简单分为，1-3年，3-8年，8年+，外包，自研

3年内的多是自研，简历写的都挺不错，但是一问就不会，一问就是别人做的

5年左右，最近一份干外包的居多，技术也还不错

8年+的，很大一部分就简历拉跨，技术也拉跨，各方面都不太行，当然厉害的也不会来投递外包了哈

今年面试感觉到的情况，并不具有代表性，各位简单看看

简单分析

结合我自己现在的状况，我也明白为什么，就是技术停滞，就是学习能力在逐步下降，不得不服。或许因为懒惰，或许因为家庭事情越来越多。。今年我没怎么学习过，就写了1篇掘金文章，很是惭愧。有更多的时间，不是在打游戏，就是在刷视频，看直播。我尝试着在改变，但是有点难。。。

自己也越来越老，通过面试官的身份反省自己，得好好学习，不仅仅是技术方面。

2025年，我还是需要在这块寻找突破口，不能再停滞不前了，不然迟早要被淘汰。

三、旅游

因为有了车，计划了挺多地方的自驾游，但是因为媳妇怀孕，所以就只能轻度转转，尽量避开人多的地方

3.1 南京

视频带奶奶看了下玄武湖，还不如杭州湘湖，哈哈哈

3.2 千篇一律

之前想着把国内这些一二线城市都逛逛，感受感受。但是吧，现在感觉都是千篇一律的商业街，风景区，真没啥意思。每次做攻略都做的好好的，去了以后就感觉和理想的落差太大，然后从这次南京后，就不太想玩这种很常规的旅游了。

看xhs说，这是要加入下一个level的迹象了，明年等小布丁1岁后，他奶奶能带的时候。计划计划去港澳台逛逛，然后日本韩国这些，怎么都得去看看吧。。。

四、主机

4.1 入手

6月初，终于入手了人生第一台主机，是的，没错。毕业5年了，第一次拥有自己的主机，之前都用MacBook 虚拟机打游戏，LOL fps，30~60😂

4.2 配置

2024-5-29价格：

• 板U： 微星B760 爆破弹 Wifi D5 + 12600kf 1694


• 显卡：微星RTX4060 VENTUS2 X WHITE8GOC白色 2180


• 电源：微星MAG A600DN额定600W 234


• 机箱：微星PAG PANO M100L 白色 188


• 散热：微星MAG 寒冰E240白色水冷 369


• 内存：威刚D300 16G 6400MHZ 387


• 硬盘：威刚S50 PRO NVME 1TB 465

合计：5517

pdd微星官方旗舰店整机4999，用卷到手4863

4.3 为什么卖

主要3个原因

• window和mac两种系统切换着用，还是不太舒服，更喜欢mac


• 空闲时间就爱玩LOL，玩几把就要红温


• 有两次下班没带娃玩LOL，媳妇生气了

想了想以后，主机对我也没太大吸引力了，就挂xhs了，就挂了一天，第二天晚上卖了。4863买的，用了半年，卖了4050。

黑神话开挂通关的、使命召唤系列玩了3部，总体也算是过瘾了。

卖完只有一个感慨：老了，花有重开日，人无再少年

4.4 JJ卖主机的奇幻经历

AB两个买家，A爽快最终成交，B一直砍价最后破防

A需送上门 B上门自提，时间线如下：

• B凌晨3点就给我发了个消息，要购买记录，我早上回复了下，人家看我买半年了，砍价说3800，我说不出


• A看到后直接问3900送上门行不行，我犹豫了，来回70km+可能现场验收有问题，就拒绝了。拿着3900，我问早上的B要不要，要的话就给B了。结果B还在还价，问3850行不行，我拒绝了。


• A看我犹豫，直接说不还价了3999送上门，他急着用。我就准备和他交易了，这个时候B又来了，问我怎么样，我说A直接3999了，B这个时候急了，说他也可以3999，现在就可以上门


• 同价格我肯定选择B上门自提的，但是这个时候A已经拍下了咸鱼链接，我和A说了这个事，他又给我加了50，意思给路费。 我和B说，他那边已经拍了，B就生气了，长篇大论说我人不行。。。

所以最后的结果：我怕B是个事逼，而且A已经拍了，所以还是选择送货上门和A交易，A比较痛快，貌似是个主播，上门简单验机后直接打钱，省了咸鱼0.6%的手续费

这俩人都是玩无畏契约的，玩过几把，这游戏现在这么火？🔥

4.5 老了

回来路上，一个人在高架上飙了一把，只能感慨：花有重开日，人无再少年

五、11月软考

5.1 系统规划与管理师

过去没有了解过杭州政策，最近朋友说了考这个东西的好处，可以认证E类人才。买房只需要30%，不买房每个月也有2500补贴，政策很香。所以准备来试试，但是因为很久没看过书了，+懒+生娃各方面的因素，几乎没看，考试前还一直在想要不要去考。后面一想，钱都交了，不得去试试，看看裸考能考多少。

结果就是：

还有俩朋友一起考的也没过，很多认真学的，一部分卡在了论文上。毕竟这个东西和利益相关，所以会卡通过率。

5.2 信息系统项目管理师

2025-5月来战斗，有一起考的没！！！

六、其他

零零碎碎的其他事，不想花费太多精力去写这个，年级大了，很多东西都要和利益挂钩。没得利益，就不太愿意付出了。

6.1 兼职

• 赚了几个w，非理财


• 辛苦钱且不稳定


• 得寻找比较稳定的睡后收入

今年国庆节那波股市，太猛了。本来准备拿10个入场的，媳妇都同意了，还是胆小没敢上。。。差点套进去

6.2 领证

感觉要给孩子出生做准备了，之前了解的准生证、建档什么的都得结婚证，反正去年也结婚了，赶紧找时间领了，方便后面办户口。

实际上现在很多都放开了，并不需要结婚证，领了证反而变成已婚了，租房个税都只能填一个人的了。领了证，现在这行情，浙江刚落地的13天婚假也不敢休，有些地方领结婚证还给钱。

所以，领证没得啥好处，建议大家能不领还是不要领

6.3 减肥

• 减了30斤，不过现在还是很胖


• 目前体重稳定了一个月，继续开始减

6.4 房子

• 和媳妇两个人都不再有买房的执念


• 租了个两室一厅，4200，住的挺舒服的


• 没有房贷、没有车贷、没有任何带款


• 养着小布丁，满足了

6.5 计划

2025年，全面拥抱AI，用一句话说：所有行业都值得被AI重构

最后再放一波儿子

前言

初八就回城搬砖了，有位老哥跟我吐槽了他过年期间参与同学会的事，整理如下，看读者们是否也有相似的境遇。

缘起

高中毕业至今已有十五年了，虽然有班级群但鲜有人发言，一有人冒泡就会立马潜水围观。年前有位同学发了条消息：高中毕业15年了，趁过年时间，咱们大伙聚一聚？

我还是一如既往地只围观不发言，组织的同学看大家都三缄其口，随后发了一个红包并刷了几个表情。果然还是万恶的金钱有新引力，领了红包的同学也刷了不少谢谢老板的表情，于是乎大家都逐渐放开了，最终发起了接龙。

看到已接龙的几位同学在高中时还是和自己打过一些交道，再加上时间选的是大年初五，我刚好有空闲的时间，总归还是想怀旧，于是也接了龙。

牢笼

我们相约在县城的烧烤一条街某店会面，那离我们高中母校不远，以前偶尔经过但苦于囊中羞涩没有大快朵颐过。

到了烧烤店时发现人声鼎沸，猜拳、大笑声此起彼伏，我循着服务员的指示进入了包间。放眼望去已有四、五位同学在座位上，奇怪的是此时包间却是很安静，大家都在低头把玩着手机。

当我推门的那一刻，同学们都抬头放眼望来，迅速进行了一下眼神交流，微笑地打了招呼就落座。与左右座的同学寒暄了几句，进行一些不痛不痒的你问我答，而后就沉默，气氛落针可闻，那时我是多希望有服务员进来问：帅哥，要点单了吗？

还好最后一位同学也急匆匆赶到了，后续交流基本上明白了在场同学的工作性质。

张同学：组织者，在A小镇上开了超市、圆通、中通提货点，座驾卡迪拉克

李同学：一线城市小创业者，公司不到10人，座驾特斯拉

吴同学：县城第一中学老师、班主任，座驾大众

毛同学：县委办某科室职员、公务员，座驾比亚迪

王同学：某小镇纪委书记，座驾别克

潘同学：县住房和城乡建设局职员，事业编，座驾哈佛

我：二线城市码农一枚，座驾雅迪

一开始大家都在忆往昔，诉说过去的一些快乐的事、糗事、甚至秘辛，感觉自己的青葱时光就在眼前重现。
酒过三巡，气氛逐渐热烈，称呼也开始越拔越高，某书记、某局、某老板，主任、某老总的商业互吹。

期间大家的话题逐渐往县城的实事、新闻、八卦上靠，某某人被双了，某某同事动用了某层的关系调到了市里，某漂亮的女强人离婚了。

不巧的是张同学还需要拜会另一位老板，提前离席，李同学公司有事需要处理，离开一会。

只剩我和其他四位体制内的同学，他们在聊体制内的事，我不熟悉插不进话题，我聊公司的话题估计他们不懂、也不感兴趣。

更绝的是，毛同学接到了一个电话，而后提着酒杯拉着其他同学一起去隔壁的包间敬酒去了，只剩我一个人在包间里。

过了几分钟他们都提着空酒杯回来了，悄悄询问了吴同学才知道隔壁是县委办公室主任。

回来后，他们继续畅聊着县城的大小事。

烧烤结束之后，有同学提议去唱K，虽然我晚上没安排，但想到已经没多少可聊的就婉拒了。

释怀

沿着县城的母亲河散步，看着岸边新年的装饰，我陷入了沉思。

十多年前大家在同一间教室求学，甚至同一宿舍生活，十多年后大家的选择的生活方式千差万别，各自的境遇也大不相同。

再次相遇，共同的话题也只是学生时代，可是学生时代的事是陈旧的、不变的，而当下的事才是新鲜的、变化的。因此聚会里更多的是聊现在的事，如果不在一个圈子里，是聊不到一块的。

其实小城里，公务员是一个很好的选择，一是稳定，二是有面子（可能本身没多大权利，但是可以交易，可以传递）。小城里今天发生的事，明天就可能人尽皆知了，没有秘密可言。

有志于公务员岗位的朋友提早做准备，别等过了年纪就和体制内绝缘了。

其他人始终是过客，关注自己，取悦自己。

导语：

当《哪吒2》用颠覆性的视角重塑申公豹时，这个曾被贴上“反派”标签的角色，竟成了无数观众心中的意难平。他不再是一个扁平化的恶人，而是一面镜子，映照出当代社会最扎心的真相——成见、寒门困境与人性的灰度。今天，我们借申公豹的悲壮逆袭，聊聊那些刺痛现实的隐喻。

一、成见：一座压垮“寒门贵子”的大山

申公豹的悲剧，始于一句“妖不配成仙”。他出身妖族，拼尽千年修炼考入昆仑山“大厂”，却因出身卑微沦为“外门弟子”，脏活累活全包，功劳苦劳全无。正如影片那句戳心台词：“人心中的成见是一座大山，任你怎么努力也休想搬动。”

现实映射：职场中的学历歧视、地域偏见、年龄门槛，何尝不是“申公豹困境”？一个专科生能力再强，也可能因一纸文凭被拒之门外；一个小镇青年挤进一线城市，却在“土著优先”的潜规则中举步维艰。成见这把刀，杀人不见血。

二、寒门逆袭：一场注定孤独的修行

申公豹的修仙路，堪称“仙界版小镇做题家”。他是全村第一个考入昆仑山的“大学生”，背负家族期望，却在神仙体系内卷中沦为“工具人”。玉虚宫的“仙二代”们躺平混日子，而他只能靠“996修仙”勉强立足，最终发现：寒门出身不是原罪，自我否定才是深渊。

现实映射：当代年轻人的“申公豹式挣扎”——北漂沪漂的“黑手套”、大厂螺丝钉的无效内卷、寒门学子掏空六个钱包的学区房……我们何尝不是在“证明自己”的路上，被社会标准绑架？申公豹的偷灵珠、算计哪吒，像极了某些人为了升职不择手段的无奈，但影片质问：若规则本身不公，反抗是否必须沾染黑暗？

三、人性灰度：撕开“非黑即白”的伪命题

申公豹的“洗白”引发争议，但影片的高明之处恰在于此。他偷灵珠是为打破偏见，屠陈塘关是为救敖丙，却又在危难时赠药救民。这种矛盾，撕开了人性的伪装：善与恶从非对立，而是挣扎中共存。

现实启示：我们习惯用“好人”“坏人”标签简化世界，却对职场中的“背锅侠”、家庭中的“沉默者”缺乏共情。申公豹的复杂性提醒我们：真正的成熟，是接纳世界的混沌，在灰度中守住底线。

四、孤勇者的启示：在偏见中淬炼本心

面对家人被害、徒弟遇险，申公豹的选择令人动容。他没有被仇恨吞噬，而是冷静揭露真相，以孤身战三龙的壮烈诠释了“我命由我不由天”。这背后，是影片对“奋斗者精神”的致敬——即使世界以偏见待我，我仍以道义报之。

现实意义：在“躺平”与“内卷”撕裂的当下，申公豹的孤勇是一剂清醒药：真正的强大，不是迎合规则，而是在认清现实后，依然选择做自己。就像那些在职场霸凌中坚守原则的打工人，在流量至上的时代坚持内容的创作者——他们或许“失败”，却活成了自己的英雄。

结语：

《哪吒2》借申公豹的悲情，完成了一场对现实的犀利解剖。它告诉我们：成见会杀人，寒门难破局，但比命运更可怕的，是向偏见屈膝的灵魂。愿每一个“申公豹”，都能在时代的夹缝中，找到属于自己的光。

大家好，我是晓凡。

程序员的“黑色星期五”

想象一下，你正坐在办公室，准备享受周末的轻松时刻，突然，你的工作账号被停用了，各种公司相关的权限没了，无法访问公司内网。

这不是电影情节，而是IBM中国研发部门员工的真实遭遇。一夜之间，千余名员工被一锅端。

这件事发生得太突然，几乎没有一点点征兆和信号，看得晓凡是一脸懵逼。

IBM裁员：波及千人

裁员，在互联网行业并不是新鲜事。

但IBM这次裁员的规模和速度，着实让人震惊。

据悉，IBM中国在不同区设有多个分公司，据称大约有12000名员工。

被收回权限的员工属于IBMV，下设CDL（IBM中国研发中心）和CSL（IBM中国系统中心），主要负责研发和测试。

波及到了1000+人，遍布北京、上海、大连等各地的员工。赔偿方案为N+3，但具体情况可能更为复杂。

我们来看看IBM官方给出的解释

中国的企业，尤其是民营企业，越来越重视抓住混合云和人工智能技术带来的机遇。

因此，IBM 在中国的本地战略重点将转向利用自身在技术和服务方面的丰富经验，组建一支具备相应技能的团队，以更好地与中国客户合作，共同创造符合客户需求的解决方案。

下面是网传的针对此此次裁员3分钟会议纪要

我们将内容翻译过来大概如下：

【我叫 Jack Hergenrother，是全球企业系统开发的副总裁。今天我们有一个重要的管理决策要与大家分享。

为了支持我们的全球客户和我们的业务战略，IBM 基础设施决定将开发任务从中国系统实验室转移到海外的其他 IBM基础设施基地。

我们正在退出在中国的所有开发任务。

正如你们所知道的，IBM 基础设施继续转型，以帮助释放我们组织必须提供的全部价值，并帮助我们实现具有挑战性的全球市场的可持续业务。这种转变受市场动态和激烈竞争的影响。而**中国的基建业务近年来有所下滑。

对于 IBM Z，我们做出了艰难的决定——将开发工作转移到其他国家，以便更好地抓住市场机遇，并且更加更接近客户。

在存储方面，我们正在将开发工作整合到更少的地点，以应对激烈的竞争。基础设施的协同办公战略是全球性的。协同办公也不仅限于中国。我们做出了这一艰难的商业决策，以便提高效率并简化运营。

我是 Ross Moury，IBM Z 和 Linux One 的总经理。我要感谢大家为 IBM 所做的贡献以及在这个平台成功中所扮演的重要角色。我希望获得你们的理解和今后的合作。

我是 Danny Mace，存储工程副总裁。我知道这是一个艰难的决定，但这是支持我们的全球客户和业务战略所必需的行动。在此，我也要感谢你们的贡献。】

此外有不少网友注意到，现任 IBM CEO 是一名印度人 Arvind Krishna，自从他 2020 年上任后就曾在全球范围内进行了多轮裁员。此外根据 IBM 的招聘信息显示，目前 IBM 似乎正在印度不断增设岗位，故而部分网友猜测此次 IBM 中国研发部全体被裁或许也与此有关。

多轮裁员，用AI替代近8000人

裁员，往往不是单一因素的结果。IBM的裁员，背后是市场和技术的双重压力。

随着云计算和人工智能的兴起，传统的研发模式正在发生变化。

企业为了追求发展，需要尽可能的压缩成本。说实话，这两年，大家都不好过。

IBM CEO Arvind Krishna在采访中表示，后台职能部门，如人力资源的招聘将暂停或放缓。

未来5年，我们将看到30%的人将被AI和自动化所取代。

程序员的自救

面对裁员，作为一名普通程序员，我们该怎么做呢？

① 保持良好心态，不要焦虑，不要内卷。真的不是自己不优秀，而是大环境不好。

工作没了，身体也不能跨。只要身体不垮，一切都可以重来。

② 守住自己手里的钱，不要负债，不要负债，不要负债。

正所谓：金库充盈，心绪宁静。即使不幸被裁了，也能靠积蓄养活自己

③ 虽然AI短时间不能完全替代程序员，但一些重复性的工作将被AI和自动化所取代。

保持学习，多了解一些AI，确实可以帮我们提高工作效率

④ 不要在一棵树上吊死，趁着年轻，试错成本不是那么高，多尝试尝试其他赛道，随然不一定能成。

但也有可能发现可以一直干下去的副业。

前言

彦祖们,好久不见,最近一直忙于排查单位业务的终端内存泄露问题,已经吃了不下 10 个 bug 了

但是排查内存泄露在前端领域属于比较冷门的领域了

这篇文章笔者将带你一步步分享业务实践中遇到的内存泄露问题以及如何修复的经历

本文涉及技术栈

• vue2

场景复现

如果之前有看过我文章的彦祖们,应该都清楚

笔者所在的单位有一个终端叫做工控机(类似于医院挂号的终端),没错!所有的 bug 都源自于它😠

因为内存只有 1G 所以一旦发生内存泄露就比较可怕

不过没有这个机器 好像也不会创作这篇文章😺

复现 demo

彦归正传,demo 其实非常简单,只需要一个最简单的 vue2 demo 就可以了

• App.vue

<script>

import Test from './test.vue'

export default {

  name: 'App',

  components: {

    Test

  },

  data () {

    return {

      render: false

    }

  }

}

script>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

style>

• test.vue

<script>

export default {

  name: 'Test',

  data () {

    return {

      total: 1000

    }

  },

  mounted () {

    this.timer = setTimeout(() => {

      this.total = 10000

    }, 500)

  },

  beforeDestroy () {

    clearTimeout(this.timer)

  }

}

script>

复现流程

以下流程建议彦祖们在 chrome 无痕模式下执行

1. 我们点击 render 按钮渲染 test 组件,此时我们发现 dom 节点的个数来到了 2045

考虑到有彦祖可能之前没接触过这块面板,下图展示了如何打开此面板

2. 500ms 后(定时器执行完成后,如果没复现可以把 500ms 调整为 1000ms, 1500ms),我们点击 destroy 按钮
3. 我们点击面板这里的强制回收按钮(发现节点并没有回收,已发生内存泄露)

如果你的浏览器是最新的 chrome,还能够点击这里的 已分离的元素(detached dom),再点击录制

我们会发现此时整个 test 节点已被分离

问题分析

那么问题到底出在哪里呢?

vue 常见泄露场景

笔者搜遍了全网,网上所说的不外乎以下几种场景

1.未清除的定时器

2.未及时解绑的全局事件

3.未及时清除的 dom 引用

4.未及时清除的 全局变量

5.console 对引用类型变量的劫持

好像第一种和笔者的场景还比较类似,但是仔细看看代码好像也加了

beforeDestroy () {

  clearTimeout(this.timer)

}

这段代码啊,就算不加,timer 执行完后,事件循环也会把它回收掉吧

同事提供灵感

就这样笔者这段代码来回测试了半天也没发现猫腻所在

这时候同事提供了一个想法说"total 更新的时候是不是可以提供一个 key"

改了代码后就变成了这样了

• test.vue

<script>

export default {

  name: 'Test',

  data () {

    return {

      renderKey: 0,

      total: 1000

    }

  },

  mounted () {

    this.timer = setTimeout(() => {

      this.total = 10000

      this.renderKey = Date.now()

    }, 500)

  },

  beforeDestroy () {

    clearTimeout(this.timer)

  }

}

script>

神奇的事情就这样发生了,笔者还是按以上流程测试了一遍,直接看结果吧

我们看到这个 DOM 节点曲线,在 destroy 的时候能够正常回收了

问题复盘

最简单的 demo 问题算是解决了

但是应用到实际项目中还是有点困难

难道我们要把每个更新的节点都手动加一个 key 吗?

其实仔细想想,有点 vue 基础的彦祖应该了解这个 key 是做什么的?

不就是为了强制更新组件吗?

等等,强制更新组件?更新组件不就是 updated 吗?

updated 涉及的不就是八股文中我们老生常谈的 patch 函数吗?(看来八股文也能真有用的时候😺)

那么再深入一下, patch 函数内部不就是 patchVnode 其核心不就是 diff 算法吗?

首对首比较,首对尾比较,尾对首比较,尾对尾比较 这段八股文要是个 vuer 应该都不陌生吧?😺

动手解决

其实有了问题思路和想法

那么接下来我们就深入看看 vue 源码内部涉及的 updated 函数到底在哪里吧?

探索 vue 源码

我们找到 node_modules/vue/vue.runtime.esm.js

我们看到了 _update 函数真面目,其中有个 __patch__ 函数,我们再重点查看一下

createPatchFunction 最后 return 了这个函数

我们最终来看这个 updateChildren 函数

其中多次出现了上文中所提到的八股文,每个都用 sameVnode进行了对比

• function sameVnode

function sameVnode (a, b) {

    return (a.key === b.key &&

        a.asyncFactory === b.asyncFactory &&

        ((a.tag === b.tag &&

            a.isComment === b.isComment &&

            isDef(a.data) === isDef(b.data) &&

            sameInputType(a, b)) ||

            (isTrue(a.isAsyncPlaceholder) && isUndef(b.asyncFactory.error))));

}

果然这里我们看到了上文中 key 的作用

key 不一样就会认作不同的 vnode

那么就会强制更新节点

对应方案

既然找到了问题的根本

在判定条件中我们是不是直接加个 || a.text !== b.text

强制对比下文本节点不就可以了吗?

修改 sameVnode

看下我们修改后的 sameVnode

function sameVnode (a, b) {

    if(a.text !== b.text) return false // 文本不相同 直接 return

    return (a.key === b.key &&

        a.asyncFactory === b.asyncFactory &&

        ((a.tag === b.tag &&

            a.isComment === b.isComment &&

            isDef(a.data) === isDef(b.data) &&

            sameInputType(a, b)) ||

            (isTrue(a.isAsyncPlaceholder) && isUndef(b.asyncFactory.error))));

}

方案效果

让我们用同样的代码来测试下

测试了几次发现非常的顺利,至此我们本地的修改算是完成了

如何上线?

以上的方案都是基于本地开发的,那么我们如何把代码应用到线上呢?

其他开发者下载的 vue 包依旧是 老的 sameVnode 啊

不慌,接着看

patch-package

对比了好几种方式,最终我们选择了这个神器

其实使用也非常简单

1.npm i patch-package

2.修改 node_modules/vue 源码

3.在根目录执行 npx patch-package vue(此时如果报错,请匹配对应 node 版本的包)

我们会发现新增了一个这样的文件

4.我们需要在package.json scripts 新增以下代码

• package.json

"scripts": {

    +"postinstall":"patch-package"

}

至此上线后,其他开发者执行 npm i 后便能使变动的补丁生效了

优化点

其实我们的改造还有一定的进步空间,比如说在指定节点上新增一个 attribute

在函数内部判断这个 attribute 再 return false

这样就不用强制更新每个节点了

当然方式很多种,文章的意义在于解决问题的手段和耐心

写在最后

最后再次感谢同事 juejin.cn/user/313102… 的提供的灵感和协助

感谢彦祖们的阅读

个人能力有限

如有不对，欢迎指正🌟 如有帮助，建议小心心大拇指三连🌟

作者：前端手术刀
来源：juejin.cn/post/7460431444630011919

前言

前端时间有一个 OCR 的需求，原本考虑调用现成的 OCR 接口，但由于只是做一个我个人使用的工具，花钱购买 OCR 接口显得有些奢侈。于是就想着找找是否有现成的库可以自己部署或直接使用，结果发现了一个可以在纯前端实现 OCR 的库——Tesseract.js。

Tesseract.js

Tesseract.js 是一个基于 Google Tesseract OCR 引擎的 JavaScript 库，利用 WebAssembly 技术将的 OCR 引擎带到了浏览器中。它完全运行在客户端，无需依赖服务器，适合处理中小型图片的文字识别。

主要特点

• 多语言支持：支持多种语言文字识别，包括中文、英文、日文等。


• 跨平台：支持浏览器和 Node.js 环境，灵活应用于不同场景。


• 开箱即用：无需额外依赖后端服务，直接在前端实现 OCR 功能。


• 自定义训练数据：支持加载自定义训练数据，提升特定场景下的识别准确率。

安装

通过 npm 安装

npm install tesseract.js

通过 CDN 引入

<script src="https://unpkg.com/tesseract.js@latest/dist/tesseract.min.js"></script>

基本使用

以下示例展示了如何使用 Tesseract.js 从图片中提取文字：

import Tesseract from 'tesseract.js';



Tesseract.recognize(

  'image.png', // 图片路径

  'chi_sim',   // 识别语言（简体中文）

  {

    logger: info => console.log(info), // 实时输出进度日志

  }

).then(({ data: { text } }) => {

  console.log('识别结果:', text);

});

示例图片

运行结果

可以看到，虽然识别结果不完全准确，但整体准确率较高，能够满足大部分需求。

更多用法

1. 多语言识别

Tesseract.js 支持多语言识别，可以通过字符串或数组指定语言代码：

// 通过字符串的方式指定多语言

Tesseract.recognize('image.png', 'eng+chi_sim').then(({ data: { text } }) => {

  console.log('识别结果:', text);

});



// 通过数组的方式指定多语言

Tesseract.recognize('image.png', ['eng','chi_sim']).then(({ data: { text } }) => {

  console.log('识别结果:', text);

});

eng+chi_sim 表示同时识别英文和简体中文。Tesseract.js 内部会将字符串通过 split 方法分割成数组：

const currentLangs = typeof langs === 'string' ? langs.split('+') : langs;

2. 处理进度日志

可以通过 logger 回调函数查看任务进度：

Tesseract.recognize('image.png', 'eng', {

  logger: info => console.log(info.status, info.progress),

});

输出示例：

3. 自定义训练数据

如果需要识别特殊字符，可以加载自定义训练数据：

const worker = await createWorker('语言文件名', OEM.DEFAULT, {

  logger: info => console.log(info.status, info.progress),

  gzip: false, // 是否对来自远程的训练数据进行 gzip 压缩

  langPath: '/path/to/lang-data' // 自定义训练数据路径

});

[!warning] 注意：

1. 第一个参数为加载自定义训练数据的文件名，不带后缀。


2. 加载自定义训练数据的文件后缀名必须为 .traineddata。


3. 如果文件名不是 .traineddata.gzip，则需要设置 gzip 为 false。

举例：

const worker = await createWorker('my-data', OEM.DEFAULT, {

  logger: info => console.log(info.status, info.progress),

  gzip: false,

  langPath: 'http://localhost:5173/lang',

});

加载效果：

4. 通过前端上传图片

通常，图片是通过前端让用户上传后进行解析的。以下是一个简单的 Vue 3 示例：

<script setup>

import { createWorker } from 'tesseract.js';



async function handleUpload(evt) {

  const files = evt.target.files;

  const worker = await createWorker("chi_sim");

  for (let i = 0; i < files.length; i++) {

    const ret = await worker.recognize(files[i]);

    console.log(ret.data.text);

  } 

}

</script>



<template>

  <input type="file" @change="handleUpload" />

</template>

完整示例

下面提供一个简单的 OCR 示例，展示了如何在前端实现图片上传、文字识别以及图像处理。

代码

<!--

 * @Author: zi.yang

 * @Date: 2024-12-10 09:15:22

 * @LastEditors: zi.yang

 * @LastEditTime: 2025-01-14 08:06:25

 * @Description: 使用 tesseract.js 实现 OCR

 * @FilePath: /vue-app/src/components/HelloWorld.vue

-->

<script setup lang="ts">

import { ref } from 'vue';

import { createWorker, OEM } from 'tesseract.js';



const uploadFileName = ref<string>("");

const imgText = ref<string>("");



const imgInput = ref<string>("");

const imgOriginal = ref<string>("");

const imgGrey = ref<string>("");

const imgBinary = ref<string>("");



async function handleUpload(evt: any) {

  const file = evt.target.files?.[0];

  if (!file) return;

  uploadFileName.value = file.name;

  imgInput.value = URL.createObjectURL(file);

  const worker = await createWorker("chi_sim", OEM.DEFAULT, {

    logger: info => console.log(info.status, info.progress),

  });

  const ret = await worker.recognize(file, { rotateAuto: true }, { imageColor: true, imageGrey: true, imageBinary: true });

  imgText.value = ret.data.text || '';

  imgOriginal.value = ret.data.imageColor || '';

  imgGrey.value = ret.data.imageGrey || '';

  imgBinary.value = ret.data.imageBinary || '';

}



// 占位符 svg

const svgIcon = encodeURIComponent('<svg t="1736901745913" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4323" width="140" height="140"><path d="M804.9 243.4c8.1 0 17.1 10.5 17.1 24.5v390.9c0 14-9.1 24.5-17.3 24.5H219.3c-8 0-17.3-10.7-17.3-24.5V267.9c0-14 9.1-24.5 17.3-24.5h585.6m0-80H219.3c-53.5 0-97.3 47-97.3 104.5v390.9c0 57.3 43.8 104.5 97.3 104.5h585.4c53.5 0 97.3-47 97.3-104.5V267.9c0-57.5-43.7-104.5-97.1-104.5z" fill="#5E9EFC" p-id="4324"></path><path d="M678.9 294.5c28 0 50.6 22.7 50.6 50.6 0 28-22.7 50.6-50.6 50.6s-50.6-22.7-50.6-50.6c0-28 22.7-50.6 50.6-50.6z m-376 317.6l101.4-215.7c6-12.8 24.2-12.8 30.2 0l101.4 215.7c5.2 11-2.8 23.8-15.1 23.8H318c-12.2 0-20.3-12.7-15.1-23.8z" fill="#5E9EFC" p-id="4325"></path><path d="M492.4 617L573 445.7c4.8-10.1 19.2-10.1 24 0L677.6 617c4.1 8.8-2.3 18.9-12 18.9H504.4c-9.7 0-16.1-10.1-12-18.9z" fill="#5E9EFC" opacity=".5" p-id="4326"></path></svg>');

const placeholder = 'data:image/svg+xml,' + svgIcon;

</script>



<template>

  <div class="custom-file-upload">

    <label for="file-upload" class="custom-label">选择文件</label>

    <span id="file-name" class="file-name">{{ uploadFileName || '未选择文件' }}</span>

    <input id="file-upload" type="file" @change="handleUpload" />

  </div>



  <div class="row">

    <div class="column">

      <p>输入图像</p>

      <img alt="原图" :src="imgInput || placeholder">

    </div>

    <div class="column">

      <p>旋转，原色</p>

      <img alt="原色" :src="imgOriginal || placeholder">

    </div>

    <div class="column">

      <p>旋转，灰度化</p>

      <img alt="灰度化" :src="imgGrey || placeholder">

    </div>

    <div class="column">

      <p>旋转，二值化</p>

      <img alt="二进制" :src="imgBinary || placeholder">

    </div>

  </div>



  <div class="result">

    <h2>识别结果</h2>

    <p>{{ imgText || '暂无结果' }}</p>

  </div>

</template>



<style scoped>

/* 隐藏原生文件上传按钮 */

input[type="file"] {

  display: none;

}



/* 自定义样式 */

.custom-file-upload {

  display: inline-block;

  cursor: pointer;

  margin-bottom: 30px;

}



.custom-label {

  padding: 10px 20px;

  color: #fff;

  background-color: #007bff;

  border-radius: 5px;

  display: inline-block;

  font-size: 14px;

  cursor: pointer;

}



.custom-label:hover {

  background-color: #0056b3;

}



.file-name {

  margin-left: 10px;

  font-size: 14px;

  color: #555;

}



.row {

  display: flex;

  width: 100%;

  justify-content: space-around;

}



.column {

  width: 24%;

  padding: 5px;

  border: 1px solid #ccc;

  border-radius: 5px;

  background-color: #f9f9f9;

  text-align: center;

  min-height: 100px;

}



.column > p {

  margin: 0 0 10px 0;

  padding: 5px;

  border-bottom: 1px solid #ccc;

  font-weight: 600;

}



.column > img {

  width: 100%;

}



.result {

  margin-top: 20px;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 5px;

  background-color: #f9f9f9;

}



.result > h2 {

  margin: 0;

}



.result > p {

  white-space: pre-wrap;

  word-wrap: break-word;

  word-break: break-all;

  font-size: 16px;

  line-height: 1.5;

  color: #333;

  margin: 10px 0;

}

</style>

实现效果

资源加载失败

Tesseract.js 在运行时需要动态加载三个关键文件：Web Worker、wasm 和 训练数据。由于默认使用的是 jsDelivr CDN，国内用户可能会遇到网络加载问题。为了解决这个问题，可以通过指定 unpkg CDN 来加速资源加载：

const worker = await createWorker('chi_sim', OEM.DEFAULT, {

  langPath: 'https://unpkg.com/@tesseract.js-data/chi_sim/4.0.0_best_int',

  workerPath: 'https://unpkg.com/tesseract.js/dist/worker.min.js',

  corePath: 'https://unpkg.com/tesseract.js-core/tesseract-core-simd-lstm.wasm.js',

});

如果需要离线使用，可以将这些资源下载到本地，并将路径指向本地文件即可。

结语

Tesseract.js 是目前前端领域较为成熟的 OCR 库，适合在无需后端支持的场景下快速实现文字识别功能。通过合理的图片预处理和优化，可以满足大部分中小型应用的需求。

相关链接

• Tesseract.js 文档： tesseract-ocr.github.io/


• Tesseract.js Demo： tesseract.projectnaptha.com/

前言

Code Review 是什么？

Code Review 通常也简称 CR，中文意思就是 代码审查

一般来说 CR只关心代码规范和代码逻辑，不关心业务

但是，如果CR的人是组长，建议有时间还是看下与自己组内相关业务，能避免一些生产事故的发生

作为前端组长做 Code Review 有必要吗？

主要还是看公司业务情况吧，如果前端组长需求不多的情况，是可以做下CR，能避免一些生产事故

• 锻炼自己的 CR 能力


• 看看别人的代码哪方面写的更好，学习总结


• 和同事交流，加深联系


• 你做了 CR，晋升和面试，不就有东西吹了不是

那要怎么去做Code Review呢？

可以从几个方面入手

• 项目架构规范


• 代码编写规范


• 代码逻辑、代码优化


• 业务需求

具体要怎么做呢？

传统的做法是PR时查看，对于不合理的地方，打回并在PR中备注原因或优化方案

每隔一段时间，和组员开一个简短的CR分享会，把一些平时CR过程中遇到的问题做下总结

当然，不要直接指出是谁写出的代码有问题，毕竟这不是目的，分享会的目的是交流学习

人工CR需要很大的时间精力，与心智负担

随着 AI 的发展，我们可以借助一些 AI 来帮我们完成CR

接下来，我们来看下，vscode中是怎么借助 AI 工具来 CR 的

安装插件 CodeGeex

新建一个项目

mkdir code-review

cd code-review

创建 test.js 并用 vscode 打开

cd .>test.js

code ./

编写下 test.js

function checkStatus() {

  if (isLogin()) {

    if (isVip()) {

      if (isDoubleCheck()) {

        done();

      } else {

        throw new Error("不要重复点击");

      }

    } else {

      throw new Error("不是会员");

    }

  } else {

    throw new Error("未登录");

  }

}

这是连续嵌套的判断逻辑，要怎么优化呢？

侧边栏选择这个 AI 插件，选择我们需要CR的代码

输入 codeRiview，回车

我们来看下 AI 给出的建议

AI 给出的建议还是很不错的，我们可以通过更多的提示词，优化它给出的修改建议，这里就不过多赘述了

通常我们优化这种类型的代码，基本优化思路也是，前置校验逻辑，正常逻辑后置

除了CodeGeex外，还有一些比较专业的 codeRiview 的 AI 工具

比如：CodeRabbit

那既然都有 AI 工具了，我们还需要自己去CR 吗？

还是有必要的，借助 AI 工具我们可以减少一些阅读大量代码环节，提高效率，减少 CR 的时间

但是仍然需要我们根据 AI 工具的建议进行改进，并且总结，有利于拓宽我们见识，从而写出更优质的代码

具体 CR 实践

判断逻辑优化

1. 深层对象判空

// 深层对象

if (

	store.getters &&

  store.getters.userInfo &&

  store.getters.userInfo.menus

) {}

// 可以使用 可选链进行优化

if (store?.getters?.userInfo?.menus) {}

2. 空函数判断

优化之前

props.onChange && props.onChange(e)

支持 ES11 可选链写法，可这样优化，js 中需要这样，ts 因为有属性校验，可以不需要判断，当然也特殊情况

props?.onChange?.(e)

老项目，不支持 ES11 可以这样写

const NOOP = () => 8

const { onChange = NOOP } = props

onChange(e)

3. 复杂判断逻辑抽离成单独函数

// 复杂判断逻辑

function checkGameStatus() {

  if (remaining === 0 ||

    (remaining === 1 && remainingPlayers === 1) ||

    remainingPlayers === 0) {

      quitGame()

  }

}

// 复杂判断逻辑抽离成单独函数，更方便阅读

function isGameOver() {

  return (

    remaining === 0 ||

    (remaining === 1 && remainingPlayers === 1) ||

    remainingPlayers === 0

  );

}



function checkGameStatus() {

  if (isGameOver()) {

    quitGame();

  }

}

4. 判断处理逻辑正确的梳理方式

// 判断逻辑不要嵌套太深

function checkStatus() {

  if (isLogin()) {

    if (isVip()) {

      if (isDoubleCheck()) {

        done();

      } else {

        throw new Error('不要重复点击');

      }

    } else {

      throw new Error('不是会员');

    }

  } else {

    throw new Error('未登录');

  }

}

这个是不是很熟悉呀~

没错，这就是使用 AI 工具 CR的代码片段

通常这种，为了处理特殊状况，所实现的判断逻辑，都可以采用 “异常逻辑前置，正常逻辑后置” 的方式进行梳理优化

// 将判断逻辑的异常逻辑提前，将正常逻辑后置

function checkStatus() {

  if (!isLogin()) {

    throw new Error('未登录');

  }



  if (!isVip()) {

    throw new Error('不是会员');

  }



  if (!isDoubleCheck()) {

    throw new Error('不要重复点击');

  }



  done();

}

函数传参优化

// 形参有非常多个

const getMyInfo = (

  name,

  age,

  gender,

  address,

  phone,

  email,

) => {

  // ...

}

有时，形参有非常多个，这会造成什么问题呢？

• 传实参是的时候，不仅需要知道传入参数的个数，还得知道传入顺序


• 有些参数非必传，还要注意添加默认值，且编写的时候只能从形参的后面添加，很不方便


• 所以啊，那么多的形参，会有很大的心智负担

怎么优化呢？

// 行参封装成对象，对象函数内部解构

const getMyInfo = (options) => {

  const { name, age, gender, address, phone, email } = options;

  // ...

}



getMyInfo(

  {

    name: '张三',

    age: 18,

    gender: '男',

    address: '北京',

    phone: '123456789',

    email: '123456789@qq.com'

  }

)

你看这样是不是就清爽了很多了

命名注释优化

1. 避免魔法数字

// 魔法数字

if (state === 1 || state === 2) {

  // ...

} else if (state === 3) {

  // ...

}

咋一看，这 1、2、3 又是什么意思啊？这是判断啥的？

语义就很不明确，当然，你也可以在旁边写注释

更优雅的做法是，将魔法数字改用常量

这样，其他人一看到常量名大概就知道，判断的是啥了

// 魔法数字改用常量

const UNPUBLISHED = 1;

const PUBLISHED = 2;

const DELETED = 3;



if (state === UNPUBLISHED || state === PUBLISHED) {

  // ...

} else if (state === DELETED) {

  // ...

}

2. 注释别写只表面意思

注释的作用：提供代码没有提供的额外信息

// 无效注释

let id = 1 // id 赋值为 1



// 有效注释，写业务逻辑 what & why

let id = 1 // 赋值文章 id 为 1

3. 合理利用命名空间缩短属性前缀

// 过长命名前缀

class User {

  userName;

  userAge;

  userPwd;



  userLogin() { };

  userRegister() { };

}

如果我们把前面的类里面，变量名、函数名前面的 user 去掉

似乎，也一样能理解变量和函数名称所代表的意思

代码却，清爽了不少

// 利用命名空间缩短属性前缀

class User {

  name;

  age;

  pwd;



  login() {};

  register() {};

}

分支逻辑优化

什么是分支逻辑呢？

使用 if else、switch case ...，这些都是分支逻辑

// switch case

const statusMap = (status: string) => {

    switch(status) {

        case 'success':

            return 'SuccessFully'

        case 'fail':

            return 'failed'

        case 'danger'

            return 'dangerous'

        case 'info'

            return 'information'

        case 'text'

            return 'texts'

        default:

            return status

    }

}

// if else

const statusMap = (status: string) => {

    if(status === 'success') return 'SuccessFully'

    else if (status === 'fail') return 'failed'

		else if (status === 'danger') return 'dangerous'

    else if (status === 'info') return 'information'

    else if (status === 'text') return 'texts'

    else return status

}

这些处理逻辑，我们可以采用 映射代替分支逻辑

// 使用映射进行优化

const STATUS_MAP = {

    'success': 'Successfull',

    'fail': 'failed',

    'warn': 'warning',

    'danger': 'dangerous',

    'info': 'information',

    'text': 'texts'

}



return STATUS_MAP[status] ?? status

【扩展】

?? 是 TypeScript 中的 “空值合并操作符”

当前面的值为 null 或者 undefined 时，取后面的值

对象赋值优化

// 多个对像属性赋值

const setStyle = () => {

    content.body.head_style.style.color = 'red'

    content.body.head_style.style.background = 'yellow'

  	content.body.head_style.style.width = '100px'

  	content.body.head_style.style.height = '300px'

  	// ...

}

这样一个个赋值太麻烦了，全部放一起赋值不就行了

可能，有些同学就这样写

const setStyle = () => {

  	content.body.head_style.style = {

      color: 'red',

      background: 'yellow',

      width: '100px',

      height: '300px'

    }

}

咋一看，好像没问题了呀？那 style 要是有其他属性呢，其他属性不就直接没了吗~

const setStyle = () => {

  	content.body.head_style.style = {

      ...content.body.head_style.style

      color: 'red',

      background: 'yellow',

      width: '100px',

      height: '300px'

    }

}

采用展开运算符，将原属性插入，然后从后面覆盖新属性，这样原属性就不会丢了

隐式耦合优化

// 隐式耦合

function responseInterceptor(response) {

  const token = response.headers.get("authorization");

  if (token) {

    localStorage.setItem('token', token);

  }

}



function requestInterceptor(response) {

  const token = localStorage.getItem('token');

  if (token) {

    response.headers.set("authorization", token);

  }

}

这个上面两个函数有耦合的地方，但是不太明显

比如这样的情况，有一天，我不想在 responseInterceptor 函数中保存 token 到 localStorage了

function responseInterceptor(response) {

  const token = response.headers.get("authorization");

}



function requestInterceptor(response) {

  const token = localStorage.getItem('token');

  if (token) {

    response.headers.set("authorization", token);

  }

}

会发生什么？

localStorage.getItem('token')一直拿不到数据，requestInterceptor 这个函数就报废了，没用了

函数 responseInterceptor改动，影响到函数 requestInterceptor 了，隐式耦合了

怎么优化呢？

// 将隐式耦合的常数抽离成常量

const TOKEN_KEY = "authorization";

const TOKEN = 'token';



function responseInterceptor(response) {

  const token = response.headers.get(TOKEN_KEY);

  if (token) {

    localStorage.setItem(TOKEN_KEY, token);

  }

}



function requestInterceptor(response) {

  const token = localStorage.getItem(TOKEN_KEY);

  if (token) {

    response.headers.set(TOKEN_KEY, token);

  }

}

这样做有什么好处呢？比刚才好在哪里？

还是刚才的例子，我去掉了保存 localStorage.setItem(TOKEN_KEY, token)

我可以根据TOKEN_KEY这个常量来查找还有哪些地方用到了这个 TOKEN_KEY，从而进行修改，就不会出现冗余，或错误

不对啊，那我不用常量，用token也可以查找啊，但你想想 token 这个词是不是得全局查找，其他地方也会出现token

查找起来比较费时间，有时可能还会改错了

用常量的话，全局查找出现重复的概率很小

而且如果你是用 ts 的话，window 下鼠标停在常量上，按 ALT 键就能看到使用到这个常量的地方了，非常方便

小结

codeRiview（代码审查）不仅对个人技能的成长有帮助，也对我们在升职加薪、面试有所裨益

CR 除了传统的方式外，也可以借助 AI 工具，来简化其中流程，提高效率

上述的优化案例，虽然优化方式不同，但是核心思想都是一样，都是为了代码 更简洁、更容易理解、更容易维护

当然了，优化方式还有很多，如果后期遇到了也会继续补充进来

Rolup 是一个打包工具，类似 Webpack。

组件库打包基本都是用 Rollup。

那 Webpack 和 Rollup 有什么区别呢？为什么组件库打包都用 Rollup 呢？

我们来试一下：

mkdir rollup-test

cd rollup-test

npm init -y

我们创建两个模块：

src/index.js

import { add } from './utils';



function main() {

    console.log(add(1, 2))

}



export default main;

src/utils.js

function add(a, b) {

    return a + b;

}



export {

    add

}

很简单的两个模块，我们分别用 rollup 和 webpack 来打包下：

安装 rollup：

npm install --save-dev rollup

创建 rollup.config.js

/** @type {import("rollup").RollupOptions} */

export default {

    input: 'src/index.js',

    output: [

        {

            file: 'dist/esm.js',

            format: 'esm'

        },

        {

            file: 'dist/cjs.js',

            format: "cjs"

        },

        {

            file: 'dist/umd.js',

            name: 'Guang',

            format: "umd"

        }

    ]

};

配置入口模块，打包产物的位置、模块规范。

在 webpack 里叫做 entry、output，而在 rollup 里叫做 input、output。

我们指定产物的模块规范有 es module、commonjs、umd 三种。

umd 是挂在全局变量上，还要指定一个全局变量的 name。

上面的 @type 是 jsdoc 的语法，也就是 ts 支持的在 js 里声明类型的方式。

效果就是写配置时会有类型提示：

不引入的话，啥提示都没有：

这里我们用了 export，把 rollup.config.js 改名为 rollup.config.mjs，告诉 node 这个模块是 es module 的。

配置好后，我们打包下：

npx rollup -c rollup.config.mjs

看下产物：

三种模块规范的产物都没问题。

那用 webpack 打包，产物是什么样呢？

我们试一下：

npm install --save-dev webpack-cli webpack

创建 webpack.config.mjs

import path from 'node:path';



/** @type {import("webpack").Configuration} */

export default {

    entry: './src/index.js',

    mode: 'development',

    devtool: false,

    output: {

        path: path.resolve(import.meta.dirname, 'dist2'),

        filename: 'bundle.js',

        libraryTarget: 'commonjs2'

    }

};

指定 libraryTarget 为 commonjs2

打包下：

npx webpack-cli -c webpack.config.mjs

可以看到，webpack 的打包产物有 100 行代码：

再来试试 umd 的：

umd 要指定全局变量的名字。

打包下：

也是 100 多行。

最后再试下 es module 的：

libraryTarget 为 module 的时候，还要指定 experiments.outputModule 为 true。

import path from 'node:path';



/** @type {import("webpack").Configuration} */

export default {

    entry: './src/index.js',

    mode: 'development',

    devtool: false,

    experiments: {

        outputModule: true

    },

    output: {

        path: path.resolve(import.meta.dirname, 'dist2'),

        filename: 'bundle.js',

        libraryTarget: 'module'

    }

};

打包下：

产物也同样是 100 多行。

相比之下，rollup 的产物就非常干净，没任何 runtime 代码：

更重要的是 webpack 目前打包出 es module 产物还是实验性的，并不稳定。

webpack 打 cjs 和 umd 的 library 还行。

但 js 库一般不都要提供 es module 版本么，支持的不好怎么行？

所以我们一般用 rollup 来做 js 库的打包，用 webpack 做浏览器环境的打包。

前面说组件库打包一般都用 rollup，我们来看下各大组件库的打包需求。

安装 antd:

npm install --no-save antd

在 node_modules 下可以看到它分了 dist、es、lib 三个目录：

分别看下这三个目录的组件代码：

lib 下的组件是 commonjs 的：

es 下的组件是 es module 的：

dist 下的组件是 umd 的：

然后在 package.json 里分别声明了 commonjs、esm、umd 还有类型的入口：

这样，当你用 require 引入的就是 lib 下的组件，用 import 引入的就是 es 下的组件。

而直接 script 标签引入的就是 unpkg 下的组件。

再来看一下 semi design 的：

npm install --no-save @douyinfe/semi-ui

也是一样：

只不过多了个 css 目录。

所以说，组件库的打包需求就是组件分别提供 esm、commonjs、umd 三种模块规范的代码，并且还有单独打包出的 css。

那 rollup 如何打包 css 呢？

我们试一下：

创建 src/index.css

.aaa {

    background: blue;

}

创建 src/utils.css

.bbb {

    background: red;

}

然后分别在 index.js 和 utils.js 里引入下：

安装 rollup 处理 css 的插件：

npm install --save-dev rollup-plugin-postcss

引入下：

import postcss from 'rollup-plugin-postcss';



/** @type {import("rollup").RollupOptions} */

export default {

    input: 'src/index.js',

    output: [

        {

            file: 'dist/esm.js',

            format: 'esm'

        },

        {

            file: 'dist/cjs.js',

            format: "cjs"

        },

        {

            file: 'dist/umd.js',

            name: 'Guang',

            format: "umd"

        }

    ],

    plugins: [

        postcss({

            extract: true,

            extract: 'index.css'

        }),

    ]

};

然后跑一下：

npx rollup -c rollup.config.mjs

可以看到，产物多了 index.css

而 js 中没有引入 css 了：

被 tree shaking 掉了，rollup 默认开启 tree shaking。

这样我们就可以单独打包组件库的 js 和 css。

删掉 dist，我们试下不抽离是什么样的：

npx rollup -c rollup.config.mjs

可以看到，代码里多了 styleInject 的方法：

用于往 head 里注入 style

一般打包组件库产物，我们都会分离出来。

然后我们再用 webpack 打包试试：

安装用到的 loader：

npm install --save-dev css-loader style-loader

css-loader 是读取 css 内容为 js

style-loader 是往页面 head 下添加 style 标签，填入 css

这俩结合起来和 rollup 那个插件功能一样。

配置 loader：

module: {

    rules: [{

        test: /\.css$/i,

        use: ["style-loader", "css-loader"],

    }],

}

用 webpack 打包下：

npx webpack-cli -c webpack.config.mjs

可以看到 css 变成 js 模块引入了：

这是 css-loader 做的。

而插入到 style 标签的 injectStylesIntoStyleTag 方法则是 style-loader 做的：

然后再试下分离 css，这用到一个单独的插件：

npm install --save-dev mini-css-extract-plugin

配一下：

import path from 'node:path';

import MiniCssExtractPlugin from "mini-css-extract-plugin";



/** @type {import("webpack").Configuration} */

export default {

    entry: './src/index.js',

    mode: 'development',

    devtool: false,

    output: {

        path: path.resolve(import.meta.dirname, 'dist2'),

        filename: 'bundle.js',

    },

    module: {

        rules: [{

            test: /\.css$/i,

            use: [MiniCssExtractPlugin.loader, "css-loader"],

        }],

    },

    plugins: [

        new MiniCssExtractPlugin({

            filename: 'index.css'

        })

    ]

};

指定抽离的 filename 为 index.css

抽离用的 loader 要紧放在 css-loader 之前。

样式抽离到了 css 中，这时候 style-loader 也就不需要了。

打包下：

npx webpack-cli -c webpack.config.mjs

样式抽离到了 css 中：

而 js 里的这个模块变为了空实现：

所以 webpack 的 style-loader + css-loader + mini-css-extract-plugin 就相当于 rollup 的 rollup-plugin-postcss 插件。

为什么 rollup 没有 loader 呢？

因为 rollup 的 plugin 有 transform 方法，也就相当于 loader 的功能了。

我们自己写一下抽离 css 的 rollup 插件：

创建 my-extract-css-rollup-plugin.mjs（注意这里用 es module 需要指定后缀为 .mjs）：

const extractArr = [];



export default function myExtractCssRollupPlugin (opts) {

    return {

      name: 'my-extract-css-rollup-plugin',

      transform(code, id) {

        if(!id.endsWith('.css')) {

          return null;

        }



        extractArr.push(code);



        return {

          code: 'export default undefined',

          map: { mappings: '' }

        }

      },

      generateBundle(options, bundle) {



        this.emitFile({

          fileName: opts.filename || 'guang.css',

          type: 'asset',

          source: extractArr.join('\n/*光光666*/\n')

        })

      }

    };

  }

在 transform 里对代码做转换，这就相当于 webpack 的 loader 了。

我们在 transform 里只处理 css 文件，保存 css 代码，返回一个空的 js 文件。

然后 generateBundle 里调用 emitFile 生成一个合并后的 css 文件。

用一下：

import myExtractCssRollupPlugin from './my-extract-css-rollup-plugin.mjs';

myExtractCssRollupPlugin({

    filename: '666.css'

})

删掉之前的 dist 目录，重新打包：

npx rollup -c rollup.config.mjs

看下产物：

可以看到，抽离出了 css，内容是合并后的所有 css。

而 cjs 也没有 css 的引入：

也是被 tree shaking 掉了。

我们把 tree shaking 关掉试试：

再次打包：

可以看到，两个 css 模块转换后的 js 模块依然被引入了：

我们改下插件 transform 的内容：

再次打包：

可以看到引入的也是我们转后后的 css 模块的内容：

因为没用到，同样会被 tree shaking 掉。

所以说 rollup 的插件的 transform 就相当于 webpack loader 的功能。

前面说 webpack 用来做浏览器的打包，而 rollup 一般做 js 库的打包。

这也不全对，vite 就是用 rollup 来做的生产环境的打包。

因为它开发环境下不打包，而是跑了一个开发服务器，对代码做了下转换，不需要 webpack 那些 dev server 的功能。

而生产环境又需要打包，所以 rollup 就很合适。

开发环境下，浏览器里用 type 为 module 的 script 引入，会请求 vite 的开发服务器。

vite 开发服务器会调用 rollup 插件的 transform 方法来做转换。

而生产环境下，用 rollup 打包，也是用同样的 rollup 插件。

当然，vite 还会用 esbuild 来做下依赖的与构建，比如把 cjs 转换成 esm、把小模块打包成一个大的模块。

用 esbuild 是因为它更快。

所以说，vite 是基于 rollup 来实现的，包括开发服务器的 transform，以及生产环境的打包。

但是为了性能考虑，又用了 esbuild 做依赖预构建。

现在 vite 团队在开发 rust 版 rollup 也就是 rolldown 了，有了它之后，就可以完全替代掉 rollup + esbuild 了。

综上，除了 webpack、vite 外，rollup 也是非常常用的一个打包工具。

案例代码上传了github

总结

这节我们学习了 rollup，虽然它不如 webpack、vite 提到的多，但也是一个常用的打包工具。

它打包产物没有 runtime 代码，更简洁纯粹，能打包出 esm、cjs、umd 的产物，常用来做 js 库、组件库的打包。相比之下，webpack 目前对 esm 产物的支持还是实验性的，不稳定。

rollup 只有 plugin，没有 loader，因为它的 transform 方法就相当于 webpack 插件的 loader。

vite 就是基于 rollup 来实现的，开发环境用 rollup 插件的 transform 来做代码转换，生产环境用 rollup 打包。

不管你是想做组件库、js 库的打包，还是想深入学习 vite，都离不开 rollup。

更多内容可以看我的小册《Node.js CLI 通关秘籍》

0. 啥是useId

Vue 3.5中新增的useId函数主要用于生成唯一的ID，这个ID在同一个Vue应用中是唯一的，并且每次调用useId都会生成不同的ID。这个功能在处理列表渲染、表单元素和无障碍属性时非常有用，因为它可以确保每个元素都有一个唯一的标识符。

useId的实现原理相对简单。它通过访问Vue实例的ids属性来生成ID，这个属性是一个数组，其中包含了用于生成ID的前缀和自增数字。每次调用useId时，都会取出当前的数字值，然后进行自增操作。这意味着在同一页面上的多个Vue应用实例可以通过配置app.config.idPrefix来避免ID冲突，因为每个应用实例都会维护自己的ID生成序列。

1. 实现源码

export function useId(): string {

  const i = getCurrentInstance()

  if (i) {

    return (i.appContext.config.idPrefix || 'v') + '-' + i.ids[0] + i.ids[1]++

  } else if (__DEV__) {

    warn(

      `useId() is called when there is no active component ` +

        `instance to be associated with.`,

    )

  }

  return ''

}

• i.appContext.config.idPrefix：这是从当前组件实例中获取的一个配置属性，用于定义生成ID的前缀。如果这个前缀存在，它将被使用；如果不存在，默认使用 'v'。


• i.ids[0]：这是当前组件实例上的 ids 数组的第一个元素，它是一个字符串，通常为空字符串，用于生成ID的一部分。


• i.ids[1]++：这是 ids 数组的第二个元素，它是一个数字，用于生成ID的自增部分。这里使用了后置自增运算符 ++，这意味着它会返回当前值然后自增。每次调用 useId 时，这个数字都会增加，确保生成的ID是唯一的。

2.设置ID前缀

如果不想使用默认的前缀'v'的话，可以通过app.config.idPrefix进行设置。

const app = createApp(App)



app.config.idPrefix = 'vid'

3.使用场景

3-1. 表单元素的唯一标识

在表单中，<label> 标签需要通过 for 属性与对应的 <input> 标签的 id 属性相匹配，以实现点击标签时输入框获得焦点的功能。使用 useId 可以为每个 <input> 元素生成一个唯一的 id，确保这一功能的正常工作。例如：

<label :for="id">Do you like Vue 3.5?</label>

  <input type="checkbox" :id="id" />

const id = useId()

3-2. 列表渲染中的唯一键

在渲染列表时，每一项通常需要一个唯一的键（key），以帮助 Vue 追踪每个节点的身份，从而进行高效的 DOM 更新。如果你的列表数据没有唯一key的话，那么useId 可以为列表中的每个项目生成一个唯一的键。

<ul>

    <li v-for="item in items" :key="item.id">

      {{ item.text }}（{{ item.id }}）

    </li>

  </ul>

const items = Array.from({ length: 10}, (v, k) => { 

    return {

        text: `Text ${k}`,

        id: useId()

    }

})

上述代码渲染结果如下：

3-3. 服务端渲染（SSR）中避免 ID 冲突

在服务端渲染（SSR）的应用中，页面的HTML内容是在服务器上生成的，然后发送给客户端浏览器。在客户端，浏览器会接收到这些HTML内容，并将其转换成一个可交互的页面。如果在服务器端和客户端生成的HTML中存在相同的ID，那么在客户端激活（hydrate）时，就可能出现问题，因为客户端可能会尝试操作一个已经由服务器端渲染的DOM元素，导致潜在的冲突或错误。

下面是一个使用useId来避免这种ID冲突的实际案例：

服务端代码 (server.js)

import { createSSRApp } from 'vue';

import { renderToString } from '@vue/server-renderer';

import App from './App.vue';



const app = createSSRApp(App);



// 假设我们在这里获取了一些数据

const data = fetchData();



renderToString(app).then(html => {

  // 将服务端渲染的HTML发送给客户端

  sendToClient(html);

});

客户端代码 (client.js)

import { createSSRApp } from 'vue';

import App from './App.vue';



const app = createSSRApp(App);



// 客户端激活，将服务端渲染的HTML转换成可交互的页面

hydrateApp(app);

在这个案例中，无论是服务端还是客户端，我们都使用了createSSRApp(App)来创建应用实例。如果我们在App.vue中使用了useId来生成ID，那么这些ID将在服务端渲染时生成一次，并在客户端激活时再次使用相同的ID。

App.vue 组件

<template>

  <div>

    <input :id="inputId" type="text" />

    <label :for="inputId">Enter text:</label>

  </div>

</template>



<script setup>

import { useId } from 'vue';



const inputId = useId();

</script>

在App.vue组件中，我们使用了useId来为<input>元素生成一个唯一的ID。这个ID在服务端渲染时生成，并包含在发送给客户端的HTML中。当客户端接收到这个HTML并开始激活过程时，由于useId生成的ID在服务端和客户端是相同的，所以客户端可以正确地将<label>元素关联到<input>元素，而不会出现ID冲突的问题。

如果没有使用useId，而是使用了Math.random()或Date.now()来生成ID，那么服务端和客户端可能会生成不同的ID，导致客户端在激活时无法正确地将<label>和<input>关联起来，因为它们具有不同的ID。这可能会导致表单元素的行为异常，例如点击<label>时，<input>无法获得焦点。

3-4. 组件库中的 ID 生成

在使用 Element Plus 等组件库进行 SSR 开发时，为了避免 hydration 错误，需要确保服务器端和客户端生成相同的 ID。通过在 Vue 中注入 ID_injection_key，可以确保 Element Plus 生成的 ID 在 SSR 中是唯一的。

// src/main.js

import { createApp } from 'vue'

import { ID_INJECTION_KEY } from 'element-plus'

import App from './App.vue'

const app = createApp(App)

app.provide(ID_INJECTION_KEY, {

  prefix: 1024,

  current: 0,

})

希望这篇文章介绍对你有所帮助，上述代码已托管在Gitee上，欢迎自取！