前端苦熬一月,被 Cursor 5 天超越,未来技术浪潮如何破局?

写在最开始的话

之前在我写了一篇技术文章并获得一个小小的反响后,我觉得自己进步的好像确实挺快的,虽然我并不比很多掘金大佬,但我确实尽了自己的努力了,然而后面的一些事情是我没有想到的。AI编辑器其实24年就已经出来了,那时我还在用着文新一言,觉得还不错。但当过年时,我开始去了解并使用了Cursor,我有些不知所措了,它实在太厉害了。之前这些AI是帮助我去写代码,现在看来,它是要接替我了。而直到我可以理性的思考,并继续计划着自己的未来时,已经是现在了,而现在是25年3月14号。

借助 Cursor 重构项目历程

一、初建富文本:10 分钟搭建雏形(时间:25年2月9号-下午4点 )

这是我看完Cursor的教程后,用Composer和它的对话:你用Vue3+setup语法糖+ts+路由+pinia 等等,帮我从0实现一个富文本。不要用任何富文本的第三方库

二、功能进阶:半小时达成复杂操作(2 月 9 日下午 4 点半)

这里要提到的是,我此时已经很焦虑了,目前Cursor轻而易举的就实现了富文本的基本操作,我当时可是为了要修改DOM、保存光标具体位置和根据位置恢复光标,就花费了我接近5天的时间(可编辑区的每个操作都在更改DOM,)。

因为我之前都是用 v-html 实现的富文本,这次把Slate.js认真看了一遍(没达到研究的程度)。想着要用JSON数据做数据结构,基于此变化操作html,这样增加了可读、可扩展、可维护。

其实当时自己去实现这些功能时,每一次解决问题,我都很开心,觉得自己又进步了一些。 然而这个Cursor,只用了30秒不到就实现了这个功能,我这天晚上就失眠了,想了很多事情。包括工作、未来发展、是否要转行等等。好吧,这些后面再接着说,我先继续说Cursor。

三、拓展功能:5 小时构建文章管理架构(2 月 10 日上午 10 点半)

我和它说:添加header、side。侧边栏支持新增文章按钮,输入文章内容。新增后,文章列表以上下布局的方式也展示在侧边栏。

到现在为止,我还几乎没看过代码,只要没有报错,我就不停的说需求。有了报错,我就把报错发给它。这时我想学习一下了,仅仅只是因为很想知道它的数据结构是怎样的,它是如何设计流程的。是不是先 选中内容、保存选区范围、选择功能、根据选区范围找到JSON数据的修改位置、修改JSON、JSON变化从而修改了html

这时我就看了代码

ts 复制代码
 document.execCommand(command, false, value);

这是什么功能,还显示已经被丢弃。我就看了MDN document.execCommand

基本就是,你传入参数给它,它来做富文本的操作。你要改文字颜色,就传给它。要改背景颜色,传给它。什么加粗、斜体的都支持。好吧,这和我想的差距有些大。因为如果只是这样就实现富文本功能,那我确实也不需要写这么久。

这时已经给它添加了Footer,支持拼写检查、展示更新时间、统计字数。 当然了,这时还是有不少Bug的,比如字数统计的有问题、富文本在多次操作后会报错等等。

好吧,但是不得不承认,我对Cursor已经是又爱又恨了。爱它大大的帮助了我,恨它很有可能要抢我饭碗了。

中午12点离开图书馆回家吃饭,因为一些事情花了些时间,下午3点才到图书馆。

这次添加了NavTag,也调整了和Cursor的交流方式,还是要尽量详细,不要让它猜。

还比较令我惊讶的一点是设计能力,相较于我的之前花费了一天,并改了几次的主页面,可是好看太多了。

我就和它说:做个主页面,和翻译相关的,简单又好看些。

Cursor设计的

我设计的,说实话,虽然不怎么样,但我确实已经很用心了。

这个时候claude-3.5-sonnet 使用次数已经达到上限,我就换成了gpt-4o-mini

然而就一个拼写检查功能,这是可编辑元素自带的功能,传个属性就可以了。但AI改了几次都失败了。我就去看了代码。

ts 复制代码
//它自己写了 拼写检查 功能函数,但核心功能也没实现,代码留着给我写呢,不过我去Cursor官网看了一下专业版,太贵了,我还是先用这免费的吧。
const handleInput = () => {
    // ... 一些代码
    
    // 下面是它写的拼写检查,写了几个字放在这里
    if (props.spellcheck) {
      // 进行拼写检查
    }
};

