screenfull.js 源码解析

var isCommonjs = typeof module !== 'undefined' && module.exports;
// document 如果不是 window 对象属性就是 {}
var document = typeof window !== 'undefined' && typeof window.document !== 'undefined' ? window.document : {};

 // 不同运行环境导出不同的模块
  if (isCommonjs) {
    // 应用于 webpack 等打包工具或 Node 中 commonjs 模块
    module.exports = screenfull;
  } else {
    // 应用于浏览器中的全局模块
    window.screenfull = screenfull;
  }

// fn 函数自执行，用于抹平 Chrome、Firefox、IE 浏览器差异
// fn 为 false 时表示当前浏览器不支持全屏模式
 var fn = (function () {
    var val;
    // 定义兼容 Chrome、Firefox、IE 方法数组
    var fnMap = [
      [
        'requestFullscreen',
        'exitFullscreen',
        'fullscreenElement',
        'fullscreenEnabled',
        'fullscreenchange',
        'fullscreenerror'
      ],
      // New WebKit
      [
        'webkitRequestFullscreen',
        'webkitExitFullscreen',
        'webkitFullscreenElement',
        'webkitFullscreenEnabled',
        'webkitfullscreenchange',
        'webkitfullscreenerror'

      ],
      // Old WebKit
      [
        'webkitRequestFullScreen',
        'webkitCancelFullScreen',
        'webkitCurrentFullScreenElement',
        'webkitCancelFullScreen',
        'webkitfullscreenchange',
        'webkitfullscreenerror'

      ],
      [
        'mozRequestFullScreen',
        'mozCancelFullScreen',
        'mozFullScreenElement',
        'mozFullScreenEnabled',
        'mozfullscreenchange',
        'mozfullscreenerror'
      ],
      [
        'msRequestFullscreen',
        'msExitFullscreen',
        'msFullscreenElement',
        'msFullscreenEnabled',
        'MSFullscreenChange',
        'MSFullscreenError'
      ]
    ];

    var i = 0;
    var l = fnMap.length;
    var ret = {};

    for (; i < l; i++) {
      val = fnMap[i];
      // exitFulllscreen 归属于 document 对象专有
      // 判断 exitFulllscreen 或带前缀的是否在 document 对象上
      // 若不在，表示当前浏览器不支持全屏模式
      if (val && val[1] in document) {
        for (i = 0; i < val.length; i++) {
          // 统一 ret key 值名称，值根据浏览器支持情况自动处理
          // 优秀，保持对象接口名称的一致性，不必添加前缀不前缀的
          // 最终对象输出统一为 fnMap[0] 中的接口
          ret[fnMap[0][i]] = val[i];
        }
        return ret;
      }
    }

    return false;
  })();

  // fn 为 false 当前浏览器表示当前浏览器全屏模式不可用，直接返回
  if (!fn) {
    if (isCommonjs) {
      module.exports = {
        isEnabled: false
      };
    } else {
      window.screenfull = {
        isEnabled: false
      };
    }

    return;
  }

// 将全屏事件归属到一个对象中、方便使用
 var eventNameMap = {
    change: fn.fullscreenchange,
    error: fn.fullscreenerror
  };

  var screenfull = {
    // 打开全屏
    // 注意只有 html 标签元素才支持此方法
    request: function (element, options) {
      return new Promise(function (resolve, reject) {
        var onFullScreenEntered = function () {
          this.off('change', onFullScreenEntered);
          resolve();
        }.bind(this);

        this.on('change', onFullScreenEntered);

        // 使用 html 标签元素调用打开全屏，若未传入时，默认 html 标签元素
        element = element || document.documentElement;

        // options 为打开全屏时的配置信息
        // 目前只有 navigationUI 这个配置项
        // 详情： https://developer.mozilla.org/zh-CN/docs/Web/API/FullscreenOptions
        // 表示是否显示用户界面其他元素
        var returnPromise = element[fn.requestFullscreen](options);

        if (returnPromise instanceof Promise) {
          returnPromise.then(onFullScreenEntered).catch(reject);
        }
      }.bind(this));
    },
    // 退出全屏
    exit: function () {
      return new Promise(function (resolve, reject) {
        if (!this.isFullscreen) {
          resolve();
          return;
        }

        var onFullScreenExit = function () {
          this.off('change', onFullScreenExit);
          resolve();
        }.bind(this);

        this.on('change', onFullScreenExit);

        // 通过 document 对象调用
        var returnPromise = document[fn.exitFullscreen]();

        if (returnPromise instanceof Promise) {
          returnPromise.then(onFullScreenExit).catch(reject);
        }
      }.bind(this));
    },
    // 打开、退出全屏切换
    toggle: function (element, options) {
      return this.isFullscreen ? this.exit() : this.request(element, options);
    },
    // 监听打开、退出全屏切换快捷方式
    onchange: function (callback) {
      this.on('change', callback);
    },
    // 监听打开、退出全屏切换错误快捷方式
    onerror: function (callback) {
      this.on('error', callback);
    },
    on: function (event, callback) {
      var eventName = eventNameMap[event];
      if (eventName) {
        // 在 html 标签元素上监听打开、退出全屏事件时
        // 默认冒泡到 document 对象上
        // 所以最终只在 document 对象上监听即可
        // 如果就想监听当前标签元素的
        /**
         当前元素上通过 stopPropagation 阻止事件冒泡，这样 document 上就监听不到了
         ele.addEventListener('fullscreenchange', function(ev) {ev.stopPropagation(), false)
        */
        document.addEventListener(eventName, callback, false);
      }
    },
    off: function (event, callback) {
      var eventName = eventNameMap[event];
      if (eventName) {
        document.removeEventListener(eventName, callback, false);
      }
    },
    raw: fn
  };

  // 全屏属性的封装，直接挂载到 screenfull 对象
  Object.defineProperties(screenfull, {
    // 当前文档是否处于全屏模式
    isFullscreen: {
      get: function () {
        return Boolean(document[fn.fullscreenElement]);
      }
    },
    // 处于全屏模式文档元素
    element: {
      enumerable: true,
      get: function () {
        return document[fn.fullscreenElement];
      }
    },
    // 浏览器是否兼容全屏模式
    isEnabled: {
      enumerable: true,
      get: function () {
        // Coerce to boolean in case of old WebKit
        return Boolean(document[fn.fullscreenEnabled]);
      }
    }
  });