你想要的——vue-i18n源码分析

大家好，今天给大家带来的干货是vue-i18n（v7.3.0）的源码分析。vue-i18n是用于多语言适配的vue插件，主要用于前端项目的国际化应用

这里是vue-18n的gayhub地址摸我

首先还是先看看作者给我们的一个简单的例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>getting started</title>
    <script src="../../node_modules/vue/dist/vue.min.js"></script>
    <script src="../../dist/vue-i18n.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ $t("message.hello") }}</p>
    </div>
    <script>
      var messages = {
        en: {
          message: {
            hello: 'hello world'
          }
        },
        ja: {
          message: {
            hello: 'こんにちは、世界'
          }
        }
      }
      
      Vue.use(VueI18n)

      var i18n = new VueI18n({
        locale: 'ja',
        messages: messages
      })
      new Vue({ i18n: i18n }).$mount('#app')
    </script>
  </body>
</html>

从这个简单的小例子中，我们可以看到vue-i18n的使用非常的简单，我们只需要定义好对应的语言包messages，然后设置一个默认语言类型locale，然后实例化出一个i18n对象并传入我们的vue实例就可以愉快的使用起来

ps：插值表达式中的$t就是vue-i18n暴露给用户的API

接下来，我们就一起看看vue-i18n的源码到底是怎么样的

首先还是先看看目录结构，我们可以看到，源码目录src中有9个文件，而这9个文件便构成了vue-i18n的全部内容

图片描述

我们先看看入口文件 index.js

这个文件定义了并且导出一个名为VueI18n的类，并在类上定义了availabilities，install，version三个静态属性，以便通过类名直接访问

/* @flow */

// 导入相应的资源
import { install, Vue } from './install'
import {
  warn,
  isNull,
  parseArgs,
  fetchChoice,
  isPlainObject,
  isObject,
  looseClone,
  remove,
  canUseDateTimeFormat,
  canUseNumberFormat
} from './util'
import BaseFormatter from './format'
import I18nPath from './path'

import type { PathValue } from './path'
// 定义并且一个VueI18n类
export default class VueI18n {
  // 定义静态属性，在后面有赋值操作
  static install: () => void
  static version: string
  static availabilities: IntlAvailability

  // 私有变量
  _vm: any
  _formatter: Formatter
  _root: ?I18n
  _sync: boolean
  _fallbackRoot: boolean
  _missing: ?MissingHandler
  _exist: Function
  _watcher: any
  _i18nWatcher: Function
  _silentTranslationWarn: boolean
  _dateTimeFormatters: Object
  _numberFormatters: Object
  _path: I18nPath
  _dataListeners: Array<any>

  // 构造函数，默认参数是一个空对象
  constructor (options: I18nOptions = {}) {
    // 局部变量，如果默认参数没有传值，则使用默认值
    // locale 用于指定页面使用的语言类型，默认是英文
    const locale: Locale = options.locale || 'en-US'
    // fallbackLocal TODO
    const fallbackLocale: Locale = options.fallbackLocale || 'en-US'
    // message 就是用户定义的语言包，默认是一个空对像
    const messages: LocaleMessages = options.messages || {}
    // dateTimeFormats 日期格式
    const dateTimeFormats = options.dateTimeFormats || {}
    // numberFormats 数字格式
    const numberFormats = options.numberFormats || {}
    // _vm 默认的vm对象
    this._vm = null
    //  _formatter 可自定义格式化
    this._formatter = options.formatter || new BaseFormatter()
    // missing TODO
    this._missing = options.missing || null
    // _root 保存根节点
    this._root = options.root || null
    this._sync = options.sync === undefined ? true : !!options.sync
    // fallbackRoot 保存中fallback语言包的根节点
    this._fallbackRoot = options.fallbackRoot === undefined
      ? true
      : !!options.fallbackRoot
    this._silentTranslationWarn = options.silentTranslationWarn === undefined
      ? false
      : !!options.silentTranslationWarn
    this._dateTimeFormatters = {}
    this._numberFormatters = {}
    this._path = new I18nPath()
    this._dataListeners = []

    // _exist方法，用于判断某个key是否存在于这个messages语言包中
    // 主要通过path模块的getPathValue方法实现，后面会详细说明,在此只需要知道他的用途
    this._exist = (message: Object, key: Path): boolean => {
      if (!message || !key) { return false }
      return !isNull(this._path.getPathValue(message, key))
    }
    // 初始化vm
    this._initVM({
      locale,
      fallbackLocale,
      messages,
      dateTimeFormats,
      numberFormats
    })
  }

  _initVM (data: {
    locale: Locale,
    fallbackLocale: Locale,
    messages: LocaleMessages,
    dateTimeFormats: DateTimeFormats,
    numberFormats: NumberFormats
  }): void {
    const silent = Vue.config.silent
    Vue.config.silent = true
    // 实例化一个vue对象，将传入的参数变成vue中的响应式数据，大部分vue的插件都使用这种做法，比如vuex
    this._vm = new Vue({ data })
    Vue.config.silent = silent
  }
  // 监听vm数据的变化，将每次的vm数据push到监听队列中
  subscribeDataChanging (vm: any): void {
    this._dataListeners.push(vm)
  }
  // 取消监听vm数据的变化
  unsubscribeDataChanging (vm: any): void {
    remove(this._dataListeners, vm)
  }
  // 监听i18n中定义的数据的变化，如果数据变化了，就强制更新页面
  watchI18nData (): Function {
    const self = this
    // 利用vue中$watch的api，当this._vm的数据（$data）发生改变，就会触发监听队列中所有vm的视图的变化
    return this._vm.$watch('$data', () => {
      let i = self._dataListeners.length
      // 遍历所有的vm，再利用vue中的$forceUpdate的api，实现强制更新
      while (i--) {
        Vue.nextTick(() => {
          self._dataListeners[i] && self._dataListeners[i].$forceUpdate()
        })
      }
    }, { deep: true })
  }
 // 监听根节点locale的变化
  watchLocale (): ?Function {
    /* istanbul ignore if */
    if (!this._sync || !this._root) { return null }
    // 获取当前的vm
    const target: any = this._vm
    // 注意：这里是根节点的vm
    return this._root.vm.$watch('locale', (val) => {
      // 设置当前vm的locale,并强制更新
      target.$set(target, 'locale', val)
      target.$forceUpdate()
    }, { immediate: true })
  }
  // 获取当前的vm
  get vm (): any { return this._vm }
  // 获取当前vm的messages属性的内容，这里使用了looseClone对js对象进行拷贝，详细会在讲解util.js中分析
  get messages (): LocaleMessages { return looseClone(this._getMessages()) }
  // 获取当前vm的dateTimeFormats属性的内容
  get dateTimeFormats (): DateTimeFormats { return looseClone(this._getDateTimeFormats()) }
  // 获取当前vm的numberFormats属性的内容
  get numberFormats (): NumberFormats { return looseClone(this._getNumberFormats()) }
  // 获取当前vm的locale属性的内容
  get locale (): Locale { return this._vm.locale }
  // 设置当前vm的locale属性的内容
  set locale (locale: Locale): void {
    this._vm.$set(this._vm, 'locale', locale)
  }
  // 获取当前vm的fallbackLocale属性的内容
  get fallbackLocale (): Locale { return this._vm.fallbackLocale }
  // 设置当前vm的fallbackLocale属性的内容
  set fallbackLocale (locale: Locale): void {
    this._vm.$set(this._vm, 'fallbackLocale', locale)
  }
  // 同上
  get missing (): ?MissingHandler { return this._missing }
  set missing (handler: MissingHandler): void { this._missing = handler }
  // 同上
  get formatter (): Formatter { return this._formatter }
  set formatter (formatter: Formatter): void { this._formatter = formatter }
  // 同上
  get silentTranslationWarn (): boolean { return this._silentTranslationWarn }
  set silentTranslationWarn (silent: boolean): void { this._silentTranslationWarn = silent }