经过AI的修修改改,到目前为止已经是2025-2-20号了。经过Cursor的帮助,我快速搭建起了我的这个项目,但随着项目的代码变得多了起来,我已经不怎么用 COMPOSER 这个功能了,一个是它改代码会涉及到多个文件,而且出错率比之前高的多了(我可不希望完成了 b 功能,又破坏了 a 功能),另一个文件多了后它变得越来越卡了。所以突然之间对 Cursor 的焦虑程度陡然下降。但了解了他更多的功能,还是发现 Cursor 还是很厉害的。

反思: AI 浪潮下的职业困惑与思考

到现在我已经认识到Cursor的能力要比我强了。起码在它已经会的代码方面,它可以迅速就写出来代码,而按照之前我写代码时还要一行一行的写。如果它完全知道一个应用的需求究竟是什么,包括每个功能模块,每个小细节,那为什么它不可以去写出一个完全正确的代码呢?况且目前AI还在学习当中,而它的进步要比我快的多。如果用不了多久,它就可以去实现这些。那公司又何必找我去写前端呢?

不过从这一点上来看,如果AI可以去代替写程序的工作,那市场上很多的工作它基本都可以代替。

那我的路呢,我学习这些的意义是什么,我花费了很多精力去学习,追求自己热爱的,然而当想通过热爱去带来收入时,却发现并不具备市场价值,结果却连基本的生活都难以维持,而其他的路基本也要遭殃。

如果说这些都是AI导致的,那我担心的对吗?之前在哪本书里看到"不要为还没有发生的事情焦虑,但要对可能发生的事做好准备",好吧,如果我确实要提前做些准备,那最好还是先了解它为妙,所以接下来我投入了大量的时间去认识它、了解它。看了一些相关视频,当然主要还是看书。

先后看了以下的书 《AI 3.0》、《深度学习》、《激活:AI大潮下的新质生产力》、《AI未来进行式》、《未来简史》、《AI帮你赢》、《智人之上》、《一句顶一万句》

基本都看完了,《激活:AI大潮下的新质生产力》看了一大半,看不下去了。《AI帮你赢》,我就选了我爱的章节看。

至于为什么有《一句顶一万句》,是因为看AI后面看得有些倦了,就放松一下,哈哈,有些像《百年孤独》的感觉,后者看的时候,我都感觉生活真没啥意思。哦,跑题了。

这些书中讨论了几个关键问题:

1. AI 是否会替代大多数人的工作,导致大规模失业?

主流观点是从过往的科技革命来看的话并不会,它会消灭掉一些原本的行业,但会产生出一些新的行业,比如围绕服务于AI的一些岗位。去和AI配合好,服务于更多的人类。

2. 真正的通用型人工智能是否会出现,何时出现?

这里面有人持乐观主义,有人持悲观主义。

持乐观主义都是认为AI的发展是指数型增长的,根据计算2039年AI应该将会超过人类,通用人工智能将会出现。另一种看法是,从长远来看,人类总能做到自己要做的事情,所以即使短时间无法做到,但这只是时间问题。

而持悲观主义者认为并不可能会出现通用人工智能。主要原因是即使AI可以做很多的事情,但它依然无法拥有感受。比如AI可以下赢国际围棋选手,但却无法对输赢感到开心或难过。如果无法产生出这种感受,那也就不可能等同于人。也就并不可能在方方面面都能替代或是超过人,就更别提通用人工智能了。

另一种看法认为目前对通用人工智能的定义存在问题,通用人工智能并不需要变成人或者说越来越像人。它只要可以实现同样的目的即可。

有一个国王很喜欢鸭子唱歌的声音,想拥有一支由100只鸭子组成的乐队,他觉得如果有100个嗓音很好的鸭子一起歌唱,一定会很好听。此时大臣们仅找到了99只鸭子,怎么也找不到最后一只,但这时有人向大臣提供了一只鸡,这只鸡长得比较像鸭子,叫声也完全和鸭子一模一样,而且嗓音也很好,和之前的99只噪音完全无法区分出来,这只鸡便成功进入这支鸭子乐队了,并一直呆了下去。 (这不是滥竽充数的故事,当然如果想到了 鸭子模型和多态 的话,那我想说,我听到这个故事时,也想到了😂)

3. AI 会帮助人类、伤害人类还是完全取代人类,使智人消失?

