又是一种用于 JavaScript 的前端国际化计划

2024年5月1日 200次阅读 来源: printempw

原文地点：https://prinzeugen.net/yet-an…

如今 Blessing Skin Server 的 HTML 模板是运用 Laravel 自带的本地化来完成多言语支持的，而且运用了 devitek/yaml-translation 这个包把 Laravel 言语文件从默许的 PHP 数组情势改成 YAML 花样的文件。

不得不说数组情势的言语文件几乎反人类好吗，一大堆 => 看的眼晕。。YAML 大法好！(ゝ∀･)

回到正题。虽然 HTML 模板里的国际化是处置惩罚了，然则全部运用中须要国际化的处所可不止 HTML 模板，同时另有 JavaScript（一些考证的提醒文本）。然则静态的剧本文件中总不能内嵌 PHP 吧，所以我们得搞个零丁的处置惩罚方案。

虽然说网上现成的 JS 国际化的库许多，但我总以为有些看不上眼（多是我没找到好的），就预备本身完成一下。

起首我们须要一个全局变量来保留从言语文件里读出来的东西：

// 保留一切加载的言语文件
$.locales = {};
// 当前挑选的言语翻译文件
var locale = {};

这里我们把 locales 这个字典绑到了 jQuery 定义的全局变量 $ 上，这也就意味着要依靠 jQuery 了。固然你不绑在 $ 上也是一点关联也没有的，由于我们下面并不须要用到 jQuery。

如今我们就能够在言语文件中如许写了：

(function ($) {
    "use strict";

    $.locales['zh-CN'] = {
        auth: {
            login: '登录',
            validation: {
                emptyPassword: '暗码要好好填哦'
            }
        },
        user: {
            changeNickName: '肯定要将昵称设置为 :new_nickname 吗？'
        },
        general: {
            confirm: '肯定',
            cancel: '作废'
        }
    };
})(window.jQuery);

假如你不预备依靠于 $ 这个变量，就把闭包的作用域和内里的变量名改一下。总之就是保证它能够被全局地访问到就好。

由于我们可能会加载多个含有言语文件的 locale.js 文件，所以我们须要推断一下当前言语，然后把对应的言语字典加载到上面定义的 locale 变量中：

function loadLocales() {
    for (lang in $.locales) {
        // 这里你能够举行进一步的加载推断
        if (!isEmpty($.locales[lang])) {
            locale = $.locales[lang] || {};
        }
    }
}

上面用到的谁人 isEmpty 函数能够看这里：@Gist。然后我们就能够定义用于把 key 翻译成详细言语的翻译函数啦：

function trans(key, parameters) {
    if (isEmpty(locale)) {
        // 载入当前所选的言语至全局变量
        loadLocales();
    }

    parameters = parameters || {};

    var segments = key.split('.');
    var temp = locale || {};

    for (i in segments) {
        if (isEmpty(temp[segments[i]])) {
            // 假如该项不存在，则原样返回 key
            return key;
        } else {
            temp = temp[segments[i]];
        }
    }

    for (i in parameters) {
        if (!isEmpty(parameters[i])) {
            // 替代言语字符串中的占位符
            temp = temp.replace(':'+i, parameters[i]);
        }
    }

    return temp;
}

这里能够看到这个函数接收两个参数，key 和 parameters。key 就是用于翻译的键值了，而且我们能够传一个 dict 作为参数来替代言语字符串中的占位符。

而且在 key 的处置惩罚中，我们剖析了类似于 auth.login 如许的 key，而且是能够无穷嵌套下去的。是否是以为挺熟习的？没错，就是 Laravel 翻译器也在运用的「点」语法 (　ﾟ 3ﾟ) 我是以为蛮不错的就搬过来了（笑

如今我们在加载完言语文件后就能够运用这个函数来完成前端国际化啦：

trans('auth.validation.emptyPassword');
// 返回 "暗码要好好填哦"
trans('user.changeNickName', { new_nickname: 'FUCK' });
// 返回 "肯定要将昵称设置为 FUCK 吗？"
    原文作者：printempw
    原文地址: https://segmentfault.com/a/1190000006916309
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