技术专栏 第1085页

“ AI Coding 是一个快速演进的领域，我们需要了解它当前的局限性，为未来的各种可能性做好准备，可能一个任务今天无法完成但是在明天模型升级后就可以实现了。唯一的应对办法是刻意练习，刻意地用 LLM 完成一些日常的任务，感知模型能力的边界和变化，并且尝试用工程的手段去弥补模型的不足以投入使用”。

AI Coding 的发展与影响

大语言模型的演进趋势

AI Coding 的核心发展趋势体现在 AI 自主性的飞速提升。从最初以代码补全、代码问答为主的 Copilot 形式（e.g GitHub Copilot）到目前以独立完成任务的 Agent 形式（e.g Devin）演进。

代码大模型的演进速度非常快，相较于去年同一时间的产品，如今的模型能力超乎预期。前沿模型在代码生成任务上提升显著，其成本和速度在持续优化，尤其是从 0 到 1 生成小型项目上的表现。总之，前沿模型在变得更强更小，这意味着更好的体验和更低的成本。

此外，大家普遍认为 2025 年是属于 Agent 应用的一年，大模型在这方面的能力达到了实现成熟应用的拐点并且其能力会持续加强，主要可以体现在以下四个方面：

▪️ 规划（Planning）：制定计划、将计划拆分成子任务、为子任务设定目标、基于反馈对计划进行调整。

▪️ 记忆（Memory）：记录在 Agent 执行过程中产生的历史思考、行动和环境观测。

▪️ 感知（Perception）：接收来自环境的信息，可以是文本或多模态的形式。

▪️ 行动（Action）：基于计划和 LLM 的决策，和环境进行交互并对环境造成状态的改变。对于行动而言一个重要的机制就是控制和使用外部工具。

AI Coding 带来的改变与影响

每一个技术革新的过程都会经历若干个阶段，我们现在正在跨越从早期市场到主流市场这个鸿沟。对于早期的采用者来说，他们看到了这项技术的巨大潜力并且为之兴奋，尽管不成熟或者有时候效果不佳，但是 AI Coding 的使用体验非常神奇。这个工具能猜到你的意图并给出对应的代码，并且在持续快速地提升，越来越稳定，完成更难的任务。

正因为 AI Coding 是一个快速演进的领域，我们需要了解它当前的局限性，为未来的各种可能性做好准备，可能一个任务今天无法完成但是在明天模型升级后就可以实现了。唯一的应对办法是刻意练习，刻意地用 LLM 完成一些日常的任务，感知模型能力的边界和变化，并且尝试用工程的手段去弥补模型能的不足以投入使用（比如用 RAG 去除幻觉）。一方面你会深化认知和技巧，另一方面一旦达到零界点你将是第一批的受益者。

🪐 豆包MarsCode 与 AI Coding

豆包MarsCode 的判断与思考

AI Coding 目前还处在早期的阶段（尽管相对其它的应用场景要成熟很多，并且已经在企业中大范围应用），但是它的发展速度非常快（过去两年 LLM 性能快速地提升），功能形态、交互方式、应用场景都在随之持续变化，总体向着更加自主、进一步解放生产力的方向发展。

在字节内部，豆包MarsCode 已经覆盖了 70% 以上的开发者，从编码阶段就开始为开发者贡献代码和技术解决方案。在代码提交后，AI 也会参与代码评审，自动生成测试用例提升覆盖率，上线后也用于辅助线上问题的定位和解决等等。

新功能 Apply 的诞生与亮相

我们可以从一个公式去理解豆包MarsCode 在进行 Apply 产品功能设计时的思考：

p⋅(t + a)

其中 p 是 LLM 失败的概率， t 是从用户请求到响应的时间， a 是在失败情况下造成的任何额外损失，这个公式得到的结果就是用户在使用过程中感受到风险的大小。当用户意识到某个功能存在风险（高延迟，低成功概率）时，他们会停止使用并且很难恢复信任，这种情况在 LLM 应用上更为明显。

