剖析Vue 2源码中的6个实用工具函数，解锁前端开发新姿势

前言

Vue.js凭借其轻量、灵活的特点，已成为前端开发领域炙手可热的技术。在本文中，我们将共同探秘Vue 2源码中的6个实用工具函数，一窥其高明之处，并将其应用于自己的项目中，助你更上一层楼。

1. 确定值的类型

在前端开发中，我们经常需要处理不同类型的数据，判断变量的类型尤为重要。Vue 2源码中提供了typeof函数，可轻松检测变量类型。

function typeof(v) {
  if (v === null) {
    return 'null';
  } else if (Array.isArray(v)) {
    return 'array';
  } else if (v instanceof Date) {
    return 'date';
  } else if (typeof v === 'object') {
    return 'object';
  } else {
    return typeof v;
  }
}

通过typeof函数，我们可以快速识别变量的类型，并根据不同类型进行相应的处理，确保代码逻辑的严谨性。

2. 获得值的字符串表示

在某些场景下，我们需要将变量转换为字符串格式，以便输出或存储。Vue 2源码中提供了toString函数，可轻松实现这一目的。

function toString(val) {
  return val == null
    ? ''
    : typeof val === 'object'
      ? JSON.stringify(val, null, 2)
      : String(val);
}

toString函数会根据变量的类型进行不同的处理。如果变量为null，则返回空字符串。如果变量为对象，则将其转换为JSON字符串，并缩进两个空格以提高可读性。对于其他类型的数据，则直接调用String()函数将其转换为字符串。

3. 在函数里加入缓存控制

在某些情况下，我们希望避免函数重复执行，以提高性能。Vue 2源码中提供了once函数，可轻松实现这一目标。

function once(fn) {
  let called = false;
  return function () {
    if (!called) {
      called = true;
      fn.apply(this, arguments);
    }
  };
}

once函数会创建一个新的函数，该函数只能执行一次。当第一次调用该函数时，called变量被设置为true，后续再调用该函数时，它将直接返回，不再执行fn函数。

4. 判断两个值是否宽松相等

在前端开发中，我们经常需要比较两个值的相等性。Vue 2源码中提供了looseEqual函数，可用于宽松地比较两个值是否相等。

function looseEqual(a, b) {
  if (a === b) {
    return true;
  }
  const isObjectA = isObject(a);
  const isObjectB = isObject(b);
  if (isObjectA && isObjectB) {
    try {
      const isArrayA = Array.isArray(a);
      const isArrayB = Array.isArray(b);
      if (isArrayA && isArrayB) {
        return a.length === b.length && a.every((e, i) => {
          return looseEqual(e, b[i]);
        });
      } else if (!isArrayA && !isArrayB) {
        const keysA = Object.keys(a);
        const keysB = Object.keys(b);
        return keysA.length === keysB.length && keysA.every(key => {
          return looseEqual(a[key], b[key]);
        });
      } else {
        /* istanbul ignore next */
        return false;
      }
    } catch (e) {
      /* istanbul ignore next */
      return false;
    }
  } else if (!isObjectA && !isObjectB) {
    return String(a) === String(b);
  } else {
    /* istanbul ignore next */
    return false;
  }
}

looseEqual函数首先判断两个值是否严格相等，若相等则直接返回true。若不相等，则判断两个值是否都是对象。若都是对象，则比较两个对象的键是否相同，并递归比较各个键对应的值是否相等。若有一个键对应的值不相等，则返回false。若两个值都不是对象，则将它们转换为字符串并比较字符串是否相等。

5. 确保某个函数只执行一次

在某些场景下，我们希望确保某个函数只执行一次。Vue 2源码中提供了once函数，可轻松实现这一目标。

function once(fn) {
  let called = false;
  return function () {
    if (!called) {
      called = true;
      fn.apply(this, arguments);
    }
  };
}

once函数会创建一个新的函数，该函数只能执行一次。当第一次调用该函数时，called变量被设置为true，后续再调用该函数时，它将直接返回，不再执行fn函数。

6. 判断浏览器是否原生支持某个特性

在前端开发中，我们经常需要判断浏览器是否原生支持某个特性。Vue 2源码中提供了checkBrowser函数，可轻松实现这一目的。

function checkBrowser(prop) {
  const hasSupport =
    typeof window !== 'undefined' &&
    window.navigator.userAgent.toLowerCase().indexOf(prop) !== -1;

  if (prop === 'mobile') {
    const platformInfo = navigator.platform || '';
    hasSupport = hasSupport && /iphone|ipod|android|ipad|mobile|blackberry|iemobile/i.test(platformInfo);
  }

  return hasSupport;
}

checkBrowser函数会根据传入的特性名，判断浏览器是否原生支持该特性。对于某些特性，还需要进一步判断平台信息，例如判断是否为移动端。

结语

在本文中，我们共同探索了Vue 2源码中的6个实用工具函数，包括typeof、toString、once、looseEqual、once和checkBrowser。这些函数在前端开发中非常有用，可以帮助我们提升代码质量，优化性能，并解决常见问题。希望这些工具函数能成为你开发利器，助力你创造出更出色、更具创新性的前端应用。