1. 程式人生 > >前端多語言的切換

前端多語言的切換

前端開發中多語言的切換,可使用js動態替換內容

1、在使用者點選切換語言後,把選擇的語言版本儲存在cookie中

//寫入cookie函式
function setCookie(name,value)
{
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

//獲取cookie
function getCookie
(name) {
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return unescape(arr[2]); else return null; } //setCookie('lan','hk'); 繁體中文 //setCookie('lan','cn'); 簡體中文 //setCookie('lan','en'); 英文
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

2、在包含靜態文字的標籤中,新增一個屬性:set-lan=”html:name” 
屬性值中的html代表內容的位置,name代表要替換的文字的標識 
例如:

<span set-lan="html:name">名字</span>
<input type="text" value="名字" set-lan="val:name" />

這些就需要前端工程師在開發過程中新增進去,並且,要切換語言文字的外面都必須要有一個標籤包裹,否則無法進行切換;
如:
<span set-lan="html:name"><i
class="icon">
</i>名字</span> 這樣的程式碼,是無法把“名字”替換成“Name”的,會把“名字”前面的i標籤也一起替換掉,如果不想把i標籤也替換掉,就要在“名字”外面新增一個標籤,改成: <span><i class="icon"></i><lan set-lan="html:name">名字</lan></span>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

3、定義3個語言的標識+內容的json字串

var cn = {
            "name" : "姓名",
            "tel" : "電話",
            "email" : "郵箱",
        };

var hk = {
            "name" : "姓名",
            "tel" : "電話",
            "email" : "郵箱",
        };

var en = {
            "name" : "Name",
            "tel" : "Tel",
            "email" : "Email",
        };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

4、遍歷帶set-lan屬性的標籤,進行文字替換

$('[set-lan]').each(function(){
    var me = $(this);
    var a = me.attr('set-lan').split(':');
    var p = a[0];   //文字放置位置
    var m = a[1];   //文字的標識

    //使用者選擇語言後儲存在cookie中,這裡讀取cookie中的語言版本
    var lan = getCookie('lan');

    //選取語言文字
    switch(lan){
        case 'cn':
            var t = cn[m];  //這裡cn[m]中的cn是上面定義的json字串的變數名,m是json中的鍵,用此方式讀取到json中的值
            break;
        case 'en':
            var t = en[m];
            break;
        default:
            var t = hk[m];
    }

    //如果所選語言的json中沒有此內容就選取其他語言顯示
    if(t==undefined) t = cn[m];
    if(t==undefined) t = en[m];
    if(t==undefined) t = hk[m];

    if(t==undefined) return true;   //如果還是沒有就跳出

    //文字放置位置有(html,val等,可以自己新增)
    switch(p){
        case 'html':
            me.html(t);
            break;
        case 'val':
        case 'value':
            me.val(t);
            break;
        default:
            me.html(t);
    }

});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

以上是html中的文字替換,但是寫在js中的文字怎麼辦? 
可以定義一個函式,來讀取

function get_lan(m)
{
    //獲取文字
    var lan = getCookie('lan');     //語言版本
    //選取語言文字
    switch(lan){
        case 'cn':
            var t = cn[m];
            break;
        case 'hk':
            var t = hk[m];
            break;
        default:
            var t = en[m];
    }

    //如果所選語言的json中沒有此內容就選取其他語言顯示
    if(t==undefined) t = cn[m];
    if(t==undefined) t = en[m];
    if(t==undefined) t = hk[m];

    if(t==undefined) t = m; //如果還是沒有就返回他的標識

    return t;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

那麼在js中使用的文字就只要用此函式來讀取就可以了 

alert('姓名');
改成
alert(get_lan('name'));
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3