代码问答侧边栏是一个风险非常低的功能。因为有流式传输，你可以立即开始阅读，t 是很小的，但是 p 通常相对较高。在生成代码时，即使 LLM 不完美，你也有一段新的代码可以参考、构建和重新提示以改进方案，它不会马上修改源代码，因此 a 也是非常小的。于是，当代码修改方案已经被确认后，如何快速且准确的将这些修改更新到代码中就非常重要。Apply 解决了这关键的最后一步，无需手动复制粘贴或者手动修改，直接通过智能分析实现在对应的位置修改代码，让整个代码问答工作流变得更流畅。Apply 功能大大降低了代码变更的成本。

高效利用 AI Coding 的方法与实践

优化 AI 生成代码的质量、可靠性和安全性

▪️ 高质量上下文：模糊不清的上下文容易导致大模型出现幻觉。完成一个任务时对人重要的信息大概率对 AI 也非常重要，你可以通过主动显式地引入这些信息来帮助 AI。比如代码补全打开相关的文件，问答的时候用 #Code/#File/#Folder 引入明确的代码片段来实现。

▪️ 生成测试用例：让 AI 在完成一段功能后添加对应的测试用例，可以提升任务的稳定性，也可以避免后续的任务破坏已有的功能。

▪️ 项目实践沉淀：每个项目都会有自己的编码规范和最佳实践，这些知识都值得沉淀。当前 LLM 的指令跟随和上下文感知能力都非常强，加入这些规则和知识库会对任务的完成效果和稳定性有非常大的帮助。

实现 AI Coding 在大型项目的可行性探索

我们在大型工程中也要解决可行性的问题，在 LLM 时代之前我们会怎么做？我们会通过做抽象、做架构隔离、做分工、记录文档等等方式来解决。一个大工程如果在这些方面做的很好，那么对实践 AI Coding 也大有帮助。

哪怕一个项目有几十甚至几百万行代码，但是解决一个具体问题时人们和 AI 所需要的上下文都是相对有限的。目前的 AI Coding 工具背后都会有一个代码知识图谱系统支持，用于召回与当前任务相关的上下文。随着 Agent 的出现，AI 会自己分析任务并调用 IDE 中的工具探索、获取上下文，做到更加的精确。

未来已来：开发者的机遇与建议

️ 机遇

▪️ 降低开发门槛

软件开发不再是技术门槛高的专属领域，只要具备洞察力，个体即可利用 AI 构建工具，满足长尾需求。AI Coding 让更多人有机会参与到解决实际问题的创新之中，释放了开发潜力。

▪️ 提升个体生产力

以CPU做类比，Copilot 相当于提升单核处理效率，而 Agent 则让开发者拥有多核并行能力。未来可能会有很多小型但是极具战斗力的团队或者创业公司。

建议

▪️ 学习能力

对于学生或者职场新人，成长是最重要的事情，在学校除了打好基础，培养有效学习的能力也非常重要。

▪️ 好奇心

好奇心是一个优秀程序员的的重要特征，它能驱动你对一个问题的持续深耕，也能驱动你去探索前沿的技术。

▪️ 驾驭 AI 的能力

除了好奇心，还要有满足好奇心的能力。大模型的出现极大降低了这一能力的门槛，成长的效率会大幅提升。驾驭好这个工具也会成为日后在职场中的一个竞争优势。

启智增效：高校学生如何用 AI 助力学习

学习和巩固计算机基础知识

进入职场后，你会发现计算机科学基础课程的重要性在职场中会愈发凸显。无论是学习新技术、设计解决方案，还是定位线上疑难问题，都需要对计算机软硬件体系有深刻理解。然而，学校的理论教学往往与实际应用场景脱节，这时 AI 就可以成为你的得力助手：

▪️ 将理论落地实践：学习一个知识点时，AI 可以提供相应的应用场景，解释在实际工程中的实现方式，甚至提醒你可能遇到的异常情况。

▪️ 明确使用场景：以数据结构和算法为例，AI 不仅可以帮助你理解它的实现，还能告诉你在何种场景下使用何种算法或数据结构，让学习更加贴近真实项目需求。

快速掌握语言、框架和工具的实践操作

▪️ 优化学习流程：AI 能帮你解决工具链安装、工程创建、依赖配置等繁琐任务，让你快速进入核心知识点的学习，减少对技术门槛的畏惧。

