基於ES6的代碼重構要點

訪問原文地址

Why

• 對本來代碼邏輯進行提煉，提升代碼的閱讀性。

• 加強代碼的Object Oriented和Functional Programming特性。

• 再邏輯還不算太複雜的時候，早點修訂一些Coding規範。

重構要點

1. Construct HTML using template strings.

2. Eliminate if/else blocks with hash maps.

3. Collapse multiple arguments with a config object.

4. Pre-bind arguments to make point-free functions.

5. Break complex conditionals with intention revealing .variables.

6. Inline IIFE for complex initialization.

7. Use hoisting/composed-method to focus on important code.

1.使用ES6的template string來替換很差用的html文本

var html = '<div class="my-car-class-contain">' +
            '<div class="my-car-class-title">' + title + '</div>' + 
            '<img src="' + url + '">' +
            '</div>';

//使用template直接就能夠像些angular的模板同樣在js代碼中插入html
let tmp_html = `<div class="my-car-class-contain">
                <div class="my-car-class-title">${title}</div>
                <img src="${url}" alt="">
                </div>`;

2.用hash-map來替換複雜的if/else判斷條件

function getSomething(type) {
    if (type === 'boy') {
        return '/img/bog.jpg'
    } else if (type === 'man') {
        return '/img/man.jpg'
    } else if (type === 'girl') {
        return '/img/girl.jpg'
    } else (type === 'woman') {
        return '/img/woman.jpg'
    }
}

//hash-map
function getSomething(type) {
    var typeMap = {
        boy: '/img/bog.jpg',
        man: '/img/man.jpg',
        girl: '/img/girl.jpg',
        woman: '/img/woman.jpg',
    }
    
    return typeMap[type] || '/img/default.jpg';
}

//當condition或者type條件很複雜的時候，能夠把他們提取出來，以便維護
import typeMap from './conditions';

3.減小函數入參，用Object來代替。

function formatNumber(value, decimals, asPercent, prefix, suffix) {
    var formattedNumber = value;
    
    //do something
    
    return formattedNumber;
}
formatNumber(10,2,false,'','%');

//利用ES6默認值特性，以及對象定義參數
function formatNumber({value=0, decimals=0, asPercent=false, prefix=‘’, suffix=‘’}){}
var num = 20;
formatNumber({value: num, suffix:'%'});

4.使用bind方法，將一個函數分離成多個更好理解的函數

function doOperation(name='default', args=[]) {
    // 這是一個經過name來決定操做方法的函數
}
function findSome() {
    return Promise.resolve('LS460h');
}
function getCarList() {
    return Promise.resolve({size:4800, seats:5, output:6.0});
}
findSome().then(args => {
    doOperation('searchCar', args);
});
getCarList().then(args => {
    doOperation('buyLexus', args);
});

//修改過程
//先經過bind函數，將操做方法從參數導入的方式分離成2個函數
var play = doOperation.bind(null, 'searchCar');
var buy = doOperation.bind(null, 'buyLexus');

findSome().then(play);
getCarList().then(buy);

5.使用array的some方法來重構條件判斷語句

import _ from 'lodash';
var age,
    gamer = [],
    adNetworks = [],
    specialAchievements = [];

function showGame() {
    /* do something */
}

if((age > 0 && age <0) || 
    gamer.isFirstTime ||
    _.some(adNetworks, function(n) {
        return gamer.network === n;
    }) ||
    _.some(specialAchievements, function(ach) {
        return gamer.specialAchievement = ach;
    })) {
    showGame();    
}

把conditions提煉成Array,並使用箭頭函數

var conditions = [
    () => {
        return age > 0 && age <0;
    },
    () => gamer.isFirstTime,
    () => {
        return _.some(adNetworks, n => gamer.network === n);
    },
    () => {
        return _.some(specialAchievements, ach => gamer.specialAchievement === ach);
    },
    //加入新的條件，就變得很輕鬆
    () => specialAchievements.length > 0
];

let matches = _.some(conditions, c=>c());
if(matches) {
    showGame();    
}

6.使用IIFE(Immediately-Invoked Function Expression)作複雜初始化

var settings = readSettings();
var apiUrl = `https://${settings.apiDomain}:${settings.apiPort}/api`;

var defaultConfig = {
    apiUrl:apiUrl,
    timezone: settings.timezone,
    account: settings.account,
    theme: settings.theme
}

// IIFE 
var defaultConfig = (() => {
    var settings = readSettings();
    var apiUrl = `https://${settings.apiDomain}:${settings.apiPort}/api`;

    var defaultConfig = {
        apiUrl:apiUrl,
        timezone: settings.timezone,
        account: settings.account,
        theme: settings.theme
    }
})();

7.把回調的邏輯抽取成函數，隱藏邏輯，讓代碼語義更清晰。

_fetchData(url)
    .then(data => {
        //do something
    })
    .then(transactions => {
        //do something
    })

//after
import {processData, renderHtml} from './doSomething'
_fetchData(url)
    .then(processData)
    .then(renderHtml);