文章目录
- 效果图
- 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("用户点击了 '确认'");
}
);
}
解析
这简化编程人员对条件做判断，通过函数的方式实现对应功能，关于判断则直接放在了封装函数里面。
此功能适合用在框架的组件传参中。
条件式转为函数式编程。
函数在执行的时候传递的参数为函数，函数接收两个参数；被执行函数接收一个函数类型的参数；调用参数时传递两个函数回去给原函数做调用操作。
