前端国际化

youkede 发布于2019-08-23 17:56 / 862人阅读

摘要：年末，部门项目需要推国际化，前端这块由我来主导。选择方式目前了解到的前端国际化有以下两种方式按语言种类分别开发前端界面这种方式貌似给人一种很的感觉且觉着文件会无限多。

前言

</>复制代码 
从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文本

首先需要将HTML中原文本更换为{{i18n-*}}格式的标记，举个栗子：

</>复制代码 
//格式上在借鉴angularjs双向绑定的同时附加特定的标识
标题 替换为 {{i18n-title}}

然后在获取到这段HTML的string格式文件后进行匹配

</>复制代码 
//这里直接用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标签充满活力。

GPU云服务器云服务器前端前端前端编程前端前端培训前端前端前端学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104380.html

【整理】前端国际化小结

摘要：近期在做国际化的改造，做了相应的调研，简单做下项目前端国际化的小结国际化可以分为前端国际化和后端国际化，也可以是前后端组合的国际化后端多为国际化，这里不做展开，百度一下到处都是常见型常见的前端国际化方法步骤如下原理定义国际化配置根据环境读取近期在做国际化的改造，做了相应的调研，简单做下项目前端国际化的小结国际化可以分为前端国际化和后端国际化，也可以是前后端组合的国际化后端多为spr...

android_c 2019-08-22 11:10 评论0 收藏0
【整理】前端国际化小结

摘要：近期在做国际化的改造，做了相应的调研，简单做下项目前端国际化的小结国际化可以分为前端国际化和后端国际化，也可以是前后端组合的国际化后端多为国际化，这里不做展开，百度一下到处都是常见型常见的前端国际化方法步骤如下原理定义国际化配置根据环境读取近期在做国际化的改造，做了相应的调研，简单做下项目前端国际化的小结国际化可以分为前端国际化和后端国际化，也可以是前后端组合的国际化后端多为spr...

LoftySoul 2019-08-01 17:37 评论0 收藏0
前端通用国际化解决方案

摘要：前端通用国际化解决方案背景前端技术日新月异，技术栈繁多。接下来针对这几块内容并结合日常的开发流程说明国际化的通用解决方案。文章首发于个人blog，欢迎大家关注。 DI18n 前端通用国际化解决方案背景前端技术日新月异，技术栈繁多。以前端框架来说有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等构建工具去满足日常的开...

lingdududu 2019-08-20 15:46 评论0 收藏0
前端国际化的另类方式

摘要：前不久做了一个国际化的项目，基于和，里面用到了国际化，使用方式也很简单然后，页面所有的官方组件都变成了中文默认是英文。前端配置是指如何根据需要把需要展示的语言显示在页面，比如在中文环境下显示中文，英文环境下显示英文，用户看得到才算数。关于国际化一个项目发展到一定的环境或者一开始就是为多国打造的，就需要考虑国际化了。简单来说，就是一套页面，多套语言。前不久做了一个国际化的项目，基于...

FullStackDeveloper 2019-08-23 13:09 评论0 收藏0
前端国际化的另类方式

摘要：前不久做了一个国际化的项目，基于和，里面用到了国际化，使用方式也很简单然后，页面所有的官方组件都变成了中文默认是英文。前端配置是指如何根据需要把需要展示的语言显示在页面，比如在中文环境下显示中文，英文环境下显示英文，用户看得到才算数。关于国际化一个项目发展到一定的环境或者一开始就是为多国打造的，就需要考虑国际化了。简单来说，就是一套页面，多套语言。前不久做了一个国际化的项目，基于...

everfight 2019-08-02 11:59 评论0 收藏0

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

前端国际化

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

首先需要将HTML中原文本更换为{{i18n-*}}格式的标记，举个栗子：

</>复制代码

然后在获取到这段HTML的string格式文件后进行匹配

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章

**【整理】前端国际化小结**

**【整理】前端国际化小结**

**前端通用国际化解决方案**

**前端国际化的另类方式**

**前端国际化的另类方式**

发表评论

0条评论

youkede

女|高级讲师

TA的文章

最新活动