web前端高级JavaScript - JS高阶编程之模块化思想/惰性函数/柯理化函数/compose组合函数

冷不防 2022-11-22 05:17 164阅读 0赞

### JS高阶编程技巧之模块化思想/惰性函数/柯理化函数/compose组合函数 ###

> 利用闭包机制，实现出来的一些高阶编程方式
> 
>  *  模块化思想
>  *  惰性函数
>  *  柯理化函数
>     
>      *  高阶组件 - React
>      *  函数的防抖和节流
>      *  bind
>  *  compose组合函数

*  模块化思想

> 模块化思想演变过程：单例 -> AMD(require.js) -> CMD(sea.js) -> CommonJS(Node) -> ES6Module  
> 为什么要引入模块化思想呢？  
> 在传统的js编程中，往往会将很多函数和变量都写在同一个js文件中，那么如果是团队协作开发，同一个 文件可能就会由  
> 多个人去维护。那么在这种情况下就很有可能造成全局变量的污染；比如小A写了一个queryData函数用于查询数据，过了一段时间小B也想要定义一个函数用来查询数据，于是也命名为queryData，但他并不知道其实已经有一个同名的函数了，那么这种情况下就造成了全局变量污染，某一个queryData必然会被覆盖掉。如何才能避免这种情况呢？

//传统js编程
    function queryData(){ }
    //..............
    function queryData(){ }

> 这时模块化思想就应运而生了；比如我们可以利用闭包机制定义一个自执行函数，把每一个人的代码都用自执行函数封装起来。

//模块化
    //小A
    (function(){ 
    	function queryData(){ 
    		//........
    	}
    	//.......
    })();
    
    //小B
    (function(){ 
    	function queryData(){ 
    		//........
    	}
    	//.......
    })();

> 这样每个人就可以在自己的模块中使用自己定义的函数了，即使是重名函数也互不影响。但是呢，这种封装虽然避免了全局变量的污染，却同时也会引起另外一个问题：比如小B在写queryData时发现功能跟小A的queryData差不多，甚至可以拿来直接用的，但由于每个模块都是互相隔离的并不能互相访问。于是小B决定找小A讨论一下。经过一番冥思苦想，终于他们想出了一个办法，那就是将公共的函数作为全局变量window的属性开放出来

//模块化共享
    //小A
    (function(){ 
    	function queryData(){ 
    		//........
    	}
    	window.queryData = queryData;
    	//.......
    })();
    
    //小B
    (function(){ 
    	window.queryData();
    	//.......
    })();

> 问题解决了两个人很开心。但是好景不长，由于功能JS越来越复杂，代码越来越多，那么需要互相开放的函数也越来越多，如果仍然用window挂载的方式显然是无法满足了，因为如果挂载多了跟传统JS编程又没什么两样了，同样也会造成变量污染。这下可难坏了两个人。在偶然的一次机会中两人得知：在JS中每个对象都是一个单独的实例，那如果把需要共享出去的方法作为对象返回出去，即避免了变量污染，同时也能共享接口，岂不是一举两得

//小A
    var aMoudle = (function(){ 
    	function queryData(){ 
    		//........
    	}
    	//.......
    	return{ 
    		queryData: queryData,
    		//......
    	}
    })();
    
    //小B
    var bMoudle = (function(){ 
    	aMoudle.queryData();
    	//.......
    	return { 
    		//....
    	}
    })();

> 本案例是利用了闭包的机制实现了模块化思想。但是个人感觉直接利用面向对象的思想也可以解决。

*  惰性函数

> 所谓的惰性函数，顾名思义就是懒函数，那到底是怎么个懒法呢，来看一下下面的场景：  
> 小A在项目开发中经常需要去获取页面中元素的样式，同时还要考虑兼容一些老版本的浏览器，于是小A决定自己封装一个函数，专门用来获取不同元素的不同样式。

> 小A 很开心，但用着用着，小A发现：虽然获取元素样式被封装成了方法也能兼容不同版本的浏览器，但是如果需要一次获取多个样式，那么就需要多次调用getCss函数，同时就需要多次进行兼容性判断，然而这期间并没有切换浏览器 ，这样的话其实判断一次就可以了，不需要每次都判断。于是小A就想：如果第一次执行完getCss函数也判断出了浏览器兼容性，那在不改变调用代码的情况下有没有什么办法可以让getCss的代码体变一下呢？于是：

> 这样在第一次调用getCss时会进行兼容性判断，那么不管是否兼容，getCss都会重新指向另一个小函数，在这个小函数中就不再进行兼容性判断了，而且后面再去调用getCss时也就是直接调用了getCss的新的指向（小函数）。这就是所谓的惰性函数思想。

*  柯理化函数

> 所谓的柯理化函数：是一种预先处理的思想，那什么又是预先处理呢？其实就是利用闭包机制，把一些信息预先存储起来，以后基于作用域链，访问到事先存储的信息，然后进行相关的处理。所有符合这种模式（或闭包应用的）都被称为柯理化函数。  
> 下面来看一个场景：
> 
>  *  首先我想调用一个函数a，传给它一个数字
>  *  然后把这个函数的返回值再作为一个函数b进行调用，并且传给它不定个数的数字作为参数。
>  *  最后把第一次调用函数a时传递的数字和第二次调用函数b是时传递的数字进行相加求和。

