說明

element很注重多語言，自己進行了處理霎箍，如果存在vue-i18n則使用它六敬，否則使用自己實現(xiàn)的工具锌蓄。

index.js

// 引入默認語言稠项，是一個 JSON
import defaultLang from 'element-ui/src/locale/lang/zh-CN';
// 引入 Vue
import Vue from 'vue';
// 引入 deepmerge 庫涯雅，這是用來深度合并對象的
import deepmerge from 'deepmerge';
// 格式化，這里其實是字符串模板
import Format from './format';

// 構(gòu)造模板函數(shù)
const format = Format(Vue);
//  語言設(shè)置為默認語言
let lang = defaultLang;
// 標識是否合并過
let merged = false;

export const t = function(path, options) {
  // 獲取 vue-i18n的模板方法
  const vuei18n = Object.getPrototypeOf(this || Vue).$t;

  // 如果有引入 vue-i18n 則使用它
  if (typeof vuei18n === 'function') {
    if (!merged) {
      // 設(shè)置已經(jīng)合并
      merged = true;
      // 配置 vue-i18n
      Vue.locale(
        Vue.config.lang,
        deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true })
      );
    }
    // 使用 vue-i18n
    return vuei18n.apply(this, [path, options]);
  }

  // 為了訪問對象
  const array = path.split('.');
  // 當前先設(shè)置為整個語言信息
  let current = lang;

  // 根據(jù)對象層次進一步訪問
  for (var i = 0, j = array.length; i < j; i++) {
    var property = array[i];
    var value = current[property];
    if (i === j - 1) return format(value, options);  // 尋找到最后一層訪問
    if (!value) return '';
    current = value;
  }
  return '';
};

// 改變語言
export const use = function(l) {
  lang = l || lang;
};
export default { use, t };

format.js

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

// 用來匹配形如 %{} 或者 {} 格式的參數(shù)
const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g;

// 參數(shù)是 Vue
export default function(Vue) {
  // 獲取
  const { hasOwn } = Vue.util;

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

  function template(string, ...args) {
    // 處理第二個參數(shù)傳對象或者數(shù)組的情況
    if (args.length === 1 && typeof args[0] === 'object') {
      args = args[0];
    }

    // 處理沒有傳參數(shù)或者參數(shù)不是對象的情況
    if (!args || !args.hasOwnProperty) {
      args = {};
    }

    // 替換匹配到的參數(shù)
    return string.replace(RE_NARGS, (match, prefix, i, index) => {
      let result;

      if (string[index - 1] === '{' &&
        string[index + match.length] === '}') {
        // 形如 {{ val }} 直接返回展运， { val }活逆，不進行解析
        return i;
      } else {
        // 取得相應(yīng)的值進行替換精刷，不存在的話則替換為空
        result = hasOwn(args, i) ? args[i] : null;
        if (result === null || result === undefined) {
          return '';
        }

        return result;
      }
    });
  }

  // 返回該函數(shù)
  return template;
}