摘要：什么是重構(gòu)字面上的理解重新組織結(jié)構(gòu)為什么要重構(gòu)原來(lái)的結(jié)構(gòu)是什么樣子的有什么問(wèn)題函數(shù)邏輯結(jié)構(gòu)條件判斷循環(huán)操作包含關(guān)系集合關(guān)系非關(guān)系可擴(kuò)展性差新的變化不能被靈活處理對(duì)象強(qiáng)耦合可復(fù)用性差重復(fù)代碼多性能消耗太多隨著技術(shù)發(fā)展新的好特性如何重構(gòu)知道問(wèn)題

什么是重構(gòu)?

字面上的理解: 重新組織結(jié)構(gòu)

為什么要重構(gòu)?

原來(lái)的結(jié)構(gòu)是什么樣子的?有什么問(wèn)題?
1. 函數(shù)邏輯結(jié)構(gòu)[條件判斷、循環(huán)操作]: 包含關(guān)系、集合關(guān)系、非關(guān)系...
2. 可擴(kuò)展性差,新的變化不能被靈活處理
3. 對(duì)象強(qiáng)耦合
4. 可復(fù)用性差, 重復(fù)代碼多
5. 性能消耗太多
6. 隨著技術(shù)發(fā)展, 新的好特性

如何重構(gòu)?
知道問(wèn)題是什么, 針對(duì)問(wèn)題進(jìn)行重構(gòu)

let checkType = function(str, type) {
    switch (type) {
        case "email":
            return /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$/.test(str);
        case "mobile":
            return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
        case "tel":
            return /^(0d{2,3}-d{7,8})(-d{1,4})?$/.test(str);           
        case "number":
            return /^[0-9]$/.test(str);
        case "english":
            return /^[a-zA-Z]+$/.test(str);
        case "text":
            return /^w+$/.test(str);
        case "chinese":
            return /^[u4E00-u9FA5]+$/.test(str);
        case "lower":
            return /^[a-z]+$/.test(str);
        case "upper":
            return /^[A-Z]+$/.test(str);
        default:
            return true;
    }
}

違反開放 - 封閉原則[對(duì)擴(kuò)展開放, 對(duì)修改封閉]
策略模式: 把一系列算法進(jìn)行封裝,使算法代碼和邏輯代碼相互獨(dú)立
函數(shù)單一原則

let checkType = (function() {
    let rules = {
        email (str) {
            return //.test(str);
        }
        ...
    };
    
    return {
        check (str, type) {
            return rules[type]? rules[type]() : false;
        }
        addRule (type, fn) {
            rules[type] = fn;
        }
    }
})();

可擴(kuò)展性的表現(xiàn)形式

對(duì)原生對(duì)象、庫(kù)、框架的擴(kuò)展

1. prototype

2. jquery的擴(kuò)展性
   三個(gè)API:$.extend()、$.fn和$.fn.extend()

3. vue擴(kuò)展
添加全局方法或?qū)傩?添加全局資源: 過(guò)濾器、指令、過(guò)渡
通過(guò)全局mixin添加一些組件選項(xiàng)
添加vue實(shí)例方法
基于vue的擴(kuò)展[ 在組件或插件 install]

日常開發(fā)中

函數(shù)寫法優(yōu)化

function formatStr (str) {
    return str.replace(/(d{4})(d{2})(d{2})(d{2})(d{2})(d{2})/, "$1-$2-$3 $4:$5:$6");
}

function formatStr(str, type) {
    let i = 0;
    let _type = type || "xxxx-xx-xx xx:xx:xx";
    return _type.replace(/x/g, () => str[i++]);
}

function createPhoneNumber(numbers){
    var format = "(xxx) xxx-xxxx";
    let i = 0;
    return format.replace(/x/g, () => numbers[i++]);
}

who like it?

// 模版字符串 or 手動(dòng)拼寫
function likes(names) {
    let template = [
        "no one likes this",
        "{name} likes this",
        "{name} and {name} likes this",
        "{name}, {name} and {name} likes this",
        "{name}, {name} and {n} others likes this"
    ];
    let idx = Math.min(names.length, 4);
    
    template[idx].replace(/{name}|{n}/g, (value) => {
        return value === "{name}" ? names[idx++]: names.length;
    });
    
}

shortest word?

// apply | call
function findShortest (s) {
    return Math.min.apply(null, s.split(" ").map((val) => val.length));
}