函数式编程离我们有多远?

函数式编程(Functional Programming)其实相对于计算机的历史而言是一个非常古老的概念,甚至早于第一台计算机的诞生。函数式编程的基础模型来源于 λ 演算,而 λ 演算并非设计于在计算机上执行,它是由 Alonzo Church 和 Stephen Cole Kleene 在 20 世纪三十年代引入的一套用于研究函数定义、函数应用和递归的形式系统。

functional programming

随着计算机语言、Web和前端的发展,JavaScript这门语言被越来越广泛地使用。作为现代编程语言的代表作之一的JavaScript,与和它具有相似性的一些现代编程语言一样,都有着函数式的某些特性,以至于 Douglas Crockford 在他写的 《JavaScript : The Good Parts》中说,JavaScript 是披着 C 外衣的 Lisp。

函数式编程究竟是什么

函数式编程是一种编程思想或者说编程泛型,网上的各种资料和技术书籍中都会有对它的基本定义。根据基本定义,通常情况下,函数式编程强调函数计算本身,而不是如同经典的命令式编程模型那样强调指令执行。

以上定义只是定义,就像面向对象编程的定义是将计算机程序用单个能够起到子程序作用的单元或对象组合而成。这种定义总是正确的,但有时候无助于我们真正理解它,因此我们还是需要通过代码来理解。

如同面向过程面向对象一样,函数式编程思想体现在代码上,会带有明显的特征,以至于我们可以将这种编程思想同程序的其他部分区别开来。但这里我并不是要谈标准的、纯粹的或者规范的"函数式"风格,那是一种类似于LISP或者Scheme语言的风格,显然并不适合于JavaScript或者类似于JavaScript的现代编程语言。就像我们讨论面向对象不必强调纯粹性一样,我们在实际工作中很少用到单一的纯粹的泛型,通常情况下都是几种模型混合使用。如同面向对象和面向过程不可分割一样,函数式、面向对象和面向过程的编程泛型常常混合于我们的代码中,如果不去刻意区分它们,很难将它们彻底独立开来。

先来看一段简单的示例代码:

function add(x, y){
        return x + y;
    }

    function mul(x, y){
        return x * y;
    }

    function concat(arr1, arr2){
        return arr1.concat(arr2);
    }

    console.log(add(1, add(2, 3)),     //6
        mul(1, mul(2, mul(3, 4))),        //24
        concat([1, 2], concat([3, 4], [5, 6]))); //[1,2,3,4,5,6]

上面的代码中,我们有 3 个简单的函数,用来计算两个数的和、积以及两个数组的连接。我们看到,当我们要对两个以上的数进行操作的时候,调用起来略显繁琐,所以我们可以对它们进行一系列修改,使得它们支持多个数连续的操作:

版本1

function add(...args){
        return args.reduce((x, y) => x + y);
    }

    function mul(...args){
        return args.reduce((x, y) => x * y);
    }

    function concat(...args){
        return args.reduce((arr1, arr2) => arr1.concat(arr2));
    }

    console.log(add(1, 2, 3),     //6
        mul(1, 2, 3, 4),        //24
        concat([1, 2], [3, 4], [5, 6])); //[1,2,3,4,5,6]

上面的代码通过对三个函数的分别修改,将它们改造成了支持多个操作数的版本,实现了我们简化函数调用的目的。不过,这不是一种足够聪明的做法,因为如果我们还有更多类似函数,我们还得对这些函数进行一一的改写。

注意到,我们完全可以一次性抽取出一个通用的版本 reduce ,它的作用是当任意两个参数的函数如果传入多余2个函数时,用这些参数进行 reduce 迭代:

版本二

function reduce(fn, ...args){
        return args.reduce(fn);
    }

    function add(x, y){
        return x + y;
    }

    function mul(x, y){
        return x * y;
    }

    function concat(arr1, arr2){
        return arr1.concat(arr2);
    }

    console.log(reduce(add, 1, 2, 3),     //6
        reduce(mul, 1, 2, 3, 4),        //24
        reduce(concat, [1, 2], [3, 4], [5, 6])); //[1,2,3,4,5,6]

