`
chenyuguxing
  • 浏览: 40098 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

js简单实现国际化

 
阅读更多

最近碰到一个项目, 前台展示需要实现国际化(中英法俄西), 前台使用 freeMark 技术展示, 都是一些html , 因为是在网上找的开源项目, 只需要修改前台页面即可, 将前台 html 中的中文(主要是一些提示和展示)根据用户选择的语种, 显示不同的语言, 当时对freeMark不太了解, 就取巧用 js 试着实现了一下, 仅供参考.

首先, 说一下我的思路: 因为需要国际化的文字都是写死在页面上的, 所以我想到了以前的一个项目用过 js 向页面上写值: <script>yrycode.getStr('001')</script>, 其中 yrycode是js文件中定义的一个全局对象, 里面包含了数组, 方法. 先看一下js

//yrycode统一接口

~function(){
	if(window.yrycode){
		return;
	}
	var yrycode=window.yrycode={};
	
<span style="white-space:pre">	</span>// 需要国际化的汉字, 当对应的编号和翻译
	// 中文
	yrycode.ch=["001,人气"];
	
	// 西班牙语
	yrycode.es=["001,renqi"];
	yrycode.options = yrycode.ch;
	
	// 根据语种获取值, 并向页面上写值
	yrycode.getstr = function(value) {
		//var language = yrycode.getCookies();
		var str='';
		for(var i=0;i<yrycode.options.length;i++){
			var option = yrycode.options[i].split(",");
			if(value==option[0]){
				str = option[1];
				break;
			}
		}
		//alert(language);
		document.write(str);
	};
<span style="white-space:pre">	</span>//只是获取值, 并不想页面上输出, 主要用于 alert 信息, 按钮的赋值等
	yrycode.getstr1 = function(value) {
		
		var language = yrycode.getCookies();
		
		var str='';
		for(var i=0;i<yrycode.options.length;i++){
			var option = yrycode.options[i].split(",");
			if(value==option[0]){
				str = option[1];
				break;
			}
		}
		return str;
	};
<span style="white-space:pre">	</span>// 切换语种方法, 然后根据语种决定从哪个数组中取值
	yrycode.changeLanguage = function(lang){
		
		yrycode.addCookie("languages",lang,1);
		if("en"==lang){
			yrycode.options = yrycode.en;
		}else if("fr"==lang){
			yrycode.options = yrycode.fr;
		}
		else if("py"==lang){
			yrycode.options = yrycode.py;
		}
		else if("es"==lang){
			yrycode.options = yrycode.es;
		}else{
			yrycode.options = yrycode.ch;
		}
		window.location.reload();
	};
<span style="white-space:pre">	</span>// 新增或修改 cookie ,语种信息存储到cookie中, 以 language 为 name, 以 ch或es 为 value, 注意 path 的值, 要以项目的根路径为 value 
 	yrycode.addCookie = function(sName,sValue,day){
		var expireDate = new Date(); 
		expireDate.setDate(expireDate.getDate()+day);
		//设置失效时间 
		document.cookie = escape(sName) + '=' + escape(sValue) +';expires=' + expireDate.toGMTString()+";path=/bbs"; //escape()汉字转成unicode编码,toGMTString() 把日期对象转成字符串 
		
	};
	
<span style="white-space:pre">	</span>// 获取 cookie 中语种信息, 
	yrycode.getCookies = function() { 
		var showAllCookie = ''; 
		if(!document.cookie == ''){ 
			var arrCookie = document.cookie.split('; '); 
			//用spilt('; ')切割所有cookie保存在数组arrCookie中 
			var arrLength = arrCookie.length; 
			for(var i=0; i<arrLength; i++) { 
				if("languages"==unescape(arrCookie[i].split('=')[0])){
					//alert(unescape(arrCookie[i]));
					return unescape(arrCookie[i].split('=')[1]);
				}
			} 
		} 
	} 
	
	yrycode.language = yrycode.getCookies();
	
<span style="white-space:pre">	</span>//根据 cookie 中语种信息, 决定从哪个数组中获取对应翻译	
	if("en"==yrycode.language){
		yrycode.options = yrycode.en;
	}else if("fr"==yrycode.language){
		yrycode.options = yrycode.fr;
	}
	else if("py"==yrycode.language){
		yrycode.options = yrycode.py;
	}
	else if("es"==yrycode.language){
		yrycode.options = yrycode.es;
	}else{
		yrycode.options = yrycode.ch;
	}
	
}();


分享到:
评论

相关推荐

    js文件中实现国际化

    JavaScript(简称JS)是网页开发中的重要脚本语言,它为开发者提供了丰富的功能,其中之一就是实现国际化(i18n,Internationalization)。国际化是让软件能够适应不同地区、语言和文化背景的重要特性,使得应用程序...

    i18nliterally一种将国际化引入JS的简单方法

    描述中的“一种将国际化引入JS的简单方法”表明i18nliterally库提供了易于理解和使用的API,旨在帮助开发者轻松地在JavaScript项目中添加多语言支持。这意味着它可能具有直观的语法和清晰的文档,使得开发者能够快速...

    js国际化、读取preperties文件信息

    总之,JavaScript读取`.properties`文件是实现国际化的一部分,通过各种方法和库可以方便地加载和解析这些文件,从而为用户提供符合其语言习惯的界面。在实际应用中,要注意文件的加载、解析、缓存以及错误处理等多...

    springboot项目快速实现国际化 若依前后端分离版-快速国际化集成

    若依系统是一个基于Spring Boot开发的前后端分离项目,它提供了快速实现国际化集成的能力,尤其适用于那些希望通过简单配置实现多语言支持的开发者。 在若依系统的国际化实现过程中,主要关注以下几个方面: 首先...

    Web前端资源国际化

    本篇文章将详细探讨如何利用jQuery_i18n_properties插件在Web前端实现国际化,以及如何在JavaScript中调用properties文件内容。 首先,jQuery_i18n_properties是jQuery的一个插件,专门用于处理国际化,特别是处理....

    i18next html 国际化

    前段页面的国际化,运用jquery-i18next js做国际化处理,i18n实现前端国际化,页面的多语言切换,本例切换了中英文,运用cookie存取使得刷新页面仍然保持当前语言 1、通过请求不同的语言文件,达到国际化前端的效果...

    JavaScript实现的可视化表单设计器源码.zip

    JavaScript实现的可视化表单设计器源码。实现的可视化表单设计器。基于Vue的可视化表单设计器,让表单开发简单而高效。 特性如下: 可视化配置页面 提供栅格布局,并采用flex实现对齐 ...国际化支持

    中英国际化翻译js插件无小窗口

    直接引入js,复制黏贴一段代码, 并把切换国际化的按键 id设为“change”. 里面有文档说明。复制黏贴就可用,无翻译小窗口,直接国际化。 但是机械翻译,只使适用首页那些简单的代码,涉及文章的,还是要数据库中英版本各...

    i18next实现国际化源码,包含i18next.jar包

    i18next是一款广泛应用于前端开发中的国际化框架,它的核心目标是帮助开发者轻松地实现多语言网站或应用。本资源提供了i18next的源码,包括`i18next.js`文件,使得我们可以深入理解其工作原理并进行定制化开发。 ...

    Vue或UniApp 前端语言国际化 i18n lang.js包

    尽管UniApp本身并不直接提供i18n支持,但你可以借助Vue的`vue-i18n`或者直接使用JavaScript实现国际化。使用方式与Vue.js基本一致,只需确保在uni-app项目中正确引入和配置`vue-i18n`。 `en.js`和`zh.js`是特定语言...

    FBT是一个来自Facebook的JavaScript国际化框架强大又灵活而且简单直观

    FBT(Facebook Translation...学习和使用FBT框架,可以帮助开发者快速且高效地实现JavaScript应用的国际化和本地化,同时保持代码的整洁和可维护性。它特别适合大型项目,因为其强大的功能和灵活性可以应对复杂的需求。

    jquery国际化Demo

    在开发多语言网站或应用时,jQuery 提供了一个插件叫做 jQuery i18n,用于实现国际化(i18n)功能。这个插件允许开发者轻松地切换不同语言环境,提供更加本地化的用户体验。 **jQuery i18n 插件** jQuery i18n ...

    i18n国际化插件

    Eclipse提供了丰富的插件系统,允许开发者根据需求扩展其功能,而i18n插件正是这样的一种扩展,它帮助开发者在Eclipse中实现国际化功能。 接下来是Tomcat,这是一款流行的开源Java Servlet容器,用于部署和运行Java...

    jquery国际化demo

    这个“jquery国际化demo”项目提供了一个简单的示例,帮助初学者快速理解和应用jQuery的国际化功能。 首先,jQuery的国际化通常依赖于jQuery-i18n-plugin。这是一个用于处理翻译文本的插件,它可以加载不同语言的...

    Javascript/Vue/React/ReactNative的国际化解决方案

    JavaScript作为浏览器端的主要脚本语言,本身并不直接提供国际化功能,但有多个库如`Intl` API和社区维护的i18n库如`i18next`、`format.js`等可以用来实现国际化。`Intl` API是ECMAScript的一个内置对象,提供了基本...

    uni-app语言国际化设置语言包案例

    本篇文章将深入探讨uni-app语言国际化的实现方式,以及如何配置语言包。 首先,uni-app的国际化功能依赖于`uni-i18n`模块,它为应用提供了多语言切换的能力。要启用这个功能,你需要在项目的全局配置文件`uni....

    基于jQuery.i18n.properties 实现资源国际化简单Demo 源码

    使用jQuery.i18n.properties实现国际化的基本步骤如下: 1. **安装jQuery和jQuery.i18n.properties**:首先,确保项目中已经包含了jQuery库,然后下载jQuery.i18n.properties插件并将其添加到HTML文件中。例如: `...

    jquery.i18n.js 前端国际化

    jquery实现多国语言包。利用这个动态加载页面和事先写好的语言类型可以比微软推出的更简单的实现多国化 一个基于jQuery的轻量级的...可以根据用户自定义的不同语言版本的json文件,按需渲染网页上的语言,实现国际化。

Global site tag (gtag.js) - Google Analytics