前端萌新想问一下，我看公司单个 vue 页面超过了一万行代码，这是什么概念？

[Patrick6]

还有它注释掉的代码比写的还要多
状态管理 vuex 都不用，等等

就在刚刚，新来的前端跟我说他要跑路了，我不会还要面对这个代码直到下一个前端来吧😄

[bojackhorseman]

我的习惯是只要一个东西有两个地方公用，就拆出来。
还好没碰过 1w 行的，接收的狗屎旧项目之前好多文件都是复制粘贴复制粘贴，在此基础上加新功能，也不把冗余代码删除，我真是一遍清理一遍骂娘😡

[ajan]

我写的油猴脚本都 5 千 6 百行了,,,,

[Patrick6]

@zeroDev 是的，我之前只是对接写接口的，现在前后都得我来

[yagamil]

如果的确是业务极为复杂，也只能拆分为不同文件，模块。文件数多也是不可避免。
我个人认为 业务 > 代码优雅；毕竟项目完成不了，拿不到钱，代码再优雅也也是白搭。

况且，哪有项目能够运营几年的呀？ 语言在迭代，技术栈在迭代。

[jones2000]

@xwwsxp 小文件使用还要导入，太麻烦。 最后还不是编译到一起。自己的模块就 1 个大 js 。

[3img]

@VVVYGD 哎呀，我操，这个可以。哈哈..

[bianhui]

一万行怎么了？编辑器打不开了？

[daliusu]

.vue 就容易出现这个问题，tsx 会好不少的，至少能给组件拆的细一点，未来重构简单点

[zcf0508]

可以尝试用我开发的 https://github.com/zcf0508/vue-hook-optimizer 分析一下组件，先把没用到的变量和方法啥的全都删了，把没用的注释也都删了。然后重新梳理代码的逻辑，把能解耦的地方挪出去。

遇到这种代码首先不要怕，重构是一定跑不掉的，但是经过自己手的代码一定要自己能够接受。

[AdminZ]

刚刚在四千多行的屎山拉了近一千行，哈哈

[Patrick6]

@zcf0508 #109 谢谢你，让我看 到了赛博盘丝洞

[SayHelloHi]

报错吗 没报错能跑就行

挣钱的是业务 谁在意代码写得优不优雅

客户签单 说满意 就 OK

[paopjian]

我们现在一个 vue 项目有 20 几个子页面,用 iframe 切换页面,还要用 postmessage 和父页面框通信实现 modal 控制,子页面里用的还是还是 mergeOptions 和 mixin 来掺杂子子页面,vuex 和 vue-router 都没用,真服气了

[crocoBaby]

@jones2000 什么功能能写这么多...

[leroy20317]

@devzhaoyou haha 人能跑呀🙃，不过像这种，把样式拆出去应该能减不少

[zcf0508]

@Patrick6 控制台应该有给出一些建议。我只能帮你到这了

[BarryPan]

当我以为在前司拉的 600 行已经够多了：

[hazardous]

我接手的一个项目也这样的，不过搞明白了重构下其实能少 80%。它的逻辑大概这样：一个任务分两步，第一步 M 种情况，第二步 N 种情况，按正常思维就写 M+N 个分支，然而它写了 MxN 个分支。每个分支里的公共代码还没提出来，而是 copy 了无数次。

[HaroldFinchNYC]

我见过最大的文件是 1600 行，那已经是屎山了

写一万行的人，应该拉出去枪毙

[18xlX5iTe9mdoau0]

我其实怀疑这些项目可能一开始是用那种在线生成的工具做出来的，然后一个水平不够的人维护，导致代码越来越混乱，后面接手的人也不敢动了

[alleluya]

@dfkjgklfdjg 张鑫旭: 我是 css 专家 又不是 js 专家 写个 5000+不过分吧

[alleluya]

@zcf0508 感恩大佬 因为你这个插件 我把手头屎山组件里的代码初步优化了一下 心里舒服很多~

[zcf0508]

@alleluya 能帮到你就好🙈🙈