▪️ 个性化指导：AI 会根据你的实际水平提供量身定制的解释和帮助，耐心解答每一个问题，让学习过程更加舒适、无压力。

▪️ 引导工程最佳实践：高校教育中对开发工具、编程规范等方面的内容常常不足，因此 MIT 也出了这样的课程：The Missing Semester of Your CS Education。AI 已经学习了大量实际项目的最佳实践，可以在问答中直接指导你正确使用工具并遵循规范。

在编程狮学习下列课程的时候不妨试试借助 AI 试试吧~

分类	课程名称	课程介绍	流行指数	适合人群
前端开发	HTML入门课程(含HTML5)	从零开始学习HTML，掌握网页结构搭建及HTML5的新特性和语义化标签，为前端开发打下坚实基础		初学者、前端开发者
前端开发	CSS 入门课程	学习CSS选择器、盒模型、布局方式等基础知识，通过实战项目掌握网页样式设计技巧，提升页面美观度		初学者、前端开发者
前端开发	JavaScript 入门课程	掌握JavaScript语法、DOM操作、事件处理等核心知识，学会实现网页的交互效果和动态功能		初学者、前端开发者
前端开发	TypeScript 入门到进阶课程	从TypeScript基础语法讲起，深入学习高级类型、接口、类等概念，助力开发者编写高质量的前端代码		初学者、前端开发者
前端开发	Vue2入门课程	学习Vue2框架的响应式数据绑定、组件系统、路由管理等核心功能，通过项目实践快速上手前端组件化开发		初学者、前端开发者
后端开发	Node.js 入门课程	了解Node.js的运行机制，学习使用Node.js搭建服务器、处理HTTP请求和响应，掌握常见的后端开发框架和模块		初学者、后端开发者
后端开发	PHP 入门课程	讲解PHP语言基础，包括语法、函数、数组等，以及如何使用PHP进行数据库操作、会话管理等Web后端开发任务		初学者、后端开发者
后端开发	C# 入门课程	学习C#语言的基本语法、面向对象编程思想，以及.NET框架下的Web开发、桌面应用开发等技术		初学者、后端开发者
后端开发	C++ 入门课程	介绍C++语言的核心特性，如指针、引用、类和对象等，适合希望从事系统编程、游戏开发等领域的初学者		初学者、后端开发者
移动开发	Android 零基础入门课程	从Android开发环境搭建开始，学习Java/Kotlin语言在Android平台的应用，掌握布局设计、事件处理、服务等开发要点		初学者、移动开发者
移动开发	Swift 入门课程	学习Swift语言的语法和特性，了解iOS开发的基本框架和组件，能够开发简单的iOS应用		初学者、移动开发者
数据库	SQL 入门课程	讲解SQL语言的基本语法，包括数据查询、插入、更新、删除等操作，以及数据库的设计和优化原则		初学者、数据库开发者
数据库	MySQL 入门课程	详细介绍MySQL数据库的安装、配置、管理，以及如何使用SQL语句进行高效的数据库操作和数据处理		初学者、数据库开发者
系统运维	Linux 入门课程	学习Linux操作系统的常用命令、文件系统管理、用户权限控制等基础知识，掌握服务器的基本运维操作		初学者、运维人员
系统运维	Git 基础课程	从版本控制的概念讲起，学习Git的基本操作，如克隆、提交、分支管理等，提高代码协作和管理效率		初学者、开发者
网络技术	基础网络协议入门课程	深入讲解HTTP、TCP/IP等基础网络协议的工作原理和应用，帮助学员理解网络通信的过程和机制		初学者、网络工程师
其他	Python3 入门课程	学习Python3的语法基础、数据类型、控制结构等，掌握其在数据分析、爬虫开发、自动化脚本等领域的应用		初学者、多领域开发者
其他	Java入门课程	从Java语言基础讲起，涵盖面向对象编程、集合框架、多线程等内容，为后续的Java Web开发或Android开发打基础		初学者、多领域开发者
其他	C语言入门课程	学习C语言的基本语法、指针、数组、函数等核心概念，培养学员的编程思维和算法能力		初学者、多领域开发者
其他	Docker 入门课程	了解Docker容器技术的基本概念，学习如何使用Docker搭建开发环境、部署应用，实现应用的快速交付和部署		初学者、开发者
其他	微信小程序入门课程	学习微信小程序的开发框架和API，掌握页面设计、数据绑定、网络请求等开发技巧，能够开发简单的微信小程序		初学者、前端开发者