  _getMessages (): LocaleMessages { return this._vm.messages }
  _getDateTimeFormats (): DateTimeFormats { return this._vm.dateTimeFormats }
  _getNumberFormats (): NumberFormats { return this._vm.numberFormats }
  // 提示方法
  _warnDefault (locale: Locale, key: Path, result: ?any, vm: ?any): ?string {
    if (!isNull(result)) { return result }
    // 如果missing存在，则执行
    if (this.missing) {
      this.missing.apply(null, [locale, key, vm])
    } else {
      if (process.env.NODE_ENV !== 'production' && !this._silentTranslationWarn) {
        warn(
          `Cannot translate the value of keypath '${key}'. ` +
          'Use the value of keypath as default.'
        )
      }
    }
    return key
  }
  // 判断是否有回退方案
  _isFallbackRoot (val: any): boolean {
    return !val && !isNull(this._root) && this._fallbackRoot
  }

  // 获取message中某个key的值
  _interpolate (
    locale: Locale,
    message: LocaleMessageObject,
    key: Path,
    host: any,
    interpolateMode: string,
    values: any
  ): any {
    if (!message) { return null }
    // 利用getPathValue方法获取message中key的值
    const pathRet: PathValue = this._path.getPathValue(message, key)
    // 如果获取的值是一个数组，则返回这个数组
    if (Array.isArray(pathRet)) { return pathRet }

    let ret: mixed
    // 如果获取的值是空
    if (isNull(pathRet)) {
      /* istanbul ignore else */
      if (isPlainObject(message)) {
        ret = message[key]
        if (typeof ret !== 'string') {
          if (process.env.NODE_ENV !== 'production' && !this._silentTranslationWarn) {
            warn(`Value of key '${key}' is not a string!`)
          }
          return null
        }
      } else {
        return null
      }
    } else {
      /* istanbul ignore else */
      if (typeof pathRet === 'string') {
        // 返回获取的值
        ret = pathRet
      } else {
        if (process.env.NODE_ENV !== 'production' && !this._silentTranslationWarn) {
          warn(`Value of key '${key}' is not a string!`)
        }
        return null
      }
    }

    // Check for the existance of links within the translated string
    // 解析message中有@：的情况
    if (ret.indexOf('@:') >= 0) {
      ret = this._link(locale, message, ret, host, interpolateMode, values)
    }
    // 如果values为false，则返回ret，否则返回this._render的执行结果
    return !values ? ret : this._render(ret, interpolateMode, values)
  }
  // @：的情况
  _link (
    locale: Locale,
    message: LocaleMessageObject,
    str: string,
    host: any,
    interpolateMode: string,
    values: any
  ): any {
    let ret: string = str

    // Match all the links within the local
    // We are going to replace each of
    // them with its translation
    // 匹配@：(link)
    const matches: any = ret.match(/(@:[\w\-_|.]+)/g)
    // 遍历匹配的数组
    for (const idx in matches) {
      // ie compatible: filter custom array
      // prototype method
      if (!matches.hasOwnProperty(idx)) {
        continue
      }
      // 获取每个link
      const link: string = matches[idx]
      // Remove the leading @:
      // 除去头部的 @:，将得到的linkPlaceholder作为_interpolate方法的key继续解析
      const linkPlaceholder: string = link.substr(2)
      // Translate the link
      let translated: any = this._interpolate(
        locale, message, linkPlaceholder, host,
        interpolateMode === 'raw' ? 'string' : interpolateMode,
        interpolateMode === 'raw' ? undefined : values
      )

      if (this._isFallbackRoot(translated)) {
        if (process.env.NODE_ENV !== 'production' && !this._silentTranslationWarn) {
          warn(`Fall back to translate the link placeholder '${linkPlaceholder}' with root locale.`)
        }
        /* istanbul ignore if */
        if (!this._root) { throw Error('unexpected error') }
        const root: any = this._root
        translated = root._translate(
          root._getMessages(), root.locale, root.fallbackLocale,
          linkPlaceholder, host, interpolateMode, values
        )
      }
      // 获取装换的值
      translated = this._warnDefault(locale, linkPlaceholder, translated, host)

      // Replace the link with the translated
      // 替换数据
      ret = !translated ? ret : ret.replace(link, translated)
    }

    return ret
  }
  //  解析表达式，利用的是this._formatter.interpolate方法
  _render (message: string, interpolateMode: string, values: any): any {
    const ret = this._formatter.interpolate(message, values)
    // if interpolateMode is **not** 'string' ('row'),
    // return the compiled data (e.g. ['foo', VNode, 'bar']) with formatter
    return interpolateMode === 'string' ? ret.join('') : ret
  }
  // 翻译语言方法
  _translate (
    messages: LocaleMessages,
    locale: Locale,
    fallback: Locale,
    key: Path,
    host: any,
    interpolateMode: string,
    args: any
  ): any {
    // 通过_interpolate方法获取结果
    let res: any =
      this._interpolate(locale, messages[locale], key, host, interpolateMode, args)
    if (!isNull(res)) { return res }
    // 如果获取的结果是null，则使用fallback语言包
    res = this._interpolate(fallback, messages[fallback], key, host, interpolateMode, args)
    if (!isNull(res)) {
      if (process.env.NODE_ENV !== 'production' && !this._silentTranslationWarn) {
        warn(`Fall back to translate the keypath '${key}' with '${fallback}' locale.`)
      }
      return res
    } else {
      return null
    }
  }

  _t (key: Path, _locale: Locale, messages: LocaleMessages, host: any, ...values: any): any {
    if (!key) { return '' }
    // 解析传入的values参数
    const parsedArgs = parseArgs(...values)
    // 获取locale
    const locale: Locale = parsedArgs.locale || _locale
    // 调用_translate，设置模式为string,并将parsedArgs.params传入
    const ret: any = this._translate(
      messages, locale, this.fallbackLocale, key,
      host, 'string', parsedArgs.params
    )
    // 判断是否有回退方案，这个适用于当子组件找不到对应的语言包字段的时候，往根节点查找是否有相应的字段
    if (this._isFallbackRoot(ret)) {
      if (process.env.NODE_ENV !== 'production' && !this._silentTranslationWarn) {
        warn(`Fall back to translate the keypath '${key}' with root locale.`)
      }
      /* istanbul ignore if */
      if (!this._root) { throw Error('unexpected error') }
      // 调用根节点的t方法
      return this._root.t(key, ...values)
    } else {
      return this._warnDefault(locale, key, ret, host)
    }
  }

