按vue组件实例类型实现非侵入式国际化多语言翻译

#vue3##国际化##本地化##international#

web界面国际化，I18N（Internationalization，国际化），I11L(International，英特纳雄耐尔)，L10N（Localization，本地化），显示文字多语言化是其主要内容。

浏览器的js提供了Intl全局对象，html提供了translate属性。

console.log(Intl,window.Intl);
<p translate="no">Don't translate this!</p>

某些浏览器插件支持一键“翻译网页”。其实现很简单，递归遍历找到<span><text>等文字标签，按通用字典对照翻译，并监听dom的变化，对弹出的内容或更新的内容也能即时翻译。这种一网打尽式的翻译，对某些wiki、doc、博客、新闻类网站比较适合，但是对一些ERP等管理系统，不太适合：

1. 不精准。不该翻译的地方翻译了，比如用户输入的内容：产品编码、产品型号，Grid的cell内容...除非能用“translate='no'”把不翻译的dom标注得很完整。
2. 不专业。翻译的字典是通用的，可能因为行业不同，牛头不对马嘴。插件能支持用我自己的字典？  因此，ERP这种管理系统，一般要有自己的多语言方案。

要做一个翻译方案，要考虑以下问题：

1. 字典。字典格式（json,csv,xml）、字典的读取、解析、编辑。
2. 国家语言标识。语言代码（ Language Code）、国家代码（ Country Code）、Windows Language Code Identifier (LCID)，一般不再使用旧的Code Page（简体中文936，繁体中文950）。
3. 语言切换。LCID存哪里。是否重加载页面。
4. 翻译函数。高效的把一个文本字串，查找字典，翻译成对照文本。
5. 翻译的时机。在何时调用翻译函数。

i18n（http://npmmirror.com/package/i18n，http://npmmirror.com/package/i18next）组件提供了一套简单的机制。 对vue框架，i18n对照有个vue-i18n（http://npmmirror.com/package/vue-i18n）。 i18n的实现了多语言化的基本机制，需要程序员配合，在合适的地方调用翻译函数。

我这里要讲的是一种非侵入式的，外挂式的多语言转换机制，比较适合已经完成的系统，突然要加多语言机制。 我的这篇老文章里（https://nodejs.blog.youkuaiyun.com/article/details/248218）谈到了这种方法，那是在delphi、c#开发的winform程序中，在web开发中，因为有了react、vue这样的框架实现了web组件化，因此也可以使用类似的方案。这个方案的主要思想是：为每个vue类注册一个翻译函数，在必要时把vue组件实例按其类的翻译函数来逐个翻译。

acroMLClassMethod.register('DataGrid',t_DataGrid);
acroMLClassMethod.register('GridColumn',t_GridColumn);
acroMLClassMethod.register('GridFilterButton',t_GridFilterButton);
acroMLClassMethod.register('Menu',t_Menu);
acroMLClassMethod.register('MenuItem',t_MenuItem);

翻译函数，如：v3-easyui组件的翻译函数，像这个样子：

function t_GridColumn(t,instWrap){
  let inst=instWrap.$;
  acroMLClassMethod.translateProps(t,inst.props,['title']);
}
function t_GridFilterButton(t,instWrap){
  let inst=instWrap.$;
  let items=instWrap.$data.items;
  if (items){
    for(let i=0;i<items.length;i++){
      let item=items[i];
      acroMLClassMethod.translateProps(t,item,['text']);
    }
  }
}

这个方案的几个特点：

1. 外挂式。写页面的程序员一般情况下感觉它不存在。特殊的地方还是用显式的使用t函数，或标记translate='no'。
2. 相对准确。相比浏览器的自动翻译，不会“误伤”。如DataGrid，会翻译column,footer的title，不会翻译到cell。相对于传统i18n机制显式的使用t函数，没那么精准，如：SelectBox下拉框，当选择的文本用于代码比较时是不能翻译的，还是需要显式的标记translate='no'或挂载beforeTranslate事件告知不翻译。
3. 切换语言时能做到不重加载页面就刷新。传统i18n机制可能也能做到，只要t函数是响应式的，能响应locale的变化。但是，某些第3方组件包，其内置的一些文本字串，切换语言后，即使重加载了其对应的内置字典，也不会自动刷新。如devextreme-vue的DataGrid的noDataText。  

文无第一，武无第二，各种方案没有绝对的好坏，就像react与vue，暂时无法谁碾压谁，适合不同的场景和不同的团队。

这个方案的几个注意点：

1. 如何从vue组件实例找到其类别。
2. 注册类别还是注册类别名称。
3. 何时调用翻译函数。
4. 不同厂家的vue组件属性修改机制的差别。
5. 切换语言时如何不重加载页面而刷新。
6. 人为设定不翻译某些组件的机制。
7. 切换语言时DDKey从哪里找。  

  1、如何从vue组件实例找到其类别

• instWrap.$options.name
• instWrap.$.constructor.name
• instWrap.$.type.name  

tr