成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

elina / 3374人閱讀

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

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

現(xiàn)在 Blessing Skin Server 的 HTML 模板是使用 Laravel 自帶的本地化來實(shí)現(xiàn)多語言支持的，并且使用了 devitek/yaml-translation 這個(gè)包把 Laravel 語言文件從默認(rèn)的 PHP 數(shù)組形式改為 YAML 格式的文件。

不得不說數(shù)組形式的語言文件簡直反人類好嗎，一大堆 => 看的眼暈。。YAML 大法好！(ゝ??)

回到正題。雖然 HTML 模板里的國際化是解決了，但是整個(gè)應(yīng)用中需要國際化的地方可不止 HTML 模板，同時(shí)還有 JavaScript（一些驗(yàn)證的提示文本）。但是靜態(tài)的腳本文件中總不能內(nèi)嵌 PHP 吧，所以我們得搞個(gè)多帶帶的解決方案。

雖然說網(wǎng)上現(xiàn)成的 JS 國際化的庫很多，但我總覺得有些看不上眼（可能是我沒找到好的），就準(zhǔn)備自己實(shí)現(xiàn)一下。

首先我們需要一個(gè)全局變量來保存從語言文件里讀出來的東西：

// 保存所有加載的語言文件
$.locales = {};
// 當(dāng)前選擇的語言翻譯文件
var locale = {};

這里我們把 locales 這個(gè)字典綁到了 jQuery 定義的全局變量 $ 上，這也就意味著要依賴 jQuery 了。當(dāng)然你不綁在 $ 上也是一點(diǎn)關(guān)系也沒有的，因?yàn)槲覀兿旅娌⒉恍枰玫?jQuery。

現(xiàn)在我們就可以在語言文件中這樣寫了：

(function ($) {
    "use strict";

    $.locales["zh-CN"] = {
        auth: {
            login: "登錄",
            validation: {
                emptyPassword: "密碼要好好填哦"
            }
        },
        user: {
            changeNickName: "確定要將昵稱設(shè)置為 :new_nickname 嗎？"
        },
        general: {
            confirm: "確定",
            cancel: "取消"
        }
    };
})(window.jQuery);

如果你不準(zhǔn)備依賴于 $ 這個(gè)變量，就把閉包的作用域和里面的變量名改一下。總之就是保證它可以被全局地訪問到就好。

因?yàn)槲覀兛赡軙虞d多個(gè)含有語言文件的 locale.js 文件，所以我們需要判斷一下當(dāng)前語言，然后把對應(yīng)的語言字典加載到上面定義的 locale 變量中：

function loadLocales() {
    for (lang in $.locales) {
        // 這里你可以進(jìn)行進(jìn)一步的加載判斷
        if (!isEmpty($.locales[lang])) {
            locale = $.locales[lang] || {};
        }
    }
}

上面用到的那個(gè) isEmpty 函數(shù)可以看這里：@Gist。然后我們就可以定義用于把 key 翻譯成具體語言的翻譯函數(shù)啦：

function trans(key, parameters) {
    if (isEmpty(locale)) {
        // 載入當(dāng)前所選的語言至全局變量
        loadLocales();
    }

    parameters = parameters || {};

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

    for (i in segments) {
        if (isEmpty(temp[segments[i]])) {
            // 如果該項(xiàng)不存在，則原樣返回 key
            return key;
        } else {
            temp = temp[segments[i]];
        }
    }

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

    return temp;
}

這里可以看到這個(gè)函數(shù)接受兩個(gè)參數(shù)，key 和 parameters。key 就是用于翻譯的鍵值了，并且我們可以傳一個(gè) dict 作為參數(shù)來替換語言字符串中的占位符。

而且在 key 的處理中，我們解析了類似于 auth.login 這樣的 key，并且是可以無限嵌套下去的。是不是感覺挺熟悉的？沒錯(cuò)，就是 Laravel 翻譯器也在使用的「點(diǎn)」語法 (　? 3?) 我是覺得蠻不錯(cuò)的就搬過來了（笑

現(xiàn)在我們在加載完語言文件后就可以使用這個(gè)函數(shù)來實(shí)現(xiàn)前端國際化啦：