  t (key: Path, ...values: any): TranslateResult {
    // 调用_t方法实现
    return this._t(key, this.locale, this._getMessages(), null, ...values)
  }

  _i (key: Path, locale: Locale, messages: LocaleMessages, host: any, values: Object): any {
    // 设置interpolateMode为raw
    const ret: any =
      this._translate(messages, locale, this.fallbackLocale, key, host, 'raw', values)
    if (this._isFallbackRoot(ret)) {
      if (process.env.NODE_ENV !== 'production' && !this._silentTranslationWarn) {
        warn(`Fall back to interpolate the keypath '${key}' with root locale.`)
      }
      if (!this._root) { throw Error('unexpected error') }
      return this._root.i(key, locale, values)
    } else {
      return this._warnDefault(locale, key, ret, host)
    }
  }
  // 处理内置i18n组件逻辑
  i (key: Path, locale: Locale, values: Object): TranslateResult {
    /* istanbul ignore if */
    if (!key) { return '' }

    if (typeof locale !== 'string') {
      locale = this.locale
    }

    return this._i(key, locale, this._getMessages(), null, values)
  }

  _tc (
    key: Path,
    _locale: Locale,
    messages: LocaleMessages,
    host: any,
    choice?: number,
    ...values: any
  ): any {
    if (!key) { return '' }
    if (choice === undefined) {
      choice = 1
    }
    // 先调用this._t,在使用fetchChoice包装，fetchChoice具体在util中会详细分析
    return fetchChoice(this._t(key, _locale, messages, host, ...values), choice)
  }

  tc (key: Path, choice?: number, ...values: any): TranslateResult {
    return this._tc(key, this.locale, this._getMessages(), null, choice, ...values)
  }

  _te (key: Path, locale: Locale, messages: LocaleMessages, ...args: any): boolean {
    const _locale: Locale = parseArgs(...args).locale || locale
    return this._exist(messages[_locale], key)
  }

  te (key: Path, locale?: Locale): boolean {
    return this._te(key, this.locale, this._getMessages(), locale)
  }
  // 获取语言包
  getLocaleMessage (locale: Locale): LocaleMessageObject {
    return looseClone(this._vm.messages[locale] || {})
  }
  // 设置语言包，或者用于热更新：i18n.setLocaleMessage('en', require('./en').default)
  setLocaleMessage (locale: Locale, message: LocaleMessageObject): void {
    this._vm.messages[locale] = message
  }

  mergeLocaleMessage (locale: Locale, message: LocaleMessageObject): void {
    this._vm.messages[locale] = Vue.util.extend(this._vm.messages[locale] || {}, message)
  }

  getDateTimeFormat (locale: Locale): DateTimeFormat {
    return looseClone(this._vm.dateTimeFormats[locale] || {})
  }

  setDateTimeFormat (locale: Locale, format: DateTimeFormat): void {
    this._vm.dateTimeFormats[locale] = format
  }

  mergeDateTimeFormat (locale: Locale, format: DateTimeFormat): void {
    this._vm.dateTimeFormats[locale] = Vue.util.extend(this._vm.dateTimeFormats[locale] || {}, format)
  }
  // 本地格式化时间
  _localizeDateTime (
    value: number | Date,
    locale: Locale,
    fallback: Locale,
    dateTimeFormats: DateTimeFormats,
    key: string
  ): ?DateTimeFormatResult {
    // 获取语言包 & 对应的日期格式对象
    let _locale: Locale = locale
    let formats: DateTimeFormat = dateTimeFormats[_locale]

    // fallback locale
    // 判断为空
    if (isNull(formats) || isNull(formats[key])) {
      if (process.env.NODE_ENV !== 'production') {
        warn(`Fall back to '${fallback}' datetime formats from '${locale} datetime formats.`)
      }
      _locale = fallback
      formats = dateTimeFormats[_locale]
    }
    // 判断为空
    if (isNull(formats) || isNull(formats[key])) {
      return null
    } else {
      // 如果不为空，本地获取对应key下的format规则
      const format: ?DateTimeFormatOptions = formats[key]
      // 生成相应的id
      const id = `${_locale}__${key}`
      // 获取本地_dateTimeFormatters对象的缓存
      let formatter = this._dateTimeFormatters[id]
      // 如果没有的缓存规则，则实例化Intl.DateTimeFormat类，获取对应的规则，并缓存在_dateTimeFormatters对象中
      if (!formatter) {
        formatter = this._dateTimeFormatters[id] = new Intl.DateTimeFormat(_locale, format)
      }
      // 调用formatter的format方法，得到格式化后的日期
      return formatter.format(value)
    }
  }

  _d (value: number | Date, locale: Locale, key: ?string): DateTimeFormatResult {
    /* istanbul ignore if */
    // 判断是支持Intl.dateTimeFormat方法
    if (process.env.NODE_ENV !== 'production' && !VueI18n.availabilities.dateTimeFormat) {
      warn('Cannot format a Date value due to not support Intl.DateTimeFormat.')
      return ''
    }
    // 如果key为空，则直接实例化Intl.DateTimeFormat类，并调用api:format，得到相应的日期格式
    if (!key) {
      return new Intl.DateTimeFormat(locale).format(value)
    }
    // 如果key不为空，则调用本地的格式化规则，_localizeDateTime方法
    const ret: ?DateTimeFormatResult =
      this._localizeDateTime(value, locale, this.fallbackLocale, this._getDateTimeFormats(), key)
    if (this._isFallbackRoot(ret)) {
      if (process.env.NODE_ENV !== 'production') {
        warn(`Fall back to datetime localization of root: key '${key}' .`)
      }
      /* istanbul ignore if */
      if (!this._root) { throw Error('unexpected error') }
      return this._root.d(value, key, locale)
    } else {
      return ret || ''
    }
  }
  // 日期格式化的入口
  d (value: number | Date, ...args: any): DateTimeFormatResult {
    let locale: Locale = this.locale
    let key: ?string = null
    // 如果args的长度唯一，并且值为字符串，则设置为key
    if (args.length === 1) {
      if (typeof args[0] === 'string') {
        key = args[0]
      } else if (isObject(args[0])) {
        // 如果值为对象，则解构这个对象
        if (args[0].locale) {
          locale = args[0].locale
        }
        if (args[0].key) {
          key = args[0].key
        }
      }
    } else if (args.length === 2) {
      // 如果长度为2，则设置key和locale
      if (typeof args[0] === 'string') {
        key = args[0]
      }
      if (typeof args[1] === 'string') {
        locale = args[1]
      }
    }
    // 调用_d方法
    return this._d(value, locale, key)
  }

