每日思考（2020/09/08）

题目概览

• HTML5的页面可见性（Page Visibility）有哪些应用场景
• 对视网膜(Retina)分辨率的了解
• js怎么实现读取和导出excel
• 对单例模式的理解

题目解答

HTML5的页面可见性（Page Visibility）有哪些应用场景

• 属性：

  • document.visibilityState = 'hidden'：页面彻底不可见
  • document.visibilityState = 'visible'：页面至少一部分可见

• 产生的原因

  • 不能触发unload,pageHide事件的时候，手机端切换到最近任务界面,点击另一个APP
  • 手机端直接按home键返回主屏幕
  • PC端最小化

• 使用的场景

  • 停止与服务器的轮询
  • 停止页面音视频

• 触发的事件

  document.onvisibilitychange
   document.addEventListener('visibilitychange',  ()=> {
    // 用户当前页面不可见（离开或者后端或者最小化，或者页签切换）
    if (document.visibilityState === 'hidden') {
      document.title = '页面不可见';
    }
  
    // 用户打开或回到页面
    if (document.visibilityState === 'visible') {
      document.title = '页面可见';
    }
  });
  

• 页面卸载

  • 页面可见时，用户强制关闭 Tab 页

• 页面可见时，（tab页签切换）

  • 页面不可见时，用户或系统关闭浏览器窗口

• 用户正在离开页面。常用的方法是监听下面三个事件

  • visibilitychange事件比pagehide、beforeunload、unload事件更可靠，所有情况下都会触发（从visible变为hidden）。因此，可以只监听这个事件，运行页面卸载时需要运行的代码，不用监听后面那三个事件
  • beforeunload事件只有一种适用场景，就是用户修改了表单，没有提交就离开当前页面，不会缓存当前页面
  • unload事件在任何情况下都不必监听，不会缓存当前页面
  • pagehide事件没有特别明显的定义

• 注意

  • document.visibilityState属性只针对顶层窗口，内嵌的iframe页面的document.visibilityState属性由顶层窗口决定
  • 使用 CSS 属性隐藏iframe页面（比如display: none;），并不会影响内嵌页面的可见性

• 参考链接:Page Visibility API 教程

对视网膜(Retina)分辨率的了解

• Retina分辨率指的是屏幕的物理分辨率达到了使得人眼难以看到单个物理像素；
• 具体应用应该就是dpr > 1的屏幕适配，需要根据不同dpr给出合适尺寸的图片；
• retina屏都是像素密度(PPI)高，用多个物理像素去渲染一个逻辑像素，那么1px在手机上实际不是一个物理像素,根据不同像素比 可能是用2或3个像素去绘制的，那么要实际实现1像素的细线,常用处理就是伪类边框1px,宽高为依附元素的2倍，然后transform:scale(0.5)去实现细线

js怎么实现读取和导出excel

//将后端给的二进制数据包装成Blob对象，然后进行导出
const blob = new Blob([res], { type: 'application/msexcel;charset=UTF-8' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.click()

对单例模式的理解

• 一个类只能初始化一个实例， 例如jqeury的$，vuex里的store的实现都是单例模式。保证对象的唯一性符合单一职责原则，只能实例化唯一的对象

• 最简单的单例

  var singleton = {
      attr : 1,
      method : function(){ return this.attr; }
  }
  var t1 = singleton ;
  var t2 = singleton ;
  t1 === t2 
  

• 构造函数内部判断

  var Singleton = function(name) {
      this.name = name;
      this.instance = null;
  }
  Singleton.getInstance = function(name) {
      if(!this.instance) {
          this.instance = new Singleton(name);
      }
      return this.instance;
  }
  var a = Singleton.getInstance('sven1');
  var b = Singleton.getInstance('sven2');
  // 指向的是唯一实例化的对象
  console.log(a === b);
  

• es6

  class Singleton {
      constructor(name) {
          this.name = name;
          this.instance = null;
      }
      // 构造一个广为人知的接口，供用户对该类进行实例化
      static getInstance(name) {
          if(!this.instance) {
              this.instance = new Singleton(name);
          }
          return this.instance;
      }
  }