又是一种用于 JavaScript 的前端国际化方案

elina 发布于2019-08-20 11:03 / 3345人阅读

摘要：虽然模板里的国际化是解决了，但是整个应用中需要国际化的地方可不止模板，同时还有一些验证的提示文本。但是静态的脚本文件中总不能内嵌吧，所以我们得搞个多带带的解决方案。就是用于翻译的键值了，并且我们可以传一个作为参数来替换语言字符串中的占位符。

原文地址：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 吗？"

云服务器 GPU云服务器一种新的图像识别算法一种游戏的服务器 java的udp用于用于数据分析的数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80368.html

什么是 JAVASCRIPT？

摘要：，微软发布，同时发布了，该语言模仿同年发布的。，公司在浏览器对抗中没落，将提交给国际标准化组织，希望能够成为国际标准，以此抵抗微软。同时将标准的设想定名为和两类。，尤雨溪发布项目。，正式发布，并且更名为。，发布，模块系统得到广泛的使用。前言作为程序员，技术的落实与巩固是必要的，因此想到写个系列，名为 why what or how 每篇文章试图解释清楚一个问题。这次的 why w...

ephererid 2019-08-26 10:20 评论0 收藏0
前端模块化杂谈

摘要：并不是使用安装的模块我们就可以使用同样的方式使用任何一个模块，使用某种工具将这些模块打包发布作为事实上的前端模块化标准，或可以出来解救我们。目前比较拿的出手的，也就是的模块化，比如或者等等，分别可以使用和。 Teambition是一家追求卓越技术的公司，我们工程师都很Geek，我们使用了很多新潮的，开源的技术。同时我们也贡献了很多开源的项目。我们希望能够把一些技术经验分享给大家。...

yacheng 2019-08-19 14:52 评论0 收藏0
前端模块化杂谈

摘要：并不是使用安装的模块我们就可以使用同样的方式使用任何一个模块，使用某种工具将这些模块打包发布作为事实上的前端模块化标准，或可以出来解救我们。目前比较拿的出手的，也就是的模块化，比如或者等等，分别可以使用和。 Teambition是一家追求卓越技术的公司，我们工程师都很Geek，我们使用了很多新潮的，开源的技术。同时我们也贡献了很多开源的项目。我们希望能够把一些技术经验分享给大家。...

li21 2019-08-28 17:55 评论0 收藏0
Vue.js新手入门指南[转载]

摘要：就是一个用于搭建类似于网页版知乎这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。单页应用程序顾名思义，单页应用一般指的就是一个页面就是应用，当然也可以是一个子应用，比如说知乎的一个页面就可以视为一个子应用。最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，楼主自己也趁着这个大前端的热潮，着手学习了一...

MartinHan 2019-08-23 11:50 评论0 收藏0
GridManager 开源历程

摘要：历程启动于年月日不曾想这一坚持已经多天了。每个午饭后晚饭前。期间对的认知与实践提升明显，并沉淀下名为的类库。每次发布前的，成为一种风险把控。在此之前从没有如此的认同单元测试，也相信这终将会成为一种大家都遵守的契约。 GridManager历程 GridManager 启动于2015年02月10日, 不曾想这一坚持已经1200多天了。总想为此记录些什么，但一直未曾动手。午饭后，公司很安静...

honhon 2019-08-22 18:48 评论0 收藏0