  getNumberFormat (locale: Locale): NumberFormat {
    return looseClone(this._vm.numberFormats[locale] || {})
  }

  setNumberFormat (locale: Locale, format: NumberFormat): void {
    this._vm.numberFormats[locale] = format
  }

  mergeNumberFormat (locale: Locale, format: NumberFormat): void {
    this._vm.numberFormats[locale] = Vue.util.extend(this._vm.numberFormats[locale] || {}, format)
  }

  _localizeNumber (
    value: number,
    locale: Locale,
    fallback: Locale,
    numberFormats: NumberFormats,
    key: string
  ): ?NumberFormatResult {
    let _locale: Locale = locale
    let formats: NumberFormat = numberFormats[_locale]

    // fallback locale
    // 判断为空
    if (isNull(formats) || isNull(formats[key])) {
      if (process.env.NODE_ENV !== 'production') {
        warn(`Fall back to '${fallback}' number formats from '${locale} number formats.`)
      }
      _locale = fallback
      formats = numberFormats[_locale]
    }
    // 判断为空
    if (isNull(formats) || isNull(formats[key])) {
      return null
    } else {
      // 获取对应的key下的数字格式
      const format: ?NumberFormatOptions = formats[key]
      // 生成id
      const id = `${_locale}__${key}`
      // 获取相应Id下的缓存
      let formatter = this._numberFormatters[id]
      // 如果没有缓存，则实例化Intl.NumberFormat类，并且缓存在_numberFormatters对象中
      if (!formatter) {
        formatter = this._numberFormatters[id] = new Intl.NumberFormat(_locale, format)
      }
      // 根据得到的formatter，调用format方法得到相应的数字
      return formatter.format(value)
    }
  }

  _n (value: number, locale: Locale, key: ?string): NumberFormatResult {
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && !VueI18n.availabilities.numberFormat) {
      warn('Cannot format a Date value due to not support Intl.NumberFormat.')
      return ''
    }
    // 如果没有key，则直接利用Intl.NumberFormat获取相应的格式
    if (!key) {
      return new Intl.NumberFormat(locale).format(value)
    }
    // 如果有key,则调用本地的格式化规则，_localizeNumber方法
    const ret: ?NumberFormatResult =
      this._localizeNumber(value, locale, this.fallbackLocale, this._getNumberFormats(), key)
    if (this._isFallbackRoot(ret)) {
      if (process.env.NODE_ENV !== 'production') {
        warn(`Fall back to number localization of root: key '${key}' .`)
      }
      /* istanbul ignore if */
      if (!this._root) { throw Error('unexpected error') }
      return this._root.n(value, key, locale)
    } else {
      return ret || ''
    }
  }
  // 数字格式化的入口
  n (value: number, ...args: any): NumberFormatResult {
    let locale: Locale = this.locale
    let key: ?string = null
    // 解析参数，与上面的方法d类似
    if (args.length === 1) {
      if (typeof args[0] === 'string') {
        key = args[0]
      } else if (isObject(args[0])) {
        if (args[0].locale) {
          locale = args[0].locale
        }
        if (args[0].key) {
          key = args[0].key
        }
      }
    } else if (args.length === 2) {
      if (typeof args[0] === 'string') {
        key = args[0]
      }
      if (typeof args[1] === 'string') {
        locale = args[1]
      }
    }
    // 调用_n
    return this._n(value, locale, key)
  }
}

VueI18n.availabilities = {
  dateTimeFormat: canUseDateTimeFormat,
  numberFormat: canUseNumberFormat
}
VueI18n.install = install
VueI18n.version = '__VERSION__'

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(VueI18n)
}

其实index.js就已经包含了vue-i18n的主要内容了，看明白了这个文件就基本明白了vue-i18n的大体思路了

vue-i18n还有其他优秀的地方，比如它提供了组件和指令，可以供使用者更加方便和灵活的调用

接下来先看看component.js的代码，看看i18n组件是怎么实现的

/* @flow */
// 定义i18n组件
import { warn } from './util'

export default {
  name: 'i18n',
  functional: true,
  props: {
    tag: {
      type: String,
      default: 'span'
    },
    path: {
      type: String,
      required: true
    },
    locale: {
      type: String
    },
    places: {
      type: [Array, Object]
    }
  },
  render (h: Function, { props, data, children, parent }: Object) {
    // 获取父组件i18n实例
    const i18n = parent.$i18n
    // 收集子组件
    children = (children || []).filter(child => {
      return child.tag || (child.text = child.text.trim())
    })

    if (!i18n) {
      if (process.env.NODE_ENV !== 'production') {
        warn('Cannot find VueI18n instance!')
      }
      return children
    }
    // 获取路径，语言包，其他参数
    const path: Path = props.path
    const locale: ?Locale = props.locale

    const params: Object = {}
    const places: Array<any> | Object = props.places || {}
    // 判断是否有places占位符
    const hasPlaces: boolean = Array.isArray(places)
      ? places.length > 0
      : Object.keys(places).length > 0

    const everyPlace: boolean = children.every(child => {
      if (child.data && child.data.attrs) {
        const place = child.data.attrs.place
        return (typeof place !== 'undefined') && place !== ''
      }
    })

    if (hasPlaces && children.length > 0 && !everyPlace) {
      warn('If places prop is set, all child elements must have place prop set.')
    }
    // 提取组件本身的place
    if (Array.isArray(places)) {
      places.forEach((el, i) => {
        params[i] = el
      })
    } else {
      Object.keys(places).forEach(key => {
        params[key] = places[key]
      })
    }
    // 提取子组件的place
    children.forEach((child, i: number) => {
      const key: string = everyPlace
        ? `${child.data.attrs.place}`
        : `${i}`
      params[key] = child
    })
    // 将参数作为createElement方法的参数传入
    return h(props.tag, data, i18n.i(path, locale, params))
  }
}

i18组件不仅仅提供了vue组件的基本功能，还提供了place占位符，比较灵活

vue-i18n提供了v-t指令，主要就是实现了一个vue组件

/* @flow */
// 指令功能，用户可通过指令v-t来进行多语言操作
import { warn, isPlainObject, looseEqual } from './util'
// 定义了vue指令中的bind方法
export function bind (el: any, binding: Object, vnode: any): void {
  t(el, binding, vnode)
}
// 定义了vue指令中的update方法
export function update (el: any, binding: Object, vnode: any, oldVNode: any): void {
  if (looseEqual(binding.value, binding.oldValue)) { return }

  t(el, binding, vnode)
}

