实习第二周:AI搭档、内存战争与iframe魔法

120 阅读4分钟

大家好,是我,那位每天都在和新技术搏斗的前端实习生FogLetter。经历了首周的高强度学习后,第二周的实习生活又有了全新的剧情发展——从AI辅助开发到内存不足的崩溃,这一周的故事同样精彩!

Day 8:与AI的完美协作

周一早上,在第一周未能启动的项目终于在我们的不懈努力下成功运行!不得不说,在AI的协助下阅读和调试代码的效率大幅提升。以往需要花费大量时间阅读源码和理解项目结构的工作,现在可以通过精准的提问让AI快速给出关键信息。

下午继续封装Figma设计稿模块,对设计稿转码有了更深的理解。我逐渐摆脱了完全依赖MCP整体转码的方式,学会了结合开发者工具,复制选择器进行局部代码校正。虽然工作内容相对单调重复,但对AI辅助开发全流程的理解更加深入了。

心得:AI不是要取代开发者,而是要成为我们的最佳搭档,解放我们阅读源码的时间,让我们更专注于核心逻辑开发。

Day 9:伪元素的z-index之谜

周二继续切Figma设计稿,基本完成了所有页面的布局,只剩下一些微调工作。今天遇到了一个有趣的技术问题:伪元素到底是否影响z-index?

经过一番研究和实验,终于搞清楚了这个问题:伪元素确实参与z-index堆叠上下文,但这个话题远比想象中复杂,值得单独写一篇文章来讨论(掘友们感兴趣吗?)。

下班前还发现了一个坑:原本想直接复用老项目的客户案例组件,结果发现老项目限制了宽高,无法满足新需求。只能重新模仿封装一个新的组件——看来明天的任务清单又多了一项。

Day 10:多仓库依赖的冒险

周三上午申请开放多个仓库的依赖权限,并整理了之前写的代码。下午启动了后台admin项目,将前端项目commit上去后,开始尝试将前端模块导入到后台项目中,使其成为可二次配置的模块。

这里遇到了挑战:尝试用AI生成代码,但添加模块后无法实时更新预览。猜测是prompt描述不够清晰,导致AI没有完全理解需求。决定明天深入研究一下模块封装的源码,再调整prompt策略。

感悟:AI虽然强大,但精准的prompt才是关键。就像与人类沟通一样,问题越清晰,得到的答案越有用。

Day 11:iframe联调与内存战争

周四成功完成了admin后台模块的添加逻辑!我们通过iframe链接前台项目来实现预览效果,这个方案既巧妙又实用。

不过检查时发现样式存在一些问题,需要后续处理。更让人头疼的是:需要同时启动两个项目进行联调,而公司配发的Mac运存实在太小了(库克出来背锅!)。前台项目启动后内存占用极高,经常导致项目莫名其妙崩溃需要重新启动。

这一天基本上就是在「启动-崩溃-重启」的循环中度过的,堪称一场艰苦的「内存战争」。

Day 12:事假休息

周五请了事假,给大脑放了个假~(合理的休息也是工作的一部分哦!)

本周总结与收获

第二周的实习让我对以下几个方面有了更深的理解:

  1. AI辅助开发的最佳实践:学会了如何与AI高效协作,让它成为提升开发效率的利器而非玩具

  2. 组件复用的艺术:不是所有老组件都能直接复用,需要根据实际需求权衡修改还是重写

  3. 多项目联调的挑战:通过iframe实现预览是个巧妙的方案,但对硬件要求较高

  4. 内存管理的重要性:在资源有限的环境下,需要更加注重性能优化

最大的体会是:在工作中遇到问题很正常,关键是要有解决问题的思路和方法。无论是技术难题还是协作问题,都需要我们保持耐心和创造力。

另外,硬件限制虽然让人头疼,但也促使我们思考如何优化项目性能——这何尝不是一种成长的契机呢?


互动话题:大家在使用AI辅助开发时有什么独门技巧吗?或者有没有被硬件限制坑过的经历?在评论区分享你的故事吧!