Vue中的callback回调函数

Vue中的callback回调函数

回调函数callback只是提高了函数的复用性

回调函数的写法

1
2
3
4
5
6
7
8
9
10
11
12
function validatePassword(rule, value, callback){
if(value.length<6){
callback(new Error('密码不能低于6位!请重新输入。'))
}else{
callback('密码长度正确!')
}
}
function showMsg(msg){//回调函数,用来接收校检结果
console.log(msg)
}
validatePassword('','lvjie123',showMsg)//密码长度正确!
validatePassword('','lv12',showMsg)//Error: 密码不能低于6位!请重新输入。

使用回调函数的好处是 validatePassword 不需要知道将要调用的函数名,只要传个函数过来最终它的名字都会变成 callback , validatePassword 函数就变成一个可以复用的函数。

如果是这种没有回调的写法:

1
2
3
4
5
6
7
8
9
10
11
12
function validatePassword(rule, value){
if(value.length<6){
showMsg(new Error('密码不能低于6位!请重新输入。'))
}else{
showMsg('密码长度正确!')
}
}
function showMsg(msg){//回调函数,用来接收校检结果
console.log(msg)
}
validatePassword('','lvjie123')//密码长度正确!
validatePassword('','lv12')//Error: 密码不能低于6位!请重新输入。

那么就没法复用,如果 showMsg 这个函数需要改名,那 validatePassword 内部使用了 showMsg 这个函数也得去改,因为已经写死了。

Vue中的callback回调函数

作者

lvjie

发布于

2022-06-18

许可协议


:D 一言句子获取中...