函数式编程及响应式编程之己见

版权声明:欢迎关注小站:https://ZQ-jhon.github.io https://blog.csdn.net/qq_20264891/article/details/81157232

1. what is 函数式编程?

函数,在编程中,通常体现为: 输入 => 执行 => 结果。他不是命令式的,而是对一段操作进行逻辑封装,拿到输入,就能产出结果。通常来说,满足函数式编程的特性的“函数”应该有如下特点:

  • 函数必须有入参,并且函数的产出会根据入参的不同而变化。
  • 函数执行的整个流程中,不会对全局变量、外部属性等产生影响。
  • 函数式编程代码量小,干净。

举个例子:

var arr = [1,2,3,4,5];

function addOne (array) {

    for(var i=0;i<array.length;i++){
        array[i] += 1;
    }

    return array;
}

addOne(arr); // 2,3,4,5,6

写了一个方法,接受一个数组,产出数组每个成员+1,但这段代码的不足之处在于:

  • 难以复用,如果需求提出 addTwo,addThree方法,需要不断修改函数名和内部逻辑。
  • 内部的代码很啰嗦, for 循环很low。

·函数式编程改进版:

let arr = [1,2,3,4,5];
arr.map(item=> item+1); // 3,4,5,6,7

 

这里,改进使用了原生的 Array.prototype.map 方法,代码量缩小了很多不说,而且复用性进一步提升。整个函数做的事情现在非常直观,入参 => 每项参数 + 1 => 返回新数组,由此,可以说,map()方法是一个纯函数(pure function)。

2. 响应式编程

前端中也有一个概念叫响应式,bootstrap 。这里当然说的不是这个,对于响应式编程的概念,我想提及Vue或者 angular的双向绑定来阐述:

// template: 

i'am {{ name }}

// js:

name = 'jhon';

在前端MVVM的框架中,都有一个数据双向绑定的概念,这里的模版中的变量,实时反映了数据中的 name 变量的 value,而且,如果此时我修改了 name 的值,那么模版中对应的值也会跟着修改。数据 <=> 视图 是同时发生,同时改变的,因为模版就是对数据的一个映射。

再举个例子:

c的值,是通过 a + b 来赋值的,如果ab不是固定的,而是变化的值,那么 c 的值也不会固定为3。 

let a = 1,b=2;

let c = a + b; // 3

不难看出,响应式编程特点:

  •  同步发生,结果会随着修改参数而实时、动态地变化。
  • 存在固定的映射关系。

猜你喜欢

转载自blog.csdn.net/qq_20264891/article/details/81157232