[underscore 源码学习] delay 延迟执行函数 - compose 函数组合 - escape 字符串逃逸

延迟执行函数 delay

_.delay(function, wait, *arguments)

类似 setTimeout，等待 wait 毫秒后调用 function。如果传递可选的参数 arguments，当函数 function 执行时，arguments 会作为参数传入。
test.js

    _.delay = function(func, wait) {
        const args = [].slice.call(arguments, 2);
        return setTimeout(function() {
           // 将参数赋予 func 函数
           return func.apply(null, args);
        }, wait);
    };

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>underscore</title>
</head>
<body>
    <script src="./test.js"></script>
    <script>
        _.delay(function () {
            console.log('console after 1500');
        }, 1500);
    </script>
</body>
</html>

函数组合 compose

_.compose(*functions)

返回函数集 functions 组合后的复合函数，也就是一个函数执行完之后把返回的结果再作为参数赋给下一个函数来执行。以此类推，在数学中，把函数 f()，g() 和 h() 组合起来可以得到复合函数 f(g(h()))。
test.js

    _.compose = function() {
        const funcList = [].slice.call(arguments);

        return function(val) {
            return _.reduceRight(funcList, function(memo, func) {
                return func(memo);
            }, val);
        }
    };
    // 或
    _.compose = function() {
        const args = arguments;
        const start = args.length - 1;

        return function() {
            let i = start;
            let result = args[start].apply(this, arguments);
            while (i--) result = args[i].call(this, result);
            return result;
        }
    };

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>underscore</title>
</head>
<body>
    <script src="./test.js"></script>
    <script>
        function a(val) {
            return val * 2;
        }
        function b(val) {
            return val + 2;
        }
        function c(val) {
            return val - 2;
        }
        console.log(_.compose(a, b, c)(5));
    </script>
</body>
</html>

escape 字符串逃逸（防止 XSS 攻击）

转义字符

也有更形象的译名脱逸字符，逃逸字符等。针对某些特定字符串转义并替换为特定字符串。

_.escape(string)

转义 HTML 字符串，替换 &，<，>，"，' 和 / 字符。
test.js

    const escapeMap = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#x27;',
        '`': '&#x60;'
    };

    const createEscaper = function(map) {
        const escaper = function(match) {
            return map[match];
        };
        const source = '(?:' + Object.keys(map).join('|') + ')';
        const testRegExp = new RegExp(source, "g");
        return function(string) {
            return testRegExp.test(string) ? string.replace(testRegExp, escaper) : string;
        };
    };

    _.escape = createEscaper(escapeMap);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>underscore</title>
</head>
<body>
    <script src="./test.js"></script>
    <script>
        console.log(_.escape("<a>aaaaa"));
    </script>
</body>
</html>

显示结果如下：

最后编辑于：2020.01.29 17:04:02