[jwchen]

又不是不能跑，我以前有个地方，小程序开发，所有的小程序都在一个文件里，每个小程序一到两个开发。。

[ShareDuck]

@roundgis #84 幸好你没被逼疯。

[qwwuyu]

遇到过 10w 行的安卓打飞机 APP,反编译二次开发的,就一个类.

[xiao8276]

我上家公司做医疗的 写病历那块业务逻辑代码 一个.vue 文件一万多行 这还是 拆了之后的 子组件快二十个个 关联了四个 State 两个 mixins 数不清的 utils 方法 data 定义的属性就有差不到两百多个 后面还在一直堆一直堆 .....

[skrlst]

@Patrick6 #38 是故意的还是不小心？

[AmaQuinton]

@Jinnrry #58 oracle 吧，之前见过，业务逻辑是写在存储过程里面的

[diyisoft]

总觉得别人写的代码是垃圾，是不是你离职了，也有新人会这样的态度看你的代码呢。
造成这样的情况可能有一定的历史原因，你有能力就改善它，没能力就接着写到 2 万行！

[wpzz]

@wu67 “明明一个文件写个 4 到 5 百行不过分, 偏要拆成 7 个”

代码拆分没有坏处，单一职责。如 constant 、page 、services 、hooks

可能刚开始代码量少，维护久了之后不拆分，也是如题所示。

一开始的规范拆分，可以减少后续大文件拆分的理解“成本”。

[suyuyu]

写代码的本质不就是堆屎山吗，我想我也是

[deef]

行数少和你的工资有关系吗？没关系管他干嘛呢

[hqmJoker]

当年有幸自己拉了一坨，人手不够+需求不明确+boss 催促 = 疯狂试错迭代 = 屎山代码。

一开始还好好的，接到需求就是一张图片（没错，就是一张图片，神他喵的知道要干啥），说要按这个东西搞一个平板工位机的软件，先出个界面给大 boss 看。
然后就开始基于公司当时的技术栈，给整出来了，50 行代码左右，基本没啥功能，只有界面和一些基本交互。

出版领导确认之后感觉效果还不错，就让继续开发。后面继续推进，人手不够，自己去对接客户（偶尔）、大领导（产品出身，对产品这一块比较熟悉）、二把手领导（对业务非常熟悉，技术也还行）、产品（人手不够，偶尔过来看一下页面，共同梳理大部分的业务和功能），大部分时间我和产品定下需求和页面功能交互，产品没空就自己理解或问客户或问二把手，完事一个版本还得到大老板那边让他确认一下，开启疯狂迭代开发

又要适配硬件（平板机尺寸不一样），又得统一公司 ui 风格（用于项目原因，没办法和其他项目用同一个 ui 库，只能自己实现相似的），还得理业务功能流程、交互（偶尔还得兼顾一下公司的其他项目，因为刚好那时候刚开始疫情，公司架构重组，1/3 开发跑的跑，溜的溜），压力逐渐增大（中间版本迭代时，大老板和二把手有时候直接坐我工位旁边开始讨论功能交互，因为一个产品以产品视角，一个以业务视角去看，有些功能交互意见不一致，就会发生争执，然后开发是在我电脑本地的，要打包到工位机还比较麻烦，一般都是直接拿凳子坐过来讨论了。每次看他们吵起来我都瑟瑟发抖，我一个小开发还能怎么搞，只能按你们说的做，你们意见都不统一咋搞啊）

成果就是这个项目的代码从 50 行-> 200 行 -> 500 行 -> 1000 行 -> 1700+行，迭代了几个版本之后，终于在 1700+行的时候各位领导和客户都比较满意了

从 0 到 1 直接拉了一坨，其实很多地方都可以优化的，就是需求不明确、然后又时间紧，一切都按出效果快的来，到最后都心力憔悴了

