關於HTML面試題彙總之visibility

一、頁面可見性（visibility）

主要提供兩個屬性，一個事件（都在document對象上）：
1. 屬性：
   1.1.  hidden：獲取或設置當前頁面的可見性，boolean值；
   1.2. visibilityState: 獲取當前頁面可見性狀態，值為hidden、visibility其中一個
2. 事件：visibilityChange：頁面可見性發生改變時觸發的事件

3. 由於各類瀏覽器的支持情況不一致，都需要加上私有屬性的首碼，如 webkit、moz、ms、o等。在ie9-不支持。

3. 可見性的應用場景：
  3.1. 視頻播放的切換
  3.2. 用戶狀態的驗證

二、代碼示例：

2.1. Utils類，提供page visibility的檢測能力，主要實現相容各種瀏覽器的能力：

const BROWER_PREFIX = ['webkit','moz','ms','o',''];
class Utils{
    constructor(){
      this.isPageVisibilitySupport = false;
      this.prefix = '';
    }
    /**
     * 獲取駝峰命名格式的屬性名
     * @param prefix {string} 首碼
     * @param value {string} 屬性名
    */
    prefixToCamel( prefix, value){
      if(prefix){
        return prefix + value.slice(0,1).toUpperCase() + value.slice(1);
      }
      return value;
    }
    calculatePageVisibilitySupport(){
        var that = this;
        BROWER_PREFIX.forEach(function (data) {
          if(!that.isPageVisibilitySupport && document[that.prefixToCamel(data,'hidden')] != undefined ){
            that.isPageVisibilitySupport = true;
            that.prefix = data;
          }
        });
        return that.isPageVisibilitySupport;
    }
    isHidden(){
        if(this.calculatePageVisibilitySupport()){
            return document[this.prefixToCamel(this.prefix,'hidden')];
        }
        return undefined;
    }
    visibilityState(){
        if(this.calculatePageVisibilitySupport()){
            return document[this.prefixToCamel(this.prefix,"visibilitystate")];
        }
        return undefined;
    }
} 
export default Utils;

2.2. core類，提供外部可訪問的靜態方法和屬性：

import utils from 'src/utils';
var _utils = new utils();
class Core {
    static visibilityChange(callback){
        if( _utils.calculatePageVisibilitySupport() && typeof callback == 'function'){
            return document.addEventListener(Core.prefix + 'visibilitychange',function(event){
                this.hidden = Core.hidden;
                this.visibilityState = Core.visibilityState;
                callback.call(this,event);
            });
            return undefined;
        }
    }
}
Core.hidden = _utils.isHidden();
Core.visibilityState = _utils.visibilityState();
export default Core;

visibilityChange方法：實現page visibility值改變時觸事件綁定。

三、源碼GIT地址

此包通過karma框架 +　jasmine進行單元測試。源碼通過babel

[email protected]:cqhaibin/visibilityproject.git