jQuery.i18n实现前端国际化有哪些方法

这次给大家带来jQuery.i18n实现前端国际化有哪些方法,jQuery.i18n实现前端国际化的注意事项有哪些,下面就是实战案例,一起来看一下。

在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化。国际化英文单词为:Internationalization,又称 i18n,“i”为单词的第一个字母,“18”为“i”和“n”之间单词的个数,而“n”代表这个单词的最后一个字母。在计算机领域,国际化是指设计能够适应各种区域和语言环境的软件的过程。

jQuery.i18n.properties 是一款轻量级的 jQuery 国际化插件。与 Java 里的资源文件类似,jQuery.i18n.properties 采用.properties 文件对 JavaScript 进行国际化。jQuery.i18n.properties 插件根据用户指定的(或浏览器提供的 )语言和国家编码(符合 ISO-639 和 ISO-3166 标准)来解析对应的以“.properties”为后缀的资源文件。

利用资源文件实现国际化是一种比较流行的方式,例如 Android 应用就可以采用以语言和国家编码命名的资源文件来实现国际化。jQuery.i18n.properties 插件中的资源文件以“.properties”为后缀,包含了区域相关的键值对。我们知道,Java 程序也可以使用以 .properties 为后缀的资源文件来实现国际化,因此,当我们要在 Java 程序和前端 JavaScript 程序中共享资源文件时,这种方式就显得特别有用。jQuery.i18n.properties 插件首先加载默认的资源文件(例如:strings.properties),然后加载针对特定语言环境的资源文件(例如:strings_zh.properties),这就保证了在未提供某种语言的翻译时,默认值始终有效。开发人员可以以 JavaScript 变量(或函数)或 Map 的方式使用资源文件中的 key。

下面介绍一下如何在项目中如何使用i18n,说明一下,我这里与官网并不相同,i18n的一些方法我并没有用,只是用到了很少的一部分,而且找出了比较适合我们项目使用的方式。

1.首先,建立资源文件:

jQuery.i18n实现前端国际化有哪些方法

locales/en-us/ns.jsp.json:

{  "reSendMail": {   "emailSendFail": "Failed to send the email",   "emailHasSendToYourEmail": "The email has be sent to your email address. "  },  "login": {   "pleaseWriteUserName": "Please input your username",   "pleaseWritePassword": "Please input your password "  },  "activeRegist": {   "thisUserEmailHasUsed":"Email has already been used",   "thisUserNameHasUsed":"User Name has already been used",   "4to30Char":"Please enter 4-30 characters",   "1to50Char":"Please enter 1-50 characters",   "1to16Linkman":"Please enter 1-16 characters",   "loginPage":"Login Page",   "EmailMustNotEmpty": "Email can't be blank",   "PWDNotEmpty": "Password can't be blank",   "nameNotEmpty":"Name can't be blank",   "conpanyNotEmpty":"Company can't be blank",   "qqNotEmpty":"QQ can not be blank",   "phoneNotEmpty":"Mobile can not be blank",   "least50charEmailAddress":"No more than 50 characters for email address",   "enterEmailAddressLikeThis":"Email address format 'abc@abc.com'",   "enter6To32Character":"Please enter 6-32 characters",   "NameMost30Character":"No more than 30 characters for name",   "QQTypeIsWrong":"Incorrent QQ format",   "phoneTypeNotCorrect":"Incorrent mobile format",   "thisEmailHasRegistered":"Email address has already been registered",   "registerFail":"Registration failed!",    "TwoTimesPWDIsDifferent":"The passwords you entered do not match. Please try again."  } }

登录后复制

中文配置文件就不写了,格式一样,用了map的形式份模块来写。

2.在jsp页面上引入i18n.js并初始化i18n

   i18n.init({  lng:'${sessionScope.language }',  ns: { namespaces: ['ns.jsp'], defaultNs: 'ns.jsp'},  useLocalStorage: false }); 

登录后复制

3.js引用

