惰性模式

通过对对象重新定义来屏蔽原对象中的分支判断，就叫做惰性模式。

使用场景

比如一个购物网站上，当用户登录之后（此时已经获取到用户的个人信息），会根据其性别推荐商品。

例子：

<button onclick="reloadFn()">刷新</button>
<p></p>

<script>
  // 模拟数据
  const maleGoods = ['手表', '刮胡刀', '游戏机', '啤酒'];
  const femaleGoods = ['化妆品', '零食', '衣服', '鲜花'];
  let sex = 'male';

  // 随机出现一个商品
  const reloadGoods = (goods) => {
    console.log(goods);
    const index = Math.floor(Math.random() * goods.length);
    document.querySelector('p').innerText = goods[index];
  };

  // 点击“刷新”按钮时，通过分支判断执行哪个方法
  // 每点击一次，都会走一遍分支检测
  const handle = (type) => {
    if (type === 'male') {
      reloadGoods(maleGoods);
    } else if (type === 'female') {
      reloadGoods(femaleGoods);
    }
  };

  // 点击“刷新”按钮，开始根据其性别推荐商品
  const reloadFn = () => {
    handle(sex);
  };
</script>

上例中，用户每点击一次刷新，都要走一遍分支检测，这种重复性的判断是不必要的，因为用户登录之后，其性别信息不会改变，所以也根本不存在走进其他分支的情况。此时，就可以引入惰性模式来重构代码。

例子：

<button onclick="reloadFn()">刷新</button>
<p></p>

<script>
  // 模拟数据
  const maleGoods = ['手表', '刮胡刀', '游戏机', '啤酒'];
  const femaleGoods = ['化妆品', '零食', '衣服', '鲜花'];
  let sex = 'female';

  // 随机出现一个商品
  const reloadGoods = (goods) => {
    console.log(goods);
    const index = Math.floor(Math.random() * goods.length);
    document.querySelector('p').innerText = goods[index];
  };

  // 页面初始化时，立即重新定义 handle
  // 只会走一遍分支检测
  const handle = ((type) => {
    if (type === 'male') {
      return () => {
        reloadGoods(maleGoods);
      };
    } else if (type === 'female') {
      return () => {
        reloadGoods(femaleGoods);
      };
    }
  })(sex);

  // 点击“刷新”按钮，开始根据其性别推荐商品
  const reloadFn = () => {
    handle();
  };
</script>

重构后的代码，在页面初始化时，立即执行 handle 方法来重新定义该对象。如此一来，只会在页面加载时占用一些资源，但却避免了重复性的分支检测。
当然，用户登录之后，我们无法确定其一定会点击刷新按钮，如果用户没有点击，那页面加载时占用的资源就白白浪费了，因此，我们可以继续优化，当用户第一次点击刷新按钮时，在重新定义 handle 对象。

例子：

<button onclick="reloadFn()">刷新</button>
<p></p>

<script>
  // 模拟数据
  const maleGoods = ['手表', '刮胡刀', '游戏机', '啤酒'];
  const femaleGoods = ['化妆品', '零食', '衣服', '鲜花'];
  let sex = 'male';

  // 随机出现一个商品
  const reloadGoods = (goods) => {
    console.log(goods);
    const index = Math.floor(Math.random() * goods.length);
    document.querySelector('p').innerText = goods[index];
  };

  // 第一次执行 handle 程序时，重新定义 handle
  // 只会走一遍分支检测
  let handle = (type) => {
    if (type === 'male') {
      handle = () => {
        reloadGoods(maleGoods);
      };
    } else if (type === 'female') {
      handle = () => {
        reloadGoods(femaleGoods);
      };
    }
    handle();
  };

  // 点击“刷新”按钮，开始根据其性别推荐商品
  const reloadFn = () => {
    handle(sex);
  };
</script>

如有错误，欢迎指正，本人不胜感激。