探究重构代码（Code refactoring）

Code refactoring 是什么

在不改变软件的外部行为的条件下，通过修改代码改变软件内部结构，将效率低下和过于复杂的代码转换为更高效、更简单和更简单的代码。

 

怎样执行Code refactoring 

1.重命名

 例子：命名语意不明。

//重构前
let show = true;

function name(){}

//重构后
let isShow=true;

function getName(){}

 

2.提取

例子：不同函数名，相同功能函数

//重构前
function sayHello(){
  console.log('Hello World')
}

function sayBye(){
  console.log('GoodBye World')
}

sayHello()
sayBye()

//重构后
function say(str){
  console.log(str)
}

say('Hello World')
say('GoodBye World')

例子：减少参数 

//重构前
function peopleInfo(name, age) {
  console.log('My name is ' + name + ',' + age + ' years old.')
}

peopleInfo('Sroot', 18)

//重构后
function peopleInfo(people) {
  console.log('My name is ' + people.name + ',' + people.age + ' years old.')
}

peopleInfo({
  name: 'Sroot',
  age: 18
})

 

3.封装

例子：功能封装。

//重构前
function setCookie(name, value) {
  var Days = 30
  var exp = new Date()
  exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
  document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString()
}
function getCookie(name) {
  var arr,
    reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
  if ((arr = document.cookie.match(reg))) return unescape(arr[2])
  else return null
}

setCookie('key', 'sroot')
getCookie('key')

//重构后
var Cookies = {
  setCookie: function(name, value) {
    var Days = 30
    var exp = new Date()
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
    document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString()
  },
  getCookie: function(name) {
    var arr,
      reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
    if ((arr = document.cookie.match(reg))) return unescape(arr[2])
    else return null
  }
}

Cookies.setCookie('key', 'sroot')
Cookies.getCookie('key')

例子：控制结构和逻辑问题

//重构前
if (isOpenSound === true) {
   console.log("It's open sound")
}

//重构后
if (isOpenSound) {
   console.log("It's open sound")
}

//另一种写法
isOpenSound && console.log("It's open sound")

4.扩展

例子：定义变量、方法没有使用。

let name='sroot';

function say(){
    console.log('hello world')
}

 例子：使用相同的代码

let files = ["a.png","b.png"]
let fd = new FormData()

//重构前
fd.append('file1',files[0])
fd.append('file2',files[1])

//重构后
for (let i = 0; i < files.length; i++) {
    fd.append('file' + i, files[i])
}

 

5.性能优化。

例子：循环语句性能优化

//重构前
var text = ''
for (i = 0; i < 10; i++) {
  text += i + '++'
  document.getElementById('demo').innerHTML = text
}

//重构后
var text = ''
for (i = 0; i < 10; i++) {
  text += i + '++'
}
document.getElementById('demo').innerHTML = text

 

PS：代码重构应该注意一下几点：

        （1）重构自己的代码，不要重构别人写的代码。（自己的问题自己解决）

        （2）重构代码不要整合新的功能代码。（ 明确自己的目的，不要弄巧成拙）

        （3）重构代码之后一定要进行测试。（软件测试是检查软件质量的唯一标准）

         

Code refactoring的优缺点

优点：提高代码质量，优化软件产品架构与性能，减少项目的技术债，避免项目重写。（重构 != 重写）

缺点：增加工作负担，可能会出现一些业务上漏洞，也可能代码过于精炼导致代码可读性变差。

 

总结：  代码重构是个好方法，代码重构是需要单元测试与自动化测试来支持，否则适得其反，请不要轻易重构代码。