JavaScript之事件的转控、反控、函数式编程

文章目录

  • 效果图
  • html
  • JavaScript
  • 解析


效果图

JavaScript之事件的转控、反控、函数式编程_第1张图片


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("用户点击了 '确认'");
        }
    );
}

解析

这简化编程人员对条件做判断,通过函数的方式实现对应功能,关于判断则直接放在了封装函数里面。
此功能适合用在框架的组件传参中。
条件式转为函数式编程。
函数在执行的时候传递的参数为函数,函数接收两个参数;被执行函数接收一个函数类型的参数;调用参数时传递两个函数回去给原函数做调用操作。

你可能感兴趣的:(web前端,JavaScript,javascript,前端,web)