目录

重构 - 代码优化技巧

以下是我《JS深入浅出》第6课的讲义,如果对你有帮助点个赞即可,如果需要购买配套视频,可以看我主页的联系方式。

这次课讲的是「如何提高代码的可读性」,跟前端关系不大,是写代码的普遍技巧。

注意我们讲得不是「如何提高代码的性能」。


代码优化基本原则

  1. 易读性优先
  2. 如果不是性能瓶颈,就不要为了性能而改写代码
  3. 复杂性守恒原则:无论你怎么写代码,复杂性都是不会消失的
    推论:如果逻辑很复杂,那么代码看起来就应该是复杂的。如果逻辑很简单,代码看起来就应该是简单的。

命名

程序员三大难题

  1. 变量命名
  2. 缓存失效
  3. 循环边界

可见变量命名的重要性。

网上有很多命名规范,大家可以参考。本节课只讲基本原则。

一、注意词性

var person = {
      name: 'Frank'
  }
  var student = {
      grade: 3,
      class: 2
  }
 
var person = {
      dead: false, // 如果是形容词,前面就没必要加 is,比如isDead 就很废话
      canSpeak: true, //情态动词有 can、should、will、need 等,情态动词后面接动词
      isVip: true, // be 动词有 is、was 等,后面一般接名词
      hasChildren: true, // has 加名词
  }
var person = {
      run(){}, // 不及物动词
      drinkWater(){}, // 及物动词
      eat(foo){}, // 及物动词加参数(参数是名词)
  }
var person = {
      beforeDie(){},
      afterDie(){},
      // 或者
      willDie(){}
      dead(){} // 这里跟 bool 冲突,你只要不同时暴露 bool dead 和函数 dead 就行,怕冲突就用上面的 afterDie
  }
  button.addEventListener('click', onButtonClick)
  var component = {
      beforeCreate(){},
      created(){},
      beforeMount(){},
      mounted(){},
      beforeUpdate(){},
      updated(){},
      activated(){},
      deactivated(){},
      beforeDestroy(){},
      destroyed(){},
      errorCaptured(){}
  }
div1.classList.add('active') // DOM 对象
  div2.addClass('active') // jQuery 对象
  不如改成
  domDiv1 或 elDiv1.classList.add('active')
  $div2.addClass('active')
$div.text() // 其实是 $div.getText()
  $div.text('hi') // 其实是 $div.setText('hi')

二、注意一致性

function getSongs(){
      return $.get('/songs).then((response){
          div.innerText = response.songs
      })
  }
 

就违背了表里一致性,getSongs 表示获取歌曲,并没有暗示这个函数会更新页面,但是实际上函数更新了 div,这就是表里不一,正确的写法是

function getSongsAndUpdateDiv(){
      return $.get('/songs).then((response){
          div.innerText = response.songs
      })
  }
function getSongs(){
      return $.get('/songs)
  }
  function updateDiv(songs){
      div.innerText = response.songs
  }
  getSongs().then((response)=>{
      updateDiv(response.songs)
  })

改代码

如果你的代码有单元测试,那么改起来就很放心。如果没有单元测试,就需要用「小步快跑」的策略来修改。

小步快跑的意思是说,每次只修改一点点,测试通过后,再修改一点点,再测试,再修改一点点……如此反复。

那么如何修改一点点呢?《重构》这本书介绍了很多方法,但是讲得有点抽象的,如果你有时间可以看看。

我这里只说两个经久不衰的方法。

一、使用函数来改代码

步骤:

  1. 将一坨代码放到一个函数里
  2. 将代码依赖的外部变量作为参数
  3. 将代码的输出作为函数的返回值
  4. 给函数取一个合适的名字
  5. 调用这个函数并传入参数
  6. 这个函数里的代码如果超过 5 行,则依然有优化的空间,请回到第 1 步

二、使用对象来改代码

如果使用了函数改造法改造后,发现有太多的小函数,则可以使用对象将这些函数串起来。

记得我们讲过「this 是函数和对象的桥梁」吗,我们会用 this 来串联这个对象和所有函数。

最终代码:http://js.jirengu.com/mimazaboke/1/edit\?html,js,output

一些固定的套路

  1. 表驱动编程(《代码大全》里说的)
    所有一一对应的关系都可以用表来做
  2. 自说明代码(以 API 参数为例)
    把别人关心的东西放在显眼的位置

bad smell(坏味道)

有些代码可以用,但是很「臭」。

哪些代码是有坏味道的

  1. 表里不一的代码
  2. 过时的注释
  3. 逻辑很简单,但是看起来很复杂的代码
  4. 重复的代码
  5. 相似的代码
  6. 总是一起出现的代码

破窗效应

此理论认为环境中的不良现象如果被放任存在,会诱使人们仿效,甚至变本加厉。一幢有少许破窗的建筑为例,如果那些窗不被修理好,可能将会有破坏者破坏更多的窗户。最终他们甚至会闯入建筑内,如果发现无人居住,也许就在那里定居或者纵火。一面墙,如果出现一些涂鸦没有被清洗掉,很快的,墙上就布满了乱七八糟、不堪入目的东西;一条人行道有些许纸屑,不久后就会有更多垃圾,最终人们会视若理所当然地将垃圾顺手丢弃在地上。这个现象,就是犯罪心理学中的破窗效应。

程序员要做到:只要是经过你手的代码,都会比之前好一点。

饥人谷一直致力于培养有灵魂的编程者,打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实,他们以饥人谷为起点,足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程:加微信 xiedaimala03,官网:https://jirengu.com

本文作者:饥人谷方应杭老师