函数式编程之组合

该系列文章不是针对前端新手,需要有一定的编程经验,而且了解 JavaScript 里面作用域,闭包等概念 组合函数 组合是一种为软件的行为,进行清晰建模的一种简单、优雅而富于表现力的方式。通过组合小的、确定性的函数,来创建更大的软件组件和功能的过程,会生成更容易组织、理解、调试、扩展、测试和维护的软件。 对于组合,我觉得是函数式编程里面最精髓的地方之一,所以我迫不及待的把这个概念拿出来先介绍,因为在整个学习函数式编程里,所遇到的基本上都是以组合的方式来编写代码,这也是改变你从一个面向对象,或者结构化编程思想的一个关键点。 我这里也不去证明组合比继承好,也不说组合的方式写代码有多好,我希望你看了这篇文章能知道以组合的方式去抽象代码,这会扩展你的视野,在你想重构你的代码,或者想写出更易于维护的代码的时候,提供一种思路。 组合的概念是非常直观的,并不是函数式编程独有的,在我们生活中或者前端开发中处处可见。 比如我们现在流行的 SPA (单页面应用),都会有组件的概念,为什么要有组件的概念呢,因为它的目的就是想让你把一些通用的功能或者元素组合抽象成可重用的组件,就算不通用,你在构建一个复杂页面的时候也可以拆分成一个个具有简单功能的组件,然后再组合成你满足各种需求的页面。 其实我们函数式编程里面的组合也是类似,函数组合就是一种将已被分解的简单任务组织成复杂的整体过程。 现在我们有这样一个需求:给你一个字符串,将这个字符串转化成大写,然后逆序。 你可能会这么写。 // 例 1.1 var str = 'function program' // 一行代码搞定 function oneLine(str) { var res = str.toUpperCase().split('').reverse().join('') return res; } // 或者 按要求一步一步来,先转成大写,然后逆序 function multiLine(str) { var upperStr = str.toUpperCase() var res = upperStr.split('').reverse().join('') return res; } console.log(oneLine(str)) // MARGORP NOITCNUF console.log(multiLine(str)) // MARGORP NOITCNUF 可能看到这里你并没有觉得有什么不对的,但是现在产品又突发奇想,改了下需求,把字符串大写之后,把每个字符拆开之后组装成一个数组,比如 ’aaa‘ 最终会变成 [A, A, A]。 那么这个时候我们就需要更改我们之前我们封装的函数。这就修改了以前封装的代码,其实在设计模式里面就是破坏了开闭原则。 那么我们如果把最开始的需求代码写成这个样子,以函数式编程的方式来写。 // 例 1....

4 min · 789 words · 桃翁

函数式编程资料

Eric Elliott 函数式教程 征服 JavaScript 面试: 什么是函数式编程? 组合软件:1. 函数式编程的兴衰 为什么用 JavaScript 学习函数式编程?(软件编写)(第二部分) 函数式程序员的 JavaScript 简介 (软件编写)(第三部分) 高阶函数(软件编写)(第四部分) Reduce(软件编写)(第五部分) Functor 与 Category (软件编写)(第六部分) 函数式 Mixin(软件编写)(第七部分) 为什么在使用了类之后会使得组合变得愈发困难(软件编写)(第九部分) 借助函数完成可组合的数据类型(软件编写)(第十部分) JavaScript 让 Monad 更简单(软件编写)(第十一部分) JavaScript 轻量级函数式编程 JavaScript 轻量级函数式编程 Starkwang.log JavaScript函数式编程(一) JavaScript函数式编程(二) JavaScript函数式编程(三) 如果你想成为函数式编程爱好者 如何成为一位函数式编程爱好者(Part 1) 如何成为一位函数式编程爱好者(Part 2) 如何成为一位函数式编程爱好者(Part 3) 如何成为一位函数式编程爱好者(Part 4) 如何成为一位函数式编程爱好者(Part 5) 如何成为一位函数式编程爱好者(Part 6) 书籍 《JavaScript 函数式编程指南》推荐 《JavaScript 函数式编程思想》推荐 《JavaScript ES6 函数式入门经典》看了上面两本这本就不用买了 《JavaScript 函数式编程》 相关库 https://folktale.origamitower.com/ https://github.com/fantasyland/fantasy-land http://ramda.cn/ http://lodash.think2011.net/

1 min · 66 words · 桃翁

前端桃园周刊第五期

