一、当前问题汇总

• 前后端国际化在同一个文件中，web的和nodejs的没有分离，造成页面需要加载更多的字典，影响首次加载性能
• 国际化文件存在大量的key冲突，重复定义
• 国际化没有分模块管理，各个模块维护自己的国际化字段太困难了，非常容易冲突或者覆盖别人的代码
• 前端源码的国际化文件暴露，点击查看源码

二、解决方法

1.前后端国际化分离

创建前后端国际化目录

在locales目录下创建web、server目录，分别存放前后端（nodejs）的国际化文件
nodejs当前采用的是npm 的i18n库，该函数会根据lang自动加载directory配置项下的‘lang’.json；因此需重新设置directory

T.configure({
    locales: ['en_US', 'zh_CN'],
    defaultLocale: APP.config.app.lang,
    directory: __dirname + '/locales/server', //此处将原来的locales目录修改为 '/locales/server'
    updateFiles: false
});

前端Ext采用的是自定义函数_(),该函数需要读取dict进行key的匹配进行国际化；需修改读取前端国际化json的目录为/locales/web

2.分模块管理

按照模块分json

根据现有的模块，自行创建模块目录，将自己的前后端国际化内容写在自定义json中

自定义json

3.key冲突

国际化key需按照模块名称作为顶级作用于，采用包命名的方式，采用驼峰命名

{
    "sysmng.serverList.grid.title":"服务器列表"
}

4.首页国际化内容直接暴露

国际化内容暴露，且首页家在性能下降

创建i18n文件，自定义Ajax方法获取后端的dict字典，将字典缓存在内存中

var request = new XMLHttpRequest();
var url = '/lang/get_i18n_dict?lang=' + APP.lang
request.open("get", url); 
request.send(null); 
request.onload = function () {
    if (request.status == 200) {
        var json = JSON.parse(request.responseText);
        APP.dict = json.dict;
        console.log("dict", json.dict);
    }
}
// i18n func
var _ = function (s) {
    if (APP.dict[s] != undefined) {
        return APP.dict[s];
    }
    return s;
};

// console.log(_('My title'));
// console.log(_('Login Successfully!'));
// console.log(_('Alarms'));

后端返回

router.get('/get_i18n_dict', async function(req, res, next) {
    // req.setLocale(req.query.lang);
     let dict = require(path.join(path.resolve(), '/locales/web', req.app.locals.lang + ".json"));
//    let dict=await readJsonFile(localsPath);
   console.log("dict", dict)
    res.json(200, {
        success: true,
        lang: req.app.locals.lang,
        // dict: req.getCatalog()
        dict:dict
    });  
});

5.国际化文件的管理

在modules目录下创建i18n模块，用来管理前后端的国际化文件
webapp在首次运行时会加载该模块，并负责合并各个模块的语言json，创建生成制定名称的json文件。
之后nodejs的i18n模块会负责管理后端国际化
前端页面在首次加载时会调用接口请求前端国际化文件数据

var fs = require('fs');
var path = require('path');
const localsArr = ['en_US', 'zh_CN'];
exports.createLocalesFile = function () {
    for(let lang of localsArr){
        let srcPath = path.resolve();
        let localesDir = path.join(srcPath, 'locales');
        let langWebPath = path.join(localesDir, 'web',lang);
        let langServerPath = path.join(localesDir, 'server', lang);
        createJsonFile(lang, langWebPath);
        createJsonFile(lang, langServerPath);
    }
    
}
function getJsonFilePath(localsPath) {
    let components = [];
    const files = fs.readdirSync(localsPath);
    files.forEach(function (item, index) {
        let itemPath = path.join(localsPath, item);
        let stat = fs.lstatSync(itemPath);
        if (stat.isDirectory()) {
            let subItemJsonFile = getJsonFilePath(itemPath);
            components.push.apply(components, subItemJsonFile);
        } else {
            if (item.substr(item.lastIndexOf(".") + 1) === "json") {
                components.push(itemPath);
            }
        }
    })
    
    return components;
}
async function createJsonFile(lang, langDir) {
    let jsonName=lang+".json";
    let jsonPath = path.join(langDir,"../", jsonName);
    let json = await readJsonFile(langDir);
    fs.writeFile(jsonPath, JSON.stringify(json), (err) => {
        if (err) throw err;
        console.log('文件已被保存');
    });
}
async function readJsonFile(localsPath) {
    let jsonPathArr = getJsonFilePath(localsPath);
    console.log("allARR", jsonPathArr);
    let allJson = {};
    for (let item of jsonPathArr) {
        let json = await readOneFile(item);
        Object.assign(allJson, json);
    }
    return allJson;

}
async function readOneFile(item) {
    return new Promise(function (resolve, reject) {
        fs.readFile(item, "utf8", function (err, data) {
            // console.log("json", data);
            let json = JSON.parse(data);
            // console.log("data", json);
            resolve(json);
        });
    });
}

根据语言种类生成对应的合并json文件

6.风险评估

原来的zh_CN.json的内容移植到了base.json文件中，各模块可以暂时不处理base.json中的内容，日后项目的新增国际化在模块国际化文件中编写，有时间可以将base.json中的属于本模块的国际化内容修改并移植到本模块国际化文件中

image.png

• 该方案采用渐进式修改，兼容性强。
• 可维护性强
• 修改较少，各模块的工作量小