【技术干货】基于Jquery实现Web应用国际化

本文作者:上海驻云NodeJS开发工程师   张弛

随着NodeJS技术的蓬勃发展,越来越多的公司选择使用JS作为WEB应用的前后端开发语言。与此同时,他们的目光不仅仅局限于国内市场,而是开始展望整个国际市场。等等,在你考虑如何将自己的产品和服务提供给国外客户之前,首先要完成的一个重要工作就是软件国际化。

 

什么是软件国际化?


简单的说,软件国际化就是指程序的设计和开发过程中使得功能和代码设计能处理多种语言和文化习俗,能够在创建不同语言版本时,不需要重新设计源程序代码的软件工程方法。

 

如果要开发一款要支持多国语言的Web应用,我们需要将语言资源从源代码中抽取、对语言进行翻译、重新导入到源代码中并且调整UI界面。接下来就以一款以JS为开发语言的Web 应用为例来探讨下如何现实国际化 。

 

在讨论实现国际化之前, 我们先看看选定的开发框架。如果选择时下流行的AngularJS, 那么恭喜你,因为你可以使用强大的angular-gettext插件来完成这项任务。

传送门:https://angular-gettext.rocketeer.be/

因为这个库的文档和功能相对比较完备, 就不再多做叙述。

如果选择的是基于JQuery来进行开发,那么github上有一个开源库一定能帮到你。 今天重点讨论的也是如何使用这个库来实现软件国际化。

传送门:https://github.com/wikimedia/jquery.

i18n顾名思义这个库是基于JQuery并专门适用于实现软件国际化。

主要实现的步骤如下:


1. 第一步当然是将这个开源库克隆到本地,并将所需要的全部js文件引入到项目中。

 

2. 根据网站中文档的提示,在开发目录下建立名为i18n的目录,并为对应的语言生成json后缀的文件。(也可以放到一个文件中,不过一般比较复杂的应用还是推荐将不同的语言分开放置)这个文件存放的就是一个JSON 对象,属性就是抽取出的字符串的键值,对应的值当然就是我们翻译的字符串。

 

在这里例子里,直接使用了中文作为键值,实际开发情况下,可以按需要更换。

3. 接下来就可以在应用初始化的地方加入一段逻辑来进行初始化。

在这里,我们从cookie中获取到当前语言,然后读取i18n目录下的语言资源文件,读取完成以后调用$(".data-i18n").i18n()这个方法。

请注意到这个方法非常重要,它的作用就是把当前语言的字符串替换到页面中显示出来。所以当页面内容发生改变或者切换语言之后都需要调用这个方法,否则页面上的字符串是不会发生改变的。

4. 初始化逻辑添加完之后,在开发前后端逻辑的时候,就可以加入国际化的逻辑了。看看以下例子:

对于前段页面来说,主要工作就是给需要翻译的html元素加上一个data-i18n的属性后。当页面加载的时候,i18n库会寻找有data-i18n的元素,设法获取到翻译的字符串并进行替换。

而对于后端逻辑而言, js库也提供了一系列方法供我们调用。最简单的用法就是调用$.i18n()方法并且传入一个key,JS库会设法找到对应的翻译字符串并且返回这些字符串。除此之外还有更多方法可供调用,如需帮助可以查看帮助文档。

5. 在实际的开发过程中,你肯定会觉得手动去添加和维护这些JSON文件简直就是噩梦。不用着急,这个时候我们可以使用脚本来替代繁琐的步骤,既轻松又不会出错。

假如你的脚本语言是gulp,那么请插入下面的逻辑:


这段用gulp编写的脚本会遍历全部的hbs文件(例子中选择的是handlebar模板)过滤出拥有data-i18n属性的html元素,并且把键值写入到语言资源文件中,假如翻译不存在则value会设定为”MISSING”。所以当你更新了前后端的代码时,记得运行gulp脚本来更新JSON文件。这样在开始翻译工作时,注意那些

“MISSING”的值就可以了。

确保所有的字符串都抽取到JSON文件以后,最艰巨的工作才刚刚开始。不要简单的以为谷歌翻译或者其他软件能帮你搞定全部的翻译。事实上,假如只是从字面意思来做翻译,那么你的最终用户可能会看的一头雾水。考虑到文化的差异,有很多语言按照字面意思直接翻译出来可能让用户觉得很怪异,甚至有可能误导用户。再加上如果翻译出来的语言长短相差太多,有可能对UI界面产生影响,所以在翻译时还要考虑句子的长短和合理的使用缩写。

