Daily Reflections (2019/12/16)

Topic Overview

• Within a browser which communication between multiple tabs
• Under brief you understand the progressive enhancement and graceful degradation
• The method of writing a data type determination

Subject to answer

Within a browser which communication between multiple tabs

• A WebSocket (available cross-domain)
• the postMessage (available cross-domain)
• SharedWorker
• Server-Sent Events
• localStorage
• BroadcastChannel IE does not support
• Cookies

Under brief you understand the progressive enhancement and graceful degradation

• Progressive enhancement (Progressive Enhancement): outset for low version of the browser to build the page, perform basic functions, and then the effect of interaction for advanced browser, add a function to achieve a better experience; progressive enhancement wording, priority older browsers availability, and finally consider the new version availability. Now in the case of normal prefix CSS3 and CSS3 are available, normal CSS3 CSS3 will override prefix
• Graceful degradation (Graceful Degradation): start building the site fully functional , and then the low version compatible for browsers. For example, a start using CSS3 properties of building an application, and then gradually hack for the major browsers so that it can be properly viewed on the lower versions of the browser; graceful degradation wording, giving priority to the availability of a new version of the browser, and finally consider older versions of availability. Now in the case of normal prefix CSS3 and CSS3 are available, the prefix will override the normal CSS3 CSS3
• How to choose: If the low version users are mostly takes precedence progressive enhancement of the development process; if the high version of the user in the majority, the majority in order to improve the user experience, and that of course give priority to graceful degradation of the development process; business priorities, improve the user experience never at the top; the most important thing is to ensure that as many users can access the site, after which re-consider downgrading of extreme situations and to enhance the experience of modern browsers

The method of writing a data type determination

• Simple wording

  function type(obj) {
      return Object.prototype.toString.call(obj).replace(/\[object\s|\]/g, '');
  }

• Fine Package

  /*支持
  number, boolean, string, undefined, null, symbol
  array, object, set, weakset, map, weakmap
  function, class
  regexp, date, math, promise
  */
  const _toString = Object.prototype.toString
  const NULL = 'null'
  const OBJECT = 'object'
  const NUMBER = 'number'
  const BOOLEAN = 'boolean'
  const STRING = 'string'
  const UNKNOW = 'unknow'
  
  /**
   * 
   * @param {*} element 任意类型的变量
   * @param {Boolean} strict [default: false] 是否为严格模式
   * @return {String} 变量的真实类型
   */ 
  export default function type (element, strict = false) {
    strict = !!strict
  
    // #1 fix typeof null === 'object'
    if (element === null) {
      return NULL
    }
  
    const eleType = typeof element
  
    // #2 return [number string boolean undefined symbol]
    if (eleType !== OBJECT) {
      return eleType
    }
  
    let eleRealType
    let eleRealTypeLower
  
    try {
      eleRealType = _toString.call(element).slice(8, -1)
      eleRealTypeLower = eleRealType.toLowerCase()
    } catch (e) {
      // #3 IE activie 对象
      return OBJECT
    }
  
    // #4 fix typeof new String('') === 'object' , expect 'string'
    if (eleRealTypeLower !== OBJECT) {
      // 严格模式下 会严格区分`number、string、boolean`的原始值和对象值
      // example `new String('') => 'String'`、`String('') => 'string'`
      if (strict && (eleRealTypeLower === NUMBER || eleRealTypeLower === BOOLEAN || eleRealTypeLower === STRING)) {
        return eleRealType
      }
      return eleRealTypeLower
    }
  
    if (element.constructor == Object) {
      return eleRealTypeLower
    }
  
    // #5 Object.create(null)
    try {
      // __proto__ 为部分早期浏览器
      if (Object.getPrototypeOf(element) === NULL || element.__proto__ === NULL) {
        return OBJECT
      }
    } catch (e) {
      // IE 无 Object.getPrototypeOf
    }
  
    // #6 function A () {}; new A
    try {
      const constructorName = element.constructor.name
      if (typeof constructorName === STRING) {
        return constructorName
      }
    } catch (e) {
      // No constructor
    }
  
    // function A() {}; A.prototype.constructor = null; new A
    return UNKNOW
  }