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

前端页面逻辑如何优化,请教。

  •  
  •   fxxwor99LVHTing · 2020-05-25 09:07:32 +08:00 · 3950 次点击
    这是一个创建于 513 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题:现在一个页面的 js 代码最多达到了将近 2000 行,因为项目上没有专业的前端,有什么办法简化页面逻辑吗,或者如何(有什么思路 /模式)整理页面逻辑代码呢, 以及 你们工作中前端是怎么架构的呢,都使用的什么技术(模式)来降低复杂度 提高 可维护性和可扩展性呢?

    先感谢你的分享。

    25 条回复    2020-05-26 00:52:06 +08:00
    serge001
        1
    serge001   2020-05-25 09:10:14 +08:00   ❤️ 1
    分模块,组件拆分,mixin
    onfuns
        2
    onfuns   2020-05-25 09:11:02 +08:00
    拆组件拆函数封装,怎么也到不了 2000 行吧?
    66beta
        3
    66beta   2020-05-25 09:13:26 +08:00 via Android
    招一个专业的前端
    theprimone
        4
    theprimone   2020-05-25 09:14:25 +08:00
    > 项目上没有专业的前端

    所以你们也是后端干前端的活儿吗?那现在前端技术栈能有啥?
    whevether
        5
    whevether   2020-05-25 09:14:57 +08:00
    表法驱动 减少 if 判断语句. 对象映射减少循环。 组件化。 重复的方法封装复用,
    kop1989
        6
    kop1989   2020-05-25 09:15:44 +08:00
    1 、接口层针对性提供接口。比如提供仅页面需要的 vo 对象。
    2 、接口层负责业务分支判断。比如按钮是否显示,结果集排序,计算字段等。
    ArtIsPatrick
        7
    ArtIsPatrick   2020-05-25 09:23:06 +08:00 via iPhone
    听起来你们并没有用前端框架开发
    a570295535
        8
    a570295535   2020-05-25 09:27:47 +08:00 via Android
    找个压缩 js 代码的网站压缩一下代码,然后网站开启 gzip 就完事了,虽然看起来没变小多少,但是实际小了很多倍
    notproblem
        9
    notproblem   2020-05-25 09:30:47 +08:00 via Android
    vue 组件化开发了解下
    ByteLab
        10
    ByteLab   2020-05-25 09:33:16 +08:00
    多学点儿 自然就顺了
    1024bytelab.com 来看看
    ETiV
        11
    ETiV   2020-05-25 09:36:22 +08:00   ❤️ 4
    用 uglify,可以把他们变成 1 行
    wtf12138
        12
    wtf12138   2020-05-25 09:42:57 +08:00
    @ETiV #11 机智 boy
    lvming6816077
        13
    lvming6816077   2020-05-25 09:43:54 +08:00
    剥离出非首屏的内容,懒加载这些资源
    JerryCha
        14
    JerryCha   2020-05-25 10:00:57 +08:00
    用文字重新梳理逻辑、上组件
    violetlai
        15
    violetlai   2020-05-25 10:29:52 +08:00
    组件化,压缩 基本就是这些了
    CODEWEA
        16
    CODEWEA   2020-05-25 10:52:30 +08:00   ❤️ 1
    代码多到不正常,说明两个问题,一个是你对这个项目没有太多的经验积累,第二个是对所实现的技术没有表现出太大的了解。
    解决这个问题,第一步还是先梳理业务,没有完整的了解业务前尽量别对代码尽早优化,搞不好就是负优化。
    假设你业务模型了解的足够了,下面开始代码结构性优化 。
    1.单例模式:选择器查找后保存到变量中,主要是为了减少选择器查找的性能消耗。
    2.用面向对象方式写代码,暴露接口封装细节,用参数形式与外部沟通。
    2.框架设计方面:功能组件化,以 html 结构为最小单位,剥离成小插件,动态创建 script 脚本渐进式加载,在首屏可为服务器减少极大的压力。
    duan602728596
        17
    duan602728596   2020-05-25 11:04:05 +08:00   ❤️ 1
    现在的项目基本上都是前后端分离,后端只提供接口,前端单页面应用,框架就是 react 、angular 、vue 全家桶了。
    服务就是 express 或 koa,可能会用 nginx 进行反向代理,不过我个人来看感觉没必要。

    但是你的情况,我个人的感觉就是你们的项目就是以前 jsp 、aspx 、php 的开发方式。因为你们后端不专业的前端开发方式,把一个应用模块里所有的逻辑都写在一起,堆砌代码,导致了你们现在这样的情况。

    我现在给你们的建议:
    1 、使用 requirejs,对代码进行拆分,requirejs 加载通用模块、每段逻辑的执行文件。
    优点:对于你们的项目的破坏性小,可以无缝升级
    缺点:文件地址是相对于 html 的;需要配置; js 文件不是同步加载的

    2 、使用 gulp + webpack,用 webpack 将单个页面内每段逻辑的执行文件打包到一起。
    优点:使用了 es6 的模块来拆分你们的业务逻辑;可以配合 babel,让你们使用最新的 es 版本( webpack 如果没有 style-loader 之类的来注入 css,单纯只编译 js 的话,是可以兼容 ie 的);打包的同时,顺便压缩代码(生产环境)
    缺点:项目开发时,需要安装 node,启动 gulp ;配置稍微复杂一些
    GopherTT
        18
    GopherTT   2020-05-25 11:12:44 +08:00
    整理好业务点 招一个前端重构
    thtznet
        19
    thtznet   2020-05-25 12:21:13 +08:00
    不要自己去解决超出能力范围的问题,招可以解决问题的人。
    crystal1992
        20
    crystal1992   2020-05-25 13:21:23 +08:00
    接手的一个 vue 商城项目,活动页代码 6000 多行,拆分了三十多个组件出去还有 2500 多行。再优化只能重写逻辑了
    zhw2590582
        21
    zhw2590582   2020-05-25 13:51:41 +08:00
    懒得用 react 和 vue 的话,直接上 requirejs,改动少
    mazai
        22
    mazai   2020-05-25 14:22:55 +08:00
    把函数按照不同的功能拆分出来,把重复的部分拆分成一个
    miv
        23
    miv   2020-05-25 14:44:34 +08:00
    补充一下,前端页面非必须的话不要放太多业务逻辑,只做展示。
    这部分可以丢到后台,前端就复杂渲染数据和简单一下操作。
    不过目前看,找个合适的人重构一下比较靠谱
    robinlovemaggie
        24
    robinlovemaggie   2020-05-25 14:57:51 +08:00
    我写过 1000+行 js 的前端页面, 所以我至今没有被裁~
    szdubinbin
        25
    szdubinbin   2020-05-26 00:52:06 +08:00
    后端程序写尤其是后台管理系统这种,如果要做多个报表 /charts,很容易写的很大,因为很多后端老哥本身早期也写过模版拼接页面过来,那玩意就真的是拼一下数据对了能跑就行,几千行放一个文件,从前端角度这个需要设计的,譬如剥离在业务代码里面数据处理那层 dirty work,构建前端数据服务层去处理数据,尽量减少去 v 层大量判断和模板处理以及业务代码里面进行大量数据转换处理(譬如根据返回字段来判断权限或者计算金额之类的,本身就可以抽离处理,后续可以进行复用),构建局部 /总体的数据中心,合理进行分发和传递,业务按照业务逻辑进行拆分,确定好组件间通信手段,这也是我们在改造旧代码的一些经验。
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3782 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 07:25 · PVG 15:25 · LAX 00:25 · JFK 03:25
    ♥ Do have faith in what you're doing.