本文到这里就结束了,希望能让大家对如何实现软件国际化有个比较直观的了解。同时,如果喜欢我们的话就赶紧订阅我们吧~~~每天定时推送新鲜干货~~~也可以关注我们的微信公众号:架构云~~~每天同步更新呦~~~





时间: 2025-01-24 07:44:45

【技术干货】基于Jquery实现Web应用国际化的相关文章

(分享)基于JQuery的WEB套打设计器jatoolsPrinter2.0

问题描述 开发web套打应用时,如快递单打印,一般要经过以下步骤:1.扫描快递单据,保存成一个图片文件2.将底图作成<img>3.在<img>上放置打印项,试着打印到打印机,观察有无偏移4.有偏移,则调整,再试打.5.无偏移,则将样张,改造成相应语言的动态页面,如jsp,asp,php等.上述过程中,如果没有可视化的设计工具,3,4两步是最麻烦的,往往要经过多次调整,特别是单据比较多的应用,工作量挺大.所以,jatoolsPrinter打印控件的套打开发设计器,就是帮助你简化套打对

(分享)基于JQuery的WEB套打设计器jatoolsPrinter1.0

问题描述 开发web套打应用时,如快递单打印,一般要经过以下步骤:1.扫描快递单据,保存成一个图片文件2.将底图作成<img>3.在<img>上放置打印项,试着打印到打印机,观察有无偏移4.有偏移,则调整,再试打.5.无偏移,则将样张,改造成相应语言的动态页面,如jsp,asp,php等.上述过程中,如果没有可视化的设计工具,3,4两步是最麻烦的,往往要经过多次调整,特别是单据比较多的应用,工作量挺大.所以,jatoolsPrinter打印控件的套打开发设计器,就是帮助你简化套打对

自己动手制作基于jQuery的Web页面加载进度条插件_jquery

静态效果的实现 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 大体的写法如下: body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { positio

基于jquery的web页面日期格式化插件_jquery

复制代码 代码如下: (function ($) { var FormatDateTime = function FormatDateTime() { }; $.FormatDateTime = function (obj, IsMi) { var correcttime1 = eval('( new ' + obj.replace(new RegExp("\/", "gm"), "") + ')'); var myDate = correctt

基于jQuery的Web上传插件Uploadify使用示例_jquery

Uploadify是一款功能强大,高度可定制的文件上传插件,实现的效果非常不错,带进度显示.在最简单的方式下,Uploadify使用很少的代码就可以运行起来. Uploadify官方下载地址:http://www.uploadify.com/download/ 测试例子以下是一个使用的简单例子: 这里我们采用了Uploadify包中自带的php测试脚本作为上传的处理,所以这里安装了wamp作为php的测试环境,在php的网站根目录中,解压上面下载好的Uploadify文件,并创建一个文件上传保存

来自国外的30个基于jquery的Web下拉菜单_jquery

jQuerySmooth Navigation Menu Simple Drop Down Menu Plugin Dropdown, iPod Drilldown, and Flyout styles   jQuery and CSS Example Create the Fanciest Drop Down Menu You Ever Saw A Different Top Navigation Simple jQuery Dropdowns Sexy Drop Down Menu with

一起谈.NET技术,基于.NET的大型Web站点StackOverflow架构分析

原文链接:Stack Overflow Architecture Update - Now At 95 Million Page Views A Month 编译/博客园 Stack Overflow网址:http://stackoverflow.com/ 当前访问量:每月9500PV(每天300多万PV) 当前Alexa排名:149 所用.NET技术:C#.Visual Studio 2010 Team Suite.ASP.NET 4.ASP.NET MVC 3.Razor.LINQ to S

用SVG技术实现基于Web的GIS

web 引言 SVG(Scalable Vector Graphics)是一种基于XML 的用来描述二维矢量图形和矢量/点阵混合图形的置标语言,是一种全新的矢量图形规范. SVG规范定义了SVG的特征.语法和显示效果,包括模块化的XML命名空间(namespace)和SVG文档对象模型(DOM). SVG的绘图可以通过动态和交互式方式进行,在实际操作中,则是以嵌入方式或脚本方式来实现的.SVG不仅提供超链接功能,还定义了丰富的事件.由于SVG支持脚本语言(script),可以通过Script编程

php基于jquery的ajax技术传递json数据简单实例_php技巧

本文实例讲述了php基于jquery的ajax技术传递json数据简单实现方法.分享给大家供大家参考,具体如下: html页面: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.mi