又是一種用于 JavaScript 的前端國際化方案

elina 發布于2019-08-20 11:03 / 3369人閱讀

摘要：雖然模板里的國際化是解決了，但是整個應用中需要國際化的地方可不止模板，同時還有一些驗證的提示文本。但是靜態的腳本文件中總不能內嵌吧，所以我們得搞個多帶帶的解決方案。就是用于翻譯的鍵值了，并且我們可以傳一個作為參數來替換語言字符串中的占位符。

原文地址：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用于用于數據分析的數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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