前端必学-函数式编程（六）

我们前篇谈了很多关于闭包的理解了，所以你应该会知道，我们现在将要谈的就是 ——异步。

我们为什么觉得“异步问题”复杂呢？

其中很重要的一个原因是 —— 时间！时间将我们对数据的操作、管理，变复杂了好几个量级！

（需要特别提出并明确的是： 异步和同步之间是可以相互转化的！ 我们使用异步或者同步取决于 —— 如何使代码更加可读！）

函数式编程给出了实现“代码更可读”的落地原则（已多次回顾）：

所以我们可以期待，异步在函数式编程中的表现！

上代码：

onCustomer() 和 onOrders() 是两个回调函数释义，两者执行的先后顺序并不能确定，所以它是一个基于时间的复杂状态。

释义：回调函数其实就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。

通常来说，我们最先想到的是：把 lookupOrders() 写到 onCustomer() 里面，那我们就可以确认 onOrders() 会在 onCustomer() 之后运行。

这样写，对吗？

不对！因为 onCustomer() 、 onOrders() 这两个回调函数的关系更像是一种竞争关系（都是赋值 customerorders ）， 它们应该并行执行 ， 而不是串行执行 。

即：我不管你们谁先执行，谁先执行完，谁就赋值给 customerorders ！

那我们的思路应该是：

不过，这样让代码又变得更加难阅读！！函数内部赋值依赖于外部变量、甚至受外部回调函数的影响。

那究竟怎么办呢？

最终，我们借用 JS promise 减少这个时间状态，将异步转成同步：

两个 then() 运行之前， lookupCustomer() 和 lookupOrders() 已被同步调用，满足并行执行，谁先结束，谁赋值给 customerorders ，所以我们不需要知道谁先谁后！

在这样的实现下，不再需要时间先后的概念！减少了时间状态！！代码的可读性更高了！！

这是一个 积极的数组 ，因为它们同步（即时）地操作着离散的即时值或值的列表/结构上的值。

什么意思？

a 映射到 b，再去修改 a ，b 不会收到影响。

而这，是一个 惰性的数组 ， mapLazy() 本质上 “监听” 了数组 a，只要一个新的值添加到数组的末端（push()），它都会运行映射函数 v => v 2 并把改变后的值添加到数组 b 里。

什么意思？

a 映射到 b，再去修改 a ，b 也会修改。

原来，后者存在 异步 的概念。

让我们来想象这样一个数组，它不只是简单地获得值，它还是一个懒惰地接受和响应（也就是“反应”）值的数组，比如：

设置“懒惰的数组” a 的过程是异步的！

b ，是 map 映射后的数组，但更重要的是，b 是 反应性 的，我们对 b 加了一个类似监听器的东西。

这里直接给出解答：

这里再多小结一句：时间让异步更加复杂，函数式编程在异步下的运用就是减少或直接干掉时间状态。

想象下 a 还可以被绑定上一些其他的事件上，比如说用户的鼠标点击事件和键盘按键事件，服务端来的 websocket 消息等。

上述的 LazyArray 又可叫做 observable ！（当然，它不止用在 map 方法中）

现在已经有各种各样的 Observables 的库类，最出名的是 RxJS 和 Most 。

以 RxJS 为例：

不仅如此，RxJS 还定义了超过 100 个可以在有新值添加时才触发的方法。就像数组一样。每个 Observable 的方法都会返回一个新的 Observable，意味着他们是链式的。如果一个方法被调用，则它的返回值应该由输入的 Observable 去返回，然后触发到输出的 Observable里，否则抛弃。

比如：

本篇介绍了异步在函数式编程中的表现。

原则是：对于那些异步中有时态的操作，基础的函数式编程原理就是将它们变为无时态的应用。即 减少时间状态 ！

就像 promise 创建了一个单一的未来值，我们可以创建一个积极的列表的值来代替像惰性的observable（事件）流的值。

我们介绍了 RxJS 库，后续我们还会介绍更多优美的 JS 函数式编程库！

（俗话说的好，三方库选的好，下班都很早！！）

现在本瓜有点明白那句话了：看一门语言是不是函数式编程，取决于它的核心库是不是函数式编程。

也许我们还不熟悉像 RxJS 这类库，但我们慢慢就会越来越重视它们，越来越使用它们，越来越领会到它们！！

异步，以上。