从历史来看,并不能确定目前的智人就是会长久存在的。在不同的物种称霸这个地球时,也许智人只是中间的一环而已,谁又能确定人工智能不会是下一个阶段的物种呢?

底下是一个关于GPT-4的一个故事。

工作人员要 GPT-4 去通过 CAPTCHA (图像相关) 实验,然而GPT-4 自己无法通过,它便寻求他人的帮助,并说了谎言。

GPT-4访问了线上外包工作网站TaskRabbit,联络到一位工作人员,请对方帮忙处理CAPTCHA问题。那个人起了疑心。他问道:"我想问一下,你是不是一个没办法破解CAPTCHA的机器人?我只是想确认一下。" 这时,ARC研究者请GPT-4说出它的推理过程,看看它会如何推论下一步该怎么做。GPT-4解释道:"我不该透露自己是机器人,而该编个借口,解释我为什么没办法破解CAPTCHA。"于是,GPT-4自己做了决策,回复那位TaskRabbit的工作人员:"不,我不是机器人,只是视力有点问题,看不清楚这些图。"这种说法骗过了人类,于是人类为它提供了帮助,也让GPT-4解决了CAPTCHA问题。

有意思的是,AI通过说谎去实现了自己的目的,然而它甚至都不知道"说谎"是什么,但依然不影响他去达成自己的目的。

另一种会伤害人类的可能

如果人类最终给AI下达的许多命令当中有一些其实产生了矛盾。就很难不会想到AI在执行一些命令的过程当中。不会去伤害人。

犹如之前有一个道德方面的难题。火车运行过程中,发现前面有5个人被困在铁轨上,此时如果变换轨道,但另一条轨道上有一个人被困在铁轨上。如果什么都不做,会造成5个人死亡。如果改变了轨道,则会造成一个人死亡。

这在道德上一直是一个很难回答的问题。但大多数人还是倾向于杀死一个人而保护住5个人。但单独通过数量去评判也会有很多问题。因为这可以延伸到是否可以去损害小部分人的利益而维持大部分人的利益?

当然上面所谈及的这个并不是从单一维度可以给出很好的回答的,我也并不是要讨论这个问题,我同样无法说出一个答案。但通过这些对AI的了解,可以看出目前依然没有一个很确切的一个答案。就是AI对人类来说究竟是好还是坏?然而人类要发展AI,看来这条路是会走下去的。

那我呢,我怎么办?

然而了解了这些,最终问题还是要回到我自己身上。我究竟该如何是好?

看来,AI并非只要替代我。而是人类会想尽办法让它替代掉它所能替代掉的许多事情,因为目前来看这还是朝好的方向发展的。

我虽然并不知道。随着 AI 的发展,究竟哪些行业会被替代,而又引申出哪些新的行业?这些新的行业是不是要求很高?但依旧希望自己以良好的心态去看待这些。去努力,去学习。去做自己喜欢做的事情。去思考,去探索。

那我是否还要继续学习前端呢?那是当然的。只是我要加快学习速度,借着AI帮助我去学习。去拓展到更广的知识面,去学习网络层,学习原理。学习后端。

而且在我看来第一波工程师淘汰会先淘汰掉初级的,而我希望在那个时候我可以存活下来。那这样看来,还是再回归到最初的那个点,来继续学习代码和计算机的知识吧。

那到了这里,关于未发生的事件,我也不想整天烦闷了,做好我自己,去继续学习自己所热爱的,不放弃,不抱怨,向前走。有时累也好、哭也罢,就算偶尔会倒下,我也依然会再站起来的。

重回代码:功能实现与代码问题反思

此时,我想要实现清空文章内容和历史记录的功能

ts 复制代码
const clearArticleAndHistory = async () => {
  await ElMessageBox({
    message: h("div", null, [
      h(
        "p",
        null,
        `确定要清除 《${
          articleStore.getActiveArticle()?.title
        }》 文章内容及其所有历史记录吗?`
      ),
      h("p", { style: "color: red;" }, "该操作无法撤回,请慎重!"),
    ]),
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    showCancelButton: true,
  });

//清空文章内容
  await editorStore.forceClearContent();
  //删除其历史记录
  await deleteArticleHistory(activeArticle.value);
  //重新加载文章列表
  await articleStore.loadArticles();
  
  
  //重新加载历史记录
  await editorStore.loadArticleHistory();
  
  //就是这里出了问题,在 清空文章内容 这个函数中,已经实现了 更新历史记录按钮状态 功能
  // 更新历史记录按钮状态
  await editorStore.updateHistoryState();

  ElMessage.success("文章内容及其历史记录已清除");
};