//x是预先存储的值
    function a(x){ 
    	return ...
    }
    var b = a(10);
    var total = b(20,30); // '10+20+30'
    console.log(total);
    total = b(20,30, 40);//'10+20+30+40'
    console.log(total);

> 上面的函数a该如何实现才能满足呢？在前面我们学过的闭包机制就能很好的解决。
> 
>  *  既然能把a的返回值作为函数调用，那么a的返回值必然也是一个函数。
>  *  需要注意的是：==**返回的函数的参数是不定个数的**==这里可以使用函数自带的类数组：arguments或者使用ES6的 **…** 操作符。

*  数组reduce方法的扩展

> 数组的reduce方法：在遍历数组的过程中，可以累积上一次处理的结果，基于上次处理的结果继续遍历处理

arr.reduce([callback], [initialValue])
    var arr = [10, 20, 30, 40];
    var res = arr.reduce(function(result, item, index){ 
    	//initialValue 初始值不传递，result默认初始值是数组的第一项，然后reduce从数组的第二项开始遍历
    	//每遍历数组中的一项，回调函数就被触发执行一次
    	// + result 存储的是上一次回调函数返回的结果（除了第一次是初始值或数组第一项）
    	// + item 当前遍历的这一项
    	// + index 当前遍历的这一项的索引
    	return item + result;
    });
    
    arr.reduce(function(result, item, index){ 
    	//如果传递初始值，则result第一次的结果就是初始值，item从数组的第一项开始遍历
    	return result + item;
    }, 0);
    
    ///======reduce的内部实现原理
    Array.prototype.reduce = function(callback, initial){ 
    	var self = this, i = 0;
    	//判断callback是否是一个函数
    	if(typeof callback !== 'function') throw new TypeError('callback is not a function')
    	//初始参数未传，则把数组一项值赋给initial，并让数组从第二项开始遍历
    	if(typeof initial === undefined){ 
    		initial = self[0];
    		i = 1;
    	}
    	
    	for(;i<self.length; i++){ 
    		var item = self[i], index = i;
    		initial = callback(initial, item, index);//将callback的返回结果赋给initial
    	}
    	return initial;
    }

*  compose组合函数

> 在函数式编程中一个很重要的概念就是函数组合，实际上就是把处理数据的函数像管道一样连接起来，然后让数据穿过管道得到最终的结果。或者可以理解为：将多个函数组合成一个函数同时完成数据的传递。  
> 看如下场景：
> 
>  *  有加（add）、减（sub）、乘（mul）、除（div）四个运算函数
>  *  现在我想先调用加法函数add，得到加法结果
>  *  然后将加法运算得到的结果传递给减法函数，得到减法结果
>  *  再将减法运算的结果传递给乘法运算，得到乘法结果
>  *  最后再将乘法结果传递给除法运算，得到最终的结果
> 
> 上述过程就实现了函数的连接以及数据的传递，看下面代码的实现方式：

var add = x => x + 10;
    var sub = x => x - 3;
    var mul = x => x * 8;
    var div = x => x / 2;
    var addRes = add(5);//加法运算
    var subRes = sub(addRes);//将加法运算的结果进行减法运算
    var mulRes = mul(subRes);//将减法运算的结果进行乘法运算
    var divRes = div(mulRes);//将乘法运算的结果进行除法运算
    //上述过程合并
    var res = div(mul(sub(add(5)))); //48

> 上述代码虽然能够实现我们期望的结果，但如果要有很多个函数，明显可读性变得很差。接下来我们就通过构建一个compose函数来实现上述过程。  
> 我们要实现的compose函数的特点：
> 
>  *  接受任意多个函数作为参数
>  *  传递的每个函数都只接收一个参数
>  *  返回值也是一个函数
> 
> 简而言之：compose可以把类似于f(g(h(x)))这种写法简化成(f,g,h)(x)。下面是改造后的代码：

//funcs:存储的是最后需要执行的函数及顺序（最后传递的函数最先执行）
    // 执行compose只是把最后要执行的函数及顺序预先保存起来，函数还没有执行（柯理化思想）
    // 返回一个operate处理函数， 执行operate，并且传递初始值，然后按照之前存储的函数及顺序依次执行
    function compose(...funcs){ 
    	return function operate(x){ 
    		//如果没有传递任何函数，则直接将原来的值x返回
    		if(funcs.length === 0) return x;
    		//如果只传递了一个参数，并且该参数是一个函数，则调用该函数并返回结果
    		if(funcs.length === 1) return typeof funcs[0] === 'function' ? funcs[0](x) : x;
    		//从右向左遍历
    		return funcs.reduceRight(function(result, item, index){ 
    			//如果item不是一个函数，则直接将上一次结果返回
    			if(typeof item !== 'function') return  result;
    			return item(result);//把得到的结果返回给下一次的result
    		}, x);//传递了初始值，则第一次遍历result就是x，item则是第一个函数
    	}
    }
    
    var add = x => x + 10;
    var sub = x => x - 3;
    var mul = x => x * 8;
    var div = x => x / 2;
    
    let res = compose(div,mul,sub,add)(5)
    console.log(res);//48

> 以上就实现了组合函数。