又是一種用于JavaScript的前端國(guó)際化方案
現(xiàn)在 Blessing Skin Server 的 HTML 模板是使用 Laravel 自帶的本地化來(lái)實(shí)現(xiàn)多語(yǔ)言支持的，并且使用了 devitek/yaml-translation 這個(gè)包把 Laravel 語(yǔ)言文件從默認(rèn)的 PHP 數(shù)組形式改為 YAML 格式的文件。
不得不說(shuō)數(shù)組形式的語(yǔ)言文件簡(jiǎn)直反人類好嗎，一大堆 => 看的眼暈。。YAML 大法好!(ゝ∀･)
回到正題。雖然 HTML 模板里的國(guó)際化是解決了，但是整個(gè)應(yīng)用中需要國(guó)際化的地方可不止 HTML 模板，同時(shí)還有 JavaScript(一些驗(yàn)證的提示文本)。但是靜態(tài)的腳本文件中總不能內(nèi)嵌 PHP 吧，所以我們得搞個(gè)單獨(dú)的解決方案。
雖然說(shuō)網(wǎng)上現(xiàn)成的 JS 國(guó)際化的庫(kù)很多，但我總覺(jué)得有些看不上眼(可能是我沒(méi)找到好的)，就準(zhǔn)備自己實(shí)現(xiàn)一下。
首先我們需要一個(gè)全局變量來(lái)保存從語(yǔ)言文件里讀出來(lái)的東西：
- // 保存所有加載的語(yǔ)言文件
- $.locales = {};
- // 當(dāng)前選擇的語(yǔ)言翻譯文件
- var locale = {};
這里我們把 locales 這個(gè)字典綁到了 jQuery 定義的全局變量 $ 上，這也就意味著要依賴 jQuery 了。當(dāng)然你不綁在 $ 上也是一點(diǎn)關(guān)系也沒(méi)有的，因?yàn)槲覀兿旅娌⒉恍枰玫?jQuery。
現(xiàn)在我們就可以在語(yǔ)言文件中這樣寫(xiě)了：
- (function ($) {
- "use strict";
- $.locales['zh-CN'] = {
- auth: {
- login: '登錄',
- validation: {
- emptyPassword: '密碼要好好填哦'
- }
- },
- user: {
- changeNickName: '確定要將昵稱設(shè)置為 :new_nickname 嗎？'
- },
- general: {
- confirm: '確定',
- cancel: '取消'
- }
- };
- })(window.jQuery);
如果你不準(zhǔn)備依賴于 $ 這個(gè)變量，就把閉包的作用域和里面的變量名改一下?？傊褪潜ＷC它可以被全局地訪問(wèn)到就好。
因?yàn)槲覀兛赡軙?huì)加載多個(gè)含有語(yǔ)言文件的 locale.js 文件，所以我們需要判斷一下當(dāng)前語(yǔ)言，然后把對(duì)應(yīng)的語(yǔ)言字典加載到上面定義的 locale 變量中：
- function loadLocales() {
- for (lang in $.locales) {
- // 這里你可以進(jìn)行進(jìn)一步的加載判斷
- if (!isEmpty($.locales[lang])) {
- locale = $.locales[lang] || {};
- }
- }
- }
上面用到的那個(gè) isEmpty 函數(shù)可以看這里：@Gist。然后我們就可以定義用于把 key 翻譯成具體語(yǔ)言的翻譯函數(shù)啦：
- function trans(key, parameters) {
- if (isEmpty(locale)) {
- // 載入當(dāng)前所選的語(yǔ)言至全局變量
- 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])) {
- // 替換語(yǔ)言字符串中的占位符
- temp = temp.replace(':'+i, parameters[i]);
- }
- }
- return temp;
- }
這里可以看到這個(gè)函數(shù)接受兩個(gè)參數(shù)，key 和 parameters。key 就是用于翻譯的鍵值了，并且我們可以傳一個(gè) dict 作為參數(shù)來(lái)替換語(yǔ)言字符串中的占位符。
而且在 key 的處理中，我們解析了類似于 auth.login 這樣的 key，并且是可以無(wú)限嵌套下去的。是不是感覺(jué)挺熟悉的?沒(méi)錯(cuò)，就是 Laravel 翻譯器也在使用的「點(diǎn)」語(yǔ)法 ( ﾟ 3ﾟ) 我是覺(jué)得蠻不錯(cuò)的就搬過(guò)來(lái)了(笑
現(xiàn)在我們?cè)诩虞d完語(yǔ)言文件后就可以使用這個(gè)函數(shù)來(lái)實(shí)現(xiàn)前端國(guó)際化啦：
- trans('auth.validation.emptyPassword');
- // 返回 "密碼要好好填哦"
- trans('user.changeNickName', { new_nickname: 'FUCK' });
- // 返回 "確定要將昵稱設(shè)置為 FUCK 嗎？"