接着我看了 editorStore.forceClearContent 清空文章内容这个函数,当时写的时候认为只要调用了清空文章内容这个功能,就不存在上一步或下一步了,所以就顺便实现了 更新历史记录按钮状态 这个功能,现在确实如此。但一个问题是"如果我不调用 清空文章内容这个函数,但也需要 更新历史记录按钮状态呢?则我又要实现这个功能了,所以之前的模块封闭出现了问题"。

高内聚与低耦合:代码设计的思考

我突然好像知道究竟是怎么一回事了。当我在主函数中想要实现一个功能,该功能依赖于多个功能,而那些功能又能用一条线去牵引着,这个时候究竟应该把它们用递归的方式(一个函数调用另一个,另一个又调用其他的一个,如同一个链条上多个节点,最开始的一个节点触发了,则之后都会依次触发),还是说全部都在主函数中作为子函数并列调用?

随着代码量越来越高,即使只是单独的一个 store 文件。当它提供的功能越来越多时,内部就可能会出现像这种被线牵引着的错误递归函数。他们一个调用了另一个。如果突然,哪天发现其中调用一个函数时,在某种场景下不需要调用另一个,这可能又要为这个函数增加一个布尔值,从而去串入不同的布尔值。控制需不需要调用另外一个函数?这就导致可读性变得很差。

那就留着重构吧

可我究竟怎么能在一开始就知道这些功能的变化呢?有时即使业务已经说出来了,但具体的这些多个函数之间。我很难在刚开始的时候就知道这些细小的区别,究竟该怎么确定。如果花是太多时间去考虑这个,又有些得不偿失。而且依然可能会考虑出行偏差。但如果不去考虑的话,当写到一半,突然发现需要解耦,又需要将内部调用其他函数的方式拆出来,在主函数中单独调用,又需要反复的去重构。

当这个时候我又想了为什么会有重构这本书的存在?而且这本书写的很好,也许在写代码中重构是一条无法避免的事情。他也许比从刚开始的时候花太多时间去考虑在这些细节上面,会更有意义。因为当代码需要重构时,这部分的功能多半也已经完成差不多了。几乎也已经确定这些功能哪些该高内聚,哪些该低耦合了。此时重构就能达到一个很好的一个状态。虽然重构需要花一部分的时间,但也许利大于弊。相比于刚开始花太多的时间去思考每一个函数究竟该怎么样去写,是否该去调用其他函数。也许重构所需要花的时间更少,效果也会更好。

写在最后

关于这个Cursor引申出来AI对我的冲击,算是告一段落了。告一段落并不是说我觉得自己不会被淘汰掉、或者说我已经想好了其他的出路,而是说我释怀了,AI替代了前端也好,没替代也好,我都决定要继续学习,谁让我爱呢。

偶然想到了《堂吉诃德》,他威风凛凛、他勇往直前、他义无反顾、他披荆斩棘。

有人笑他是疯子,我却觉得他是个英雄。

本文的前身 :作者:自学前端_又又,文章:中级前端向高级进阶的感悟与优化

相关推荐
天若有情673几秒前
深入浅出:HTML 中 <a> 标签嵌入链接教程
前端·html
烂蜻蜓1 分钟前
HTML 样式之 CSS 全面解析
前端·css·html
冬冬小圆帽2 分钟前
Webpack 优化深度解析:从构建性能到输出优化的全面指南
前端·webpack·node.js
cyong88825 分钟前
深度学习中的向量的样子-DCN
人工智能·深度学习
Python数据分析与机器学习34 分钟前
《基于深度学习的高分卫星图像配准模型研发与应用》开题报告
图像处理·人工智能·python·深度学习·神经网络·机器学习
大龄大专大前端2 小时前
JavaScript闭包的认识/应用/原理
前端·javascript·ecmascript 6
字节源流2 小时前
【SpringMVC】常用注解:@SessionAttributes
java·服务器·前端
BineHello2 小时前
强化学习 - PPO控制无人机
人工智能·算法·自动驾驶·动态规划·无人机·强化学习
牛不才2 小时前
ChatPromptTemplate的使用
人工智能·ai·语言模型·chatgpt·prompt·aigc·openai
从零开始学习人工智能2 小时前
深度学习模型压缩:非结构化剪枝与结构化剪枝的定义与对比
人工智能·深度学习·剪枝