前端代码微重构方法及实践

前端代码微重构方法及实践

1.减少重复代码

去抽象
抽象挺好的，可以减少代码量，节省维护成本。但随之也有一个问题，不好不恰当的抽象，不容易扩展。
比如有三个可编辑的列表，展示的参数和可编辑的功能相似，就可以抽象一个可编辑列表出来，或者抽取一个公共组件。这样只维护一份代码，就可以维护三个列表的正常功能。
如果后续需求变化了怎么办呢？A列表和B列表展示的参数不一样了怎么办。本来只支持一列可编辑，需要多列可编辑？本来一个单元格只需要展示一个输入框，需求变更后，要支持多个输入框呢？本来只需要支持文本输入，需求变更后，需要支持其他格式的输入呢？例如IP框、密钥框、URL框、下拉框。
变化中的不变是什么？思考清楚，就可以进行抽象或抽取公共组件了。
抽取1：输入框可编辑功能。抽象出一个可编辑列表出来。这个列表的表头上是否有附加功能呢？（这个后面再讨论）

抽取2：根据输入数据类型的不同，写出若干小组件。根据数据类型，灵活组合这些小组件。

抽取3：抽取出最小的组件，小组件再组合成稍微复杂一些的中等组件。然后去组合得到自己想要的页面。比较难一些的地方，是数据的传递，事件处理等。

2.一些常用的精简代码的方法

找了一篇不错的博客，引用如下：

1、函数要短小，一个函数只做一件事
如果函数做了较多的事情，它就难以组合、测试和推测。同时让函数只做一件事情的时候，它们就很容易重构。
2、每个函数一个抽象层级
函数中混杂不同的抽象层级，往往让人迷惑。读者可能无法判断某个表达式是基础概念还是细节。更恶劣的是，就像破损的窗户，一旦细节和基础概念混杂，更多的细节就会在函数中纠结起来。
3、使用描述性的名称
函数越短小，功能越集中，就越便于取个好名字。长而具有描述性的名称，要比短而令人费解的名称好。长而具有描述性的名称，要比描述性的长注释好。使用某种命名约定，让函数名称中的多个单词容易阅读，然后使用这些单词给函数取个能说明其功能的名称。
4、函数参数
最理想的参数数量是零，其次是一（单参数函数），再次是二（双参数函数），应尽量避免三（三参数函数）。有足够的理由才能使用三个以上参数。如果函数需要三个以上参数，就说明其中一些参数应该放在一个对象中了。参数越多，函数越不容易理解，同时编写能确保参数的各种组合运行正常的测试用例越困难。
5、避免副作用
如果一个函数不是获取一个输入的值并返回其它值，它就有可能产生副作用。这些副作用可能是写入文件、修改一些全局变量、屏幕打印或者日志记录、查询HTML文档、浏览器的cookie或访问数据库。无论哪种情况，都具有破坏性，会导致古怪的时序性耦合及顺序依赖。现在你确实需要在程序中有副作用。像前面提到的那样，你可能需要写入文件。现在你需要做的事情是搞清楚在哪里集中完成这件事情。不要使用几个函数或类来完成写入某个特定文件的工作。采用一个，就一个服务来完成。
6、删除重复代码
重复代码意味着你要修改某些逻辑的时候要修改不止一个地方的代码。
7、使用更优雅写法
7.1使用默认参数代替短路表达式
7.2用 Object.assign 设置默认对象
7.3喜欢上命令式编程之上的函数式编程
8、不要把标记用作函数参数
标记告诉你的用户这个函数做的事情不止一件。但是函数应该只做一件事。如果你的函数中会根据某个布尔参数产生不同的分支，那就拆分这个函数
9、对函数中条件处理
9.1封装条件
9.2避免否定条件

参考2：https://www.jb51.net/article/203827.htm

3.借用设计模式来微重构