vue.js源码学习分享（六）

/*  */
/* globals MutationObserver *///全局变化观察者

// can we use __proto__?//我们能用__proto__吗？
var hasProto = '__proto__' in {};

// Browser environment sniffing//浏览器环境嗅探
var inBrowser = typeof window !== 'undefined';//是不是在浏览器中
var UA = inBrowser && window.navigator.userAgent.toLowerCase();
var isIE = UA && /msie|trident/.test(UA);//是不是IE浏览器   内核为trident
var isIE9 = UA && UA.indexOf('msie 9.0') > 0;//是不是IE9
var isEdge = UA && UA.indexOf('edge/') > 0;
var isAndroid = UA && UA.indexOf('android') > 0;
var isIOS = UA && /iphone|ipad|ipod|ios/.test(UA);
var isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge;

// this needs to be lazy-evaled because vue may be required before
// vue-server-renderer can set VUE_ENV//这里需要被懒运算，因为vue可能被需要在 vue服务渲染器设置VUE_ENVz之前
var _isServer;
var isServerRendering = function () {
  if (_isServer === undefined) {
    /* istanbul ignore if */
    if (!inBrowser && typeof global !== 'undefined') {
      // detect presence of vue-server-renderer and avoid
      // Webpack shimming the process
      _isServer = global['process'].env.VUE_ENV === 'server';
    } else {
      _isServer = false;
    }
  }
  return _isServer
};

// detect devtools//探测开发工具
var devtools = inBrowser && window.__VUE_DEVTOOLS_GLOBAL_HOOK__;

/* istanbul ignore next */
function isNative (Ctor) {//判断是不是本地的方法
  return /native code/.test(Ctor.toString())
}

var hasSymbol =
  typeof Symbol !== 'undefined' && isNative(Symbol) &&
  typeof Reflect !== 'undefined' && isNative(Reflect.ownKeys);

/**
 * Defer a task to execute it asynchronously.//推迟一个任务异步的执行它
 */
var nextTick = (function () {
  var callbacks = [];
  var pending = false;
  var timerFunc;

  function nextTickHandler () {
    pending = false;
    var copies = callbacks.slice(0);
    callbacks.length = 0;
    for (var i = 0; i < copies.length; i++) {
      copies[i]();
    }
  }

  //the nextTick(下一个标记) behavior（行为） leverages（利用） the microtask queue（微任务队列）, which can be accessed（被存取）
  // via（经由） either native Promise（要么本机的promise）.then or MutationObserver（html5新特性之一Mutation Observer（变动观察器）是监视DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知。）.
  // MutationObserver has wider support, however it is seriously bugged in//变动观察器具有广泛的支持，然而它被严重的干扰在苹果9.3.3以上系统的网页中，当触摸事件被触发时。
  // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
  // completely stops working after triggering a few times... so, if native//它完全的停止工作在触发后一段时间，所以如果本地的promise是有效的，我们将会使用promise。
  // Promise is available, we will use it:
  /* istanbul ignore if */
  if (typeof Promise !== 'undefined' && isNative(Promise)) {//如果Promise存在
    var p = Promise.resolve();
    var logError = function (err) { console.error(err); };//打印错误日志
    timerFunc = function () {
      p.then(nextTickHandler).catch(logError);
      // in problematic UIWebViews, Promise.then doesn't completely break, but//在有问题的网页中，Promise.then 不会完全的销毁，但是它会被卡住在一个不可思议的状态下
      // it can get stuck in a weird state where callbacks are pushed into the//这个状态是回调函数被推送到微任务队列，但是队列没有被冲洗，直到浏览器需要做其他工作，举例来说操作一个定时器
      // microtask queue but the queue isn't being flushed, until the browser
      // needs to do some other work, e.g. handle a timer. Therefore we can//因此我们能推动这个微任务队列去冲洗通过增加一个空的定时器
      // "force" the microtask queue to be flushed by adding an empty timer.
      if (isIOS) { setTimeout(noop); }
    };
  } else if (typeof MutationObserver !== 'undefined' && (//判断是否支持“变动观察器”
    isNative(MutationObserver) ||
    // PhantomJS and iOS 7.x
    MutationObserver.toString() === '[object MutationObserverConstructor]'
  )) {
    // use MutationObserver where native Promise is not available,//在本地Promise无效的情况下使用“变动观察器”
    // e.g. PhantomJS IE11, iOS7, Android 4.4
    var counter = 1;
    var observer = new MutationObserver(nextTickHandler);
    var textNode = document.createTextNode(String(counter));
    observer.observe(textNode, {
      characterData: true
    });
    timerFunc = function () {
      counter = (counter + 1) % 2;
      textNode.data = String(counter);
    };
  } else {
    // fallback to setTimeout//后退执行定时器
    /* istanbul ignore next */
    timerFunc = function () {
      setTimeout(nextTickHandler, 0);
    };
  }

  return function queueNextTick (cb, ctx) {
    var _resolve;
    callbacks.push(function () {
      if (cb) { cb.call(ctx); }
      if (_resolve) { _resolve(ctx); }
    });
    if (!pending) {
      pending = true;
      timerFunc();
    }
    if (!cb && typeof Promise !== 'undefined') {
      return new Promise(function (resolve) {
        _resolve = resolve;
      })
    }
  }
})();