JUNER

一些笔记,一点生活

最怕一生碌碌无为,还说平凡难能可贵。最好的输入,是输出;最佳的成长,是分享。

jquery-i18n点击网站多语言切换多语言方案

笔记 · 2019-11-20修改 · 2019-11-19 23:43:15 · 0

基于jquery的国际化工具类
用于前端文本国际化,支持同时引入多个语言资源文件,更友好的支持中文环境,在中文环境下无需引入资源文件

使用方法

文件引入

该插件依赖于jquery 和 js-cookie,可修改源代码取消对后者的依赖

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/js-cookie/latest/js.cookie.min.js"></script>
<script src="jquery.i18n.js"></script>
#jquery.i18n.js代码
/**
 * 国际化工具类
 * 优点:只在非中文简体环境下才加载language文件,节约资源
 * 缺点:在非中文简体状环境下,前端渲染速度不够快可能会出现前端开始显示中文描述,加载完毕后才切换到英文描述
 * @author eko.zhan
 * @required
 *	jquery.min.js
 *	jquery.cookie.js
 */
;(function($){
	'use strict';
	
	$.i18n = $.i18n || {};
	
	$.extend($.i18n, {
		/* 获取当前环境语言 */
		getLocale: function(){
			return Cookies.get('locale')==undefined?'zh':Cookies.get('locale');
		},
		/** 
		 * 设置语言类型,参数为空时默认从浏览器里获取 
		 * key zh/zh-tw/en 
		 **/
		setLocale: function(key){
			if (typeof(key)=='undefined' || key==null || key==''){
				var type = navigator.appName;
				if (type=="Netscape"){
					key = navigator.language;
				}else{
					key = navigator.userLanguage;
				}
				//取得浏览器语言的前两个字母
				key = key.toLowerCase();
				key = key=='zh-hk'?'zh-tw':key;
				if (key!='zh-tw'){
					key = key.substr(0, 2);
				}
			}
			if (Cookies.get('locale')!=key){
                Cookies.set('locale', key, { expires: 7 });
			}
		},
		/**
		 * 加载多语言资源文件
		 * 资源文件格式 
		 *	$.i18n.lang = $.extend(true, $.i18n.lang || {}, {
		 *		zh: {
		 *			test: '测试'
		 *		},
		 *		en: {
		 *			test: 'Test'
		 *		},
		 *		'zh-tw': {
		 *			test: '測試'
		 *		}
		 *	});
		 * @param langScript 以/开头,相对于 contextPath 的路径 /resource/kbase/base/login/language.js
		 */
		load: function(langScript, callback){
			var success = false;
			var b = $.i18n.getLocale()!='zh'; //非中文环境才加载资源文件
			if (langScript!=null && b){
				if (typeof(langScript)==='object' && !isNaN(langScript.length)){
					$(langScript).each(function(i, item){
						_appendScript(item);
					});
				}else{
					_appendScript(langScript);
				}
				success = true;
			}
			if (typeof(callback)=='function') callback(success);
		},
		/**
		 * 参数可以传入元素标识,或者 资源id
		 * 获取元素的多语言资源 <span k-resid="zh">中文</span>
		 * 优先返回id对应的资源,如果为null,则返回defaultValue,否则返回id
		 * 用法:
		 * $.i18n.prop('username_is_null')
		 * $.i18n.prop('username_is_null', '用户名不能为空')
		 * 
		 */
		prop: function(elem, defaultValue){
			var id = '';
			var res = '';
			var locale = $.i18n.getLocale();
			if (typeof($.i18n.lang)=='undefined'){
				$.i18n.lang = {};
				$.i18n.lang[locale] = {};
			}
			if ($(elem).attr('k-resid')==undefined){
				//传入的是资源id
				id = elem;
				res = $.i18n.lang[locale][elem];
				if (res!=undefined && res.indexOf('{0}')!=-1){
					//需要填充占位符,如果参数未填满,会显示undefined
					//不支持参数是资源id的情况,如果需要适配语言,参数可以使用 
					//alert($.i18n.prop('username', '你好', $.i18n.prop('login'), '测试'));$.i18n.prop('msg_hello', '你好', $.i18n.prop('login'), '测试');
					var args = arguments;
					return res.replace(/\{(\d+)\}/g, function(m, i){
						i++;
						return args[i];
					});
				}
			}else{
				//传入的是元素
				id = $(elem).attr('k-resid');
				res = $.i18n.lang[locale][id];
			}
			return res || defaultValue || id;
		}
	});

	/**
	 * 向页面加载javascript文件
	 */
	function _appendScript(langScript){
		var _key = langScript.substring(0, langScript.length-3).replace(/\//gi, '_');
		if ($('script[_key="' + _key + '"]').length==0){
			$('head').append('<script _key="' + _key + '" src="' + langScript + '" charset="utf-8" type="text/javascript"><\/script>');
		}
	}
})(jQuery);

使用方法

设置语言,参数为空时默认从浏览器里获取

$.i18n.setLocale('en');

加载资源文件,待国际化的代码都在回调函数中处理,参数success标识加载了资源文件,中文环境下无需加载资源文件

 #多个资源:
 $.i18n.load(['../lang/language.js', '../lang/language2.js'], function(success){...});
 #单个资源: 
 $.i18n.load('../lang/language.js', function(success){...});
#lang.js代码
if (success){
    #通过 id 获取
     $('#username').text($.i18n.prop('用户'));
     $('#password').text($.i18n.prop('密码'));
}
#language.js代码
$.i18n.lang = $.extend(true, $.i18n.lang || {}, {
    zh: {
        'username': '用户',
        'password': '密码',
    },
    en: {
        '用户': 'username',
        '密码': 'password',
    },
    'zh-tw': {
        '用户': '用戶',
        '密码': '密碼',
    }
});

优点

因为是人工片段式翻译,所以翻译更精准!

缺点

1、对于整站资源国际化来说,这无疑是一个非常大的工作量!
2、不利于英文版的seo优化和网站收录。

扩展阅读

为何不利于seo收录?
虽然用户可以通过页面上的按钮或下拉框来选择英文,并且前台展示的也是英文,但实际的工作流程却是这样的:
初始页面是中文,切换语言后,js去动态查找网页所有要替换的数据,最后将对应的中文替换成英文。但在页面源代码中,展示的依旧是中文。此时搜索引擎过来爬的代码始终是中文,对英文收录没有一点的帮助!


感谢作者
https://github.com/ekoz/jquery-i18n

相关内容

Swiper插件设置禁止鼠标拖动

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。用swiper插件做PC端分屏项目一定能用到的目前遇到的问题是,客户想复制轮播上的文案,却不能复制,一拖拉轮...

笔记 · 2019-11-26修改 · 2019-11-26 11:13:57 · 52107

jquery-i18n点击网站多语言切换多语言方案

基于jquery的国际化工具类用于前端文本国际化,支持同时引入多个语言资源文件,更友好的支持中文环境,在中文环境下无需引入资源文件使用方法文件引入该插件依赖于jquery 和 js-cookie,可修...

笔记 · 2019-11-20修改 · 2019-11-19 23:43:15 · 72009

vscode jQuery语法智能提示功能

在项目根目录建一个 jsconfig.json,里面内容如下:{"exclude":["node_modules"],"typeAcquisition":{"include":["jquery"]}}...

笔记 · 2019-11-19修改 · 2019-11-19 16:03:54 · 23838

SEOer实现非本站链接自动添加Nofollow小技巧

懒惰的人总是喜欢偷懒的方法做事情,比如我想为正文内容里除了本站以外的A标签链接都自动加上nofollow,这样的实现就是在.show-content这个类包含着的A标签链接除了本站以外,其他站外链接添...

笔记 · 2019-11-19修改 · 2019-11-19 15:49:25 · 13042