JAVASCRIPT
VUE
REACT
NODE
ES6
TYPESCRIPT

Js策略模式

2019. 02. 05    

Js策略模式

普通

function priceCalculation(commodity, price) {
	if(commodity === 'm100_30'){	//满100减30
		return price - Math.floor(price / 100) * 30
	}
	if(commodity === 'm200_80'){	//满100减30
		return price - Math.floor(price / 200) * 80
	}
	if(commodity === 'p80'){	//满100减30
		return price * 0.8
	}
}


$("sub").onclick = function (price) {
	var price = $("num").value;
	console.log(priceCalculation('m100_30', price))
	$("s").innerHTML = priceCalculation('m100_30', price)
}

进阶一

const Dis = {
	m100_30: function (price) {
		return price - Math.floor(price / 100) * 30
	},
	m200_80: function (price) {
		return price - Math.floor(price / 200) * 80
	},
	p80: function (price) {
		return price * 0.8
	}
}
function priceCalculation(commodity, price) {
	return Dis[commodity] && Dis[commodity](price)
}


$("sub").onclick = function (price) {
	var price = $("num").value;
	console.log(priceCalculation('m100_30', price))
	$("s").innerHTML = priceCalculation('m100_30', price)
}

进阶二

const Pri = (function () {
	const Dis = {
		m100_30: function (price) {
			return price - Math.floor(price / 100) * 30
		},
		m200_80: function (price) {
			return price - Math.floor(price / 200) * 80
		},
		p80: function (price) {
			return price * 0.8
		}
	}
	return {
		priceCalculation: function(commodity, price) {
			return Dis[commodity] && Dis[commodity](price)
		},
		add: function(commodity, fn){ // 注册新的计算方式
			if(Dis[commodity]){return}
			Dis[commodity] = fn
		}
	}
})()

Pri.add('m500_200', function(price) { //满500 减200
	return price - Math.floor(price / 500) * 200
}),
$("sub").onclick = function (price) { 	///price = 500
	var price = $("num").value;
	console.log(Pri.priceCalculation('m100_30', price)) //350
	console.log(Pri.priceCalculation('m500_200', price)) //300
	$("s").innerHTML = Pri.priceCalculation('m100_30', price)
}

来源微信公众号:前端大全 - @前端下午茶