摘要：最近的工作當(dāng)中有個(gè)任務(wù)是做國(guó)際化。下文有對(duì)的源碼進(jìn)行分析。因?yàn)橛⑽牡拈喿x方向也是從左到右，因此語言展示的方向不予考慮。服務(wù)端數(shù)據(jù)翻譯前端樣式的調(diào)整中文轉(zhuǎn)英文后部分文案過長(zhǎng)圖片第三方插件地圖等中文轉(zhuǎn)英文后肯定會(huì)遇到文案過長(zhǎng)的情況。

最近的工作當(dāng)中有個(gè)任務(wù)是做國(guó)際化。這篇文章也是做個(gè)簡(jiǎn)單的總結(jié)。

不同語言對(duì)應(yīng)不同的頁(yè)面。在本地開發(fā)的時(shí)候就分別打包輸出了不同語言版本的靜態(tài)及模板文件，通過頁(yè)面及資源的url進(jìn)行區(qū)分,需要維護(hù)多份代碼。

在線翻譯

統(tǒng)一模板文件，前端根據(jù)相應(yīng)的語言映射表去做文案的替換。

語言標(biāo)識(shí)誰來做？

頁(yè)面完全由服務(wù)端直出(所有的數(shù)據(jù)均由服務(wù)端來處理)

服務(wù)端根據(jù)IP去下發(fā)語言標(biāo)識(shí)字段(前端根據(jù)下發(fā)的表示字段切換語言環(huán)境)

前端去根據(jù)useragent.lang瀏覽器環(huán)境語言進(jìn)行設(shè)定
當(dāng)前項(xiàng)目中入口頁(yè)面由服務(wù)端來渲染,其他的頁(yè)面由前端來接管路由。在入口頁(yè)面由服務(wù)器下發(fā)lang字段去做語言標(biāo)識(shí)，在頁(yè)面渲染出來前，前端來決定使用的語言包。語言包是在本地編譯的過程中就將語言包編譯進(jìn)了代碼當(dāng)中，沒有采用異步加載的方式。

前端靜態(tài)資源翻譯

單/復(fù)數(shù)

中文轉(zhuǎn)英文

語言展示的方向
前端靜態(tài)資源文案的翻譯使用vue-i18n這個(gè)插件來進(jìn)行。插件提供了單復(fù)數(shù)，中文轉(zhuǎn)英文的方法。a下文有對(duì)vue-i18n的源碼進(jìn)行分析。因?yàn)橛⑽牡拈喿x方向也是從左到右，因此語言展示的方向不予考慮。但是在一些阿拉伯地區(qū)國(guó)家的語言是從右到左進(jìn)行閱讀的。

服務(wù)端數(shù)據(jù)翻譯

前端樣式的調(diào)整

中文轉(zhuǎn)英文后部分文案過長(zhǎng)

圖片

第三方插件(地圖,SDK等)

a.中文轉(zhuǎn)英文后肯定會(huì)遇到文案過長(zhǎng)的情況。那么可能需要精簡(jiǎn)翻譯，使文案保持在一定的可接受的長(zhǎng)度范圍內(nèi)。但是大部分的情況都是文案在保持原意的情況下無法再進(jìn)行精簡(jiǎn)。這時(shí)必須要前端來進(jìn)行樣式上的調(diào)整，那么可能還需要設(shè)計(jì)的同學(xué)參與進(jìn)來，對(duì)一些文案過多出現(xiàn)折行的情況再多帶帶做樣式的定義。在細(xì)調(diào)樣式這塊，主要還是通過不同的語言標(biāo)識(shí)去控制不同標(biāo)簽的class，來多帶帶定義樣式。

此外，還有部分圖片也是需要做調(diào)整，在C端中，大部分由產(chǎn)品方去輸出內(nèi)容，那么圖片這塊的話，還需要設(shè)計(jì)同學(xué)多帶帶出圖。

