首页 > Web开发 > 详细

[经验] 使用 jQuery+JSON 实现国际化

时间:2019-05-22 16:04:16      阅读:212      评论:0      收藏:0      [点我收藏+]

 

技术选型关键词:  [spring boot] [jQuery] [JSON] [JSP]

前言: 关于国际化, 我在一开始的时候就有一个误解, 我认为所谓国际化就是编写一段高技术含量的代码, 然后这段代码会帮助我们实现自动翻译............

emmm,,事实证明我还是太年轻了.....

其实呢, 所谓的国际化, 就是为这个项目装准备两种语言甚至更多语言的文本翻译文件, 意思就是, 翻译是必须的, 手动是不可少的, 国际化其实没有那么高大上, 就只是切换字符串文本而已!!!!!!!

举个例子: 比如说你要做中文和英文国家的国际化, 那么你要做的就是

 

一: 在根目录上新建一个文件夹, 来保存语言包

技术分享图片技术分享图片

所谓的语言包, 就是一种键名相同, 但是值的名字不同的文件的文件夹, 比如在上图种,  index_en.json 里面存放的就是英文的文本, 如果一个项目很大的话, 还是建议将不同的网页上的语言抽象出来统一管理, 这样也方便后期的维护, 例如 上图的语言文件的意思就是: index页面的 中文(cn) 和 英文(en) 的翻译文本.

来, 用一个比较详细的例子对上文进行验证:

(1) 首先, 准备一个页面, 我就用最简单的一个登录页面来做为例子啦

技术分享图片

如你所见, 这张图片上的文本有:   登录  用户名  密码  立刻登录  国家(地区)   中国(zh-CN)  美国(en-US)

(2)  然后我们就在  webapp / resource / i18n  目录下新建两个 json 文件, 一个叫  login_cn.json, 一个叫 login_en.json , 并添加对应的 map 数据

技术分享图片技术分享图片

就是酱紫啦

紫色的英文是文件的 KEY, 通过调用 KEY 就可以得到对应的绿色文本(VALUE)

 

二, HTML 部分的代码

技术分享图片

emmmm  这种代码应该是可以看懂的吧,,,,,,,,,,,,

三.jQuery 代码     核心!!!!!!

技术分享图片

emmmmm,,,,,,我猜,,,,这也应该是可以看懂的哈

OK,,,其实到这里, 一个简单且强大的国际化就可以完成啦

选中中文的时候

技术分享图片

选中英文的时候

技术分享图片

看, 就是这么简单啦, 当然我相信这种程度的代码量大家还是可以手敲的, 直接复制粘贴的话呢, 也未免太懒了吧.............................

嘤嘤嘤,,,想想这个过程还是十分曲折的, 毕竟自己探路的过程太痛苦了,,希望可以对需要的人有所帮助

 

[经验] 使用 jQuery+JSON 实现国际化

原文:https://www.cnblogs.com/unityworld/p/10906103.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!