上面的代码好处是显而易见,我们不再需要对 add、mul、concat 分别进行修改,并且 reduce 可以应用在任何一个两个参数的函数上。不过呢,我们还是修改了函数调用的过程,改变了调用的函数和参数。然而,我们可以进一步进行优化:

版本三

function reduce(fn, ...args){
        return args.reduce(fn);
    }

    function add(x, y){
        return x + y;
    }

    function mul(x, y){
        return x * y;
    }

    function concat(arr1, arr2){
        return arr1.concat(arr2);
    }

    add = reduce.bind(null, add);
    mul = reduce.bind(null, mul);
    concat = reduce.bind(null, concat);

    console.log(add(1, 2, 3),     //6
        mul(1, 2, 3, 4),        //24
        concat([1, 2], [3, 4], [5, 6])); //[1,2,3,4,5,6]

在这里,我们利用 reduce 和 bind 方法改变了 add、mul 和 concat。当然我们这么做带来一个小小的副作用,那就是 this 被限定为 null。我们还有更好的做法:

版本四

function reduce(fn){
        return function(...args){
            return args.reduce(fn.bind(this));
        }
    }

    function add(x, y){
        return x + y;
    }

    function mul(x, y){
        return x * y;
    }

    function concat(arr1, arr2){
        return arr1.concat(arr2);
    }

    add = reduce(add);
    mul = reduce(mul);
    concat = reduce(concat);

    console.log(add(1, 2, 3),     //6
        mul(1, 2, 3, 4),        //24
        concat([1, 2], [3, 4], [5, 6])); //[1,2,3,4,5,6]

在这个版本中,我们干脆让 reduce 返回 function,实际上我们相当于让 reduce 对函数进行了变换。我们可以这样理解,函数变换基于原始函数包装了一个新的函数,新的函数在原始函数的基础上具备某些增强的能力。在这里我们得到了一颗函数式编程的"糖果"----我们可以像操作数据那样操作一组函数,使得这些函数具备某些新的能力。而这,就是过程抽象的基本思想。这些变换函数的函数我们称之为"高阶函数"

procedural abstraction

上面的代码我们是否还能进一步优化?事实上还是可以,如果 reduce 的函数是异步的,那么我们前面的函数是处理不了的,因此我们可以再设计一下 reduce,让它支持异步函数:

function reduce(fn, async){
      if(async){
        return function(...args){
          return args.reduce((a, b)=>{
            return Promise.resolve(a).then((v)=>fn.call(this, v, b));
          });
        }
      }else{
        return function(...args){
          return args.reduce(fn.bind(this));
        }
      }
    }

    function add(x, y){
      return x + y;
    }

    function mul(x, y){
      return x * y;
    }

    function concat(arr1, arr2){
      return arr1.concat(arr2);
    }

    function asyncAdd(x, y){
      return new Promise((resolve, reject)=>{
        setTimeout(()=> resolve(x+y), 100); 
      });
    }

    add = reduce(add);
    mul = reduce(mul);
    concat = reduce(concat);

    console.log(add(1, 2, 3),   //6
      mul(1, 2, 3, 4),    //24
      concat([1, 2], [3, 4], [5, 6])); //[1,2,3,4,5,6]

    asyncAdd = reduce(asyncAdd, true);
    asyncAdd(1, 2, 3).then((v)=>console.log(v));

过程抽象的具体应用

函数调用的频度控制

在实际项目中,我们有时候会遇到限制某函数调用频率的需求。例如,防止一个按钮短时间的的重复点击,防止 resize、scroll 和 mousemove 事件过于频繁地触发等。

throttle

throttle 可以限制函数调用的频率,常用来防止按钮被重复点击。

