JavaScript代码优化之道

我们先引入一句话：

代码主要是为了写给人看的，而不是写给机器看的，只是顺便也能用机器执行而已。

代码和语言文字一样是为了表达思想、记载信息，所以写得清楚能更有效地表达。本文多数总结自《重构：改善既有代码的设计(第2版)》我们直接进入正题，上代码！

提炼函数

what

将一段代码提炼到一个独立的函数中，并以这段代码的作用命名。

where

如果需要花时间浏览一段代码才能弄清楚它到底要干什么，那么这时候就应该将其提炼到一个函数中，并根据它所做的事命名。以后再读这段代码时，一眼就能知道这个函数的用途。

how

// ==================重构前==================
function printOwing(invoice) {
   
    let outstanding =0;
    console.log("***********************");
    console.log("**** Customer Owes ****");
    console.log("***********************");
}

// ==================重构后==================
function printOwing(invoice) {
   
    let outstanding = 0;
    printBanner()
}

function printBanner() {
   
    console.log("***********************");
    console.log("**** Customer Owes ****");
    console.log("***********************");
}

函数参数化

what

以参数的形式传入不同的值，消除重复函数

where

如果发现两个函数逻辑非常相似， 只有一些字面量值不同， 可以将其合并成一个函数， 以参数的形式传入不同的值， 从而消除重复。

how

// ==================重构前==================

// 点击异常项
clickFaultsItem(item){
   
    this.$u.route({
   
        url:'xxx',
        arams:{
   
            id: item.id,
            type: '异常'
        }
    })
}

// 点击正常项
clickNormalItem(item){
   
    this.$u.route({
   
        url:'xxx',
        params:{
   
            id: item.id,
            type: '正常'
        }
    })
}

// ==================重构后==================
clickItem(id, type){
   
     this.$u.route({
   
        url:'xxx',
        params:{
   id, type}
    })
}

使用策略模式替换“胖”分支

what

使用策略模式替换“胖胖”的if-else或者switch-case

where

当if-else或者switch-case分支过多时可以使用策略模式将各个分支独立出来

how

// ==================重构前==================
function getPrice(tag, originPrice) {
   
    // 新人价格
    if(tag === 'newUser') {
   
        return originPrice > 50.1 ? originPrice - 50 : originPrice
    }    // 返场价格
    if(tag === 'back') {
   
         return originPrice > 200 ? originPrice - 50 : originPrice
    }
    // 活动价格
    if(tag === 'activity') {
   
        return originPrice > 300 ? originPrice - 100 : originPrice
    }
}

// ==================重构后==================
const priceHandler = {
   
    newUser(originPrice){
   
        return originPrice > 50.1 ? originPrice - 50 : originPrice
    },
    back(originPrice){
   
        return originPrice > 200 ? originPrice - 50 : originPrice
    },
    activity(originPrice){
   
         return originPrice > 300 ? originPrice - 100 : originPrice
    }
}

function getPrice(tag, originPrice){
   
    return priceHandler[tag](originPrice)
}

提炼变量

what

提炼局部变量替换表达式

where

一个表达式有可能非常复杂且难以阅读。 这种情况下， 可以提炼出一个局部变量帮助我们将表达式分解为比较容易管理的形式 ，这样的变量在调试时也很方便。

how

// ==================重构前==================