提高代码质量——偏函数(带案例讲解)

文章结构

  • 什么是偏函数
  • 怎么使用偏函数
  • 场景1判断变量类型
  • 场景2动态生成一个标签
  • 为什么要用偏函数
  • 复杂场景感受一下偏函数的好处

什么是偏函数

偏函数是函数柯里化的其中一种表现,固化之前函数的一部分参数,将其设置为默认值,
然后返回一个新的函数。

怎么使用偏函数

我们需要将原本函数中的的一部分参数设置成默认值。使用一个函数返回一个函数,并将这个默认值作为return出来的函数的函数体内容被使用。当我们下次调用这个外层函数时,给这个默认值赋值。

场景1判断变量类型

// 以前我们要实现一个函数用来判断变量的类型是不是传入的类型时,可能是这么实现的
const isType = function(type, variable) {
    return Object.prototype.toString.call(variable) === "[object " + type + "]";
};
console.log(isType("Object", {})); // true

/* 如果现在我们的业务逻辑并没有那个复杂了,假如只需要判断是不是某一个类型时,这时
我们可以对原始函数进行修改 */
const isTypeCurrying = function(type) {
    return function(variable) {
        return Object.prototype.toString.call(variable) === "[object " + type + "]";
    }
}

const isTypeCurryingFunction = isTypeCurrying("Function");
console.log(isTypeCurryingFunction(function() {})); // true

场景2动态生成一个标签


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <script>
        // 以前我们动态生成一个标签函数可能是这样子的

        const createTags = function(tagType, content) {
            const startTag = "<" + tagType + ">";
            const endTag = " + tagType + ">";
            return `${startTag + content + endTag}`;
        };

        document.write(createTags("h1", "标题"));

        // 使用偏函数允许设置标签默认值
        const createTagsCurrying = function(tagType) {
            const startTag = "<" + tagType + ">";
            const endTag = " + tagType + ">";
            return function(content) {
                return `${startTag + content + endTag}`;
            }
        }
        const createDiv = createTagsCurrying("div");
        document.write(createDiv("我是一个div"));
        const createP = createTagsCurrying("p");
        document.write(createDiv("我是一个p"));
    script>
body>

html>

提高代码质量——偏函数(带案例讲解)_第1张图片

为什么要用偏函数

不知道大家看见上面两个案例有没有发现,两个案例的原始函数涉及的业务,换句话说,
实现的功能是比较大的。专业一点的讲:就是代码耦合度过大,原始函数使用起来需要
考虑的事情比较多。但是我们使用偏函数就可以将业务拆分成小业务,判断所有类型到
判断是否是函数,生成所有类型的标签到生成div标签。不管是使用起来还是后续维护起
来都会方便很多。(单单是看函数命名就能感觉到代码和事情变简单了不是)

复杂场景感受一下偏函数的好处

// 现在你接手了公司的一个项目,你发现项目中有一段代码如下
function select(type, num) {


    if (type == 'a') {
        // 模拟一段业务
        console.log(num + 1);
    } else if (type == 'b') {
        // 模拟一段业务
        console.log(num * 1);
    } else if (type == 'c') {
        // 模拟一段业务
        console.log(num ** 2);
    } else if (type == 'd') {
        // 模拟一段业务
        console.log(num / 2);
    }
}

// 现有实现的一些功能
select("a", 10); // 11
select("b", 10); // 10
select("c", 10); // 100
select("d", 10); // 5
现在领导让你在这个功能里面加一段业务,你可能会这么做。
function select(type, num) {


    if (type == 'a') {
        // 模拟一段业务
        console.log(num + 1);
    } else if (type == 'b') {
        // 模拟一段业务
        console.log(num * 1);
    } else if (type == 'c') {
        // 模拟一段业务
        console.log(num ** 2);
    } else if (type == 'd') {
        // 模拟一段业务
        console.log(num / 2);
    } else if (type == 'e') {
        console.log("新加的功能" + num % 2);
    }
}

// 现有实现的一些功能
select("a", 10); // 11
select("b", 10); // 10
select("c", 10); // 100
select("d", 10); // 5
select("e", 10); // 新加的功能0
这不是实现了,这不挺好的。but,现在是五个业务,看起来还行。但是业务多起来之后怎么
办每次调用select都会走一次循环语句,循环语句是会消耗性能的。咱们每次调用我们自己
的业务都要去跑一次循环语句?打开联机版GTA 5一条if语句跑了19.8亿次及其占用cpu性能。
导致打开时间过长这个事大家听说过没有?
如果使用偏函数会怎么样呢?
function select(type, num) {
    if (type == 'a') {
        // 模拟一段业务
        return function() {
            console.log(num + 1);
        }
    } else if (type == 'b') {
        // 模拟一段业务
        return function() {
            console.log(num * 1);
        }
    } else if (type == 'c') {
        // 模拟一段业务
        return function() {
            console.log(num ** 2);
        }
    } else if (type == 'd') {
        // 模拟一段业务
        return function() {
            console.log(num / 2);
        }
    } else if (type == 'e') {
        console.log("走循环了");
        return function() {
            console.log("新加的功能" + num % 2);
        }
    }
}

// 现有实现的一些功能
const selectA = select("a", 10);
const selectB = select("b", 10);
const selectC = select("c", 10);
const selectD = select("d", 10);
const selectE = select("e", 10);
selectB(); // 1210
selectC(); // 100
selectD(); // 5
selectE(); // 新加的功能0
selectE(); // 新加的功能0
selectE(); // 新加的功能0
selectE(); // 新加的功能0
selectE(); // 新加的功能0

提高代码质量——偏函数(带案例讲解)_第2张图片

不管我们调用了多少次我们写的功能函数,都只会走一次循环。Salute to you这个知识点
讲完啦。不知道大家有没有学会呢?

你可能感兴趣的:(js函数式编程,前端,javascript,基础)