SOURCE

/**
 * 中介者对象
 */
const Mediator = (function() {
  // 消息对象
  let _msg = {};
  return {
    /**
         * 订阅消息方法
         * @param type      消息名称
         * @param action    消息回调函数
         */
    register(type, action) {
      // 如果消息存在
      if (_msg[type]) {
        // 存入回调函数
        _msg[type].push(action);
      } else {
        // 不存在，则建立该消息容器
        _msg[type] = [action];
      }
    },
    /**
         * 发布消息方法
         * @param type      消息名称
         */
    send(type) {
      // 如果该消息已经被订阅
      if (_msg[type]) {
        // 遍历已存储的消息回调函数
        for (let i = 0, len = _msg[type].length; i < len; i++) {
          // 执行该回调函数
          _msg[type][i] && _msg[type][i]();
        }
      }
    }
  }
})();

/**
 * 显示导航小组件
 * @param modId               模块
 * @param tagName               处理的标签（消息提醒b,网址span）
 * @param showOrHide        显示还是隐藏
 */
function　showHideNavWidget(modId, tagName, showOrHide) {
  // 获取导航模块
  const mod = document.getElementById(modId);
  // 获取下面的标签名为tag的元素
  const tags = mod.getElementsByTagName(tagName);
  const show = (!showOrHide || showOrHide === 'hide') ? 'hidden': 'visible';
  // 占位隐藏这些标签
  for (let i = 0, len = tags.length; i < len; i++) {
    tags[i].style.visibility = show;
  }
}

// 用户收藏导航模块
// 有消息提醒和导航网址功能
(function() {
  // 订阅隐藏用户收藏导航消息提醒消息
  Mediator.register('hideAllNavNum', () => {
    showHideNavWidget('collectionNav', 'b', false);
  });
  // 订阅显示用户收藏导航消息提醒消息
  Mediator.register('showAllNavNum', () => {
    showHideNavWidget('collectionNav', 'b', true);
  });
  // 订阅隐藏用户收藏导航消息提醒消息
  Mediator.register('hideAllNavUrl', () => {
    showHideNavWidget('collectionNav', 'span', false);
  });
  // 订阅显示用户收藏导航消息提醒消息
  Mediator.register('showAllNavUrl', () => {
    showHideNavWidget('collectionNav', 'span', true);
  });
})();

// 推荐用户导航
// 推荐用户导航内的导航有消息提醒功能
(function() {
  // 订阅隐藏推荐用户导航消息提醒消息
  Mediator.register('hideAllNavNum', () => {
    showHideNavWidget('recommendNav', 'b', false);
  });
  // 订阅显示推荐用户导航消息提醒消息
  Mediator.register('showAllNavNum', () => {
    showHideNavWidget('recommendNav', 'b', true);
  });
})();

// 最近常用导航
// 最近常用导航栏内有导航网址功能
(function() {
  // 订阅隐藏最近常用导航消息
  Mediator.register('hideAllNavUrl', () => {
    showHideNavWidget('recentlyNav', 'span', 'hide');
  });
  // 订阅显示最近常用导航消息
  Mediator.register('showAllNavUrl', () => {
    showHideNavWidget('recentlyNav', 'span', 'show');
  });
})();

// 设置层模块
(function() {
  // 消息提醒选框
  const hideNum = document.getElementById('hideNum');
  //  网址选框
  const hideUrl = document.getElementById('hideUrl');

  // 消息提醒选框事件
  hideNum.addEventListener('change', function() {
    if (this.checked) {
      // 中介者发布隐藏消息提醒功能消息
      Mediator.send('hideAllNavNum');
    } else {
      // 中介者发布隐藏消息提醒功能消息
      Mediator.send('showAllNavNum');
    }
  },
  false);
  // 网址选框事件
  hideUrl.addEventListener('change', function() {
    if (hideUrl.checked) {
      // 中介者发布隐藏所有网址功能消息
      Mediator.send('hideAllNavUrl');
    } else {
      // 中介者发布显示所有网址功能消息
      Mediator.send('showAllNavUrl');
    }
  },
  false);
})();

<article class="flex-box">
  <section id="collectionNav">
    <header>
      <hgroup>
        <h1>
          用户收藏导航模块
        </h1>
        <h2>
          有消息提醒和导航网址功能
        </h2>
      </hgroup>
    </header>
    <section>
      <b>
        消息1
      </b>
      <b>
        消息2
      </b>
      <b>
        消息3
      </b>
    </section>
    <section>
      <span>
        导航1
      </span>
      <span>
        导航2
      </span>
      <span>
        导航3
      </span>
    </section>
  </section>
  <section id="recommendNav">
    <hgroup>
      <h1>
        推荐用户导航
      </h1>
      <h2>
        推荐用户导航内的导航有消息提醒功能
      </h2>
    </hgroup>
    <section>
      <b>
        消息4
      </b>
      <b>
        消息5
      </b>
      <b>
        消息6
      </b>
    </section>
  </section>
  <section id="recentlyNav">
    <hgroup>
      <h1>
        最近常用导航
      </h1>
      <h2>
        最近常用导航栏内有导航网址功能
      </h2>
    </hgroup>
    <section>
      <span>
        导航4
      </span>
      <span>
        导航5
      </span>
      <span>
        导航6
      </span>
    </section>
  </section>
</article>
<section class="center">
  <p>
    <input type="checkbox" id="hideNum">
    隐藏消息
  </p>
  <p>
    <input type="checkbox" id="hideUrl">
    隐藏导航
  </p>
</section>

.flex-box {
   display: flex;
   justify-content: space-around;
 }
 
 h1 {
   font-size: 20px;
   color: rgba(0, 0, 0, 1);
 }
 
 h2 {
   font-size: 16px;
   color: rgba(0, 0, 0, .4);
 }
 
 b {
   font-size: 16px;
   color: rgba(0, 0, 0, .9);
   font-weight: 100;
 }
 
 span {
   font-size: 16px;
   color: rgba(0, 0, 0, .9);
 }
 
 .center {
   margin: 30px auto;
   text-align: center;
 }