function t (el: any, binding: Object, vnode: any): void {
  // 解析参数
  const value: any = binding.value
  // 获取路径，语言类型以及其他参数
  const { path, locale, args } = parseValue(value)
  if (!path && !locale && !args) {
    warn('not support value type')
    return
  }
  // 获取当前的vm
  const vm: any = vnode.context
  if (!vm) {
    warn('not exist Vue instance in VNode context')
    return
  }

  if (!vm.$i18n) {
    warn('not exist VueI18n instance in Vue instance')
    return
  }

  if (!path) {
    warn('required `path` in v-t directive')
    return
  }
  // 最后调用vm实例上的t方法，然后进行赋值
  el._vt = el.textContent = vm.$i18n.t(path, ...makeParams(locale, args))
}
// 解析参数
function parseValue (value: any): Object {
  let path: ?string
  let locale: ?Locale
  let args: any
  // 参数只允许是字符串或是对象
  if (typeof value === 'string') {
    path = value
  } else if (isPlainObject(value)) {
    path = value.path
    locale = value.locale
    args = value.args
  }

  return { path, locale, args }
}
// 对参数进行调整
function makeParams (locale: Locale, args: any): Array<any> {
  const params: Array<any> = []

  locale && params.push(locale)
  if (args && (Array.isArray(args) || isPlainObject(args))) {
    params.push(args)
  }

  return params
}

看完了组件和指令的实现，其他的文件都是辅助函数，我们一次来看看各个文件的实现

extend.js

        /* @flow */
    // 主要是往Vue类的原型链扩展方法，调用的都是i18n的实例方法
    export default function extend (Vue: any): void {
      Vue.prototype.$t = function (key: Path, ...values: any): TranslateResult {
        const i18n = this.$i18n
        return i18n._t(key, i18n.locale, i18n._getMessages(), this, ...values)
      }
    
      Vue.prototype.$tc = function (key: Path, choice?: number, ...values: any): TranslateResult {
        const i18n = this.$i18n
        return i18n._tc(key, i18n.locale, i18n._getMessages(), this, choice, ...values)
      }
    
      Vue.prototype.$te = function (key: Path, locale?: Locale): boolean {
        const i18n = this.$i18n
        return i18n._te(key, i18n.locale, i18n._getMessages(), locale)
      }
    
      Vue.prototype.$d = function (value: number | Date, ...args: any): DateTimeFormatResult {
        return this.$i18n.d(value, ...args)
      }
    
      Vue.prototype.$n = function (value: number, ...args: any): NumberFormatResult {
        return this.$i18n.n(value, ...args)
      }
    }

path.js

    /* @flow */

import { isObject } from './util'

/**
 *  Path paerser
 *  - Inspired:
 *    Vue.js Path parser
 */

// actions
// 定义了各种常量
const APPEND = 0
const PUSH = 1
const INC_SUB_PATH_DEPTH = 2
const PUSH_SUB_PATH = 3

// states
const BEFORE_PATH = 0
const IN_PATH = 1
const BEFORE_IDENT = 2
const IN_IDENT = 3
const IN_SUB_PATH = 4
const IN_SINGLE_QUOTE = 5
const IN_DOUBLE_QUOTE = 6
const AFTER_PATH = 7
const ERROR = 8

const pathStateMachine: any = []

pathStateMachine[BEFORE_PATH] = {
  'ws': [BEFORE_PATH],
  'ident': [IN_IDENT, APPEND],
  '[': [IN_SUB_PATH],
  'eof': [AFTER_PATH]
}

pathStateMachine[IN_PATH] = {
  'ws': [IN_PATH],
  '.': [BEFORE_IDENT],
  '[': [IN_SUB_PATH],
  'eof': [AFTER_PATH]
}

pathStateMachine[BEFORE_IDENT] = {
  'ws': [BEFORE_IDENT],
  'ident': [IN_IDENT, APPEND],
  '0': [IN_IDENT, APPEND],
  'number': [IN_IDENT, APPEND]
}

pathStateMachine[IN_IDENT] = {
  'ident': [IN_IDENT, APPEND],
  '0': [IN_IDENT, APPEND],
  'number': [IN_IDENT, APPEND],
  'ws': [IN_PATH, PUSH],
  '.': [BEFORE_IDENT, PUSH],
  '[': [IN_SUB_PATH, PUSH],
  'eof': [AFTER_PATH, PUSH]
}

pathStateMachine[IN_SUB_PATH] = {
  "'": [IN_SINGLE_QUOTE, APPEND],
  '"': [IN_DOUBLE_QUOTE, APPEND],
  '[': [IN_SUB_PATH, INC_SUB_PATH_DEPTH],
  ']': [IN_PATH, PUSH_SUB_PATH],
  'eof': ERROR,
  'else': [IN_SUB_PATH, APPEND]
}

pathStateMachine[IN_SINGLE_QUOTE] = {
  "'": [IN_SUB_PATH, APPEND],
  'eof': ERROR,
  'else': [IN_SINGLE_QUOTE, APPEND]
}

pathStateMachine[IN_DOUBLE_QUOTE] = {
  '"': [IN_SUB_PATH, APPEND],
  'eof': ERROR,
  'else': [IN_DOUBLE_QUOTE, APPEND]
}

/**
 * Check if an expression is a literal value.
 */

const literalValueRE: RegExp = /^\s?(true|false|-?[\d.]+|'[^']*'|"[^"]*")\s?$/
function isLiteral (exp: string): boolean {
  return literalValueRE.test(exp)
}

/**
 * Strip quotes from a string
 */

function stripQuotes (str: string): string | boolean {
  const a: number = str.charCodeAt(0)
  const b: number = str.charCodeAt(str.length - 1)
  return a === b && (a === 0x22 || a === 0x27)
    ? str.slice(1, -1)
    : str
}

/**
 * Determine the type of a character in a keypath.
 */
// 获取path的类型
function getPathCharType (ch: ?string): string {
  if (ch === undefined || ch === null) { return 'eof' }
  // 获取charCode,判断各种类型，逻辑很简单，不解释
  const code: number = ch.charCodeAt(0)

  switch (code) {
    case 0x5B: // [
    case 0x5D: // ]
    case 0x2E: // .
    case 0x22: // "
    case 0x27: // '
    case 0x30: // 0
      return ch

    case 0x5F: // _
    case 0x24: // $
    case 0x2D: // -
      return 'ident'

    case 0x20: // Space
    case 0x09: // Tab
    case 0x0A: // Newline
    case 0x0D: // Return
    case 0xA0:  // No-break space
    case 0xFEFF:  // Byte Order Mark
    case 0x2028:  // Line Separator
    case 0x2029:  // Paragraph Separator
      return 'ws'
  }

  // a-z, A-Z
  if ((code >= 0x61 && code <= 0x7A) || (code >= 0x41 && code <= 0x5A)) {
    return 'ident'
  }

  // 1-9
  if (code >= 0x31 && code <= 0x39) { return 'number' }

  return 'else'
}

/**
 * Format a subPath, return its plain form if it is
 * a literal string or number. Otherwise prepend the
 * dynamic indicator (*).
 */
// 格式化子路径
function formatSubPath (path: string): boolean | string {
  const trimmed: string = path.trim()
  // invalid leading 0
  if (path.charAt(0) === '0' && isNaN(path)) { return false }

  return isLiteral(trimmed) ? stripQuotes(trimmed) : '*' + trimmed
}

