如果新项目要做系统国际化, 时下热门的任何一种技术选型都有成熟的方案,比如:

  1. vue + vue-i18n
  2. angular + angular-translate
  3. react + react-intl

但是老项目的国际化几乎是jquery + jquery.i18n.properties这种方案. 那么我们就来看看这种方案是如何实现的.

一. 引入必要的 js 文件

在项目中添加如下目录结构:

<script src="js/jquery.min.js"></script>
<script src="js/jquery.i18n.properties-1.0.9.js"></script>

二. 资源文件准备

i18n/resource/common.properties

name='姓名'
placeholder='请输入电话号码'
login='登录'

i18n/resource/common_en.properties

name='name'
placeholder= 'Please enter phone number'
login='login'

三. 标签赋值

一般情况下,我们标签里面的内容如果要做国际化,需要使用 $('#id').text($.i18n.prop('proName')); 来给标签赋值,现在问题来了,我们开发一个界面,有很多地方都需要去做国际化,我们总不能这样每一个页面每一个标签通过这种方式去赋值吧,这样工作量不是一点大,于是乎博主想,有没有一种比较好的通用的解决方案去给这些需要做国际化的标签统一赋值呢。html的data属性似乎是一个不错的选择!它具有可读性强、可维护性强、兼容jquery的data()方法等优点。比如我们修改国际化组件的方法如下

<script>
$(function(){
jQuery.i18n.properties({
name : 'common', //资源文件名称
path : '/i18n/resource/', //资源文件路径
mode : 'map', //用Map的方式使用资源文件中的值
callback : function() {
console.log("i18n赋值中...");
try {
//初始化页面元素
$('[data-i18n-placeholder]').each(function () {
$(this).attr('placeholder', $.i18n.prop($(this).data('i18n-placeholder')));
});
$('[data-i18n-text]').each(function () {
//如果text里面还有html需要过滤掉
var html = $(this).html();
var reg = /<(.*)>/;
if (reg.test(html)) {
var htmlValue = reg.exec(html)[0];
$(this).html(htmlValue + $.i18n.prop($(this).data('i18n-text')));
}
else {
$(this).text($.i18n.prop($(this).data('i18n-text')));
}
});
$('[data-i18n-value]').each(function () {
$(this).val($.i18n.prop($(this).data('i18n-value')));
});
}
catch(ex){ }
console.log("i18n写入完毕");
}
});
});
</script>

通过data属性获取标签,然后对每个标签通过对应的data-i18n-属性进行国际化赋值即可,这里暂时定义了三种类型data-i18n-placeholderdata-i18n-textdata-i18n-value的属性,如果有其他需求,可以增加其他类型。

然后看下我们html页面的使用

<p data-i18n-text='name'></p>
<input type="text" data-i18n-placeholder="placeholder">
<input type="button" data-i18n-value="login"></input>

这样不用写一句标签的赋值代码,即可对标签进行国际化

四. 最终效果

  • 中文环境下:

  • 英文环境下:

jquery.i18n.properties前端国际化方案的更多相关文章

  1. jquery.i18n.properties前端国际化解决方案“填坑日记”

    但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初接到这个任务,并没有太多顾虑,毕竟这种东西有很 ...

  2. 前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”

    前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...

  3. Web前端国际化之jQuery.i18n.properties

    Web前端国际化之jQuery.i18n.properties jQuery.i18n.properties介绍 国际化是如今Web应用程序开发过程中的重要一环,jQuery.i18n.propert ...

  4. 使用 jQuery.i18n.properties 实现 Web 前端的国际化

    jQuery.i18n.properties 简介 在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization, ...

  5. jQuery之前端国际化jQuery.i18n.properties

    jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,"i& ...

  6. 【转】jQuery之前端国际化jQuery.i18n.properties

    jQuery之前端国际化jQuery.i18n.properties 基于jQuery.i18n.properties 实现前端页面的资源国际化 jquery-i18n-properties

  7. jQuery之前端国际化jQuery.i18n.properties[转]

    http://www.ibm.com/developerworks/cn/web/1305_hezj_jqueryi18n/ jQuery.i18n.properties是一款轻量级的jQuery国际 ...

  8. jQuery国际化插件 jQuery.i18n.properties 【轻量级】

    jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,“i”为单词的第 ...

  9. 基于jQuery.i18n.properties实现前端网站语言多版本

    我是参考播客做了个demo:http://blog.csdn.net/aixiaoyang168/article/details/49336709 jQuery.i18n.properties采用.p ...

随机推荐

  1. wsl中的git问题

    当使用wsl打开Windows下的仓库时可能会出现所有文件都被标记为modified,这时一般有两种情况. 文件权限问题 由于wsl申请对文件的读写权限导致文件的权限发生改变.这时只需修改git的设置 ...

  2. Math基础使用

    /* java.lang.Math类是数学相关的工具类,里面提供的大量静态方法,完成与数学运算的操作 public static double abs(double num):获取绝对值. publi ...

  3. QQ空间自动点赞js脚本

    这是很久前写的脚本了,在浏览器打开QQ空间,并在控制台输入代码就可 时间间隔最好开大点,不然容易被暂时冻结账号 function autoLike() { var list=document.getE ...

  4. OSI、TCP/IP

    计算机网络分层的目的:支持异构网络系统的互联互通 7层OSI参考模型是法定标准(国际标准化组织ISO提出) 4层TCP/IP参考模型是事实标准 OSI参考模型 应用层.表示层.会话层.传输层.网络层. ...

  5. Django框架(八)--单表增删改查,在Python脚本中调用Django环境

    一.数据库连接配置 如果连接的是pycharm默认的Sqlite,不用改动,使用默认配置即可 如果连接mysql,需要在配置文件中的setting中进行配置: 将DATABASES={} 更新为 DA ...

  6. MySQL数据库(一)-- 数据库介绍、MySQL安装、基础SQL语句

    一.数据库介绍 1.什么是数据库 数据库即存储数据的仓库 2.为什么要用数据库 (1)用文件存储是和硬盘打交道,是IO操作,所以有效率问题 (2)管理不方便 (3)一个程序不太可能仅运行在同一台电脑上 ...

  7. 《linux就该这么学》课堂笔记19 iSCSI、MariaDB、无人值守安装

    1.iSCSI技术介绍 硬盘是计算机硬件设备中重要的组成部分之一,硬盘存储设备读写速度的快慢也会对服务器的整体性能造成影响. 为了进一步提升硬盘存储设备的读写速度和性能,人们一直在努力改进物理硬盘设备 ...

  8. 团队第六次作业:Beta版本冲刺成绩汇总

    一.作业题目 团队第六次作业:Beta版本冲刺 二.作业评分标准 博客评分规则(总分100)博客要求 1.冲刺博客每篇占20分.(3次) - (1) 各成员该天完成的工作,以及明天的任务安排(表格的形 ...

  9. 团队第五次作业:alpha2成绩汇总

    一.作业题目 团队第五次作业:alpha2发布 二.作业评分标准 博客评分规则(总分100)博客要求 给出开头和团队成员列表(10') 给出发布地址以及安装手册(20') 给出测试报告(40') 给出 ...

  10. django cookie,session,auth

    一.最完美的auth auth_user 是用来存储的用户注册的username,password auth 首先需要引入模块 from django.contrib import auth 用户认证 ...