文章 1. Thinking in React Hooks 当从 React 类组件切换到函数组件 + hook 时,基本的思维模式发生了什么变化。 2. Ant Design 1.0 背后的故事:把艺术变成技术 我以前一直不喜欢读历史,今年了解吴军老师比较多,听他的硅谷来信,看他的书:《浪潮之巅》、《文明之光》才决定历史背景原来那么重要,了解历史你会发现现在很多的东西都是必然会出现的。 Ant Desgin 这么伟大的东西,了解一个产品背后的故事,我觉得还是很有必要的,看看为什么别人能做出伟大的东西,而我们不能。 3. 前端API层架构,也许你做得还不够 架构设计是一条永远走不完的路,没有最好,只有更好。这个道理适用于软件设计的各个场景,前端API 层的设计也不例外,如果您觉得在调用接口时还存在诸多槽点,那就说明您的接口层架构还待优化。作者以 vue + axios 为例,为大家梳理下我的一些经历和设想。 4. 你的 Mac 用对了吗?推荐一些 Mac 上比较好用的软件 这些 mac 软件都挺好用的,强烈推荐。 5. 再谈编程范式—程序语言背后的思想 详细讲述了命令式、过程式、说明式、面向对象、函数式、泛型编程各个编程范式的特性。 6. 少讲大道理,多解决小问题 二爷这篇文章以很多亲身体验的例子来阐述了多做事,少废话的道理,非常值得一读。 挖宝 1. vscode 字体 fira code 一款为程序员专属的字体。 2. 大四学生开源文言文编程语言 这一项目并不是简单的将程序中的英文字符换成了中文,而是利用 NLP 的一些技术,将文言文程序语法转换到 JavaScript 或 Python 运行,有一定的技术难度。 如果读者想快速试一试,你也可以玩一玩在线 IDE,上面有很多预定义的函数。即使在手机上,我们也能编辑并运行「文言文代码」。 3. lutaonan.com 一款很简洁的博客,文章阅读页的样式准备参考他的。 4. 方凳雅集 方凳雅集是阿里B系前端技术团队的专属公众号,内容来自1688、阿里巴巴国际站、零售通、AliExpress、企业金融、考拉等多个BU的前端团队,涵盖阿里原创技术、精彩翻译和公司文化、职业成长等内容。 最近关注到的质量比较高的前端公众号了,不过不太适合初级工程师,文章话题一般比较高大上,都是他们团队内部的一些解决方案,而不是基础知识。 5. 第十四届D2前端技术论坛「创心」 12 月 14 日,第十四届 D2 前端技术论坛在杭州圆满举办。来自全国各地的近千名开发者齐聚杭州,聆听 3 大会场、来自 24 位海内外嘉宾的 21 个主题分享。...

1 min · 85 words · 桃翁

前端桃园周刊第六期

小知识 伪类before/after中的图片大小是不是不能设置的? 文章 编写组件的 10 个原则 一篇英文文章,之前面试被面到过设计组件的时候要注意哪些,当时我大脑空白,根本答不出来,看了这篇文章之后,也许知道怎么答了。 深入解析ES Module(二):彻底禁用default export 文章介绍了 export default object 这种方式所带来的问题,主要是在转换的时候不兼容 cjs,当然这篇文章也有助于更深刻的理解 ES Module。 「圣诞特辑」纯前端实现人脸识别自动佩戴圣诞帽 通过使用 TensorFlow.js 来进行人脸识别,然后自动佩戴圣诞帽,我最近也在学习机器学习相关的,当然也绕不开 TensorFlow.js ,学完课程之后再来看这篇文章。 那些你用错了的 React 生命周期 这篇文章的中心思想跟我之前在 React 官方博客里面看到那篇「你也许不需要派生 State」基本类似,主要是 componentWillReceiveProps 和getDerivedStateFromProps 这两个声明周期可能会写成反模式。 独家 | 阿里张勇湖畔分享:领导者如何“落子无悔” 张勇的演讲全文,看到很多大佬推荐这篇文章,先 mark 一波。

1 min · 40 words · 桃翁

前端桃园周刊第四期

一句话知识 npm v packageName versions npm v packageName versions 查看包的所有版本,不加s 获取新版本。用途,安装了包但是 package.json 里面没有包,需要手动填入的时候。 typeof null 为什么返回 “object”? 不同的对象在底层都表示为二进制,在 JavaScript 中二进制前三位都为 0 的话会被判 断为 object 类型,null 的二进制表示是全 0,自然前三位也是 0,所以执行 typeof 时会返回“object”。 in 和 hasOwnProperty 区别 in 操作符会检查属性是否在对象及其 [[Prototype]] 原型链中。相比之下, hasOwnProperty(..) 只会检查属性是否在 myObject 对象中,不会检查 [[Prototype]] 链。 for in 和 for of 的区别 for in 用于对象的遍历,会遍历原型上可以枚举的属性 for of 用于遍历可迭代的对象,比如数组,因为数组里面是有迭代器的,凡是有迭代器的对象都可以用 for of 来遍历 对 constructor 的误解 对象的 constructor 实际上不是对象创建的时候有的,而是通过委托到 prototype 上找的。 function Foo() { /* ....

1 min · 151 words · 桃翁