扩展 jQurey.i18n.properties 的能力来向 vue-i18n 靠齐

邓钢

jQuery.i18n.properties 是 jQuery 老项目的国际化框架，其实国际化方案本质上都大同小异，都是需要用翻译函数包裹词条，然后根据词条文件来进行翻译
就是使用上与其他框架不太一样而已
但由于我们已经基于 vue 框架实现了一个国际化自动处理脚本，脚本会自动用全局函数包裹词条，自动提取到 json 文件中
因此，为了让这个老项目也能够用脚本来进行维护，又考虑到最小的改造成本和最小的影响，我们决定扩展 jQuery.i18n.properties 的能力，让它的国际化行为跟 vue-i18n 一致，也就能够用脚本来进行维护了
而且对于团队内的其他新人而言，也没必要去了解 jQuery.i18n.properties，毕竟扩展后的使用方式跟 vue-i18n 基本一样
那么扩展之前，先来看下 jQuery.i18n.properties 这个框架：
全局函数

$.i18n.properties(settings)

国际化初始化函数，用来设置当前语言，资源文件路径
$.i18n.prop(key, ...args)

国际化全局函数，根据 key 值去资源文件里找翻译，后续参数支持占位符替换
当根据 key 值找不到翻译时，会直接返回 key 值
类似 vue-i18n 的 $t
词条文件

.properties 格式文件

也是个键值对的配置文件，只是格式与 json 不一样
【en.properties】

1. string_login=Login
2. string_username=username
3. string_password=password

复制代码

【zh.properties】

1. string_login=登录
2. string_username=账号
3. string_password=密码

复制代码

扩展

增加支持 .json 格式的词条文件

重写 $.i18n 的全局函数，内部增加支持 json 词条的挂载，以及在原本翻译行为结束后，如果没翻译成功，则走入 json 词条里进行匹配，查看是否能翻译成功
这样能保证不改动原本项目里已有的国际化代码和行为，保持原样
新增或新改动到的代码就可以用新的方式去进行维护
所以才叫做扩展，而不是改造，毕竟扩展是以不影响原样为前提，不然谁知道老项目的屎山会由于什么修改而突然崩塌

1. // i18n.expand.js
3. /**
4. * 劫持 jQuery.i18n.properties 的 api，扩展国际化能力：
5. * 1. 支持 .json 格式的资源文件
6. */
7. function init(i18n) {
8.   // 注意，初始化需要在 jQuery.i18n.properties.js 文件加载后才能正常劫持到 i18n 的 api
9.   if (!i18n) return;
10.   wrapFnProperties(i18n);
11.   wrapFnProp(i18n);
12.   wrapMap(i18n);
13. }
15. /**
16. * 挂载新的 map 对象来存储从 .json 资源文件里读取的国际化翻译信息
17. */
18. function wrapMap(i18n) {
19.   i18n.mapFromJson = i18n.mapFromJson || {};
20. }
22. /**
23. * 劫持原 prop，如果原 prop 翻译失败，则再去 mapFromJson 里尝试翻译
24. */
25. function wrapFnProp(i18n) {
26.   let oldFn = i18n.prop;
27.   i18n.prop = function (key, ...args) {
28.     let value = oldFn.call(i18n, key, ...args);
29.     // 如果原翻译行为未翻译成功，则尝试从 json 词条里去寻找翻译
30.     if (value === key) {
31.       // 这里把原 jquery.i18n.properties#prop 代码拷贝过来就行，然后把词条来源改成从json词条里寻找翻译
32.       value = $.i18n.mapFromJson[key];
33.       // ... 省略拷贝过来的代码
34.     }
35.     return value;
36.   };
37. }
39. /**
40. * 劫持原 properties，获取国际化相关配置信息
41. * 如：当前语言 language，【新增】json的国际化翻译信息
42. */
43. function wrapFnProperties(i18n) {
44.   let oldFn = i18n.properties;
45.   i18n.properties = function (settings, ...args) {
46.     if (settings.jsonResource) {
47.       i18n.mapFromJson = settings.jsonResource;
48.     }
49.     return oldFn.call(i18n, settings, ...args);
50.   };
51. }
53. // 如果当前已经加载完jquery.i18n.properties.js文件，就直接扩展它的能力
54. if ($.i18n) {
55.   // 扩展 jquery.i18n.properties 的能力
56.   init($.i18n);
57. }
59. export default {
60.   init: init,
61. };

复制代码

然后在引入 jquery.i18n.properties.js 的 html 下面增加：