如果你还没尝试用 AI 辅助编程，现在，迈出探索 AI Coding 的第一步吧！

立即下载豆包 MarsCode

学习资源：

前端开发：零基础入门到项目实战 >>
前端开发：边学边练 >>

原学习路径下载 >>

学习资源：

前端开发：零基础入门到项目实战 >>
前端开发：边学边练 >>

原学习路径下载 >>

在编程和计算机领域，Builder（构建器）是一个非常重要的概念，但它并不是一个单一的定义，而是有多种含义。具体来说，它可以指一种设计模式，也可以指用于自动化构建软件的工具。本文将从不同角度为你详细解读 Builder 的含义，帮助你全面理解它在计算机中的应用。

一、什么是 Builder？

Builder在计算机中主要有两种含义：

1. 设计模式中的 Builder 模式：一种创建型设计模式，用于逐步构建复杂对象。
2. 构建工具（Build Tool）：用于自动化软件编译、打包和部署的工具。

接下来，我们将分别介绍这两种含义及其应用场景。

二、设计模式中的 Builder 模式

（一）什么是 Builder 模式？

Builder 模式（构建器模式）是一种创建型设计模式，用于逐步构建复杂对象。它将对象的构造过程与其表示分离，使得相同的构建过程可以创建不同的表示。这种模式的核心思想是将复杂对象的构建过程分解为多个简单的步骤，每个步骤负责设置对象的某个部分。

（二）Builder 模式的组成

Builder 模式通常包含以下角色：

1. Product（产品角色）：表示正在构建的复杂对象。
2. Builder（抽象构建器）：定义了构建产品所需的接口。
3. ConcreteBuilder（具体构建器）：实现了 Builder 接口，具体负责构建和装配各个部件。
4. Director（指挥者）：负责安排构建的顺序，并通过Builder 接口调用具体构建器。

（三）Builder 模式的应用场景

Builder 模式适用于以下场景：

1. 对象构造过程复杂：当一个对象的构造过程非常复杂，且需要根据不同的需求动态调整构造过程时。
2. 多参数构造：当一个类的构造函数或方法包含大量参数，尤其是这些参数中存在可选参数时。
3. 对象结构复杂：当需要构建的对象包含多个子对象或复杂的属性时。

（四）Builder 模式的实现示例

以下是一个典型的 Builder 模式实现示例：

1. 定义产品类（Computer类）

public class Computer {
    private String board;       // 主板类型
    private String display;     // 显示器类型
    private String os;          // 操作系统


    // 设置主板
    public void setBoard(String board) {
        this.board = board;
    }


    // 设置显示器
    public void setDisplay(String display) {
        this.display = display;
    }


    // 设置操作系统
    public void setOs(String os) {
        this.os = os;
    }


    // 重写toString方法，方便打印对象信息
    @Override
    public String toString() {
        return "Computer{" +
                "board='" + board + '\'' +
                ", display='" + display + '\'' +
                ", os='" + os + '\'' +
                '}';
    }
}

2. 定义抽象构建器（Builder接口）

public abstract class Builder {
    // 构建主板的方法
    abstract void buildBoard(String board);


    // 构建显示器的方法
    abstract void buildDisplay(String display);


    // 构建操作系统的方法
    abstract void buildOs();


    // 返回最终构建的产品
    abstract Computer build();
}

3. 实现具体构建器（MacBookBuilder类）

public class MacBookBuilder extends Builder {
    private Computer computer = new Computer();  // 创建一个Computer对象


    // 实现构建主板的方法
    @Override
    public void buildBoard(String board) {
        computer.setBoard(board);  // 设置主板类型
    }


    // 实现构建显示器的方法
    @Override
    public void buildDisplay(String display) {
        computer.setDisplay(display);  // 设置显示器类型
    }


    // 实现构建操作系统的方法
    @Override
    public void buildOs() {
        computer.setOs("macOS");  // MacBook默认使用macOS
    }


