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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1649 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

先感谢你的分享。

页面

逻辑

代码

前端

25 条回复 • 2020-05-26 00:52:06 +08:00

serge001

2020-05-25 09:10:14 +08:00

分模块,组件拆分,mixin

onfuns

2020-05-25 09:11:02 +08:00

拆组件拆函数封装，怎么也到不了 2000 行吧？

66beta

2020-05-25 09:13:26 +08:00 via Android

招一个专业的前端

theprimone

2020-05-25 09:14:25 +08:00

> 项目上没有专业的前端

所以你们也是后端干前端的活儿吗？那现在前端技术栈能有啥？

whevether

2020-05-25 09:14:57 +08:00

表法驱动减少 if 判断语句. 对象映射减少循环。组件化。重复的方法封装复用，

kop1989

2020-05-25 09:15:44 +08:00

1 、接口层针对性提供接口。比如提供仅页面需要的 vo 对象。
2 、接口层负责业务分支判断。比如按钮是否显示，结果集排序，计算字段等。

ArtIsPatrick

2020-05-25 09:23:06 +08:00 via iPhone

听起来你们并没有用前端框架开发

a570295535

2020-05-25 09:27:47 +08:00 via Android

找个压缩 js 代码的网站压缩一下代码，然后网站开启 gzip 就完事了，虽然看起来没变小多少，但是实际小了很多倍

notproblem

2020-05-25 09:30:47 +08:00 via Android

vue 组件化开发了解下

ByteLab

2020-05-25 09:33:16 +08:00

多学点儿自然就顺了
1024bytelab.com 来看看

ETiV

2020-05-25 09:36:22 +08:00

用 uglify，可以把他们变成 1 行

wtf12138

2020-05-25 09:42:57 +08:00

@ETiV #11 机智 boy

lvming6816077

2020-05-25 09:43:54 +08:00

剥离出非首屏的内容，懒加载这些资源

JerryCha

2020-05-25 10:00:57 +08:00

用文字重新梳理逻辑、上组件

violetlai

2020-05-25 10:29:52 +08:00

组件化，压缩基本就是这些了

CODEWEA

2020-05-25 10:52:30 +08:00

代码多到不正常，说明两个问题，一个是你对这个项目没有太多的经验积累，第二个是对所实现的技术没有表现出太大的了解。
解决这个问题，第一步还是先梳理业务，没有完整的了解业务前尽量别对代码尽早优化，搞不好就是负优化。
假设你业务模型了解的足够了，下面开始代码结构性优化。
1.单例模式：选择器查找后保存到变量中，主要是为了减少选择器查找的性能消耗。
2.用面向对象方式写代码，暴露接口封装细节，用参数形式与外部沟通。
2.框架设计方面：功能组件化，以 html 结构为最小单位，剥离成小插件，动态创建 script 脚本渐进式加载，在首屏可为服务器减少极大的压力。

duan602728596

2020-05-25 11:04:05 +08:00

现在的项目基本上都是前后端分离，后端只提供接口，前端单页面应用，框架就是 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

2020-05-25 11:12:44 +08:00

整理好业务点招一个前端重构

thtznet

2020-05-25 12:21:13 +08:00

不要自己去解决超出能力范围的问题，招可以解决问题的人。

crystal1992

2020-05-25 13:21:23 +08:00

接手的一个 vue 商城项目，活动页代码 6000 多行，拆分了三十多个组件出去还有 2500 多行。再优化只能重写逻辑了

zhw2590582

2020-05-25 13:51:41 +08:00

懒得用 react 和 vue 的话，直接上 requirejs，改动少

mazai

2020-05-25 14:22:55 +08:00

把函数按照不同的功能拆分出来，把重复的部分拆分成一个

miv

2020-05-25 14:44:34 +08:00

补充一下，前端页面非必须的话不要放太多业务逻辑，只做展示。
这部分可以丢到后台，前端就复杂渲染数据和简单一下操作。
不过目前看，找个合适的人重构一下比较靠谱

robinlovemaggie

2020-05-25 14:57:51 +08:00

我写过 1000+行 js 的前端页面, 所以我至今没有被裁～

szdubinbin

2020-05-26 00:52:06 +08:00

后端程序写尤其是后台管理系统这种，如果要做多个报表 /charts，很容易写的很大，因为很多后端老哥本身早期也写过模版拼接页面过来，那玩意就真的是拼一下数据对了能跑就行，几千行放一个文件，从前端角度这个需要设计的，譬如剥离在业务代码里面数据处理那层 dirty work，构建前端数据服务层去处理数据，尽量减少去 v 层大量判断和模板处理以及业务代码里面进行大量数据转换处理(譬如根据返回字段来判断权限或者计算金额之类的，本身就可以抽离处理，后续可以进行复用)，构建局部 /总体的数据中心，合理进行分发和传递，业务按照业务逻辑进行拆分，确定好组件间通信手段，这也是我们在改造旧代码的一些经验。