JS单列设计模式

JS高级编程技巧

利用闭包的两个机制（保护和保存），实现模块化管理。

单列设计模式

单列设计模式：最早的模块化实现方式，是利用闭包的机制，对功能相近的代码实现模块化管理。还可以解决多人开发时命名冲突的问题。
栗子：有两个不同的模块，但是这两个模块中又有某个功能是相同的，如何实现只写一次，就能让两个模块都能实现（调用）该功能（方法）呢？

 <script>
    // 单列设计模式（利用闭包实现模块化管理）
    let queryWeather = (function() {
      let setCity = function() {
        let _default = '北京'
        console.log(_default);
      }

      let setWeather = function () {
        let weather = 36;
      }
      
      // 将该模块中需要外调的函数暴露出去
      return {
        setCity,
        setWeather
      }
    })();

    let queryNews = (function() {
      let getCity = function () {
        // 其他模块通过 模块名.方法() 调用某个模块中暴露出来的函数
        queryWeather.setCity();
      };
      
      // 暴露自己的方法，方便模块之间相互调用
      return {getCity}
    })();

    queryNews.getCity();
  </script>

惰性函数

惰性函数也是利用闭包的机制，让函数“懒”执行，比如在执行多次的时候，函数本身只进行了一次判断。（多用于解决兼容判断问题）

    // 惰性函数（比如只需要判断一次）
    // 栗子：给元素绑定事件
   /*  function emit(element, type, func) {
      // 如果元素支持addEventListener,则执行下面的代码
      if(element.addEventListener) {
        element.addEventListener(type, func, false)
      }
      // 如果元素支持attachEvent,则执行下面的代码
      else if(element.attachEvent) {
        element.attachEvent('on'+type, func)
      }
      // 如果都不支持前面两种，就统一用另一种绑定方式
      else {
        element['on'+type] = func;
      }
    } */
    /* 想给box绑定fun1和fun2，执行两次emit,那么emit函数中的
     * 判断就要判断两次：绑定fun1的时候判断一次，绑定fun2的
     * 时候又判断了一次
     */
    // emit(box, 'click', fun1);
    // emit(box, 'click', fun2);


    function emit(element, type, func) {
      // 满足条件1就给emit重新赋值3
      if(element.addEventListener) {
        emit = function (element, type, func) {
          element.addEventListener(type, func, false)
        } 
      }
      // 满足条件2就给emit重新赋值2
      else if(element.attachEvent) {
        emit = function(element, type, func) {
          element.attachEvent('on'+type, func)
        }
      }
      // 否则就给emit赋值3
      else {
        emit = function(element, type, func) {
          element['on'+type] = func
        }
      }
      // 赋值结束后执行一次emit（这里只会执行一次）
      emit(element, type, func);
    }

    /* 执行两次，但是当执行第一次的时候就能判断emit的值是哪个函数
     * 所以在执行第二次的时候（绑定fun2）就不需要在进行判断了
     */
    emit(box, 'click', fun2);
    emit(box, 'click', fun2);