文章目录
- 效果图
- html
- JavaScript
- 解析
效果图
html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数式编程</title><link rel="stylesheet" href="./index.css">
</head><body class="h_100vh d_f jc_c ai_c"><div class="w_386 d_f jc_sb ai_c"><button class="w_150 h_86 lh_86 fs_50 ta_c" onclick="clickF(1)">取消</button><button class="w_150 h_86 lh_86 fs_50 ta_c color_1296db" onclick="clickF(2)">确认</button></div><script src="./index.js"></script>
</body></html>
JavaScript
function clickF(val) {controlConversion(function (cancel, confirm) {val === 1 ? cancel() : confirm();});
}function controlConversion(res) {res(function cancel() {alert("用户点击了 '取消'");},function confirm() {alert("用户点击了 '确认'");});
}
解析
这简化编程人员对条件做判断，通过函数的方式实现对应功能，关于判断则直接放在了封装函数里面。
此功能适合用在框架的组件传参中。
条件式转为函数式编程。
函数在执行的时候传递的参数为函数，函数接收两个参数；被执行函数接收一个函数类型的参数；调用参数时传递两个函数回去给原函数做调用操作。