    // 返回构建好的Computer对象
    @Override
    public Computer build() {
        return computer;
    }
}

4. 定义指挥者（Director类）

public class Director {
    private Builder builder;  // 持有一个Builder对象


    // 构造函数，传入具体的Builder对象
    public Director(Builder builder) {
        this.builder = builder;
    }


    // 构建方法，指定构建过程
    public void construct(String board, String display) {
        builder.buildBoard(board);  // 构建主板
        builder.buildDisplay(display);  // 构建显示器
        builder.buildOs();  // 构建操作系统
    }
}

5. 使用示例（Test类）

public class Test {
    public static void main(String[] args) {
        // 创建具体的构建器（MacBookBuilder）
        Builder builder = new MacBookBuilder();  


        // 创建指挥者，并传入构建器
        Director director = new Director(builder);  


        // 指定构建过程
        director.construct("Intel Board", "Retina Display");


        // 获取最终构建的Computer对象
        Computer computer = builder.build();


        // 打印Computer对象的信息
        System.out.println(computer.toString());


        // 在控制台输出w3cschool的提示信息
        System.out.println("更多编程知识，请访问 w3cschool.cn");
    }
}

三、构建工具（Build Tool）

除了设计模式中的 Builder 模式，Builder在计算机中还可以指构建工具（Build Tool）。构建工具是用于自动化软件编译、打包和部署的工具，常见的构建工具包括：

1. Maven：Java 项目的构建工具，用于依赖管理、项目构建和生命周期管理。
2. Gradle：一种灵活的构建工具，支持多种编程语言和项目类型。
3. Ant：早期的 Java 构建工具，主要用于自动化编译和部署。
4. Make：在 C/C++ 项目中常用的构建工具，通过 Makefile 定义构建规则。

这些工具通过脚本或配置文件定义构建流程，简化开发和部署过程。

四、总结

在计算机领域，Builder 可以指设计模式中的 Builder 模式，也可以指构建工具。无论是用于构建复杂对象的设计模式，还是用于自动化编译和部署的工具，Builder 都扮演着重要的角色。希望这篇文章能帮助你全面理解 Builder 的含义和应用场景。

两个月前，一款名为“小猫补光灯”的 APP 火爆全网，不仅在小红书斩获百万流量，更是在短短半个月内登顶了 App Store 付费榜单。

而令人惊讶的是，它的开发者在半年前甚至没写过一行代码！但借助 AI 编程工具，他在仅一个小时内就完成这款爆款 APP 从设计到上线的全过程！

豆包MarsCode「 AI 开发者 Talk」第一期的开场嘉宾，特别邀请到了“小猫补光灯”开发者【花生老师】，为大家带来《零基础小白入门 AI 编程》的经验分享：普通人在 AI 时代如何撬动财富杠杆，巧用 AI 编程工具，一个人也能成为一支队伍！

从个人经历到实践案例

小猫补光灯是怎么诞生的？

花生老师最初在大厂中做非技术类岗位的工作，裸辞后转型成为自媒体博主和 AI 编程鼓励师，这近半年来，没有编程背景的他居然已经用 AI 开发了三十多款产品。

其中最有名的当然是火爆全网的“小猫补光灯”，半个月内便登顶了 Appstore 付费榜的爆款产品，没有技术背景的他到底是怎么做出来的呢？

受其他开发者用 AI 开发屏幕手电筒案例的启发，花生老师非常对产品使用场景进行了深刻洞察：不同颜色的发光屏幕刚好能够作为补光色卡使用，刚好满足了爱自拍的女性用户的需求。

说干就干，不到一个小时，花生老师就将这款产品开发了出来并发布到小红书，出乎意料的是，有关“小猫补光灯”第一篇笔记就已斩获了百万阅读和八万点赞！其中有一半的人阅读帖子后会选择下载这款产品。

花生老师总结了两点爆款秘诀

1. 拓展产品能力边界，提升产品的使用效率： 相比于一只手机搜索纯色卡片调高显示屏亮度作为补光灯和另一只手机当作照相机的拍照方式，“小猫补光灯”一步到位地将原有的若干个步骤简化成打开 APP 即可，甚至还能实时看到补光后画面效果，大大改善了原来的拍照体验。
2. 提升用户使用频次及留存率： 原有的自助补光拍照形式需要两台手机，这让只有一台手机的用户难以完成补光拍照，但“小猫补光灯”让一个人也能美美自拍，大大地提升了用户使用频次及留存率。

