目的:前端(只采用thymeleaf模板+jquery) 實現國際化
由:前端沒有采用流行的vue.js angular 等框架,純html不可以引用js中定義的常量?
采用jquery賦值(維護2個模板(中,英)界面) 直接out
方案:采用/coderifous/jquery-localize/?壹個本地化插件?
a jQuery plugin that makes it easy to internationalize your web site
步驟:?
1 html
<!DOCTYPE><html?lang="en">
<head> <meta?e?in?chgLang"?+?name?+?value); location.reload();}
function?SetCookie(name,?value)?{
var?Days?=?30;?//此?cookie?將被保存?30?天 var?exp?=?new?Date();?//new?Date("December?31,?9998"); exp.setTime(exp.getTime()?+?Days?*?24?*?60?*?60?*?1000); document.cookie?=?name?+?"="?+?escape(value)?+?";expires="?+?exp.toGMTString();}
function?getCookie(name){?//取cookies函數
var?arr?=?document.cookie.match(new?RegExp("(^|?)"?+?name?+?"=([^;]*)(;|$)")); if?(arr?!=?null)?return?unescape(arr[2]); return?null}
$(function()?{
var?uulanguage?=?(navigator.language?||?navigator.browserLanguage).toLowerCase(); console.log("come?in?readly"?+?uulanguage); if?(uulanguage.indexOf("en")?>?-1)?{$("[data-localize]").localize("text",?{?//**主要的代碼**?jquery.localize.js?底層實現切換邏輯
pathPrefix:?"lang", language:?"en"});
console.log("come?in?en"); }?else?if?(uulanguage.indexOf("ja")?>?-1)?{$("[data-localize]").localize("text",?{
pathPrefix:?"lang", language:?"ja"});
console.log("come?in?ja"); }?else?{$("[data-localize]").localize("text",?{
pathPrefix:?"lang", language:?"en"});
console.log("come?in?moren?en");
};//根據cookie選擇語言
if?(getCookie(name)?!=?"")?{if?(getCookie(name)?==?"ja")?{
$("[data-localize]").localize("text",?{pathPrefix:?"lang",
language:?"ja"
}); console.log("come?in?cookie?ja");}
if?(getCookie(name)?==?"en")?{
$("[data-localize]").localize("text",?{pathPrefix:?"lang",
language:?"en"
}); console.log("come?in?cookie?en");}
}});