基于ES6的代码重构要点

摘要：访问原文地址对原本代码逻辑进行提炼，提高代码的阅读性。增强代码的和特性。再逻辑还不算太复杂的时候，早点修订一些规范。

访问原文地址

对原本代码逻辑进行提炼，提高代码的阅读性。

增强代码的Object Oriented和Functional Programming特性。

再逻辑还不算太复杂的时候，早点修订一些Coding规范。

Construct HTML using template strings.

Eliminate if/else blocks with hash maps.

Collapse multiple arguments with a config object.

Pre-bind arguments to make point-free functions.

Break complex conditionals with intention revealing .variables.

Inline IIFE for complex initialization.

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

var html = "
" +
            "
" + title + "
" + 
            "" +
            "
";

//使用template直接就可以像些angular的模板一样在js代码中插入html
let tmp_html = `

                
${title}
                
                
`;

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";

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:"%"});

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

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

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

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

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