闭包应用

• 模块化思想
• 惰性函数
• 柯里化函数
  • 高阶组件 -》 react
  • 函数防抖和节流
  • bind
  • ...
• compose组合函数
• ...

模块化思想

单例-》AMD(require.js)->CMD(sea.js)->CommoneJs(Node)->ES6Module

在没有模块化思想之前，团队协作开发或者代码量较多的情况，会导致全局变量污染「全局变量冲突」

/**
 * 
 */

// 实现天气板块
var tim = '2020-11-01'
function queryData() {
  // ...
}
function changeCity() {

}
// 实现资讯版块
var tim = '2020-10-31'
function changeCity() {
  // ...
}

暂时基于闭包的“保护作用”防止全局变量污染「但是因为每个版块的代码都是私有的，无法相互调用」

// 实现天气板块
(function () {
  var tim = '2020-11-01'
  function queryData() { }
  function changeCity() { }
})();

// 实现资讯版块
(function () {
  var tim = '2020-10-31'
  function changeCity() { }
})();

基于某些方法去实现相互调用

// 实现天气板块
(function () {
  var tim = '2020-11-01'
  function queryData() { }
  function changeCity() { }
  // 把需要供别人调用API方法，挂到全局上「不能挂载太多，挂载多了，还是会引发全局变量的污染」
  window.queryData = queryData
})();

// 实现资讯版块
(function () {
  var tim = '2020-10-31'
  function queryData() { }
  queryData()
})();

高级单例设计模式：闭包+单例的结合，也是最早期的JS模块化思想

/**
 * 单例对象
 */
// // 对象的特点：每个对象都是一个单独的堆内存空间（单独的实例-》object）,这样即使多个对象中的成员名字相同，也互不影响
// // 仿照其他后台语言，其实obj1/obj2不仅仅称为对象名，更被称为“命名空间「给堆内存空间起一个名字」”
// // ---> 每一个对象都是一个单独的实例，用来管理自己的私有信息，即使名字相同，也互不影响，其实这就是“JS中的单例模式”
// var obj1 = {
//   name: 'zf',
//   age: 12,
//   fn: function () { }
// };
// var obj1 = {
//   name: 'zhouxt',
//   age: 30,
//   fn: function () { }
// };

/**
 * 闭包+单例
 */
// 实现天气板块
var weatherModule = (function () {
  var tim = '2020-11-01'
  function queryData() { }
  function changeCity() { }
  infoModule.changeCity()
  return {
    queryData,
    changeCity,
  }
})();

// 实现资讯版块
var infoModule = (function () {
  var tim = '2020-10-31'
  function changeCity() { }
  weatherModule.queryData()
  return {
    changeCity,
  }
})();

var skinModule = (function () {
  // 
  return {}
})()