/**
 * Parse a string path into an array of segments
 */
// 路径解析
function parse (path: Path): ?Array<string> {
  // 初始化变量
  const keys: Array<string> = []
  let index: number = -1
  let mode: number = BEFORE_PATH
  let subPathDepth: number = 0
  let c: ?string
  let key: any
  let newChar: any
  let type: string
  let transition: number
  let action: Function
  let typeMap: any
  const actions: Array<Function> = []
  // 定义各种actions
  // 将key添加到keys数组中
  actions[PUSH] = function () {
    if (key !== undefined) {
      keys.push(key)
      key = undefined
    }
  }
  // 设置key，如果key不为空，则追加在key后面
  actions[APPEND] = function () {
    if (key === undefined) {
      key = newChar
    } else {
      key += newChar
    }
  }

  actions[INC_SUB_PATH_DEPTH] = function () {
    actions[APPEND]()
    subPathDepth++
  }

  actions[PUSH_SUB_PATH] = function () {
    if (subPathDepth > 0) {
      subPathDepth--
      mode = IN_SUB_PATH
      actions[APPEND]()
    } else {
      subPathDepth = 0
      key = formatSubPath(key)
      if (key === false) {
        return false
      } else {
        actions[PUSH]()
      }
    }
  }
  // 判断是否为"" 或者 为 ''
  function maybeUnescapeQuote (): ?boolean {
    const nextChar: string = path[index + 1]
    if ((mode === IN_SINGLE_QUOTE && nextChar === "'") ||
      (mode === IN_DOUBLE_QUOTE && nextChar === '"')) {
      index++
      newChar = '\\' + nextChar
      actions[APPEND]()
      return true
    }
  }
  // 循环遍历路径，然后进行拆分
  while (mode !== null) {
    index++
    c = path[index]
    // 判断是否为\\ 并且判断是否为双引号或单引号，如果是，就进入下个循环
    if (c === '\\' && maybeUnescapeQuote()) {
      continue
    }
    // 获取当前字符的类型
    type = getPathCharType(c)
    // 获取mode类型的映射表
    typeMap = pathStateMachine[mode]
    // 得到相应的transition
    transition = typeMap[type] || typeMap['else'] || ERROR

    if (transition === ERROR) {
      return // parse error
    }
    // 重新设置mode
    mode = transition[0]
    // 得到相应的action
    action = actions[transition[1]]
    if (action) {
      newChar = transition[2]
      newChar = newChar === undefined
        ? c
        : newChar
      if (action() === false) {
        return
      }
    }

    if (mode === AFTER_PATH) {
      return keys
    }
  }
}

export type PathValue = PathValueObject | PathValueArray | string | number | boolean | null
export type PathValueObject = { [key: string]: PathValue }
export type PathValueArray = Array<PathValue>

function empty (target: any): boolean {
  /* istanbul ignore else */
  if (Array.isArray(target)) {
    return target.length === 0
  } else {
    return false
  }
}

export default class I18nPath {
  _cache: Object

  constructor () {
    this._cache = Object.create(null)
  }

  /**
   * External parse that check for a cache hit first
   */
  // 通过parse解析路径，并缓存在_cache对象上
  parsePath (path: Path): Array<string> {
    let hit: ?Array<string> = this._cache[path]
    if (!hit) {
      hit = parse(path)
      if (hit) {
        this._cache[path] = hit
      }
    }
    return hit || []
  }

  /**
   * Get path value from path string
   */
  getPathValue (obj: mixed, path: Path): PathValue {
    if (!isObject(obj)) { return null }
    // 得到path路径解析后的数组paths
    const paths: Array<string> = this.parsePath(path)
    if (empty(paths)) {
      return null
    } else {
      const length: number = paths.length
      let ret: any = null
      let last: any = obj
      let i: number = 0
      // 遍历查找obj中key对应的值
      while (i < length) {
        const value: any = last[paths[i]]
        if (value === undefined) {
          last = null
          break
        }
        last = value
        i++
      }

      ret = last
      return ret
    }
  }
}

format.js

/* @flow */

import { warn, isObject } from './util'
// 对应key的值进行基础格式化
export default class BaseFormatter {
  _caches: { [key: string]: Array<Token> }

  constructor () {
    // 初始化一个缓存对象
    this._caches = Object.create(null)
  }

  interpolate (message: string, values: any): Array<any> {
    // 先查看缓存中是否有token
    let tokens: Array<Token> = this._caches[message]
    // 如果没有，则进一步解析
    if (!tokens) {
      tokens = parse(message)
      this._caches[message] = tokens
    }
    // 得到tokens之后进行编译
    return compile(tokens, values)
  }
}

type Token = {
  type: 'text' | 'named' | 'list' | 'unknown',
  value: string
}

const RE_TOKEN_LIST_VALUE: RegExp = /^(\d)+/
const RE_TOKEN_NAMED_VALUE: RegExp = /^(\w)+/
// 分析相应的token
export function parse (format: string): Array<Token> {
  const tokens: Array<Token> = []
  let position: number = 0

  let text: string = ''
  // 将字符串拆分成字符逐个解析
  while (position < format.length) {
    // 获取每个字符
    let char: string = format[position++]
    // 对于符号{,进行特殊处理
    if (char === '{') {
      if (text) {
        tokens.push({ type: 'text', value: text })
      }
      // 内部循环，直到找到对应的符号}
      text = ''
      let sub: string = ''
      char = format[position++]
      while (char !== '}') {
        sub += char
        char = format[position++]
      }

      const type = RE_TOKEN_LIST_VALUE.test(sub)
        ? 'list'
        : RE_TOKEN_NAMED_VALUE.test(sub)
          ? 'named'
          : 'unknown'
      tokens.push({ value: sub, type })
    } else if (char === '%') {
      // when found rails i18n syntax, skip text capture
      if (format[(position)] !== '{') {
        text += char
      }
    } else {
      text += char
    }
  }
  // 最后生成对应的tokens
  text && tokens.push({ type: 'text', value: text })

  return tokens
}
// 编译函数
export function compile (tokens: Array<Token>, values: Object | Array<any>): Array<any> {
  const compiled: Array<any> = []
  let index: number = 0
  // 获取mode
  const mode: string = Array.isArray(values)
    ? 'list'
    : isObject(values)
      ? 'named'
      : 'unknown'
  if (mode === 'unknown') { return compiled }
  // 根据token的各种类型进行编译
  while (index < tokens.length) {
    const token: Token = tokens[index]
    switch (token.type) {
      case 'text':
        compiled.push(token.value)
        break
      case 'list':
        compiled.push(values[parseInt(token.value, 10)])
        break
      case 'named':
        // 如果是named，则将对应的value值push到complied数组中
        if (mode === 'named') {
          compiled.push((values: any)[token.value])
        } else {
          if (process.env.NODE_ENV !== 'production') {
            warn(`Type of token '${token.type}' and format of value '${mode}' don't match!`)
          }
        }
        break
      case 'unknown':
        if (process.env.NODE_ENV !== 'production') {
          warn(`Detect 'unknown' type of token!`)
        }
        break
    }
    index++
  }

  return compiled
}