后面这个项目就先这样用了一段时间，部门领导（三把手）说目前这个项目就先这样了，公司其他产品的事比较急（因为之前走的人多了，很多项目要迁移跟进），先干其他的，后面有时间再继续升级迭代这个项目。一想到后面还要继续整这个项目，我感觉都要恶心、呕吐了。然后 3 个多月之后就跑路了，因为心血都燃烧殆尽了，又开始奔赴下一坨屎

[ebushicao]

就说那个页面需不需要你维护，不需要你维护就不用操心，需要你维护就看你闲不闲了，闲的话可以慢慢拆分重构。

[Patrick6]

@hqmJoker #134 好像我们公司的架构啊，也是大领导二把手都懂技术产品，部门组长就架构师这样

[jones2000]

@crocoBaby 编译器 https://github.com/jones2000/HQChart/blob/master/webhqchart.demo/jscommon/umychart.complier.js

[GenericT]

我最多写过单文件 7000 行，在浏览器里 polyfill 一个 posix 环境出来，细细碎碎的东西，又因为是 webworker 当时不知道拆开了怎么 bundle 只能写一个文件里

[tog]

我觉得前端超过 500 行代码就很乱了， 我维护过 1.2w+ 的 vue 文件
当时我想，如果我是组长， 我肯定开了这个 b

[Jtyczc]

不是你写的就行，只要不影响生产环境，不要动他，万一哪天上级抽了风要改回去，你取消注释就可以了。

[shilianmlxg]

今天新项目，我说 eltable 需要二次封装一个组件，抽离复用，其他 el 组件也需要封装下，减少代码里。同事说，没有封装的必要，说我性能也没有多少优化。我想说，要是一个需求有调整，你是要改百多个页面吗，

[TimG]

见过几万行的 css ，几十个页面共用一个 css 文件，改样式如履薄冰。事已至此，为了让屎山稳定，不再修改旧样式，直接糊上新样式，同时为了便于后来人拉屎，小心翼翼扩增选择器权重，一生效就收手。事实上的--Cascading Style Shit

[rossroma]

试着对这个页面进行重构，如果成功了，你积累了宝贵的重构技巧和经验，并且是你下份工作简历上浓墨重彩的一笔；如果失败了，就像上面所说的，代码和你有一个能跑就行。

[leegradyllljjjj]

太年轻了，到我这个年纪就会发现早点下班，工资到手才是目标， 其他都市浮云

[jamesmi]

有注释至少还能读懂，不要慌

[Histo]

run

[mark2025]

当年写公积金贷款申请页面，js 主函数就 8k 行……

[yxb9511]

给领导反馈一下，然后着手重构，工作这不就来了嘛

[ooo4]

https://imgur.com/qKin0ES.png

[vfs]

@hellodigua 个人建议， 在这种事情上千万不要为了展示自己的才华而弄懂它， 要装傻充愣。 除非这个项目是你们公司的核心项目， 要不然， 你就和这段代码捆绑了， 以后永远是你维护这代码。。。想想就感觉幸福

[burymme11]

额，一群 CV 仔/CURD boy 在担心代码质量会影响性能，会影响未来重构.........

[wanniwa]

@Patrick6 #103 你就当时应该说你完全不会前端搞不懂，别接这个烂摊子，让离职的那个前端，等下一个前端来了交接完再走

[Patrick6]

@wanniwa #152 是的，不过我后面肯定不会再接了，就交给专业前端重构吧

[ZoR]

呵 刚工作那会儿整天还想着怎么优化，现在呵呵又不是不能用，

[wangtian2020]

vuex 屁用没有不如 localstorage 直接梭。你应该庆幸这个页面是用 vue 写的，如果是用 jQuery 那行数翻五倍

[ericgui]

@hqmJoker 我目前有点抑郁，也是差不多的原因

[hqmJoker]

@ericgui 嗯嗯，负重前行，确实有点累，每天一堆压力，不想上班，一想到这事就想吐、头晕、缺氧，但是成长还是有的，最起码让我知道，这世界就是草台班子，连我都能独立干活了，还有啥我不能干的。

然后开启爱咋咋滴模式，最差不就不干了，反正人和代码有一个能跑就行:)