摘要：訪問原文地址對(duì)原本代碼邏輯進(jìn)行提煉，提高代碼的閱讀性。增強(qiáng)代碼的和特性。再邏輯還不算太復(fù)雜的時(shí)候，早點(diǎn)修訂一些規(guī)范。

訪問原文地址

對(duì)原本代碼邏輯進(jìn)行提煉，提高代碼的閱讀性。

增強(qiáng)代碼的Object Oriented和Functional Programming特性。

再邏輯還不算太復(fù)雜的時(shí)候，早點(diǎn)修訂一些Coding規(guī)范。

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

//當(dāng)condition或者type條件很復(fù)雜的時(shí)候，可以把他們提取出來，以便維護(hù)
import typeMap from "./conditions";

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

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

function doOperation(name="default", args=[]) {
    // 這是一個(gè)通過name來決定操作方法的函數(shù)
}
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函數(shù)，將操作方法從參數(shù)導(dǎo)入的方式分離成2個(gè)函數(shù)
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,并使用箭頭函數(shù)

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