什麼是重構?

字面上的明白: 重新組織構造

為何要重構?

本來的構造是什麼模樣的?有什麼題目?
1. 函數邏輯構造[前提推斷、輪迴操縱]: 包括關聯、鳩合關聯、非關聯...
2. 可擴大性差,新的變化不能被靈活處理
3. 對象強耦合
4. 可復用性差, 反覆代碼多
5. 機能斲喪太多
6. 跟着技術發展, 新的好特徵

怎樣重構?

曉得題目是什麼, 針對題目舉行重構

可擴大性差,新的變化不能被靈活處理 eg

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 /^(0\d{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;
    }
}

違背開放 – 關閉準繩[對擴大開放, 對修正關閉]
戰略形式: 把一系列算法舉行封裝,使算法代碼和邏輯代碼互相自力
函數單一準繩

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;
        }
    }
})();

可擴大性的表現形式

對原生對象、庫、框架的擴大

1. prototype

2. jquery的擴大性
   三個API:$.extend()、$.fn和$.fn.extend()

3. vue擴大
增加全局要領或屬性
增加全局資本: 過濾器、指令、過渡
經由過程全局mixin增加一些組件選項
增加vue實例要領
基於vue的擴大[ 在組件或插件 install]

一樣平常開闢中

函數寫法優化

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 手動拼寫
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));
}