mixin.js

/* @flow */

import VueI18n from './index'
import { isPlainObject, warn, merge } from './util'

export default {
  beforeCreate (): void {
    const options: any = this.$options
    options.i18n = options.i18n || (options.__i18n ? {} : null)

    if (options.i18n) {
      if (options.i18n instanceof VueI18n) {
        // init locale messages via custom blocks
        if (options.__i18n) {
          try {
            let localeMessages = {}
            options.__i18n.forEach(resource => {
              localeMessages = merge(localeMessages, JSON.parse(resource))
            })
            Object.keys(localeMessages).forEach((locale: Locale) => {
              options.i18n.mergeLocaleMessage(locale, localeMessages[locale])
            })
          } catch (e) {
            if (process.env.NODE_ENV !== 'production') {
              warn(`Cannot parse locale messages via custom blocks.`, e)
            }
          }
        }
        this._i18n = options.i18n
        this._i18nWatcher = this._i18n.watchI18nData()
        this._i18n.subscribeDataChanging(this)
        this._subscribing = true
      } else if (isPlainObject(options.i18n)) {
        // component local i18n
        if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {
          options.i18n.root = this.$root.$i18n
          options.i18n.fallbackLocale = this.$root.$i18n.fallbackLocale
          options.i18n.silentTranslationWarn = this.$root.$i18n.silentTranslationWarn
        }

        // init locale messages via custom blocks
        if (options.__i18n) {
          try {
            let localeMessages = {}
            options.__i18n.forEach(resource => {
              localeMessages = merge(localeMessages, JSON.parse(resource))
            })
            options.i18n.messages = localeMessages
          } catch (e) {
            if (process.env.NODE_ENV !== 'production') {
              warn(`Cannot parse locale messages via custom blocks.`, e)
            }
          }
        }

        this._i18n = new VueI18n(options.i18n)
        this._i18nWatcher = this._i18n.watchI18nData()
        this._i18n.subscribeDataChanging(this)
        this._subscribing = true

        if (options.i18n.sync === undefined || !!options.i18n.sync) {
          this._localeWatcher = this.$i18n.watchLocale()
        }
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn(`Cannot be interpreted 'i18n' option.`)
        }
      }
    } else if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {
      // root i18n
      this._i18n = this.$root.$i18n
      this._i18n.subscribeDataChanging(this)
      this._subscribing = true
    } else if (options.parent && options.parent.$i18n && options.parent.$i18n instanceof VueI18n) {
      // parent i18n
      this._i18n = options.parent.$i18n
      this._i18n.subscribeDataChanging(this)
      this._subscribing = true
    }
  },

  beforeDestroy (): void {
    if (!this._i18n) { return }

    if (this._subscribing) {
      this._i18n.unsubscribeDataChanging(this)
      delete this._subscribing
    }

    if (this._i18nWatcher) {
      this._i18nWatcher()
      delete this._i18nWatcher
    }

    if (this._localeWatcher) {
      this._localeWatcher()
      delete this._localeWatcher
    }

    this._i18n = null
  }
}

util.js

/* @flow */

/**
 * utilites
 */

export function warn (msg: string, err: ?Error): void {
  if (typeof console !== 'undefined') {
    console.warn('[vue-i18n] ' + msg)
    /* istanbul ignore if */
    if (err) {
      console.warn(err.stack)
    }
  }
}

export function isObject (obj: mixed): boolean %checks {
  return obj !== null && typeof obj === 'object'
}
const toString: Function = Object.prototype.toString
const OBJECT_STRING: string = '[object Object]'
// 判断是否为一个对象
export function isPlainObject (obj: any): boolean {
  return toString.call(obj) === OBJECT_STRING
}
// 判断是否为空
export function isNull (val: mixed): boolean {
  return val === null || val === undefined
}
// 解析参数
export function parseArgs (...args: Array<mixed>): Object {
  let locale: ?string = null
  let params: mixed = null
  // 分析参数的长度，如果长度为1
  if (args.length === 1) {
    // 如果是对象或是数组，则将该参数设置为params
    if (isObject(args[0]) || Array.isArray(args[0])) {
      params = args[0]
    } else if (typeof args[0] === 'string') {
      // 如果是字符串，则设置为locale，当做是语言类型
      locale = args[0]
    }
  } else if (args.length === 2) {
    // 长度为2时，根据情况设置locale和params
    if (typeof args[0] === 'string') {
      locale = args[0]
    }
    /* istanbul ignore if */
    if (isObject(args[1]) || Array.isArray(args[1])) {
      params = args[1]
    }
  }
  // 最后返回{ locale, params }对象
  return { locale, params }
}
// 如果索引值大于1，则返回1
function getOldChoiceIndexFixed (choice: number): number {
  return choice
    ? choice > 1
      ? 1
      : 0
    : 1
}
// 获取索引的方法
function getChoiceIndex (choice: number, choicesLength: number): number {
  choice = Math.abs(choice)
  // 如果长度等于2，则调用getOldChoiceIndexFixed
  if (choicesLength === 2) { return getOldChoiceIndexFixed(choice) }
  // 确保索引值不大于2，这个很令人费解啊
  return choice ? Math.min(choice, 2) : 0
}

export function fetchChoice (message: string, choice: number): ?string {
  /* istanbul ignore if */
  if (!message && typeof message !== 'string') { return null }
  // 将字符串分割为数组
  const choices: Array<string> = message.split('|')
  // 获取索引
  choice = getChoiceIndex(choice, choices.length)
  // 得到数组中特定索引的值
  if (!choices[choice]) { return message }
  // 去掉空格
  return choices[choice].trim()
}
// 利用JSON的api实现对象的深拷贝
export function looseClone (obj: Object): Object {
  return JSON.parse(JSON.stringify(obj))
}
// 删除数组中的某一项
export function remove (arr: Array<any>, item: any): Array<any> | void {
  if (arr.length) {
    const index = arr.indexOf(item)
    if (index > -1) {
      return arr.splice(index, 1)
    }
  }
}