在后续的推广营销上，花生老师反直觉地将选择将产品改为付费使用，而非传统地用广告模式去做营收增长，并且将“收费一元”打造成营销事件，结果收费后第二天下载量竟然也同样反直觉地不降反增。

拥抱AI编程

撬动财富杠杆，解锁新机遇

Naval 四大财富杠杆解读：劳力、资本、媒体、代码

资本依赖资金的积累和运作，通过投资等方式创造被动收入；而劳力则依赖个人的时间和精力创造收入，属于财富主动收入模式。

相比之下，媒体和代码则为财富带来新的可能：二者都能以零边际成本的方式在24小时内不断分发并持续产生影响力和收入。

Naval 的四大财富杠杆

为什么现在是学习 AI 编程的最佳时机？

过去的 AI 编程工具存在复制粘贴繁琐或技术壁垒高的特点，对普通人并不友好。

但目前 AI 编程工具和大模型上的突破，使得 AI 生成代码的精度达到了70%-90%的可用率，极大地降低了开发难度。无编程背景的人也能借助 AI 工具进行项目开发，进行 bug 修复，使得每个人都有机会成为程序员，迈步进入 AI 编程的时代。

IDE模式+更强的模型能力：人人都是工程师

AI编程学习指南

从学习路径到 AI 编程方法论

克服恐惧

很多人在面对编程时，都有强烈的陌生感甚至恐惧感，这都是源于对编程语言和工具等学习难度的误解。为了克服这种恐惧，最好的方法是抱着了解的心态开始：

1. 观看教程视频： 可以通过一些演示视频，比如豆包MarsCode AI 编程云课堂的课程视频，帮助你理解编程的基本概念和 AI 编程工具的使用方式和技巧。
2. 学习编程语言的基本结构： 比如阅读《 Python 编程从入门到实践》这样的书籍，掌握编程语言的基础构成，而不是一开始就研究学习所有细节。关键在于要了解自己不知道什么，这样就可以了更有针对性地向 AI 求助。

克服学习编程的恐惧

巧用 AI 学习

1. AI 是最好的老师： AI 编程工具可以帮助你解决大部分问题，学习过程中要逐渐培养与AI协作的思维。遇到困难时，清晰地表述自己的问题，把AI当作老师，而不需要过多依赖他人。
2. 了解 AI，驾驭 AI
   • AI 的随机性： 由于 AI 是基于概率生成结果，它可能会给出不同的解决方案或使用不同的编程语言。为了降低这种随机性，你可以明确要求AI使用某种特定的编程语言。
   • AI 的平庸性： AI 倾向于生成比较平庸的结果，但你可以直接提问 AI 有什么可以优化现有代码的框架，甚至要求它参考某种具体的风格，进而指挥 AI 生成更精美的网页效果或更专业的代码。
   • 上下文长度限制： 目前 AI 理解上下文的长度有限，可能无法一次性理解整个项目的所有代码。达到上下文长度限制后，可以继续将相关代码片段提供给 AI 重新提问，帮助它更好地理解项目背景。
   • 系统-思考： 如果 AI 反复修复同一个 bug 无效，可以采用“系统—思考”的方法，即让 AI 先分析原因，提供多个解决方案，并给出每个思考方案的优缺点，这可以帮助你更好地解决问题。

先完成再完美

1. 不要只看教程，立即着手做： 观看一个两个视频后，就可以立即着手实践 AI 编程了。通过复刻老师的项目，你将快速产生成就感，并加深对编程的理解。 即刻实操：从100%复制学习开始
2. 独立完成项目： 在完成基础的复刻后，尝试做自己的项目，解决实际生活或工作中的问题。这不仅可以巩固你的编程知识，还能进一步激发创造力。 花生老师过往的AI编程成果
3. 先做十个“垃圾”出来： 不要追求完美，一开始做一个简单的产品，后期不断迭代总能有不错的结果。在这个过程中，你编写 prompt 的技巧和编程的能力都会大大提高。