在第三方插件中這個(gè)環(huán)節(jié)當(dāng)中，因?yàn)槭褂昧?b>騰訊地圖插件，由于騰訊地圖并未推出國(guó)內(nèi)地圖的英文版，所以整個(gè)頁(yè)面的地圖部分暫時(shí)無法做到國(guó)際化。由此聯(lián)想到，在你的應(yīng)用當(dāng)中使用的其他一些第三方插件或者SDK，在國(guó)際化的過程中需要去解決哪些問題。

跨地區(qū)xxxx

貨幣及支付方式

時(shí)間的格式

在一些支付場(chǎng)景下，貨幣符號(hào)，單位及價(jià)格的轉(zhuǎn)化等。不同國(guó)家地區(qū)在時(shí)間的格式顯示上有差異。

項(xiàng)目的長(zhǎng)期維護(hù)

翻譯工作

map表的維護(hù)

當(dāng)前翻譯的工作流程是拆頁(yè)面，每拆一個(gè)頁(yè)面，F(xiàn)E同學(xué)整理好可能會(huì)出現(xiàn)的中文文案，再交由翻譯的同學(xué)去完成翻譯的工作。負(fù)責(zé)不同頁(yè)面的同學(xué)維護(hù)著不同的map表，在當(dāng)前的整體頁(yè)面架構(gòu)中，不同功能模塊和頁(yè)面被拆分出去交由不同的同學(xué)去做，那么通過跳頁(yè)面的方式去暫時(shí)緩解map表的維護(hù)問題。如果哪一天頁(yè)面需要收斂，這也是一個(gè)需要去考慮的問題。如果從整個(gè)項(xiàng)目的一開始就考慮到國(guó)際化的問題并采取相關(guān)的措施都能減輕后期的工作量及維護(hù)成本。同時(shí)以后一旦map表內(nèi)容過多，是否需要考慮需要將map表進(jìn)行異步加載。

    // 入口main.js文件
    import VueI18n from "vue-i18n"
    
    Vue.use(VueI18n)            // 通過插件的形式掛載
    
    const i18n = new VueI18n({
        locale: CONFIG.lang,    // 語言標(biāo)識(shí)
        messages: {
            "zh-CN": require("./common/lang/zh"),   // 中文語言包
            "en-US": require("./common/lang/en")    // 英文語言包
        }
    })
    
    const app = new Vue({
        i18n,
        ...App
    }).$mout("#root")
    
    // 單vue文件
    

Vue-i18n是以插件的形式配合Vue進(jìn)行工作的。通過全局的mixin的方式將插件提供的方法掛載到Vue的實(shí)例上。

其中install.jsVue的掛載函數(shù),主要是為了將mixin.js里面的提供的方法掛載到Vue實(shí)例當(dāng)中:

import { warn } from "./util"
import mixin from "./mixin"
import Asset from "./asset"

export let Vue

// 注入root Vue
export function install (_Vue) { 
  Vue = _Vue

  const version = (Vue.version && Number(Vue.version.split(".")[0])) || -1
  if (process.env.NODE_ENV !== "production" && install.installed) {
    warn("already installed.")
    return
  }
  install.installed = true

  if (process.env.NODE_ENV !== "production" && version < 2) {
    warn(`vue-i18n (${install.version}) need to use Vue 2.0 or later (Vue: ${Vue.version}).`)
    return
  }

  // 通過mixin的方式，將插件提供的methods，鉤子函數(shù)等注入到全局，之后每次創(chuàng)建的vue實(shí)例都用擁有這些methods或者鉤子函數(shù)
  Vue.mixin(mixin)

  Asset(Vue)
}

接下來就看下在Vue上混合了哪些methods或者鉤子函數(shù). 在mixin.js文件中:

/* @flow */

// VueI18n構(gòu)造函數(shù)
import VueI18n from "./index"
import { isPlainObject, warn } from "./util"