var emailflag = false; function checkemail() {  check('email', 'emailmessage');  var email = $("#email").attr("value");  if(email != null && email != "") {   if(email.length > 50) {    setpInfo("emailp", i18n.t('activeRegist.least50charEmailAddress'), 1);//请输入50字符内的邮箱地址   } else {    if(isEmail(email, $("#email"))) {     checkemailForServer(email);    } else {     setpInfo("emailp", i18n.t('activeRegist.enterEmailAddressLikeThis'), 1);//请输入邮箱地址,格式为abc@abc.com    }   }  } }

登录后复制

4.测试

jQuery.i18n实现前端国际化有哪些方法

jQuery.i18n实现前端国际化有哪些方法

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

怎样操作node实现爬虫效果

怎样使用jQuery.i18n.properties让JS代码国际化

以上就是jQuery.i18n实现前端国际化有哪些方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2752222.html

(0)
上一篇 2025年3月8日 06:18:57
下一篇 2025年1月3日 23:35:12

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue组件基础使用方法有哪些

    这次给大家带来vue组件基础使用方法有哪些,vue组件基础使用的注意事项有哪些,下面就是实战案例,一起来看一下。 什么是组件 组件(Component)是对数据和方法的简单封装。web中的组件其实可以看成是页面的一个组成部分,它是一个具有独…

    2025年3月8日
    200
  • Vue前端开发有哪些规范

    这次给大家带来Vue前端开发有哪些规范,Vue前端开发规范的注意事项有哪些,下面就是实战案例,一起来看一下。 基于Vue官方风格指南整理 一、强制 1. 组件名为多个单词 组件名应该始终是多个单词的,根组件 App 除外。 正例: expo…

    2025年3月8日
    200
  • 变量声明var,let.const使用有哪些区别

    这次给大家带来变量声明var,let.const使用有哪些区别,变量声明var,let.const使用的注意事项有哪些,下面就是实战案例,一起来看一下。 var声明变量的作用域限制在其声明位置的上下文中 var x = 0; // x是全局…

    编程技术 2025年3月8日
    200
  • web开发中事件处理规则有哪些

    这次给大家带来web开发中事件处理规则有哪些,web开发中事件处理的注意事项有哪些,下面就是实战案例,一起来看一下。 事件处理 我们知道事件触发时,事件对象(event对象)会作为回调参数传入事件处理程序中,举个例子: // 不好的写法fu…

    编程技术 2025年3月8日
    200
  • 在vue中使用echarts3.0自适应的方法有哪些?

    这篇文章主要介绍了vue中echarts3.0自适应,现在分享给大家,也给大家做个参考。 前端时间做一个vue的项目,echart是按需引入的如下: // 引入 ECharts 主模块import echarts from ‘echarts…

    编程技术 2025年3月8日
    200
  • React国际化指南:如何实现多语言的前端应用

    React国际化指南:如何实现多语言的前端应用 引言: 随着全球化的发展,越来越多的网站和应用需要支持多语言功能,以满足不同地区用户的需求。在前端开发中,React是一种非常流行的框架,那么如何在React应用中实现多语言支持呢?本文将为大…

    2025年3月7日
    200
  • JavaScript开发中的国际化与本地化经验分享

    随着互联网的发展,全球化已成为趋势,无论是企业还是个人,都在不同程度上与全球市场发生联系。在开发过程中,如何实现国际化和本地化已成为一个重要问题。本文将分享一些JavaScript开发中的国际化与本地化经验。 首先,让我们看看国际化和本地化…

    2025年3月7日
    200
  • JavaScript开发中的国际化与多语言支持经验分享

    在当今全球化的时代,软件开发不再局限于特定的地域和语言。越来越多的企业和开发者都开始关注国际化和多语言支持的问题。在JavaScript开发中,如何有效地实现国际化和多语言支持,成为了一个重要的议题。本文将分享一些关于JavaScript开…

    2025年3月7日
    200
  • 了解JavaScript中的国际化和多语言支持

    了解JavaScript中的国际化和多语言支持,需要具体代码示例 随着全球化的发展,越来越多的网站和应用程序需要支持多语言,以满足不同国家和地区用户的需求。JavaScript作为一种广泛使用的脚本语言,也需要提供国际化和多语言支持的功能。…

    2025年3月7日
    200
  • Java 框架的国际化和本地化支持如何?

    java 框架为国际化 (i18n) 和本地化 (l10n) 提供支持,以便应用程序能够支持多种语言和区域设置。主要 i18n/l10n 方法包括:基于资源束的本地化:使用属性文件或 java 类管理翻译文本和文化特定信息。spring i…

    2025年3月6日
    200

发表回复

登录后才能评论