前端业务开发的注意点（持续）

1.重复点击/请求

1.1 重复点击处理

变量控制

通过变量控制是否执行点击时间

原生

let btnElem = document.querySelector('#testBtn');
let btnClickBool = true;
btnElem.addEventListener('click', function () {
	if (!btnClickBool) return false;
	btnClickBool = false;
	
	// handleBtnClick();
}, false);

jQuery/Zepto

let $btnElem = $('#testBtn');
let btnClickBool = true;
$btnElem.click(function () {
	if (!btnClickBool) return false;
	btnClickBool = false;
	
	// handleBtnClick();
})

React

/**
 * hook style
 */
function Example () {
	let [btnClickBool, setBtnClickBool] = useState(false);
	const handleBtnClick = () => {
		if (!btnClickBool) return false;
		setBtnClickBool(true);
		// handleBtnClick();
	};
	return (
		<div>
			<button onClick={handleBtnClick}>click btn</button>
		</div>
	)
}

/**
 * class style
 */
class Example extends React.Component {
	constructor (props) {
		this.state = {
			btnClickBool: true
		};
		this.handleBtnClick = this.handleBtnClick.bind(this);
		super(props);
	}
	
	handleBtnClick () {
		if (!this.state.btnClickBool) return false;
		this.setState({
			btnClickBool: false
		});
		// handleBtnClick();
	}
	
	render () {
		return (
			<div>
				<button onClick={this.handleBtnClick}>click btn</button>
			</div>
		)
	}
}

<template>
	<div>
		<button @click={handleBtnClick}>click btn</button>
	</div>
</template>

<script>
export default {
	name: 'Example',
	data () {
		return {
			btnClickBool: true
		}
	},
	methods: {
		handleBtnClick () {
			if (!this.btnClickBool) return false;
			this.btnClickBool = false;
			// handleBtnClick();
		}
	}
}
</script>

取消点击事件（不推荐，但也有可能）

如：

let btnElem = document.querySelector('#testBtn');
function btnClickEvent () {
	btnElem.removeEventListener('click', btnClickEvent);
	// handleBtnClick();
}
btnElem.addEventListener('click', btnClickEvent, false);

1.2 重复请求处理

与重复点击的处理类似，简单的情况可以通过变量控制

变量控制——业务控制

在业务中通过变量控制请求的发送是一种常用的方式，如

let fetchBool = true;

function fetchTest () {
	if (!fetchBool) return false;
	fetchBool = false;
	get('/test').then(data => {
		// handleData();
		fetchBool = true;
	}).catch(e => {
		// errorHandler()
		fetchBool = true;
	})
}

变量控制——总控

如果我们要控制同一时间段仅有一个ajax请求，那么则可以通过重写请求方法进行总控。如

let getBool = true;
function getHalder (url, params) {
	return new Promise((resolve, reject) => {
		if (!getBool) return reject('warning!cannot get now.');
		getBool = false;
		get(url, params).then(data => {
			getBool = true;
			resolve(data);
		}).catch(e => {
			getBool = true;
			reject(e);
		})
	})
}

变量控制——总控MAP

如果我们只想控制一个接口在未返回结果的时候不能再次发送（比如发起购买），那么这种情况下前一种控制就不适用了。我们可以通过一个总控MAP进行控制。如

let get_map = {};
function getHalder (url, params) {
	return new Promise((resolve, reject) => {
		if (get_map[url]) return reject('warning!cannot get now.');
		get_map[url] = 1;
		get(url, params).then(data => {
			delete get_map[url];
			resolve(data);
		}).catch(e => {
			delete get_map[url];
			reject(e);
		})
	})
}

2.接口请求边界处理问题

在对接口数据进行取值/处理时，很多同学没有防御性编程的概念。如：

接口/interfaces/a，预期它的返回格式是

{
	code: '0000',
	data: {
		id: '100001'
	}
}

前端需要拿到id字段进行展示，错误的做法是直接取值：

// ...
get('/interfaces/a').then(data => {
	let id = data.data.id;
	// ...
})

这样做的话如果data返回格式异常或者data.data不存在的时候前端处理也出现异常报错。
而推荐的做法是对边界进行判断和处理：

// ...
get('/interfaces/a').then(data => {
	if (data && data.code === '0000') {
		data = data.data;
		if (data && data.id) {
			// ...
		}
	} else {
		alert('数据异常，请稍候再试')
	}
})

我们还可以使用Optional Chaining来简化写法。

// ...
get('/interfaces/a').then(data => {
	if (data?.code === '0000') {
		let id = data.data?.id;
		// ...
	} else {
		alert('数据异常，请稍候再试')
	}
})

*防御性编程

防御性编程（Defensive programming）是防御式设计的一种具体体现，它是为了保证，对程序的不可预见的使用，不会造成程序功能上的损坏。它可以被看作是为了减少或消除墨菲定律效力的想法。防御式编程主要用于可能被滥用，恶作剧或无意地造成灾难性影响的程序上。 ——wikipedia

对于前端开发来说，静态资源加载、后端接口请求和渲染这三个过程，我们需要防御其中可能出现的异常情况。

3.数字控制

比如数据的展示，我们通常都要处理。比如1.22 / 100，我们的预计是展示0.0122，但由于js的浮点问题，结果却是0.012199999999999999。关于数字精度的问题可以看《2.55.toFixed(1) === ‘2.6’》

处理方式1——四舍五入

也是最常用的方式，如果我们对数字展示的精度没有要求，比如金额展示处理后通常不能实际大，那么我们则可以直接用Number.prototype.toFixed(precision)来对展示位数进行控制，这也是最常用的处理方式，如

1	(1.22 / 100).toFixed(4); // "0.0122"

处理方式2——割弃

Number.prototype.toKeepedStr = function (precision = 2) {
	return this.toFixed(precision + 1).slice(0, -1);
};

(2.55).toFixed(1);	// '2.5'

【笔记】前端业务开发的注意点整理