摘要：年末，部门项目需要推国际化，前端这块由我来主导。选择方式目前了解到的前端国际化有以下两种方式按语言种类分别开发前端界面这种方式貌似给人一种很的感觉且觉着文件会无限多。
前言
从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标签充满活力。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104380.html
摘要：近期在做国际化的改造，做了相应的调研，简单做下项目前端国际化的小结国际化可以分为前端国际化和后端国际化，也可以是前后端组合的国际化后端多为国际化，这里不做展开，百度一下到处都是常见型常见的前端国际化方法步骤如下原理定义国际化配置根据环境读取 近期在做国际化的改造，做了相应的调研，简单做下项目前端国际化的小结 国际化可以分为前端国际化和后端国际化，也可以是前后端组合的国际化后端多为spr...
摘要：近期在做国际化的改造，做了相应的调研，简单做下项目前端国际化的小结国际化可以分为前端国际化和后端国际化，也可以是前后端组合的国际化后端多为国际化，这里不做展开，百度一下到处都是常见型常见的前端国际化方法步骤如下原理定义国际化配置根据环境读取 近期在做国际化的改造，做了相应的调研，简单做下项目前端国际化的小结 国际化可以分为前端国际化和后端国际化，也可以是前后端组合的国际化后端多为spr...
摘要：前端通用国际化解决方案背景前端技术日新月异，技术栈繁多。接下来针对这几块内容并结合日常的开发流程说明国际化的通用解决方案。 文章首发于个人blog，欢迎大家关注。 DI18n 前端通用国际化解决方案 背景 前端技术日新月异，技术栈繁多。以前端框架来说有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等构建工具去满足日常的开...
摘要：前不久做了一个国际化的项目，基于和，里面用到了国际化，使用方式也很简单然后，页面所有的官方组件都变成了中文默认是英文。前端配置是指如何根据需要把需要展示的语言显示在页面，比如在中文环境下显示中文，英文环境下显示英文，用户看得到才算数。 关于国际化 一个项目发展到一定的环境或者一开始就是为多国打造的，就需要考虑国际化了。简单来说，就是一套页面，多套语言。 前不久做了一个国际化的项目，基于...
摘要：前不久做了一个国际化的项目，基于和，里面用到了国际化，使用方式也很简单然后，页面所有的官方组件都变成了中文默认是英文。前端配置是指如何根据需要把需要展示的语言显示在页面，比如在中文环境下显示中文，英文环境下显示英文，用户看得到才算数。 关于国际化 一个项目发展到一定的环境或者一开始就是为多国打造的，就需要考虑国际化了。简单来说，就是一套页面，多套语言。 前不久做了一个国际化的项目，基于...