别想着一次成功：先完成再完美

好产品是长出来的：不断发布产品和收集反馈

快速发布和持续迭代是产品成长的关键，通过洞察用户反馈，产品可以让用户在实践中不断优化，与共同成长。

以“小猫补光灯”为例，三个月内不断收集小红书姐妹的反馈，前后迭代了十多个版本，每一次的修改都让产品更贴合用户的需求，相当于开发者和用户共同完成了“build in pulic”的过程，产品最终成长为用户量身打造的样子。

不断发布产品和收集反馈

看完花生老师的分享，你是否也充满干劲，准备利用 AI 编程创造更多可能了呢？

点击【豆包 MarsCode 官网】立即体验 AI 编程吧~

相信程序员朋友们都遇到过这个问题：项目的演进过程中，代码往往会不断堆砌，如果缺乏对代码质量的关注，它会不可避免地走向混乱，逐渐演变成逻辑复杂、难以维护的“祖传代码”，想优化它但无从下手~

豆包 MarsCode AI 编程云课堂 「进阶开发实战系列」特邀【字节资深前端姚路行老师】为大家带来代码重构实战课程，帮助大家提升代码质量，提升项目可维护性，让开发过程更加轻松高效~

课前准备

下载并安装豆包 MarsCode

• www.marscode.cn

在官网下载并安装好豆包MarsCode 插件：

克隆项目

本课程使用 AI 以 Next.js 框架生成的一个 todolist 项目

git clone https://github.com/ylx911229/todo-list_back.git

使用“code”命令来启动 Visual Studio Code 并将其打开

cd todo-list_back 
code .

安装依赖

npm i

启动项目

npm run dev

• 项目依赖 Node.js 版本大于18.18.0，启动前确认好本地 Node.js 版本，版本过低可在 Node.js 官网下载安装

本地预览

打开浏览器，访问：http://localhost:3000，运行成功得到如下效果

课程内容

组件拆分

首先我们先让豆包 MarsCode 帮我们创建一个 components 目录，用于存放拆分出的组件，豆包 MarsCode 还贴心的告诉我们需要改 tailwind.config.ts 添加 components 目录，Tailwind CSS 就会扫描目录下的文件，以便应用相应的样式。

Workspace在app目录下创建components目录

接下来让豆包MarsCode 帮我们将项目合理拆分组件

如果由于输出 token 长度限制，拆分的组件没有输出完全的话，可以让豆包MarsCode 继续输出

Workspace 拆分出的组件没有输出完成，请继续输出

最后修改主文件，将主文件改写成对子组件的引入

Workspace 将主文件改写成对子组件的引入

资源抽离

类型声明的抽离，单独文件管理类型更清晰可读，另外，项目当中也会有很多可以多组件，多文件复用的常量，抽离出来统一管理，一处修改，多处受益

类型声明抽离

首先将主文件中的类型声明单独抽离一个文件

Workspace 将主文件中的类型声明单独抽离一个文件

接下来修改项目中所有文件对类型声明的引入方式以及引入路径

 Workspace 修改项目中所有文件对类型声明的引入方式以及引入路径

常量抽离

单独抽离项目中的常量，并修改项目中所有文件对常量的引入方式以及引入路径（输出简单的话，也可以在一条指令中引导豆包MarsCode 完成）

 Workspace 将项目中的常量单独抽离一个文件，并修改项目中所有文件对常量的引入方式以及引入路径

状态管理优化

当项目中一个组件内管理过多的状态时，代码会非常乱，并且可读性很差，我们可以根据状态的不同类型，去抽离独立的自定义 hooks ，让代码更加可读可维护，而当状态管理需要组件层层传递时，更好的做法就是将状态管理提升为全局状态管理，两种都是对状态管理的优化，选择更适合自己项目的方式

自定义hooks

将两个状态管理作为自定义 hooks 单独抽离，并改写主文件对他们的引入

Workspace 将从localStorage加载todos和保存todos到localStorage做为useLoadTodosFromLocalStorage和useSaveTodosFromLocalStorage两个自定义hooks单独抽离，并改写主文件对他们的引入

全局状态管理

