js 前端实现国际化配置

最近项目中需求配置国际化，再网上找了相关资料，最后选择了i18n来处理国际化，可是在使用过程中碰到了兼容性的问题，后来想想就自己用js实现了一个简单的国际化配置，具体实现步骤如下：

1，参考i18n的实施过程，其实就是配置一个静态文件，然后再动态的去读取其中的值，最后在根据读取到的值更新相应的字段即可。

我将静态配置文件放在lib/i18n下，其中en里面配置的是静态的英文配置，zh是相应的中文字段，

如果有其他语言可以在添加相应的文件夹，而静态文件就是一个返回js对象的js文件，里面写好相应的

字段来配置值，

而所有需要变换语言的地方我都配置了相应的class及一个自定义属性

<thead>
<tr><th class="i18n" data-title="HeadImage" style="width: 80px">头像</th><th class="i18n" data-title="userName">姓名</th><th class="i18n" data-title="ContactWay">联系方式</th><th class="i18n" data-title="time">申请时间</th><th class="i18n" data-title="status">状态</th><th class="i18n" data-title="action">操作</th>
</tr>

其中data-title所指向配置文件中的对象的属性名

再需要转换语言时，就可以

object[$(".i18n").attr("data-title")]来获取相应的值并赋值

由于一般国际化需要将当期视图的所有静态字段转换，我将每个页面都单独配置了一个文件

具体转换步骤我单独写在了myi18n.js里面，以下就是代码

changeLan:function (options) {var name = options.name||"index";//本项目默认文件为index.properties
    var lan = options.lan;var callbacks = options.callback;var path = "lib/i18n/"+lan+"/"+name;requirejs([path],function (lanObject) {callbacks(lanObject);})
},

common:function (options) {var callback = function (object) {var insertEle = $(".i18n"),errArr=[];for(var i=0,l=insertEle.length;i<l;i++){var item = $(insertEle[i]);var text = object[item.attr('data-title')];if(!text){errArr.push((item.attr('data-title')+" not found"));}else{item.html(text);}}

        // insertEle.each(function() {
        //     var item = $(this);
        //     // 根据i18n元素的 name 获取内容写入
        //     item.html($.i18n.prop(item.attr('data-title')));
        // });
        var insertInputEle = $(".i18n-input");for(var i=0,l=insertInputEle.length;i<l;i++){var item = $(insertInputEle[i]);var selectAttr = item.attr('selectattr');var attrName = selectAttr.split("_")[1];if (!attrName) {attrName = "value";};var text = object[item.attr('selectattr')];if(!text){errArr.push((item.attr('selectattr')+" not found"))}else{item.attr(attrName, object[item.attr('selectattr')]);}}if(errArr.length !== 0){console.log(errArr);}// insertInputEle.each(function() {
        //     var item = $(this);
        //     var selectAttr = item.attr('selectattr');
        //     var attrName = selectAttr.split("_")[1];
        //     if (!attrName) {
        //         attrName = "value";
        //     };
        //     item.attr(attrName, $.i18n.prop(item.attr('selectattr')));
        // });
    }options.callback = callback;this.changeLan(options);
}

以上就是我做国际化文件的一个心得，如果大家有什么好的建议请多多指教

js 前端实现国际化配置相关推荐

js进行i18n国际化配置
下面是对js的国际化的配置步骤: 1.下载jquery.i18n.properties-min-1.0.9.js,这是下载地址:https://download.csdn.net/upload/110 ...
Next.js国际化配置
Next.js国际化配置我使用的是next-i18next这个包. 根据next-i18nextnpm包中提示,下载相应的插件: yarn add next-i18next react-i18nex ...
前端通用国际化解决方案 di18n-translate
di18n-translate 前端通用国际化解决方案背景前端技术日新月异,技术栈繁多.以前端框架来说有React, Vue, Angular等等,再配以webpack, gulp, Browse ...
使用 jQuery.i18n.properties 实现 Web 前端的国际化
jQuery.i18n.properties 简介在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization, ...
如何为你的项目添加国际化配置（umi@3的国际化实践）
本文主要是针对基于umi@3的前端框架的国际化方案国际化的项目,之前实践的很少,上次踩了一次坑,发现不少问题,在这里总结一下,希望大家能提前感知,避免踩坑. 国际化要做什么事? 国际化要求从产品中抽 ...
active server pages 错误 asp 0126_微信小程序全栈开发课程【视频版】2.1 小程序前端页面初始配置、ESlint格式错误...
点击观看视频 ↓↓↓ 小程序前端页面初始配置.ESlinthttps://www.zhihu.com/video/1195030595196223488 课程文字版 1.修改src/pages文件夹 ...
AngularJS国际化配置
2019独角兽企业重金招聘Python工程师标准>>> AngularJS国际化配置下载angular-translate 下载zip包:https://github.com/an ...
vue-i18n及ElementUI国际化配置步骤
1.vue-I18n使用 1.1.下载依赖注意:vue2.0要用8版本的,使用9版本的会报错 npm install vue-i18n // 默认安装最新版本npm i vue-i18n@8.27. ...
Node.js、npm环境配置与Vue项目创建
目录一.Node.js.npm简介 1. Node.js 2. npm 3. npm和Node.js的发展二.Node.js(内置npm)的下载与安装三.Vue CLI脚手架的安装与项目的创建: ...

js 前端实现国际化配置

js 前端实现国际化配置相关推荐

最新文章

热门文章