MS-L20N 国际化指令: MS-L20N



基于mozilla l20n内核构建的 avalon 国际化指令，具有超强的国际化能力

  1. 关于 MS-L20N
  2. 实例
  3. 附录

一、关于 MS-L20N

MS-L20N 的目的是，为 avalon mvvm 框架提供一致化的国际化机制，构建最适合 avalon 的国际化能力。基于 l20n 1.0.4 版本。MS-L20N 版本号对应 l20n 的版本号，可以通过 avalon.l20nversion 获取到。

现状和如何去做：

国际化是一个麻烦的问题，需要精心设计。国际化不仅仅是翻译的问题，还需要考虑语言/地区/文化的差异。例如：数字呈现，0、1、大于 1 的数字。大于 1 的数字什么情况是少数？什么情况是多数？这些判断标准都有差异。即很多国际化内容呈现需要根据当前值才能确定

语言 0 1 少数 多数
中文 没有 1 个 很少 很多
英文 no objects one object 10 objects 10 objects
波兰 brak obiektów jeden obiekt obiekty obiektów

还需要考虑现在多类别屏幕，电脑屏幕、平板屏幕、手机屏幕等，这些屏幕可呈现区域大小不同，呈现内容如何自动适应？例如手机屏幕很小，呈现内容就不可能像电脑屏幕的呈现。

同时对于开发人员，不可能是一个语言学家，在开发时没法确定这些内容如何才能最好的国际化呈现，而只有UI设计人员和翻译人员才能确定。

mozilla l20n很好解决了这些问题，具有很强大和非常灵活的国际化能力，因此基于 l20n 内核将一流的国际化能力引入到 avalon 生态圈中

二、实例：

例1：简单示例

使用非常简单，只要定义属性 ms-l20n，值等于国际化 key。例如：

<p ms-l20n="Attribute"></p>

国际化文件定义，首先定义manifest文件。例如 l20n.json:

{
    "locales": [
        "zh-CN",
        "en-US",
        "pl"
    ],
    "default_locale": "zh-CN",
    "resources": [
        "./{{locale}}.l20n"
    ]
}

其次定义各语言的国际化文件，具体格式请参见mozilla l20n 格式说明。

这里是示例运行结果(代码请看页面源码)：

这里呈现的是国际化key Attribute 的国际化内容：

国际化中....

例2：根据外部属性值呈现不同内容

以前面数字呈现为例。国际化 key objectsWithCount，有一个外部参数objectsNum，当改变input数字内容将赋值给 objectsNum，此时可以看到随着数字变化，呈现内容也在变化。可以切换不同语言看效果。

这里是示例运行结果(代码请看页面源码)：

国际化中....

例3：国际化 key 支持插值表达式

ms-l20n 引用的国际化 key，支持avalon 插值表达式和过滤器。当改变input输入框中关联的 vm.l20nI18nId 值，例如从 setObjectsNumber 改为 Attribute（setObjectsNumber 和 Attribute 都是国际化 key，在l20n中有定义），可以看到前面国际化内容也响应切换了。

这里是示例运行结果(代码请看页面源码)：

国际化中....

例4：叠加节点

ms-l20n 也支持叠加节点。叠加节点是指在国际化内容中，可以使用html元素进行占位，例如input等。在国际化时，会用ms-l20n的相同子元素进行替换。这样可以按照各语言特性进行特殊布局。

这里是示例运行结果(代码请看页面源码)：

国际化中....

例5：vm 属性值来源于国际化内容

我们也可以在vm定义以L20nAuto注意区分大小写为结尾的属性，这些属性的值来源于国际化内容，国际化key等于属性名去掉结尾L20nAuto后的值。目前存在一个约束，参见

附录一：MS-L20N 约束

这里是示例运行结果(代码请看页面源码)：

{{AttributeL20nAuto}}

例6：动态切换语言

可以在运行期间切换语言。提供了一个函数changeLocale(newLocale, vmid)绑定在avalon上，函数的第二个参数可选。如果未指定vmid，则扫描所有vm。如果指定了vmid，则只在该vm范围内切换国际化。

这里是示例运行结果(代码请看页面源码)：

例7：不同的 vm 呈现不同的国际化区域

国际化内容是以vm来确定范围的。如果不需要分区域国际化，可以在HTML元素上绑定一个根vm，也可以在特定vm上进行绑定。

需要注意：如果希望限定在某vm而不是溯源到上面vm，则需要在vm中定义一个名为l20n注意全小写的属性l20n: {}，并且设定为非监控属性$skipArray: ["l20n"]，详见例8：定制配置

这里是示例运行结果(代码请看页面源码)：



例8：定制配置

系统默认值：

  1. 页面初始打开时默认的语言是 navigator.language || navigator.browserLanguage。
  2. 国际化manifest文件默认是相对页面位置的'locales/l20n.json'。例如前面的例子，文件是在locales/l20n.json
  3. l20n绑定的vm上如果定义了currentLocale属性，则会自动赋值当前locale，并且会自动在切换语言时自动切换

参数定制：

  1. 当 VM 定义了名为l20n注意全小写的属性l20n: {}，并且设定为非监控属性$skipArray: ["l20n"]时，该 VM 范围内的国际化都将绑定到该 VM。l20n属性有两个参数可配，都是可选。
    l20n: {
    initLocale: 'pl', //页面初始打开时默认语言，未设置则为浏览器当前语言
    manifestResource: "locales/l20n.json", //manifest 文件所在位置
},

这里是示例运行结果(代码请看页面源码)：

VM samples8 —— 使用 modules/locales/l20n.json


Wersja polska 中文版本 English version

VM samples81

VM samples82

VM samples83

国际化继承自父 VM samples8

三、附录

1、MS-L20N 约束
  1. ms-l20n 指令使用插值表达式时，只支持双花括号，主要原因是 avalon.js 中可以自定义插值分隔符，但值并未公开，外部无法获取访问到。在 avalon 1.4.6 已可以访问到自定义插值分隔符，在 1.0.4.3 没有此限制了
  2. ms-l20n 只支持 manifest 方式国际化，不支持在 html 页面中定义。
  3. 如果定义结尾是L20nAuto注意区分大小写的属性，将会绑定国际化内容。目前还无法做到自动绑定，需要在调用avalon.scan()之后调用avalon.localize()，也可以只扫描某个vm，需要带上参数vmid。1.0.4.2 及以后版本支持自动关联，不需要代码中明确调用localize
2、开源许可

MS-L20N 基于 Apache License 2.0 开源，使用代码只需说明来源，或者引用 LICENSE 即可。

Fork me on GitHub