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