V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Patrick6
V2EX  ›  Vue.js

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

  •  
  •   Patrick6 ·
    patrick12138 · 257 天前 · 19031 次点击
    这是一个创建于 257 天前的主题,其中的信息可能已经有所发展或是发生改变。
    第 1 条附言  ·  257 天前
    还有它注释掉的代码比写的还要多
    状态管理 vuex 都不用,等等
    第 2 条附言  ·  257 天前
    就在刚刚,新来的前端跟我说他要跑路了,我不会还要面对这个代码直到下一个前端来吧😄
    157 条回复    2024-04-16 17:29:44 +08:00
    1  2  
    bojackhorseman
        101
    bojackhorseman  
       257 天前 via iPhone
    我的习惯是只要一个东西有两个地方公用,就拆出来。
    还好没碰过 1w 行的,接收的狗屎旧项目之前好多文件都是复制粘贴复制粘贴,在此基础上加新功能,也不把冗余代码删除,我真是一遍清理一遍骂娘😡
    ajan
        102
    ajan  
       257 天前
    我写的油猴脚本都 5 千 6 百行了,,,,
    Patrick6
        103
    Patrick6  
    OP
       257 天前 via Android
    @zeroDev 是的,我之前只是对接写接口的,现在前后都得我来
    yagamil
        104
    yagamil  
       257 天前
    如果的确是业务极为复杂,也只能拆分为不同文件,模块。文件数多也是不可避免。
    我个人认为 业务 > 代码优雅;毕竟项目完成不了,拿不到钱,代码再优雅也也是白搭。

    况且,哪有项目能够运营几年的呀? 语言在迭代,技术栈在迭代。
    jones2000
        105
    jones2000  
       257 天前
    @xwwsxp 小文件使用还要导入,太麻烦。 最后还不是编译到一起。自己的模块就 1 个大 js 。
    3img
        106
    3img  
       257 天前
    @VVVYGD 哎呀,我操,这个可以。哈哈..
    bianhui
        107
    bianhui  
       257 天前
    一万行怎么了?编辑器打不开了?
    daliusu
        108
    daliusu  
       257 天前
    .vue 就容易出现这个问题,tsx 会好不少的,至少能给组件拆的细一点,未来重构简单点
    zcf0508
        109
    zcf0508  
       257 天前
    可以尝试用我开发的 https://github.com/zcf0508/vue-hook-optimizer 分析一下组件,先把没用到的变量和方法啥的全都删了,把没用的注释也都删了。然后重新梳理代码的逻辑,把能解耦的地方挪出去。

    遇到这种代码首先不要怕,重构是一定跑不掉的,但是经过自己手的代码一定要自己能够接受。
    AdminZ
        110
    AdminZ  
       257 天前
    刚刚在四千多行的屎山拉了近一千行,哈哈
    Patrick6
        111
    Patrick6  
    OP
       257 天前   ❤️ 3
    @zcf0508 #109 谢谢你,让我看 到了赛博盘丝洞
    SayHelloHi
        112
    SayHelloHi  
       257 天前
    报错吗 没报错能跑就行

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

    客户签单 说满意 就 OK
    paopjian
        113
    paopjian  
       257 天前
    我们现在一个 vue 项目有 20 几个子页面,用 iframe 切换页面,还要用 postmessage 和父页面框通信实现 modal 控制,子页面里用的还是还是 mergeOptions 和 mixin 来掺杂子子页面,vuex 和 vue-router 都没用,真服气了
    crocoBaby
        114
    crocoBaby  
       257 天前
    @jones2000 什么功能能写这么多...
    leroy20317
        115
    leroy20317  
       257 天前
    @devzhaoyou haha 人能跑呀🙃,不过像这种,把样式拆出去应该能减不少
    zcf0508
        116
    zcf0508  
       257 天前
    @Patrick6 控制台应该有给出一些建议。我只能帮你到这了
    BarryPan
        117
    BarryPan  
       257 天前
    当我以为在前司拉的 600 行已经够多了:
    hazardous
        118
    hazardous  
       257 天前
    我接手的一个项目也这样的,不过搞明白了重构下其实能少 80%。它的逻辑大概这样:一个任务分两步,第一步 M 种情况,第二步 N 种情况,按正常思维就写 M+N 个分支,然而它写了 MxN 个分支。每个分支里的公共代码还没提出来,而是 copy 了无数次。
    HaroldFinchNYC
        119
    HaroldFinchNYC  
       257 天前
    我见过最大的文件是 1600 行,那已经是屎山了

    写一万行的人,应该拉出去枪毙
    dsgdsfh
        120
    dsgdsfh  
       257 天前
    我其实怀疑这些项目可能一开始是用那种在线生成的工具做出来的,然后一个水平不够的人维护,导致代码越来越混乱,后面接手的人也不敢动了
    alleluya
        121
    alleluya  
       257 天前
    @dfkjgklfdjg 张鑫旭: 我是 css 专家 又不是 js 专家 写个 5000+不过分吧
    alleluya
        122
    alleluya  
       257 天前   ❤️ 1
    @zcf0508 感恩大佬 因为你这个插件 我把手头屎山组件里的代码初步优化了一下 心里舒服很多~
    zcf0508
        123
    zcf0508  
       257 天前 via Android
    @alleluya 能帮到你就好🙈🙈
    jwchen
        124
    jwchen  
       257 天前
    又不是不能跑,我以前有个地方,小程序开发,所有的小程序都在一个文件里,每个小程序一到两个开发。。
    ShareDuck
        125
    ShareDuck  
       257 天前
    @roundgis #84 幸好你没被逼疯。
    qwwuyu
        126
    qwwuyu  
       257 天前
    遇到过 10w 行的安卓打飞机 APP,反编译二次开发的,就一个类.
    xiao8276
        127
    xiao8276  
       257 天前
    我上家公司做医疗的 写病历那块业务逻辑代码 一个.vue 文件一万多行 这还是 拆了之后的 子组件快二十个个 关联了四个 State 两个 mixins 数不清的 utils 方法 data 定义的属性就有差不到两百多个 后面还在一直堆一直堆 .....
    skrlst
        128
    skrlst  
       257 天前
    @Patrick6 #38 是故意的还是不小心?
    AmaQuinton
        129
    AmaQuinton  
       257 天前
    @Jinnrry #58 oracle 吧,之前见过,业务逻辑是写在存储过程里面的
    diyisoft
        130
    diyisoft  
       257 天前
    总觉得别人写的代码是垃圾,是不是你离职了,也有新人会这样的态度看你的代码呢。
    造成这样的情况可能有一定的历史原因,你有能力就改善它,没能力就接着写到 2 万行!
    wpzz
        131
    wpzz  
       257 天前
    @wu67 “明明一个文件写个 4 到 5 百行不过分, 偏要拆成 7 个”

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

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

    一开始的规范拆分,可以减少后续大文件拆分的理解“成本”。
    suyuyu
        132
    suyuyu  
       257 天前
    写代码的本质不就是堆屎山吗,我想我也是
    deef
        133
    deef  
       257 天前
    行数少和你的工资有关系吗?没关系管他干嘛呢
    hqmJoker
        134
    hqmJoker  
       257 天前   ❤️ 2
    当年有幸自己拉了一坨,人手不够+需求不明确+boss 催促 = 疯狂试错迭代 = 屎山代码。

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

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

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

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

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

    后面这个项目就先这样用了一段时间,部门领导(三把手)说目前这个项目就先这样了,公司其他产品的事比较急(因为之前走的人多了,很多项目要迁移跟进),先干其他的,后面有时间再继续升级迭代这个项目。一想到后面还要继续整这个项目,我感觉都要恶心、呕吐了。然后 3 个多月之后就跑路了,因为心血都燃烧殆尽了,又开始奔赴下一坨屎
    ebushicao
        135
    ebushicao  
       257 天前
    就说那个页面需不需要你维护,不需要你维护就不用操心,需要你维护就看你闲不闲了,闲的话可以慢慢拆分重构。
    Patrick6
        136
    Patrick6  
    OP
       257 天前
    @hqmJoker #134 好像我们公司的架构啊,也是大领导二把手都懂技术产品,部门组长就架构师这样
    GenericT
        138
    GenericT  
       257 天前
    我最多写过单文件 7000 行,在浏览器里 polyfill 一个 posix 环境出来,细细碎碎的东西,又因为是 webworker 当时不知道拆开了怎么 bundle 只能写一个文件里
    tog
        139
    tog  
       257 天前
    我觉得前端超过 500 行代码就很乱了, 我维护过 1.2w+ 的 vue 文件
    当时我想,如果我是组长, 我肯定开了这个 b
    Jtyczc
        140
    Jtyczc  
       257 天前
    不是你写的就行,只要不影响生产环境,不要动他,万一哪天上级抽了风要改回去,你取消注释就可以了。
    shilianmlxg
        141
    shilianmlxg  
       257 天前 via iPhone
    今天新项目,我说 eltable 需要二次封装一个组件,抽离复用,其他 el 组件也需要封装下,减少代码里。同事说,没有封装的必要,说我性能也没有多少优化。我想说,要是一个需求有调整,你是要改百多个页面吗,
    TimG
        142
    TimG  
       257 天前 via Android
    见过几万行的 css ,几十个页面共用一个 css 文件,改样式如履薄冰。事已至此,为了让屎山稳定,不再修改旧样式,直接糊上新样式,同时为了便于后来人拉屎,小心翼翼扩增选择器权重,一生效就收手。事实上的--Cascading Style Shit
    rossroma
        143
    rossroma  
       257 天前
    试着对这个页面进行重构,如果成功了,你积累了宝贵的重构技巧和经验,并且是你下份工作简历上浓墨重彩的一笔;如果失败了,就像上面所说的,代码和你有一个能跑就行。
    leegradyllljjjj
        144
    leegradyllljjjj  
       256 天前
    太年轻了,到我这个年纪就会发现早点下班,工资到手才是目标, 其他都市浮云
    jamesmi
        145
    jamesmi  
       256 天前
    有注释至少还能读懂,不要慌
    Histo
        146
    Histo  
       255 天前
    run
    mark2025
        147
    mark2025  
       255 天前
    当年写公积金贷款申请页面,js 主函数就 8k 行……
    yxb9511
        148
    yxb9511  
       254 天前
    给领导反馈一下,然后着手重构,工作这不就来了嘛
    linzhe141
        149
    linzhe141  
       254 天前
    vfs
        150
    vfs  
       254 天前
    @hellodigua 个人建议, 在这种事情上千万不要为了展示自己的才华而弄懂它, 要装傻充愣。 除非这个项目是你们公司的核心项目, 要不然, 你就和这段代码捆绑了, 以后永远是你维护这代码。。。想想就感觉幸福
    burymme11
        151
    burymme11  
       254 天前
    额,一群 CV 仔/CURD boy 在担心代码质量会影响性能,会影响未来重构.........
    wanniwa
        152
    wanniwa  
       254 天前
    @Patrick6 #103 你就当时应该说你完全不会前端搞不懂,别接这个烂摊子,让离职的那个前端,等下一个前端来了交接完再走
    Patrick6
        153
    Patrick6  
    OP
       254 天前
    @wanniwa #152 是的,不过我后面肯定不会再接了,就交给专业前端重构吧
    ZoR
        154
    ZoR  
       254 天前
    呵 刚工作那会儿整天还想着怎么优化,现在呵呵又不是不能用,
    wangtian2020
        155
    wangtian2020  
       254 天前
    vuex 屁用没有不如 localstorage 直接梭。你应该庆幸这个页面是用 vue 写的,如果是用 jQuery 那行数翻五倍
    ericgui
        156
    ericgui  
       254 天前
    @hqmJoker 我目前有点抑郁,也是差不多的原因
    hqmJoker
        157
    hqmJoker  
       253 天前
    @ericgui 嗯嗯,负重前行,确实有点累,每天一堆压力,不想上班,一想到这事就想吐、头晕、缺氧,但是成长还是有的,最起码让我知道,这世界就是草台班子,连我都能独立干活了,还有啥我不能干的。

    然后开启爱咋咋滴模式,最差不就不干了,反正人和代码有一个能跑就行:)
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1030 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 19:50 · PVG 03:50 · LAX 11:50 · JFK 14:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.