前端js 代码写的太混乱，错综复杂，很难维护，请问有什么好策略？

Question

如题。效果是完成了，但代码很乱，隔几天就看不懂了。如何做到调理？是否有章可循？新老手都遵循的一些规则。

Answer 1

最近也在思考整理这个东西

1. 如果你发现你做的很复杂，应该停下来思考，怎么变简单一点
2. 一个方法只做一件事情
3. 尽量一个功能一个方法
4. 学会各种设计模式
5. 不要把所有事情放在一个方法里面

Answer 2

这里只针对问题中描述的 “代码乱”，简单说几点。

从项目工程上，如果是工程化开发，模块化构建分好模块，使用 eslint + prettier 约束代码规范，

从开发人员上，无论项目形式如何，都应该了解一些设计模式，及 css 预处理器。

针对初级开发者，更多的是代码规范约束，针对 JavaScript 的逻辑代码优化，短期内是需要有人指导。

---

针对问题的修改进行补充：

• 依然使用 eslint + prettier 进行 JavaScript 静态检查和约束
• 使用 post-css 和 css 预处理器构建前端样式，为 css 带来更好的健壮性、扩展性、维护性
• 良好的项目架构。不同项目不同架构，需要一定的经验
• 无论如何都需要了解一些设计模式
• 有一定规模的项目使用 typescript 代替 JavaScript
• 针对html而言依然需要一些约束，例如标签的语义化、闭合 etc

这里只从代码方面提出了一些简单的建议。如果从问题中给出的 “新老手都遵循的规则” 来讲，那么答案可以从更多方面进行扩充；如果问题仅从 “代码乱” 这一个方面而言，我想上面的回答已经可以有所帮助。

Answer 3

学会复用封装代码，做好全局注释，并且每个参数用作于干什么 当前参数为什么数据类型 返回出去的什么格式 什么数据类型 调用方法等

Answer 4

1.首先推荐从 JS+CSS+HTML 升级成 Vue
2.推荐按照某些成熟团队的代码规范，规范自己的代码风格，随便推荐个：https://www.w3cschool.cn/wematy/
3.使用一款成熟的 ui 框架：bootstrap， ele, iview ...
4.组件化拆分页面，让你的页面功能尽可能单一化
当然这个更多看自己的理解，我说一下我的：

// 在单个页面文件夹 src/pages/home 里面
vue/index.vue       // 这个文件负责页面的主要结构和业务功能，弹窗
components/*.vue    // 这些页面负责单独的组件功能，譬如 Table, Nav, DatePicker
common/*.vue        // 这些页面负责可能被引用的公共组件
store/index         // vuex
store/interface     // 接口
less                // 样式

除了index.vue 会放页面的整体样式，
大部分的 components 或者 common 会直接写 样式防止提取到公共之后还要单独找样式资源
（除非样式数量比较大，一般也懒得独立 ... 后期单独找样式基本不可能）

最重要的事情，其实是上 os-china 或者 github 找个开源项目看看正规军的做法

Answer 5

了解下 面向对象 思维