trans("auth.validation.emptyPassword");
// 返回 "密碼要好好填哦"
trans("user.changeNickName", { new_nickname: "FUCK" });
// 返回 "確定要將昵稱設(shè)置為 FUCK 嗎？"

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80368.html

相關(guān)文章

  • 什么是 JAVASCRIPT？

    摘要：，微軟發(fā)布，同時(shí)發(fā)布了，該語言模仿同年發(fā)布的。，公司在瀏覽器對抗中沒落，將提交給國際標(biāo)準(zhǔn)化組織，希望能夠成為國際標(biāo)準(zhǔn)，以此抵抗微軟。同時(shí)將標(biāo)準(zhǔn)的設(shè)想定名為和兩類。，尤雨溪發(fā)布項(xiàng)目。，正式發(fā)布，并且更名為。，發(fā)布，模塊系統(tǒng)得到廣泛的使用。 前言 作為程序員，技術(shù)的落實(shí)與鞏固是必要的，因此想到寫個(gè)系列，名為 why what or how 每篇文章試圖解釋清楚一個(gè)問題。 這次的 why w...

    ephererid 評論0 收藏0

  • 前端模塊化雜談

    摘要：并不是使用安裝的模塊我們就可以使用同樣的方式使用任何一個(gè)模塊，使用某種工具將這些模塊打包發(fā)布作為事實(shí)上的前端模塊化標(biāo)準(zhǔn)，或可以出來解救我們。目前比較拿的出手的，也就是的模塊化，比如或者等等，分別可以使用和。 Teambition是一家追求卓越技術(shù)的公司，我們工程師都很Geek，我們使用了很多新潮的，開源的技術(shù)。同時(shí)我們也貢獻(xiàn)了很多開源的項(xiàng)目。我們希望能夠把一些技術(shù)經(jīng)驗(yàn)分享給大家。...

    yacheng 評論0 收藏0

  • 前端模塊化雜談

    摘要：并不是使用安裝的模塊我們就可以使用同樣的方式使用任何一個(gè)模塊，使用某種工具將這些模塊打包發(fā)布作為事實(shí)上的前端模塊化標(biāo)準(zhǔn)，或可以出來解救我們。目前比較拿的出手的，也就是的模塊化，比如或者等等，分別可以使用和。 Teambition是一家追求卓越技術(shù)的公司，我們工程師都很Geek，我們使用了很多新潮的，開源的技術(shù)。同時(shí)我們也貢獻(xiàn)了很多開源的項(xiàng)目。我們希望能夠把一些技術(shù)經(jīng)驗(yàn)分享給大家。...

    li21 評論0 收藏0

  • Vue.js新手入門指南[轉(zhuǎn)載]

    摘要：就是一個(gè)用于搭建類似于網(wǎng)頁版知乎這種表單項(xiàng)繁多，且內(nèi)容需要根據(jù)用戶的操作進(jìn)行修改的網(wǎng)頁版應(yīng)用。單頁應(yīng)用程序顧名思義，單頁應(yīng)用一般指的就是一個(gè)頁面就是應(yīng)用，當(dāng)然也可以是一個(gè)子應(yīng)用，比如說知乎的一個(gè)頁面就可以視為一個(gè)子應(yīng)用。 最近在逛各大網(wǎng)站，論壇，以及像SegmentFault等編程問答社區(qū)，發(fā)現(xiàn)Vue.js異?；鸨?，重復(fù)性的提問和內(nèi)容也很多，樓主自己也趁著這個(gè)大前端的熱潮，著手學(xué)習(xí)了一...

    MartinHan 評論0 收藏0

  • GridManager 開源歷程

    摘要：歷程啟動(dòng)于年月日不曾想這一堅(jiān)持已經(jīng)多天了。每個(gè)午飯后晚飯前。期間對的認(rèn)知與實(shí)踐提升明顯，并沉淀下名為的類庫。每次發(fā)布前的，成為一種風(fēng)險(xiǎn)把控。在此之前從沒有如此的認(rèn)同單元測試，也相信這終將會成為一種大家都遵守的契約。 GridManager歷程 GridManager 啟動(dòng)于2015年02月10日, 不曾想這一堅(jiān)持已經(jīng)1200多天了。總想為此記錄些什么，但一直未曾動(dòng)手。午飯后，公司很安靜...

    honhon 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<