前端业务开发的注意点(持续)
1.重复点击/请求
1.1 重复点击处理
变量控制
通过变量控制是否执行点击时间
原生
1 2 3 4 5 6 7 8
| let btnElem = document.querySelector('#testBtn'); let btnClickBool = true; btnElem.addEventListener('click', function () { if (!btnClickBool) return false; btnClickBool = false; }, false);
|
jQuery/Zepto
1 2 3 4 5 6 7 8
| let $btnElem = $('#testBtn'); let btnClickBool = true; $btnElem.click(function () { if (!btnClickBool) return false; btnClickBool = false; })
|
React
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
|
function Example () { let [btnClickBool, setBtnClickBool] = useState(false); const handleBtnClick = () => { if (!btnClickBool) return false; setBtnClickBool(true); }; return ( <div> <button onClick={handleBtnClick}>click btn</button> </div> ) }
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 }); } render () { return ( <div> <button onClick={this.handleBtnClick}>click btn</button> </div> ) } }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| <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>
|
取消点击事件(不推荐,但也有可能)
如:
1 2 3 4 5 6
| let btnElem = document.querySelector('#testBtn'); function btnClickEvent () { btnElem.removeEventListener('click', btnClickEvent); } btnElem.addEventListener('click', btnClickEvent, false);
|
1.2 重复请求处理
与重复点击的处理类似,简单的情况可以通过变量控制
变量控制——业务控制
在业务中通过变量控制请求的发送是一种常用的方式,如
1 2 3 4 5 6 7 8 9 10 11 12 13
| let fetchBool = true;
function fetchTest () { if (!fetchBool) return false; fetchBool = false; get('/test').then(data => { fetchBool = true; }).catch(e => { fetchBool = true; }) }
|
变量控制——总控
如果我们要控制同一时间段仅有一个ajax请求,那么则可以通过重写请求方法进行总控。如
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| 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进行控制。如
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| 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
,预期它的返回格式是
1 2 3 4 5 6
| { code: '0000', data: { id: '100001' } }
|
前端需要拿到id字段进行展示,错误的做法是直接取值:
1 2 3 4 5
| get('/interfaces/a').then(data => { let id = data.data.id; })
|
这样做的话如果data返回格式异常或者data.data不存在的时候前端处理也出现异常报错。
而推荐的做法是对边界进行判断和处理:
1 2 3 4 5 6 7 8 9 10 11
| get('/interfaces/a').then(data => { if (data && data.code === '0000') { data = data.data; if (data && data.id) { } } else { alert('数据异常,请稍候再试') } })
|
我们还可以使用Optional Chaining来简化写法。
1 2 3 4 5 6 7 8 9
| 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);
|
处理方式2——割弃
1 2 3 4 5
| Number.prototype.toKeepedStr = function (precision = 2) { return this.toFixed(precision + 1).slice(0, -1); };
(2.55).toFixed(1);
|
Author
My name is Micheal Wayne and this is my blog.
I am a front-end software engineer.
Contact: michealwayne@163.com