一个极端的前端国际化方法

骑猪看日落 2022-07-17 03:10 248阅读 0赞

最近一直在做整个页面的国际化，相信很多小伙伴们都做过，前端主要采用的是Angularjs，后端使用的是Spring来做国际化，那么他们的优点，缺点现在一起来总结一下。其实无论用哪种语言做国际化，感觉都是千篇一律，只不过实现的方式不同而已。

1.定义国际化配置（什么CN啊EN啊之类的）

2.读取国际化配置

3.定义自己的国际化方式（是通过切面也好，工具类也好）

# AngularJs国际化 #

1.定义国际化配置；

在自己指定的目录下定义国家化配置文件吧，大部分只要求实现中文和英文，所以定义两套，以key和value的形式。

en.json 文件内容如下:

{"100001":"Login","100002":"Register"}

cn.json 文件内容如下:

{"100001":"登录","100002":"注册"}

2.读取国际化配置

AngularJs读取国际化配置的时候要引入Angularjs的相关Js。

//然后在页面引用进去
    <script src="/vender/angular-1.3.8.js"></script>
    <script src="/vender/bower-angular-translate-2.4.2/angular-translate.min.js"></script>
    <script src="/bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>

第一个文件 angular-1.3.8.js 就不用多说了.你懂的.
    
    第二个文件 angular-translate.min.js 是angular官方提供的国际化模块
    
    第三个文件 angular-translate-loader-static-files.min.js 模块是用来读取本地文件的模块,因为我们的翻译内容都是独立的 json 文件.

接下来通过注入依赖来读取配置文件:

var app = angular.module('myApp', ['pascalprecht.translate'])
    .config(['$translateProvider',function($translateProvider){
            var lang = window.localStorage.lang||'cn';
        $translateProvider.preferredLanguage(lang);
        $translateProvider.useStaticFilesLoader({
            prefix: '/i18n/',
            suffix: '.json'
        });
    }]);

分解的看下上面的代码:

var app = angular.module('myApp', ['pascalprecht.translate']);

这一句就是告诉我们已经把 angular-translate 模块以一个依赖项加载进来.

.config(['$translateProvider',function($translateProvider)

config 函数用 $translateProvider 服务配置 $translate 服务实现.

我们上面使用了 localStorage.lang  来存储用户上一次选择的语言,如果用户是第一次范围,默认显示中文(及 加载 cn.json 文件来翻译)

$translateProvider.preferredLanguage(lang)

这一句告诉 angular.js 哪种语言是默认已注册的语言.

$translateProvider.useStaticFilesLoader({
            prefix: '/i18n/',
            suffix: '.json'
        });

上面的语句告诉我们 angular.js 应该加载本地那些国际化语言配置文件.

prefix : 指定文件前缀.

suffix: 指定文件后缀.

定义自己的国际化实现方式：

现在我们先准备在html页面里做国际化,首先想到做一个过滤器,在html页面使用起来是最方便的. /filters/ 目录下创建 T.js 过滤器

angular.module("myApp").filter("T", ['$translate', function($translate) {
        return function(key) {
            if(key){
                return $translate.instant(key);
            }
        };
    }]);

过滤器也有两种实现方式，一种是通过双向绑定，在后台去过滤页面值，找到自己定义的国际化信息，并且输出。

假如登录的控制器 LoginCtrl.js 有一个登录标签需要做国际化:

angular.module('myApp').controller('LgoinCtrl', ['$scope','T',
        function($scope,T) {
            
            $scope.login=T.T(100001);
        
        }
    ]);

那么这意味着，页面的元素也需要绑定一个ng-model。

那么使用另外一种，就直接在页面进行过滤了。

Spring国际化

在网上找到了一篇写的不错的文章，这里转载一下，就懒得自己写了，这里说明一下为什么要做后台国际化，主要是对业务异常的信息提示，来做国际化的，这一块也会用到。

原文地址：http://a123159521.iteye.com/blog/1323317

覆写ResourceBundleMessage.   
Spring留接口，其设计给力啊，很容易扩展。