so easy 前端實現多語言

2021-09-11 13:06:56 字數 1805 閱讀 6618

​ 每個公司業務不一樣,此解決方案僅做參考 。

git demo位址

其實現在開發者解決多語言普遍三種解決方案:

第乙個是為每個頁面提供每種語言的相關頁面。 第二種是把內容從表現形式中分離出來,做不同語言的內容檔案。 第三種是動態翻譯頁面內容。第三種很少見,而且機器翻譯技術還很難達到人們的預期。

其實第二種相對來說簡單一點,那麼開搞。

檔案目錄

index.html

charset="utf-8">

translation testtitle>

src="">

script>

src="js/script.js">

script>

src="js/index.js">

script>

head>

href="#"

id="enbtn">englisha>

href="#"

id="zhbtn">簡體中文a>

div>

lang>click here:a>

div>

type="button"

lang

div>

body>

html>

複製**

script.js

var dict = {};

$(function () else

if(getcookieval("lang")=="zh")else

// 切換語言事件 根據自己業務而定

$("#enbtn").bind("click", function () );

$("#zhbtn").bind("click", function () );

});function

setlanguage(lang)

function

getcookieval(name)

} return

null;

}function

setcookie(cookie)

function

translate(lang) else

$("[lang]").each(function ()

});}function

__tr(src)

function

loaddict()

});}// 遍歷所有lang屬性的標籤賦值

function

registerwords()

break;

default:

if($(this).attr("lang")=="")

}});

}複製**

之前弄demo的時候,registerwords函式這裡沒有判斷 但是我們的專案自己封裝的路由去動態載入頁面。每次進來都會重新賦值,這會導致問題。

因為他賦值的是當前元素的值,這個時候你lang的值就和語言包檔案裡的key對應不上了

html中語言切換:給所有標籤加上lang屬性 js中語言切換:使用__tr()方法

可以直接把script.js作為乙個外掛程式使用放到專案中

條條大路通羅馬,根據自己的實際需求與業務場景去做即可。

有點倉促,有不足的還請各位指點。

so easy 前端實現多語言

每個公司業務不一樣,此解決方案僅做參考 git demo位址 其實現在開發者解決多語言普遍三種解決方案 第乙個是為每個頁面提供每種語言的相關頁面。第二種是把內容從表現形式中分離出來,做不同語言的內容檔案。第三種是動態翻譯頁面內容。第三種很少見,而且機器翻譯技術還很難達到人們的預期。其實第二種相對來說...

so easy 前端簡單實現多語言

html中給標籤加個lang屬性,到時候頁面載入時遍歷所有這些有lang屬性的標籤去實現切換語言 js裡的文字用方法實現轉換語言 把使用者選擇的語言存到cookie裡吧,嗯!拿個小本本記下來 做個快取,請求過的語言檔案就不再請求了 暫時就這些吧.簡體中文 click here var dict fu...

前端實現多語言

現在開發者解決多語言普遍的三種解決方案 為每個頁面提供每種語言的相關頁面。第二種是把內容從表現形式中分離出來,做不同語言的內容檔案。第三種是動態翻譯頁面內容。第三種很少見,而且機器翻譯技術還很難達到人們的預期。實現方法 比較笨的方法,就是把所有的語言寫好,放在同乙個頁面,加上不同的class,用jq...