日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
又是一種用于JavaScript的前端國際化方案

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

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

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

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

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

 
 
    
  
  
  1. // 保存所有加載的語言文件
    2. 
  
  
  2. $.locales = {};
    3. 
  
  
  3. // 當前選擇的語言翻譯文件
    4. 
  
  
  4. var locale = {}; 
    5.

這里我們把 locales 這個字典綁到了 jQuery 定義的全局變量 $ 上，這也就意味著要依賴 jQuery 了。當然你不綁在 $ 上也是一點關(guān)系也沒有的，因為我們下面并不需要用到 jQuery。

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

 
 
    
  
  
  1. (function ($) {
    2. 
  
  
  2.     "use strict";
    3. 
  
  
  3. 
  
  
  4.     $.locales['zh-CN'] = {
    5. 
  
  
  5.         auth: {
    6. 
  
  
  6.             login: '登錄',
    7. 
  
  
  7.             validation: {
    8. 
  
  
  8.                 emptyPassword: '密碼要好好填哦'
    9. 
  
  
  9.             }
    10. 
  
  
  10.         },
    11. 
  
  
  11.         user: {
    12. 
  
  
  12.             changeNickName: '確定要將昵稱設(shè)置為 :new_nickname 嗎？'
    13. 
  
  
  13.         },
    14. 
  
  
  14.         general: {
    15. 
  
  
  15.             confirm: '確定',
    16. 
  
  
  16.             cancel: '取消'
    17. 
  
  
  17.         }
    18. 
  
  
  18.     };
    19. 
  
  
  19. })(window.jQuery); 
    20.

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

因為我們可能會加載多個含有語言文件的 locale.js 文件，所以我們需要判斷一下當前語言，然后把對應(yīng)的語言字典加載到上面定義的 locale 變量中：

 
 
    
  
  
  1. function loadLocales() {
    2. 
  
  
  2.     for (lang in $.locales) {
    3. 
  
  
  3.         // 這里你可以進行進一步的加載判斷
    4. 
  
  
  4.         if (!isEmpty($.locales[lang])) {
    5. 
  
  
  5.             locale = $.locales[lang] || {};
    6. 
  
  
  6.         }
    7. 
  
  
  7.     }
    8. 
  
  
  8. }
    9.

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

 
 
    
  
  
  1. function trans(key, parameters) {
    2. 
  
  
  2.     if (isEmpty(locale)) {
    3. 
  
  
  3.         // 載入當前所選的語言至全局變量
    4. 
  
  
  4.         loadLocales();
    5. 
  
  
  5.     }
    6. 
  
  
  6. 
  
  
  7.     parameters = parameters || {};
    8. 
  
  
  8. 
  
  
  9.     var segments = key.split('.');
    10. 
  
  
  10.     var temp = locale || {};
    11. 
  
  
  11. 
  
  
  12.     for (i in segments) {
    13. 
  
  
  13.         if (isEmpty(temp[segments[i]])) {
    14. 
  
  
  14.             // 如果該項不存在，則原樣返回 key
    15. 
  
  
  15.             return key;
    16. 
  
  
  16.         } else {
    17. 
  
  
  17.             temp = temp[segments[i]];
    18. 
  
  
  18.         }
    19. 
  
  
  19.     }
    20. 
  
  
  20. 
  
  
  21.     for (i in parameters) {
    22. 
  
  
  22.         if (!isEmpty(parameters[i])) {
    23. 
  
  
  23.             // 替換語言字符串中的占位符
    24. 
  
  
  24.             temp = temp.replace(':'+i, parameters[i]);
    25. 
  
  
  25.         }
    26. 
  
  
  26.     }
    27. 
  
  
  27. 
  
  
  28.     return temp;
    29. 
  
  
  29. } 
    30.

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

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

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

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

新聞名稱：又是一種用于JavaScript的前端國際化方案
分享鏈接：http://www.5511xx.com/article/dpdpocg.html