[[171767]]

現在 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);  

如果你不準備依賴于 $ 這個變量，就把閉包的作用域和里面的變量名改一下?？傊褪潜ＷC它可以被全局地訪問到就好。

因為我們可能會加載多個含有語言文件的 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 嗎？"