1. [/code]如果你们多页应用没有基类 html 文件的话，那如果有基类 js 的话，也可以在基类 js 里去初始化
2. 尽量只在一个地方去初始化，省得需要每个 html 里去加代码
3. [code]import i18nExpand from "./i18n.expand";
4. if ($.i18n) {
5.   // 扩展 jquery.i18n.properties 的能力
6.   i18nExpand.init($.i18n);
7. }

复制代码

给 Vue 挂载个全局函数 $t 指向 $.i18n.prop

我们老项目里有引入 Vue 框架，但也仅仅引入 Vue，没有引入其他全家桶系列，只用来在有新改动时，可以局部性使用 Vue 的响应式编程
而这里老项目里没必要再引入个 Vue-i18n 框架了，直接给挂载个全局函数 $t 指向原本的国际化方案的翻译函数即可

1. if (Vue) {
2.   // 给 Vue 挂载全局函数
3.   Vue.prototype.$t = $.i18n.prop;
4. }

复制代码

properties 转 json 的脚本

如果嫌弃 properties 格式的文件不好维护词条，可以写个脚本来转换：

1. /**
2. * 将 properties 文件的国际化资源文件转成 json 格式文件
3. * 脚本命令挂在 package.json 文件里
4. * 注：由于 properties 文件的中文经过编码，该脚本会进行解码处理，以便中文可正常显示
5. */
6. const vfs = require("vinyl-fs");
7. const map = require("map-stream");
8. const path = require("path");
9. const fs = require("fs");
11. const ROOT_DIR = path.resolve(__dirname, "./");
12. const fileRules = ["**/*.+(properties)"];
13. const jsonFile = "properties2json.json";
15. function ascii2native(value) {
16.   var character = value.split("\\u");
17.   var native1 = character[0];
18.   for (var i = 1; i < character.length; i++) {
19.     var code = character[i];
20.     native1 += String.fromCharCode(parseInt("0x" + code.substring(0, 4)));
21.     if (code.length > 4) {
22.       native1 += code.substring(4, code.length);
23.     }
24.   }
25.   return native1;
26. }
28. function run() {
29.   console.log("================================>start");
30.   let zhProperties = {};
31.   let enProperties = {};
32.   let curProperties = {};
33.   let res = {};
34.   const exist = fs.existsSync(path.resolve(ROOT_DIR, jsonFile));
35.   if (exist) {
36.     res = fs.readFileSync(path.resolve(ROOT_DIR, jsonFile), "utf-8");
37.     res = JSON.parse(res);
38.   }
39.   vfs
40.     .src(fileRules.map((item) => path.resolve(ROOT_DIR, item)))
41.     .pipe(
42.       map((file, cb) => {
43.         console.log("开始解析 =========================>", file.path);
44.         let count = 0;
45.         if (file.path.indexOf("_zh") > -1) {
46.           curProperties = zhProperties;
47.         } else {
48.           curProperties = enProperties;
49.         }
50.         let fileContent = file.contents.toString();
51.         fileContent.split("\n").map((line) => {
52.           if (line.indexOf("=") > -1) {
53.             count++;
54.             line = ascii2native(line);
55.             const [key, ...value] = line.split("=");
56.             // console.log(key, value);
57.             curProperties[key.trim()] = value.join("=").trim();
58.           }
59.         });
60.         console.log("词条数量：", count);
61.         console.log("解析结束 =========================>", file.path);
62.         cb();
63.       })
64.     )
65.     .on("end", () => {
66.       console.log("================================>end");
67.       //   console.log(zhProperties);
68.       //   console.log(enProperties);
69.       let unTranslate = {};
70.       Object.keys(zhProperties).map((key) => {
71.         if (enProperties[key]) {
72.           res[zhProperties[key]] = enProperties[key];
73.         } else {
74.           unTranslate[key] = zhProperties[key].trim();
75.           console.log("==>翻译丢失", key, zhProperties[key].trim());
76.         }
77.       });
78.       fs.writeFileSync(
79.         path.resolve(ROOT_DIR, jsonFile),
80.         JSON.stringify(res, " ", 2)
81.       );
82.       // fs.writeFileSync(
83.       //   path.resolve(ROOT_DIR, "unTranslate.json"),
84.       //   JSON.stringify(unTranslate, " ", 2)
85.       // );
86.     });
87. }
89. run();

复制代码

总之，老项目的国际化原则就是控制影响面，降低维护成本，包括需要考虑交给新人去维护的情况
因此，能不改动到原方案就不改动，保持原方案不变的情况下，扩展支持跟 vue 项目一致的使用方式，以便国际化自动处理脚本也能够直接用来维护老项目

来源:https://www.cnblogs.com/dasusu/p/17946005
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！