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

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 {
   
		//....