// $i18n 是每創(chuàng)建一個(gè)Vue實(shí)例都會(huì)產(chǎn)生的實(shí)例對(duì)象
// 調(diào)用以下方法前都會(huì)判斷實(shí)例上是否掛載了$i18n這個(gè)屬性
// 最后實(shí)際調(diào)用的方法是插件內(nèi)部定義的方法
export default {
  // 這里混合了computed計(jì)算屬性, 注意這里計(jì)算屬性返回的都是函數(shù),這樣就可以在vue模板里面使用{{ $t("hello") }}, 或者其他方法當(dāng)中使用 this.$t("hello")。這種函數(shù)接收參數(shù)的方式
  computed: {
    // 翻譯函數(shù), 調(diào)用的是VueI18n實(shí)例上提供的方法
    $t () {
      if (!this.$i18n) {
        throw Error(`Failed in $t due to not find VueI18n instance`)
      }
      // add dependency tracking !!
      const locale: string = this.$i18n.locale          // 語言配置
      const messages: Messages = this.$i18n.messages    // 語言包
      // 返回一個(gè)函數(shù). 接受一個(gè)key值. 即在map文件中定義的key值, 在模板中進(jìn)行使用 {{ $t("你好") }}
      // ...args是傳入的參數(shù), 例如在模板中定義的一些替換符, 具體的支持的形式可翻閱文檔https://kazupon.github.io/vue-i18n/formatting.html
      return (key: string, ...args: any): string => {
        return this.$i18n._t(key, locale, messages, this, ...args)
      }
    },

    // tc方法可以多帶帶定義組件內(nèi)部語言設(shè)置選項(xiàng), 如果沒有定義組件內(nèi)部語言，則還是使用global的配置
    $tc () {
      if (!this.$i18n) {
        throw Error(`Failed in $tc due to not find VueI18n instance`)
      }
      // add dependency tracking !!
      const locale: string = this.$i18n.locale
      const messages: Messages = this.$i18n.messages
      return (key: string, choice?: number, ...args: any): string => {
        return this.$i18n._tc(key, locale, messages, this, choice, ...args)
      }
    },

    // te方法
    $te () {
      if (!this.$i18n) {
        throw Error(`Failed in $te due to not find VueI18n instance`)
      }
      // add dependency tracking !!
      const locale: string = this.$i18n.locale
      const messages: Messages = this.$i18n.messages
      return (key: string, ...args: any): boolean => {
        return this.$i18n._te(key, locale, messages, ...args)
      }
    }
  },

  // 鉤子函數(shù)
  // 被渲染前，在vue實(shí)例上添加$i18n屬性
  // 在根組件初始化的過程中:
  /**
   * new Vue({
   *   i18n   // 這里是提供了自定義的屬性 那么實(shí)例當(dāng)中可以通過this.$option.i18n去訪問這個(gè)屬性
   *   // xxxx
   * })
   */
  beforeCreate () {
    const options: any = this.$options
    // 如果有i18n這個(gè)屬性. 根實(shí)例化的時(shí)候傳入了這個(gè)參數(shù)
    if (options.i18n) {
      if (options.i18n instanceof VueI18n) {
        // 如果是VueI18n的實(shí)例，那么掛載在Vue實(shí)例的$i18n屬性上
        this.$i18n = options.i18n
        // 如果是個(gè)object
      } else if (isPlainObject(options.i18n)) {     // 如果是一個(gè)pobj
        // component local i18n
        // 訪問root vue實(shí)例。
        if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {
          options.i18n.root = this.$root.$i18n
        }
        this.$i18n = new VueI18n(options.i18n)  // 創(chuàng)建屬于component的local i18n
        if (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
      // 如果子Vue實(shí)例沒有傳入$i18n方法,且root掛載了$i18n,那么子實(shí)例也會(huì)使用root i18n
      this.$i18n = this.$root.$i18n
    }
  },

  // 實(shí)例被銷毀的回調(diào)函數(shù)
  destroyed () {
    if (this._localeWatcher) {
      this.$i18n.unwatchLocale()
      delete this._localeWatcher
    }

    // 組件銷毀后，同時(shí)也銷毀實(shí)例上的$i18n方法
    this.$i18n = null
  }
}

這里注意下這幾個(gè)方法的區(qū)別:

$tc這個(gè)方法可以用以返回翻譯的復(fù)數(shù)字符串, 及一個(gè)key可以對(duì)應(yīng)的翻譯文本，通過|進(jìn)行連接:

例如:

    // main.js
    new VueI18n({
        messages: {
            car: "car | cars"
        }
    })
    
    // template
    {{$tc("car", 1)}}   ===>>>  car
    {{$tc("car", 2)}}   ===>>>  cars

$te這個(gè)方法用以判斷需要翻譯的key在你提供的語言包(messages)中是否存在.

接下來就看看VueI18n構(gòu)造函數(shù)及原型上提供了哪些可以被實(shí)例繼承的屬性或者方法

/* @flow */

import { install, Vue } from "./install"
import { warn, isNull, parseArgs, fetchChoice } from "./util"
import BaseFormatter from "./format"    // 轉(zhuǎn)化函數(shù) 封裝了format, 里面包含了template模板替換的方法
import getPathValue from "./path"

import type { PathValue } from "./path"

// VueI18n構(gòu)造函數(shù)
export default class VueI18n {
  static install: () => void
  static version: string

  _vm: any
  _formatter: Formatter
  _root: ?I18n
  _sync: ?boolean
  _fallbackRoot: boolean
  _fallbackLocale: string
  _missing: ?MissingHandler
  _exist: Function
  _watcher: any

  // 實(shí)例化參數(shù)配置
  constructor (options: I18nOptions = {}) {
    const locale: string = options.locale || "en-US"    // vue-i18n初始化的時(shí)候語言參數(shù)配置
    const messages: Messages = options.messages || {}   // 本地配置的所有語言環(huán)境都是掛載到了messages這個(gè)屬性上
    this._vm = null                 // ViewModel
    this._fallbackLocale = options.fallbackLocale || "en-US"  // 缺省語言配置
    this._formatter = options.formatter || new BaseFormatter()  // 翻譯函數(shù)
    this._missing = options.missing
    this._root = options.root || null
    this._sync = options.sync || false   
    this._fallbackRoot = options.fallbackRoot || false

    this._exist = (message: Object, key: string): boolean => {
      if (!message || !key) { return false }
      return !isNull(getPathValue(message, key))
    }

    this._resetVM({ locale, messages })
  }

  // VM 
  // 重置viewModel
  _resetVM (data: { locale: string, messages: Messages }): void {
    const silent = Vue.config.silent
    Vue.config.silent = true
    this._vm = new Vue({ data })
    Vue.config.silent = silent
  }

  // 根實(shí)例的vm監(jiān)聽locale這個(gè)屬性
  watchLocale (): any {
    if (!this._sync || !this._root) { return null }
    const target: any = this._vm
    // vm.$watch返回的是一個(gè)取消觀察的函數(shù)，用來停止觸發(fā)回調(diào)
    this._watcher = this._root.vm.$watch("locale", (val) => {
      target.$set(target, "locale", val)
    }, { immediate: true })
    return this._watcher
  }

  // 停止觸發(fā)vm.$watch觀察函數(shù)
  unwatchLocale (): boolean {
    if (!this._sync || !this._watcher) { return false }
    if (this._watcher) {
      this._watcher()
      delete this._watcher
    }
    return true
  }

  get vm (): any { return this._vm }

  get messages (): Messages { return this._vm.$data.messages }                  // get 獲取messages參數(shù)
  set messages (messages: Messages): void { this._vm.$set(this._vm, "messages", messages) }  // set 設(shè)置messages參數(shù)

  get locale (): string { return this._vm.$data.locale }                        // get 獲取語言配置參數(shù)
  set locale (locale: string): void { this._vm.$set(this._vm, "locale", locale) }     // set 重置語言配置參數(shù)

  get fallbackLocale (): string { return this._fallbackLocale }                 //  fallbackLocale 是什么?
  set fallbackLocale (locale: string): void { this._fallbackLocale = locale }

  get missing (): ?MissingHandler { return this._missing }
  set missing (handler: MissingHandler): void { this._missing = handler }

  get formatter (): Formatter { return this._formatter }                          // get 轉(zhuǎn)換函數(shù)
  set formatter (formatter: Formatter): void { this._formatter = formatter }      // set 轉(zhuǎn)換函數(shù)

  _warnDefault (locale: string, key: string, result: ?any, vm: ?any): ?string {
    if (!isNull(result)) { return result }
    if (this.missing) {
      this.missing.apply(null, [locale, key, vm])
    } else {
      if (process.env.NODE_ENV !== "production") {
        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
  }

  // 插入函數(shù)
  _interpolate (message: Messages, key: string, args: any): any {
    if (!message) { return null }

    // 獲取key對(duì)應(yīng)的字符串
    let val: PathValue = getPathValue(message, key)
    if (Array.isArray(val)) { return val }
    if (isNull(val)) { val = message[key] }
    if (isNull(val)) { return null }
    if (typeof val !== "string") {
      warn(`Value of key "${key}" is not a string!`)
      return null
    }


    // TODO ?? 這里的links是干什么的？
    // Check for the existance of links within the translated string
    if (val.indexOf("@:") >= 0) {
      // Match all the links within the local
      // We are going to replace each of
      // them with its translation
      const matches: any = val.match(/(@:[w|.]+)/g)
      for (const idx in matches) {
        const link = matches[idx]
        // Remove the leading @:
        const linkPlaceholder = link.substr(2)
        // Translate the link
        const translatedstring = this._interpolate(message, linkPlaceholder, args)
        // Replace the link with the translated string
        val = val.replace(link, translatedstring)
      }
    }

    // 如果沒有傳入需要替換的obj, 那么直接返回字符串, 否則調(diào)用this._format進(jìn)行變量等的替換
    return !args ? val : this._format(val, args)    // 獲取替換后的字符
  }

  _format (val: any, ...args: any): any {
    return this._formatter.format(val, ...args)
  }

  // 翻譯函數(shù)
  _translate (messages: Messages, locale: string, fallback: string, key: string, args: any): any {
    let res: any = null
    /**
     * messages[locale] 使用哪個(gè)語言包
     * key 語言映射表的key
     * args 映射替換關(guān)系
     */
    res = this._interpolate(messages[locale], key, args)
    if (!isNull(res)) { return res }

    res = this._interpolate(messages[fallback], key, args)
    if (!isNull(res)) {
      if (process.env.NODE_ENV !== "production") {
        warn(`Fall back to translate the keypath "${key}" with "${fallback}" locale.`)
      }
      return res
    } else {
      return null
    }
  }

  // 翻譯的核心函數(shù)
  /**
   * 這里的方法傳入的參數(shù)參照mixin.js里面的定義的方法
   * key map的key值 (為接受的外部參數(shù))
   * _locale 語言配置選項(xiàng): "zh-CN" | "en-US" (內(nèi)部變量)
   * messages 映射表 (內(nèi)部變量)
   * host為這個(gè)i18n的實(shí)例 (內(nèi)部變量)
   *
   */
  _t (key: string, _locale: string, messages: Messages, host: any, ...args: any): any {
    if (!key) { return "" }
    
    // parseArgs函數(shù)用以返回傳入的局部語言配置, 及映射表
    const parsedArgs = parseArgs(...args)   // 接收的參數(shù){ locale, params(映射表) }
    const locale = parsedArgs.locale || _locale   // 語言配置
    
    // 字符串替換
    /**
     * @params messages  語言包
     * @params locale  語言配置
     * @params fallbackLocale 缺省語言配置
     * @params key 替換的key值
     * @params parsedArgs.params 需要被替換的參數(shù)map表
     */
    const ret: any = this._translate(messages, locale, this.fallbackLocale, key, parsedArgs.params)
    if (this._isFallbackRoot(ret)) {
      if (process.env.NODE_ENV !== "production") {
        warn(`Fall back to translate the keypath "${key}" with root locale.`)
      }
      if (!this._root) { throw Error("unexpected error") }
      return this._root.t(key, ...args)
    } else {
      return this._warnDefault(locale, key, ret, host)
    }
  }

  // 轉(zhuǎn)化函數(shù)
  t (key: string, ...args: any): string {
    return this._t(key, this.locale, this.messages, null, ...args)
  }

  _tc (key: string, _locale: string, messages: Messages, host: any, choice?: number, ...args: any): any {
    if (!key) { return "" }
    if (choice !== undefined) {
      return fetchChoice(this._t(key, _locale, messages, host, ...args), choice)
    } else {
      return this._t(key, _locale, messages, host, ...args)
    }
  }

  tc (key: string, choice?: number, ...args: any): any {
    return this._tc(key, this.locale, this.messages, null, choice, ...args)
  }

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

  te (key: string, ...args: any): boolean {
    return this._te(key, this.locale, this.messages, ...args)
  }
}

VueI18n.install = install
VueI18n.version = "__VERSION__"

// 如果是通過CDN或者外鏈的形式引入的Vue
if (typeof window !== "undefined" && window.Vue) {
  window.Vue.use(VueI18n)
}

另外還有一個(gè)比較重要的庫(kù)函數(shù)format.js：

/**
 *  String format template
 *  - Inspired:
 *    https://github.com/Matt-Esch/string-template/index.js
 */

// 變量的替換, 在字符串模板中寫的站位符 {xxx} 進(jìn)行替換
const RE_NARGS: RegExp = /(%|){([0-9a-zA-Z_]+)}/g

/**
 * template
 *
 * @param {String} string
 * @param {Array} ...args
 * @return {String}
 */

// 模板替換函數(shù)
export function template (str: string, ...args: any): string {
  // 如果第一個(gè)參數(shù)是一個(gè)obj
  if (args.length === 1 && typeof args[0] === "object") {
    args = args[0]
  } else {
    args = {}
  }

  if (!args || !args.hasOwnProperty) {
    args = {}
  }

  // str.prototype.replace(substr/regexp, newSubStr/function) 第二個(gè)參數(shù)如果是個(gè)函數(shù)的話，每次匹配都會(huì)調(diào)用這個(gè)函數(shù)
  // match 為匹配的子串
  return str.replace(RE_NARGS, (match, prefix, i, index) => {
    let result: string

    // match是匹配到的字符串
    // prefix ???
    // i 括號(hào)中需要替換的字符換
    // index是偏移量

    // 字符串中如果出現(xiàn){xxx}不需要被替換。那么應(yīng)該寫成{{xxx}}
    if (str[index - 1] === "{" &&
      str[index + match.length] === "}") {
      return i
    } else {
      // 判斷args obj是否包含這個(gè)key值
      // 返回替換值, 或者被匹配上的字符串的值
      result = hasOwn(args, i) ? args[i] : match
      if (isNull(result)) {
        return ""
      }

      return result
    }
  })
}

這個(gè)頁(yè)面是使用vue作為前端框架，使用vue-i18n作為國(guó)際化的工具：

和后端同學(xué)約定好語言標(biāo)識(shí)字段

前端根據(jù)后端下發(fā)的語言標(biāo)識(shí)字段來調(diào)用不同的語言包

文本內(nèi)容使用vue-i18n進(jìn)行替換

圖片內(nèi)容需要視覺同學(xué)提供多語言版本

樣式需要根據(jù)多語言進(jìn)行定制。比如在body上添加多語言的標(biāo)識(shí)class屬性

第三方的SDK或插件的國(guó)際化推動(dòng)