将项目中的状态管理改为全局状态管理,主文件以及所有组件通过全局状态获取而不是通过 props 传递

Workspace 将项目中的状态管理改为全局状态管理，主文件以及所有组件通过全局状态获取而不是通过props传递

代码提交

最后我们提交代码时，可以让豆包MarsCode 帮我们总结一下改动，给一个合适的commit message

在本次课程中，我们了解到合理重构代码的思路，以及如何通过豆包 MarsCode 一步步对已有代码进行重构，最终完成项目的代码重构。相信听完课的你都能有所收获并尝试付诸实践，提高自己的代码质量以及开发效率。

点击【豆包 MarsCode 官网】立即体验 AI 编程吧~

“如果你的梦想还没实现，那是因为你的努力还不够完美。” ——写给每个不愿认输的追梦人

亲爱的小伙伴，还记得你第一次下定决心学编程的那一刻吗？

可能是在某个深夜，梦想自己能够打造出一款伟大的产品；

可能是看到身边的同事因为技术实力获得升职加薪；

又或者是AI的出现，让自己对目前的工作轨迹感到迷茫…

每个选择学习编程的人，都在用行动证明：我们都渴望遇见更好的自己。

 新年新气象，我们为你准备了一份特别的新春礼物

为了让2025成为你的突破之年，编程狮准备了一份前所未有的”三重成长礼”。

这不仅仅是会员权益的限时加量升级，更是你成长蜕变的助推器！

开通2年VIP，加赠三重成长礼

现在开通2年VIP，投资798元（相当于每天仅需1个包子的钱），你将获得：

惊喜一：编程狮终身VIP （价值1998元）

有了它，你的学习之路将彻底开挂：

• 免费畅学全站会员好课，课程将不断更新，未来价值更大
• 500+专享题库，巩固编程知识
• 100+在线编译工具，边学边练效率大幅提升
• 课程证书加持，让简历更有竞争力
• 离线缓存学习，上下班路上都是充电时间
• 多端同步，随时随地都能继续学习进度

最重要的是：这一次投资，终身相伴！再也不用担心会员到期了。

惊喜二：AI使用导航年度VIP （价值168元）”

别人用AI coding，我还在手写代码…” 

2025年了，AI也得需要跟的上

现在，加赠AI使用导航年度VIP

让你快速抓住AI趋势，享受AI付费课程免费学（课程持续更新中）

AI编程从入门到精通，让AI真正成为你的得力助手。

下载地址：https://gitschool.cn/download

 

惊喜三：Stream HTTP抓包工具iOS版年度VIP （价值68元）

记得第一次调试接口时的手足无措吗？ 

有了这个专业级HTTP抓包工具的年度VIP权益， 调试不再是噩梦，开发效率直接翻倍！（仅限iOS端可使用）

下载地址：https://apps.apple.com/cn/app/id6449997210

  

特别提醒：额外福利领取攻略

购买成功后，别忘了联系我们可爱的小师妹，领取Stream工具VIP和AI助手VIP哦！小狮妹微信号：w3cschool66（记得夸小师妹可爱，没准还能额外薅到羊毛呢～）

你距离改变，只差这一步

也许你会说： “等等看吧…” “以后再说…” “再考虑考虑…”

但请记住：机会总是留给有准备的人，也留给勇于抓住它的人。

2025年，就让我们一起：

• 告别那个总是羡慕别人的自己
• 告别那个犹豫不决的自己
• 迎接那个正在成长的自己

现在购买，不仅省下1000+元，更重要的是：你离梦想中的自己，又近了一步。

点击立即抢购，手慢无！

寄语：希望若干年后回首，你会感谢此刻做出选择的自己。

注：活动最终解释权归编程狮所有。

v-once 指令用于一次性地渲染元素及其子组件。在初始渲染后，它们将不会再响应数据变化，适用于那些不需要响应数据变化的静态内容。

可以联系：1160712160@qq.com

意思就是说，在
\(P\) 集合取出一点
\(u\) 时，如果
\(P\) 中还有一点
\(v\) 与当前的
\(u\) 点相连，那么下一层递归中我们会取出一次
\(v\)，而在本次递归中也会有一次取出
\(v\) 从而导致计算重复，所以我们进行关键点优化：