开发前端的软件其实挺多的，这个也没什么标准，一定哪个好用，哪个不好用，只要能高效、高质量的完成工作都行，下面我介绍几个常用的前端开发软件：

1Dreamweaver：这个现在是Adobe公司的产品，相信大部分搞前端开发的人都了解或者使用过这个产品，一款集设计与代码为一体的编辑器，网页三剑客之一，支持html,css,js,php,asp,jsp等常见网页脚本的编写，可以快速帮助设计人员制作网页和建站，也特别适合初学者使用，界面简洁、使用简单、容易上手，左边源码，右边效果：

2VSCode：这个是微软开发的一个免费、开源的轻量级代码编辑器，支持几十种开发语言，包括html,js,php,python,java等，语法高显亮、智能自动补全、插件扩展丰富，支持git功能，是一款很不错的编辑器，正在逐渐受到大众的熟知和认可：

3HBuilder：这个是国产的、专门用于Web网页开发的前端软件，轻巧、极速、界面柔绿，清爽护眼，语法提示、自动补全功能非常完善，支持marldown功能，后期还可以将html文件云端打包为安卓或苹果app，是一个很不错的前端软件：

4SublimeText：这也是一个轻量级的代码编辑器，支持的编程语言也很多，语法提示、代码高亮、自动补全，界面华丽，还支持插件扩展，是一款很不错的前端开发软件：

5Atom：这也是一款非常不错的跨平台代码编辑器，由github专门为广大程序员推出，用户界面简洁、直观，语法检查、代码高亮、自动补全功能完善，支持html,css,javascript等网页编程语言，还支持宏，文件管理器等，是一款很不错的软件：

6WebStorm：相对于前面几个软件来说，这是一个重量级的Web开发软件，由Jetbrains公司开发，语法提示、自动检查、代码高亮、自动补全等这些功能，这个软件都支持，还支持git等功能，在大型项目开发、团队协作中，经常会用到这个软件，但这个软件不是免费的，试用期过后就需要付费，而且启动起来有些卡：

就介绍这6个常用的前端开发软件，对于前端开发来说，完全可以、也够用了，找一个适合自己的就行，希望以上分享的内容能对你有些帮助，也欢迎大家留言、评论。

随着Internet编程技术的不断发展，越来越多的大学毕业生加入了Web开发行业中，我们都知道Web开发需要使用css进行定位和布局。下面，昌平镇北大青鸟带大家来看看如何编写css代码。

前端系统的变化可以描述为每天都在变化。在短短的一年时间里，理论，框架，构建工具甚至开发语言都发生了巨大的变化。随着新项目即将开始，我花时间审查了上一个项目的前端架构。我已经产生了很多想法，我将尽可能地记录它们以准备新的框架。

一、OOCSS(面向对象的CSS)

OOCSS的使用主要有两个原则，一种是分离结构和外观，其中主要包括分离容器和内容。OOCSS主要基于对象的编程方法，OOCSS的目的主要是支持代码的复用，最终保证样式能很好的进行添加和维护。OOCSS也存在一些缺点，它主要适合大型网站的开发项目，因为大型网站的可重用性组件非常多，在运行小项目的时候没有非常好的才、效果，所有在选择的时候应该根据项目的情况进行选择。

二、BEM(块元素修饰符)

BEM是一个名为命名约定的CSS。它不涉及如何编写CSS的结构。在进行电脑培训的过程中，电脑培训建议仅为每个元素添加具有以下内容的CSS类名称。在BEM模式下，它看起来很麻烦且冗余，但每个CSS类名称都能够很好地描述出它的作用。与LESS或SASS结合使用时，会降低其写入复杂度。

三、规则文档

很多人更加倾向于关注大方面并忘记了细节，一份定义明确的规则文档能够提醒我们根据需要进行编写代码。一份好的规则文件应遵循以下规范：其中需要包含不可变规则，而不是一般描述需要始终将规则细化为最简单的表达式，首先解释规则是什么，然后说“如果没有，那会发生什么？并且昌平镇昌平镇北大青鸟认为每条规则必须包含以下单词之一-始终，从不，仅，每个，不需要。

四、综合方案

就如开头的介绍，BEM的简单使用并没有解决我们在项目中遇到的问题，反而还会产生其他的新的问题，但这不是BEM的责任。IT培训认为作为前端架构的重要组成部分，CSS主要是需要为项目选择出合适的解决方案，而不是因为它在业界很受欢迎而使用它。