資訊專欄INFORMATION COLUMN
摘要：年末，部門項(xiàng)目需要推國際化，前端這塊由我來主導(dǎo)。選擇方式目前了解到的前端國際化有以下兩種方式按語言種類分別開發(fā)前端界面這種方式貌似給人一種很的感覺且覺著文件會無限多。
前言
從10年接觸編程就開始接觸國際化這個(gè)概念，然而這些年全面用到國際化的項(xiàng)目并不是很多，且都是些螺絲釘式的工作。15年末，部門項(xiàng)目需要推國際化，前端這塊由我來主導(dǎo)。雖然難度不高，但還是拿出來分享下。選擇方式:
目前了解到的前端國際化有以下兩種方式：1、按語言種類分別開發(fā)前端界面：
這種方式貌似給人一種很low的感覺且覺著文件會無限多。然而在一般項(xiàng)目中語言種類并不會特別多，實(shí)現(xiàn)中英文兩種即可滿足大部分需求；并且這種方式如果配合上不同的網(wǎng)站風(fēng)格，不但可以解決中英文字符長度差異問題，而且可以兼顧不同群體的視覺感觀。但該方式后期維護(hù)中需要付出相當(dāng)于維護(hù)語言種類相同倍數(shù)的前端代碼；
2、使用配置文件：使用一套界面，同樣的樣式文件，調(diào)用相對應(yīng)的語言文件進(jìn)行DOM渲染。該方式可以快速實(shí)現(xiàn)，且只需維護(hù)一套前端文件。單頁應(yīng)用建議使用該方法。
如還有更好的方式，希望可以發(fā)出來學(xué)習(xí)下。
我的選擇：登陸，注冊等多帶帶存在于系統(tǒng)外圍的功能模塊使用第一種方式，其它主體功能選擇的是第二種方式。
第一種方式只需要按語言分類成多份文件，這里就直接跳過。單說第二種方式，該如何實(shí)現(xiàn)。
實(shí)現(xiàn)步驟： 步驟一：準(zhǔn)備語言資源文件原則上需要遵守一個(gè)界面對應(yīng)一個(gè)資源文件，再通過一個(gè)統(tǒng)一入口文件進(jìn)行資源整合。舉個(gè)栗子：
page1對應(yīng)的資源文件
var page1 = {
title:{
"zh-cn":"標(biāo)題",
"en-us":"title"
}
}
page2對應(yīng)的資源文件
var page2 = {
words:{
"zh-cn":"{0}共有{1}人使用",
"en-us":"{1} people use {0}"
}
}
整合文件
var i18nData = {
page1:page1,
page2:page2,
}
步驟二：引入主JS
自已實(shí)現(xiàn)了一個(gè)I18N對象，少碼字多貼代碼，直接上code~
var I18N = {
/*
* @存儲語言數(shù)據(jù)
* */
DATA : LD
/*
* @ 使用的語言
* */
,language: "zh-cn"
/*
* @ 修改使用的語言
* */
,setLanguage: function(language){
this.language = language;
}
/*
* @解析string 語言標(biāo)記 用于解析html中的{{i18n-}}
* str:html string
* pageName:頁面名稱 、
* */
,parse: function(str, pageName){
var _this = this;
if(!pageName){
console.error("I18N解析失敗，原因pageName="+pageName);
return;
}
if(!_this.language){
console.error("I18N解析失敗，原因language="+_this.language);
return;
}
var key= "",
parseStr = "";
parseStr = str.replace(/{{i18n-(.+?)}}/g, function(t){
key = t.slice(7, t.length - 2);
try{
return _this.DATA[pageName][key][_this.language] || "";
}catch (e){
console.warn(pageName + "未找到與"+ key +"相匹配的"+ _this.language +"語言");
return "";
}
});
return parseStr;
}
/*
* 生成所需的文本信息 適用于js內(nèi)部更改DOM時(shí)使用
* pageName:頁面名稱
* key: 指向的文本索引
* v1,v2,v3:可為空，字符串格式，只存在v1時(shí)可為數(shù)組
* */
,getText: function(pageName, key, v1, v2, v3){
var _this = this;
var intrusion = [];
//處理參數(shù)，實(shí)現(xiàn)多態(tài)化
if(arguments.length == 3 && typeof(arguments[2]) == "object"){
intrusion = arguments[2];
}
else if(arguments.length > 2){
for(var i=2; i< arguments.length; i++){
intrusion.push(arguments[i]);
}
}
var _lg = "";
try{
_lg = _this.DATA[pageName][key][_this.language] || "";
if(!intrusion || intrusion.length == 0){
return _lg;
}
_lg = _lg.replace(/{d+}/g, function( word ){
return intrusion[word.match(/d+/)];
});
return _lg;
}catch (e){
console.warn("未找到與"+ key +"相匹配的"+ _this.language +"語言");
return "";
}
}
};
主程序加上注釋也僅僅70行，很簡易。
步驟三：替換文本 配置使用的語言種類I18N.setLanguage("en-us"); //設(shè)置當(dāng)前使用的語言為美式英語
替換HTML文本
//格式上在借鑒angularjs雙向綁定的同時(shí)附加特定的標(biāo)識 標(biāo)題 替換為 {{i18n-title}}
//這里直接用jQuery的get方式進(jìn)行示例 //假設(shè)test.html可包含的文本為：{{i18n-title}} //語言資源文件使用步驟一示例的數(shù)據(jù) $.get(‘test.html’, function(htmlSrc){ var html = I18N.parse(htmlSrc, "page1"); console.log(html); //將輸出title $("body").html(html); });替換JS中的文本
用于拼接字符串時(shí)處理含文本的字符，簡單的舉個(gè)栗子：
//調(diào)用方法:getText(pageName, key, v1, v2, v3) 參數(shù)v1,v2,v3用于處理動態(tài)數(shù)據(jù)，可為空，字符串格式，只存在v1時(shí)可為數(shù)組
var _src = ""
+ I18N.getText("page2", "title", ["listManager.js", "10"])
+"";
console.log(_src ); //將輸出 10 people use listManager.js
推薦個(gè)表格組件: GridManager
快速、靈活的對Table標(biāo)簽進(jìn)行實(shí)例化，讓Table標(biāo)簽充滿活力。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104380.html
摘要：近期在做國際化的改造，做了相應(yīng)的調(diào)研，簡單做下項(xiàng)目前端國際化的小結(jié)國際化可以分為前端國際化和后端國際化，也可以是前后端組合的國際化后端多為國際化，這里不做展開，百度一下到處都是常見型常見的前端國際化方法步驟如下原理定義國際化配置根據(jù)環(huán)境讀取 近期在做國際化的改造，做了相應(yīng)的調(diào)研，簡單做下項(xiàng)目前端國際化的小結(jié) 國際化可以分為前端國際化和后端國際化，也可以是前后端組合的國際化后端多為spr...
摘要：近期在做國際化的改造，做了相應(yīng)的調(diào)研，簡單做下項(xiàng)目前端國際化的小結(jié)國際化可以分為前端國際化和后端國際化，也可以是前后端組合的國際化后端多為國際化，這里不做展開，百度一下到處都是常見型常見的前端國際化方法步驟如下原理定義國際化配置根據(jù)環(huán)境讀取 近期在做國際化的改造，做了相應(yīng)的調(diào)研，簡單做下項(xiàng)目前端國際化的小結(jié) 國際化可以分為前端國際化和后端國際化，也可以是前后端組合的國際化后端多為spr...
摘要：前端通用國際化解決方案背景前端技術(shù)日新月異，技術(shù)棧繁多。接下來針對這幾塊內(nèi)容并結(jié)合日常的開發(fā)流程說明國際化的通用解決方案。 文章首發(fā)于個(gè)人blog，歡迎大家關(guān)注。 DI18n 前端通用國際化解決方案 背景 前端技術(shù)日新月異，技術(shù)棧繁多。以前端框架來說有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等構(gòu)建工具去滿足日常的開...
摘要：前不久做了一個(gè)國際化的項(xiàng)目，基于和，里面用到了國際化，使用方式也很簡單然后，頁面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語言顯示在頁面，比如在中文環(huán)境下顯示中文，英文環(huán)境下顯示英文，用戶看得到才算數(shù)。 關(guān)于國際化 一個(gè)項(xiàng)目發(fā)展到一定的環(huán)境或者一開始就是為多國打造的，就需要考慮國際化了。簡單來說，就是一套頁面，多套語言。 前不久做了一個(gè)國際化的項(xiàng)目，基于...
摘要：前不久做了一個(gè)國際化的項(xiàng)目，基于和，里面用到了國際化，使用方式也很簡單然后，頁面所有的官方組件都變成了中文默認(rèn)是英文。前端配置是指如何根據(jù)需要把需要展示的語言顯示在頁面，比如在中文環(huán)境下顯示中文，英文環(huán)境下顯示英文，用戶看得到才算數(shù)。 關(guān)于國際化 一個(gè)項(xiàng)目發(fā)展到一定的環(huán)境或者一開始就是為多國打造的，就需要考慮國際化了。簡單來說，就是一套頁面，多套語言。 前不久做了一個(gè)國際化的項(xiàng)目，基于...
