渐进增强与优雅降级

渐进增强（progressive enhancement）和优雅降级（graceful degradation）的定义网上很容易查到，都是一种理念，这里就不赘述了。根据查阅资料，个人理解如下：

渐进增强

向上兼容，在低版本上实现，如果支持高版本，那就使用高版本。

优雅降序

向下兼容，在高版本上实现，如果不支持高版本，那就使用低版本的实现。

这两个理念大概是由 CSS3 而兴起的，但理念思想就有这么个好处，任何技术都能参考。

CSS 例子

/* 渐进增强 */
.transition {
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
/* 优雅降级 */
.transition {
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

JS 例子

export const inBrowser = typeof window !== 'undefined'
export const UA = inBrowser && window.navigator.userAgent.toLowerCase()
export const isIE = UA && /msie|trident/.test(UA)
export function isNative() {
  return typeof Ctor === 'function' && /native code/.test(Ctor.toString())
}
let timerFunc
// timerFunc use setTimeout
// ...
timeFunc = setTimeout(() => { /* ... */ }, 0)
// 渐进增强
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // timerFunc use setImmediate 
  // ...
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  // timerFunc use MutationObserver
  // ...
} else if (typeof Promise !== 'undefined' && isNative(Promise)) {
  // timerFunc use Promise
  // ...
}
// 优雅降级
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  // timerFunc use Promise
  // ...
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  // timerFunc use MutationObserver
  // ...
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // timerFunc use setImmediate 
  // ...
} else {
  // timerFunc use setTimeout
  // ...
}

export function nextTick () {
  // do something
  // ...
  timerFunc()
  // do something
  // ...
}

参考文献：
https://www.cnblogs.com/web-wjg/p/7240985.html