[[171767]]

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

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

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

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

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

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

這里我們把 locales 這個字典綁到了 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)備依賴于 $ 這個變量，就把閉包的作用域和里面的變量名改一下?？傊褪潜ＷC它可以被全局地訪問到就好。

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

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

 上面用到的那個 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; 
}  

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

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

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

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