Element分析（工具篇）——Locale

说明

element很注重多语言，自己进行了处理，如果存在vue-i18n则使用它，否则使用自己实现的工具。

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';

// 构造模板函数
const format = Format(Vue);
//  语言设置为默认语言
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) {
      // 设置已经合并
      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('.');
  // 当前先设置为整个语言信息
  let current = lang;

  // 根据对象层次进一步访问
  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
 */

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

// 参数是 Vue
export default function(Vue) {
  // 获取
  const { hasOwn } = Vue.util;

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

  function template(string, ...args) {
    // 处理第二个参数传对象或者数组的情况
    if (args.length === 1 && typeof args[0] === 'object') {
      args = args[0];
    }

    // 处理没有传参数或者参数不是对象的情况
    if (!args || !args.hasOwnProperty) {
      args = {};
    }

    // 替换匹配到的参数
    return string.replace(RE_NARGS, (match, prefix, i, index) => {
      let result;

      if (string[index - 1] === '{' &&
        string[index + match.length] === '}') {
        // 形如 {{ val }} 直接返回， { val }，不进行解析
        return i;
      } else {
        // 取得相应的值进行替换，不存在的话则替换为空
        result = hasOwn(args, i) ? args[i] : null;
        if (result === null || result === undefined) {
          return '';
        }

        return result;
      }
    });
  }

  // 返回该函数
  return template;
}