//限制button在500ms内只能被点击一次
    $("#btn").click(throttle(function(evt){
        do sth.
    }, 500);

throttle 的简单实现

function throttle(fn, wait){
        var timer;
        return function(...args){
            if(!timer){
                timer = setTimeout(()=>timer=null, wait);
                return fn.apply(this, args);
            }
        }
    }

    //按钮每500ms一次点击有效
    btn.onclick = throttle(function(){
        console.log("button clicked");
    }, 500);

debounce

有时候我们希望函数在某些操作执行完成之后被触发。例如,实现搜索框的 Suggest 效果,如果数据是从服务器端读取的,为了限制从服务器读取数据的频率,我们可以等待用户输入结束 100ms 之后再触发 Suggest 查询:

searchBox.addEventListener("input", debounce(function(){
        loadSuggestion();
    }, 100));

debouce 的简单实现:

function debounce(fn, delay){
        var timer = null;
        return function(...args){
            clearTimeout(timer);
            timer = setTimeout(() => fn.apply(this, args), delay);
        }
    }

    window.addEventListener("scroll", debounce(function(){
        console.log("scrolled");
    }, 500));

DOM的批量操作

jQuery 的语法糖特点包括批量操作与链式调用。我们可以看一下,实际上用函数式的过程抽象思想很容易实现类似的"语法糖"。我们先考虑如何支持函数的"批量操作"。

function multicast(fn){
      return function(list, ...args){
        if(Array.isArray(list)){
          return list.map((item)=>fn.apply(this, [item,...args]));
        }else{
          return fn.apply(this, [list,...args]);
        }
      }
    }

    function add(x, y){
        return x + y;
    }

    add = multicast(add);

    console.log(add([1,2,3], 4)); //5,6,7

有了 multicast,我们来尝试用它批量操作一个 ul 中的 li 元素:

<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ul>
function multicast(fn){
      return function(list, ...args){
        if(Array.isArray(list)){
          return list.map((item)=>fn.apply(this, [item,...args]));
        }else{
          return fn.apply(this, [list,...args]);
        }
      }
    }

    function setColor(el, color){
      return el.style.color = color;
    }

    setColor = multicast(setColor);

    var list = document.querySelectorAll("li:nth-child(2n+1)");
    setColor(Array.from(list), "red");

演示例子

Wrapper and decorators

我们可以对上面的例子进行进一步的处理,添加对 selector 参数的支持。这一次,我们使用一个叫做 wrap 的新的高阶函数,它可以对原始函数的参数和返回值进行再包装。

function multicast(fn){
      return function(list, ...args){
        if(Array.isArray(list)){
          return list.map((item)=>fn.apply(this, [item,...args]));
        }else{
          return fn.apply(this, [list,...args]);
        }
      }
    }

    function wrap(fn, before, after){
      return function(...args){
        if(before){
            args = before.apply(this, args);
        }
        let ret = fn.apply(this, args);
        if(after){
            ret = after.call(this, [ret, ...args]);
        }
        return ret;
      }
    }

    function setColor(el, color){
      return el.style.color = color;
    }

    function setFontSize(el, size){
      return el.style.fontSize = size;
    }

    function cast(fn){
      return wrap(multicast(fn), (...args)=>{
          if(typeof args[0] === "string"){
              args[0] = Array.from(document.querySelectorAll(args[0]));
          }
          return args;
      });
    }

    [setColor, setFontSize] = multicast(cast)([setColor, setFontSize]);

    setColor("li:nth-child(2n+1)", "red");

    setFontSize("li:nth-child(2n+1)", "32px");

演示例子

接下来,我们继续对上面的代码进行优化,我们可以构造一个高阶函数 zip,它结合面向对象和过程抽像:

function zip(props){
      function Class(...args){
        this.__args = args;
      }
      let keys = Object.keys(props);
      keys.forEach((key) => {
        Class.prototype[key] = function(...args){
          return props[key].apply(this, [...this.__args, ...args]);
        };
      });
      return (...args)=>new Class(...args);
    }

    function add(x, y){
      return x + y;
    }

    function sub(x, y){
      return x - y;
    }

    let N = zip({add, sub});

    console.log(N(9).add(8)); //17

    console.log(N(3).sub(5)); //-2

有了 zip,我们就可以实现链式调用:

function zip(props){
      function Class(...args){
        this.__args = args;
      }
      let keys = Object.keys(props);
      keys.forEach((key) => {
        Class.prototype[key] = function(...args){
          return props[key].apply(this, [...this.__args, ...args]);
        };
      });
      return (...args)=>new Class(...args);
    }

    function multicast(fn){
      return function(list, ...args){
        if(Array.isArray(list)){
          return list.map((item)=>fn.apply(this, [item,...args]));
        }else{
          return fn.apply(this, [list,...args]);
        }
      }
    }

    function wrap(fn, before, after){
      return function(...args){
        if(before){
        args = before.apply(this, args);
        }
        let ret = fn.apply(this, args);
        if(after){
            ret = after.apply(this, [ret, ...args]);
        }
        return ret;
      }
    }

    function setColor(el, color){
      return el.style.color = color;
    }

    function setFontSize(el, size){
      return el.style.fontSize = size;
    }

    function cast(fn){
      return wrap(multicast(fn), (...args)=>{
          if(typeof args[0] === "string"){
              args[0] = Array.from(document.querySelectorAll(args[0]));
          }
          return args;
      }, (ret,...args)=>$(args[0]));
    }

    [setColor, setFontSize] = multicast(cast)([setColor, setFontSize]);

    let $ = zip({setColor, setFontSize});

    $("li:nth-child(2n+1)").setColor("red").setFontSize("32px");

演示例子

通过上面的例子,我们体会一下函数式编程的基本思想:

  • 设计高阶函数:操作函数的函数,例如例子中的 multicast、wrap、cast、zip
  • 高阶函数之间可以组合调用,例如 cast 调用 wrap, wrap 调用 multicast,cast 后的函数再被 zip 调用。组合调用可以给函数扩展出复杂的功能。

防御性编程

我们还可以使用上面的 wrap 高阶函数进行防御性编程:

function wrap(fn, before, after){
      return function(...args){
        if(before){
        args = before.apply(this, args);
        }
        let ret = fn.apply(this, args);
        if(after){
            ret = after.call(this, [ret, ...args]);
        }
        return ret;
      }
    }

    Object.defineProperty(window, "ERROR_IF_MISSING", {
      get: function(){
        throw new TypeError("missing parameter")
      },
      writeable: false
    });


    function add(x, y){
        return x + y;
    }

    var add = wrap(add, 
              (x = ERROR_IF_MISSING, y = ERROR_IF_MISSING)=>[x, y]);

    //Uncaught TypeError: missing parameter
    console.log(add());

演示例子

上面的代码如果不给 x 或 y 赋值,就会强制抛出一个 TypeError。

总结

我们说函数式编程是一种编程思想或者编程范式,上面的例子演示了函数式编程思想本身的基本应用场景。其实不管是号称支持函数式编程的 lodash、underscore 或者更强大一些的 ramdajs 库,它们的基本原理和使用场景也都包括上面的这些点。

通过上面的讨论我们还可以得出结论,函数式编程拥有强大的抽象能力,也正是因为抽象能力强,函数式编程的模型才拥有巨大的潜力。

函数式编程是程序设计范式的一种,就像面向对象编程一样,它是我们解决问题可以选择的模式和思路,它和命令式编程(面向过程、面向对象)之间并不意味着非此即彼的选择,而是可以并存。所以,关键问题不在于函数式编程实不实用,而在于学习一种新的思考模式,这种思考模式能够帮助我们更深入理解程序设计原理和本质,深入了解函数式编程的优点和缺点,从而写出更通用抽象能力更强质量更好的代码。

这不会是月影的最后一篇关于函数式编程的讨论,而仅仅是一个开始,因为函数式编程领域很大,这是一个很深的话题,让我们一起继续探索吧。

Chrome 81 正式发布 !消灭混合内容最后一步~

Chrome 81 于前天正式发布了,这个版本其实最初是计划在 3 月 17 号 发布的,但由于冠状病毒(COVID-19)爆发而导致推迟到了现在。Chrome 81 的延迟也扰乱了 Google 正常的六周发布时间表。因此 Google 此前也宣布,下一个版本将直接跳过 Chrome 82 ,直接发布 Chrome 83。 下面我就来带大家看看 Chrome 81 有哪些重要的更新。

发布于:4天以前  |  23次阅读  |  详细内容 »

当浏览器全面禁用三方 Cookie

苹果公司前不久对 Safari 浏览器进行一次重大更新,这次更新完全禁用了第三方 Cookie,这意味着,默认情况下,各大广告商或网站将无法对你的个人隐私进行追踪。而微软和 Mozilla 等也纷纷采取了措施禁用第三方 Cookie,但是由于这些浏览器市场份额较小,并没有给市场带来巨大的冲击。

发布于:4天以前  |  19次阅读  |  详细内容 »

H5 直播的疯狂点赞动画是如何实现的?

直播有一个很重要的互动:点赞。 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯狂点赞 直播间的所有疯狂点赞,都需要在所有用户界面都动画展现出来(广播用户使用websocket消息)

发布于:4天以前  |  15次阅读  |  详细内容 »

探索 Serverless 中的前端开发模式

最近关于 Serverless 的讨论越来越多。看似与前端关系不大的 Serverless,其实早已和前端有了渊源,并且将对前端开发模式产生变革性的影响。本文主要就根据个人理解和总结,从前端开发模式的演进、基于 Serverless 的前端开发案例以及 Serverless 开发最佳实践等方面,与大家探讨 Serverless 中的前端开发模式。本人也有幸在 QCon2019 分享了这一主题。

发布于:4天以前  |  17次阅读  |  详细内容 »

前端需要了解的9种设计模式

设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题,毕竟这是前人无数经验总结成的最佳实践,而代码实现则是对加深理解的辅助。

发布于:4天以前  |  21次阅读  |  详细内容 »

为什么你的网页需要 CSP?

内容安全策略(CSP)是一个 HTTP Header,CSP 通过告诉浏览器一系列规则,严格规定页面中哪些资源允许有哪些来源, 不在指定范围内的统统拒绝。

发布于:4天以前  |  16次阅读  |  详细内容 »

10 种跨域解决方案(附终极方案)

嗯。又来了,又说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着你去了解底层啊,不是很简单吗。但是最近在开发一个 「vscode 插件」 发现,当你刚入门一样东西的时候,你不会想这么多,因为你对他不熟悉,当你遇到不会的东西,你就是想先找到解决方案,然后通过这个解决方案再去深入理解。

发布于:4天以前  |  27次阅读  |  详细内容 »

移动 Web 最佳实践(干货长文,建议收藏)

笔者在公司用 web 技术开发移动端应用已经有一年多的时间了,开始主要以 vue 技术栈配合 native 为主,目前演进成 vue + react native 技术架构,vue 主要负责开发 OA 业务,比如报销、出差、crm 等等,react native 主要负责即时通信部分,是在 mattermost-mobile的基础上修改的(mattermost 是一个开源的即时通讯方案)。

发布于:4天以前  |  22次阅读  |  详细内容 »

不可错过的实用前端工具

给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具,包括一些小游戏、教程、社区网站和博客,以及一些资源网站,希望可以帮助到大家!

发布于:4天以前  |  22次阅读  |  详细内容 »

理解 WebView

我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器来浏览网页。你也许正在使用其中一种浏览器阅读本文!虽然浏览器对于访问互联网内容的任务来说非常流行,它们还有一些我们从未过多关注过的竞争对手。这些竞争对手以 WebView 的形式被我们所熟知。这片文章将讲解 WebView 的神秘之处以及为什么它这么棒。

发布于:4天以前  |  23次阅读  |  详细内容 »

Facebook 前端技术栈重构分享

当我们考虑如何构建一个新的网络应用—一个为现代浏览器设计的、具有用户对Facebook(我们已知的)所有期望的功能,我们现有的技术栈无法支持我们所需要的类似于桌面应用的感觉和性能。

发布于:4天以前  |  19次阅读  |  详细内容 »

最多阅读

为Electron程序添加运行时日志 11月以前  |  4373次阅读
初探 React 组件 1年以前  |  2104次阅读
wordpress标签页的制作 1年以前  |  1970次阅读
500行PHP代码搞定富文本安全过滤 1年以前  |  1896次阅读
js动态创建类和实例化 1年以前  |  1877次阅读
Node.js下通过配置host访问URL 1年以前  |  1867次阅读
使用 SRI 增强 localStorage 代码安全 1年以前  |  1836次阅读
22个HTML5的初级技巧 1年以前  |  1835次阅读
浅谈浏览器的原生拖拽事件 1年以前  |  1810次阅读
第三版主题上线 1年以前  |  1799次阅读
CSS清除浮动 1年以前  |  1791次阅读
2014年度总结 1年以前  |  1743次阅读
【译】V8 团队眼中的 ES6、ES7及未来 1年以前  |  1738次阅读
利用服务器返回header来传输数据 1年以前  |  1723次阅读
获取元素的计算的样式 1年以前  |  1718次阅读