const hasOwnProperty = Object.prototype.hasOwnProperty
export function hasOwn (obj: Object | Array<*>, key: string): boolean {
  return hasOwnProperty.call(obj, key)
}
// 递归合并对象
export function merge (target: Object): Object {
  const output = Object(target)
  for (let i = 1; i < arguments.length; i++) {
    const source = arguments[i]
    if (source !== undefined && source !== null) {
      let key
      for (key in source) {
        if (hasOwn(source, key)) {
          if (isObject(source[key])) {
            output[key] = merge(output[key], source[key])
          } else {
            output[key] = source[key]
          }
        }
      }
    }
  }
  return output
}
// 松散判断是否相等
export function looseEqual (a: any, b: any): boolean {
  // 先判断是否全等
  if (a === b) { return true }
  const isObjectA: boolean = isObject(a)
  const isObjectB: boolean = isObject(b)
  // 如果两者都是对象
  if (isObjectA && isObjectB) {
    try {
      const isArrayA: boolean = Array.isArray(a)
      const isArrayB: boolean = Array.isArray(b)
      // 如果两者都是数组
      if (isArrayA && isArrayB) {
        // 如果长度相等，则递归对比数组中的每一项
        return a.length === b.length && a.every((e: any, i: number): boolean => {
          // 递归调用looseEqual
          return looseEqual(e, b[i])
        })
      } else if (!isArrayA && !isArrayB) {
        // 如果不是数组，则当做对象来对比
        const keysA: Array<string> = Object.keys(a)
        const keysB: Array<string> = Object.keys(b)
        // 如果key的数量相等，则递归对比每个key对应的值
        return keysA.length === keysB.length && keysA.every((key: string): boolean => {
          // 递归调用looseEqual
          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 {
    return false
  }
}
// 判断是否支持Intl.DateTimeFormat方法
export const canUseDateTimeFormat: boolean =
  typeof Intl !== 'undefined' && typeof Intl.DateTimeFormat !== 'undefined'
// 判断是否支持Intl.NumberFormat方法
export const canUseNumberFormat: boolean =
  typeof Intl !== 'undefined' && typeof Intl.NumberFormat !== 'undefined'

install.js

/* @flow */

/**
 * utilites
 */

export function warn (msg: string, err: ?Error): void {
  if (typeof console !== 'undefined') {
    console.warn('[vue-i18n] ' + msg)
    /* istanbul ignore if */
    if (err) {
      console.warn(err.stack)
    }
  }
}

export function isObject (obj: mixed): boolean %checks {
  return obj !== null && typeof obj === 'object'
}
const toString: Function = Object.prototype.toString
const OBJECT_STRING: string = '[object Object]'
// 判断是否为一个对象
export function isPlainObject (obj: any): boolean {
  return toString.call(obj) === OBJECT_STRING
}
// 判断是否为空
export function isNull (val: mixed): boolean {
  return val === null || val === undefined
}
// 解析参数
export function parseArgs (...args: Array<mixed>): Object {
  let locale: ?string = null
  let params: mixed = null
  // 分析参数的长度，如果长度为1
  if (args.length === 1) {
    // 如果是对象或是数组，则将该参数设置为params
    if (isObject(args[0]) || Array.isArray(args[0])) {
      params = args[0]
    } else if (typeof args[0] === 'string') {
      // 如果是字符串，则设置为locale，当做是语言类型
      locale = args[0]
    }
  } else if (args.length === 2) {
    // 长度为2时，根据情况设置locale和params
    if (typeof args[0] === 'string') {
      locale = args[0]
    }
    /* istanbul ignore if */
    if (isObject(args[1]) || Array.isArray(args[1])) {
      params = args[1]
    }
  }
  // 最后返回{ locale, params }对象
  return { locale, params }
}
// 如果索引值大于1，则返回1
function getOldChoiceIndexFixed (choice: number): number {
  return choice
    ? choice > 1
      ? 1
      : 0
    : 1
}
// 获取索引的方法
function getChoiceIndex (choice: number, choicesLength: number): number {
  choice = Math.abs(choice)
  // 如果长度等于2，则调用getOldChoiceIndexFixed
  if (choicesLength === 2) { return getOldChoiceIndexFixed(choice) }
  // 确保索引值不大于2，这个很令人费解啊
  return choice ? Math.min(choice, 2) : 0
}

export function fetchChoice (message: string, choice: number): ?string {
  /* istanbul ignore if */
  if (!message && typeof message !== 'string') { return null }
  // 将字符串分割为数组
  const choices: Array<string> = message.split('|')
  // 获取索引
  choice = getChoiceIndex(choice, choices.length)
  // 得到数组中特定索引的值
  if (!choices[choice]) { return message }
  // 去掉空格
  return choices[choice].trim()
}
// 利用JSON的api实现对象的深拷贝
export function looseClone (obj: Object): Object {
  return JSON.parse(JSON.stringify(obj))
}
// 删除数组中的某一项
export function remove (arr: Array<any>, item: any): Array<any> | void {
  if (arr.length) {
    const index = arr.indexOf(item)
    if (index > -1) {
      return arr.splice(index, 1)
    }
  }
}

const hasOwnProperty = Object.prototype.hasOwnProperty
export function hasOwn (obj: Object | Array<*>, key: string): boolean {
  return hasOwnProperty.call(obj, key)
}
// 递归合并对象
export function merge (target: Object): Object {
  const output = Object(target)
  for (let i = 1; i < arguments.length; i++) {
    const source = arguments[i]
    if (source !== undefined && source !== null) {
      let key
      for (key in source) {
        if (hasOwn(source, key)) {
          if (isObject(source[key])) {
            output[key] = merge(output[key], source[key])
          } else {
            output[key] = source[key]
          }
        }
      }
    }
  }
  return output
}
// 松散判断是否相等
export function looseEqual (a: any, b: any): boolean {
  // 先判断是否全等
  if (a === b) { return true }
  const isObjectA: boolean = isObject(a)
  const isObjectB: boolean = isObject(b)
  // 如果两者都是对象
  if (isObjectA && isObjectB) {
    try {
      const isArrayA: boolean = Array.isArray(a)
      const isArrayB: boolean = Array.isArray(b)
      // 如果两者都是数组
      if (isArrayA && isArrayB) {
        // 如果长度相等，则递归对比数组中的每一项
        return a.length === b.length && a.every((e: any, i: number): boolean => {
          // 递归调用looseEqual
          return looseEqual(e, b[i])
        })
      } else if (!isArrayA && !isArrayB) {
        // 如果不是数组，则当做对象来对比
        const keysA: Array<string> = Object.keys(a)
        const keysB: Array<string> = Object.keys(b)
        // 如果key的数量相等，则递归对比每个key对应的值
        return keysA.length === keysB.length && keysA.every((key: string): boolean => {
          // 递归调用looseEqual
          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 {
    return false
  }
}
// 判断是否支持Intl.DateTimeFormat方法
export const canUseDateTimeFormat: boolean =
  typeof Intl !== 'undefined' && typeof Intl.DateTimeFormat !== 'undefined'
// 判断是否支持Intl.NumberFormat方法
export const canUseNumberFormat: boolean =
  typeof Intl !== 'undefined' && typeof Intl.NumberFormat !== 'undefined'

ok~今天就写到这，希望对大家有所帮助，也欢迎拍砖

你想要的——vue-i18n源码分析

superZidan

引用和评论

【未来已来】Signal 让状态管理成为标准？！

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

你想要的——vue-i18n源码分析

superZidan

引用和评论

【未来已来】Signal 让状态管理成为标准 ？！

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

【未来已来】Signal 让状态管理成为标准？！