Asp.net项目基于jQuery.i18n.properties 实现前端页面的资源国际化
来源:互联网 发布:linux vi 显示行数 编辑:程序博客网 时间:2024/05/18 11:30
任何技术的引进都是为了解决问题,要想给一个好好运行的网站,支持多语言,如果设计的时候没进行相应设计,调整起来是相当麻烦的。
假设有一个导航栏控件:
为了把它做成中英文两套系统,用户登录的时候,根据他习惯的语言进行加载。
权宜的做法是一个控件,写两份代码,if-else进行判断。
这不但产生了大量的重复代码,而且以后要同时维护两份代码,如果每个控件,每个页面都这样处理,是给自己找罪受,十分不可取的。
这里也用网上广泛使用的jQuery.i18n.properties进行处理。
引进jQuery.i18n.properties
jQuery.i18n.properties在github上的地址:
https://github.com/jquery-i18n-properties/jquery-i18n-properties
所谓引进,就是把它的jquery.i18n.properties.js文件复制下来,并引用到我们的页面内。
为此,我在我们的Scripts文件夹下,新建个i18n_properties目录:
用来存放js文件和翻译文件:
language.extensions.js是我们自己的js,zh-cn,eu-us分别是对应中文网站和英文网站。
Zh-ch下,现在只有两个.properties,一个公共的翻译项,一个是特定页面的翻译项,比如现在这个Navgrey.properties表示导航控件的翻译项。
在页面中引进这两个脚本进行使用:
使用jQuery.i18n.properties
在要进行多语言切换在页面,添加一个隐藏域:
<input type="hidden" id="i18n_pagename" value="<%=_sysUser.CurrentLanguage%>" name="Common-Navgrey"/>
其中,value表示用户登录时喜好的语言,name是表示当前页面用到的.properties文件,比如,上面Common-Navgrey表示用到了Common.properties和Navgrey.properties两个文件。
Js中解析这个语言选项,和资源文件数组:
var optionEle = $("#i18n_pagename"); if (optionEle.length < 1) { console.log("Unknown i18n_pagename"); return false; }; var sourceName = optionEle.attr('name'); sourceName = sourceName.split('-'); var optionLang = optionEle.attr('value');
自定义标记
为了让js判断以什么方式处理翻译,以及赋值什么内容,需要给需要进行多语言处理的元素自定义两个属性作为标记。
假设为data-i18nclassname和data-i18npropname:
data-i18nclassname="I18nHtmlText" data-i18npropname='Common-Nav-H1-Home'
这里使用到了html5支持的以data-开始的自定义属性,data-i18nclassname指定以什么方式处理, data-i18npropname指定要赋值的内容。
这可能不好理解,举例说明:
还是以这个导航控件来说,假设有一级标题公告和新闻,注意它们后面有个倒三角图标:
可以看到,它其实是个a标签,“公告”后面还接了一个span。
同理,新闻标题,“新闻”后面也接了一个span。
而公告下面的二级标题:
是在文字的左侧有个小三角。
Span是在“未读公告”的前面。
换句话说,data-i18nclassname指示了span是在前面还是后面,data-i18npropname指示了是表示新闻还是公告。
这个控件只有两种类型的data-i18nclassname, ”I18nHtmlText”,”I18nHtmlTextLeftArr”。每种类型js中定义一种处理方式,用简单工厂方法。
基类,传入的是当前选择的元素:
/*I18n的类型基类,不同的类型有不同的处理方式 */function I18nClassBase(select) { this.select = select;}I18nClassBase.prototype.doI18n = function() {}
一级标题类,把小三角append到属性值的后面:
/*处理Html文本类型的i18n */function I18nHtmlTextClass(select) { this.select = select;}I18nHtmlTextClass.prototype = new I18nClassBase(this.select);I18nHtmlTextClass.prototype.doI18n = function() { var propNam = ""; try { propName = $(this.select).data(I18nGlobalConst.I18nPropName()); var propValue = $.i18n.prop(propName); var child = $(this.select).children(); $(this.select).empty().append(propValue).append(child); } catch (ex) { console.log("I18n propName[" + propName + "] failed"); console.log(ex); }}
二级标题类,把属性值append到小三角的后面:
function I18nHtmlTextLeftArrClass(select) { this.select = select;}I18nHtmlTextLeftArrClass.prototype = new I18nClassBase(this.select);I18nHtmlTextLeftArrClass.prototype.doI18n = function() { var propNam = ""; try { propName = $(this.select).data(I18nGlobalConst.I18nPropName()); var propValue = $.i18n.prop(propName); var child = $(this.select).children(); $(this.select).empty().append(child).append(propValue); } catch (ex) { console.log("I18n propName[" + propName + "] failed"); console.log(ex); }}
简单工厂:
/* 简单工厂,实例每种I18n的处理类型 */function I18nFactory(className, select) { switch (className) { case I18nGlobalConst.I18nHtmlText(): return new I18nHtmlTextClass(select); case I18nGlobalConst.I18nHtmlTextLeftArr(): return new I18nHtmlTextLeftArrClass(select); default: return new I18nClassBase(select); }}
其它语言转来客串js的,有强迫症,把常量用闭包封装到一个类中:
var I18nGlobalConst = (function() { var i18nHtmlText = 'I18nHtmlText'; var i18nHtmlTextLeftArr = 'I18nHtmlTextLeftArr'; var i18nPropName = 'i18npropname'; var i18nPathRoot = '/Scripts/i18n_properties/'; var constants = {}; constants.I18nHtmlText = function() { return i18nHtmlText; } constants.I18nPropName = function() { return i18nPropName; } constants.I18nPathRoot = function() { return i18nPathRoot; } constants.I18nHtmlTextLeftArr = function() { return i18nHtmlTextLeftArr; } return constants;})();
执行入口函数:
/** * 执行页面i18n方法 * @return */var execI18n = function() { /* 获取一下资源文件名 */ var optionEle = $("#i18n_pagename"); if (optionEle.length < 1) { console.log("Unknown i18n_pagename"); return false; }; var sourceName = optionEle.attr('name'); sourceName = sourceName.split('-'); var optionLang = optionEle.attr('value'); /* 需要引入 i18n 文件*/ if ($.i18n == undefined) { console.log("Please reference i18n js file") return false; }; /* 这里需要进行i18n的翻译 */ jQuery.i18n.properties({ name: sourceName, //资源文件名称 path: I18nGlobalConst.I18nPathRoot() + optionLang + '/', //资源文件路径 mode: 'map', //用Map的方式使用资源文件中的值 //language: optionLang, callback: function() { //加载成功后设置显示内容 console.log('Init i18n'); try { $('[data-i18nclassname]').each(function() { var className = $(this).data('i18nclassname'); new I18nFactory(className, this).doI18n(); }); } catch (ex) { console.log(ex); } console.log('Finish init i18n'); } });}
可以看到,回调的时候,如果有新的类型,比如三级标题,四级标题等加进来,这里不用改一行代码,只要写对应的子类就行了。
加载完页面后执行:
$(function() { execI18n();});
完整代码:
/*全局常量 */var I18nGlobalConst = (function() { var i18nHtmlText = 'I18nHtmlText'; var i18nHtmlTextLeftArr = 'I18nHtmlTextLeftArr'; var i18nPropName = 'i18npropname'; var i18nPathRoot = '/Scripts/i18n_properties/'; var constants = {}; constants.I18nHtmlText = function() { return i18nHtmlText; } constants.I18nPropName = function() { return i18nPropName; } constants.I18nPathRoot = function() { return i18nPathRoot; } constants.I18nHtmlTextLeftArr = function() { return i18nHtmlTextLeftArr; } return constants;})();/*I18n的类型基类,不同的类型有不同的处理方式 */function I18nClassBase(select) { this.select = select;}I18nClassBase.prototype.doI18n = function() {}/*处理Html文本类型的i18n */function I18nHtmlTextClass(select) { this.select = select;}I18nHtmlTextClass.prototype = new I18nClassBase(this.select);I18nHtmlTextClass.prototype.doI18n = function() { var propNam = ""; try { propName = $(this.select).data(I18nGlobalConst.I18nPropName()); var propValue = $.i18n.prop(propName); var child = $(this.select).children(); $(this.select).empty().append(propValue).append(child); } catch (ex) { console.log("I18n propName[" + propName + "] failed"); console.log(ex); }}function I18nHtmlTextLeftArrClass(select) { this.select = select;}I18nHtmlTextLeftArrClass.prototype = new I18nClassBase(this.select);I18nHtmlTextLeftArrClass.prototype.doI18n = function() { var propNam = ""; try { propName = $(this.select).data(I18nGlobalConst.I18nPropName()); var propValue = $.i18n.prop(propName); var child = $(this.select).children(); $(this.select).empty().append(child).append(propValue); } catch (ex) { console.log("I18n propName[" + propName + "] failed"); console.log(ex); }}/* 简单工厂,实例每种I18n的处理类型 */function I18nFactory(className, select) { switch (className) { case I18nGlobalConst.I18nHtmlText(): return new I18nHtmlTextClass(select); case I18nGlobalConst.I18nHtmlTextLeftArr(): return new I18nHtmlTextLeftArrClass(select); default: return new I18nClassBase(select); }}/** * 执行页面i18n方法 * @return */var execI18n = function() { /* 获取一下资源文件名 */ var optionEle = $("#i18n_pagename"); if (optionEle.length < 1) { console.log("Unknown i18n_pagename"); return false; }; var sourceName = optionEle.attr('name'); sourceName = sourceName.split('-'); var optionLang = optionEle.attr('value'); /* 需要引入 i18n 文件*/ if ($.i18n == undefined) { console.log("Please reference i18n js file") return false; }; /* 这里需要进行i18n的翻译 */ jQuery.i18n.properties({ name: sourceName, //资源文件名称 path: I18nGlobalConst.I18nPathRoot() + optionLang + '/', //资源文件路径 mode: 'map', //用Map的方式使用资源文件中的值 //language: optionLang, callback: function() { //加载成功后设置显示内容 console.log('Init i18n'); try { $('[data-i18nclassname]').each(function() { var className = $(this).data('i18nclassname'); new I18nFactory(className, this).doI18n(); }); } catch (ex) { console.log(ex); } console.log('Finish init i18n'); } });}$(function() { execI18n();});
Properties文件
按名值对这样存储,比如,英文:
对应的中文:
把值赋到data-i18npropname属性中,data-i18npropname=’Common-Nav-H1-Notice’,根据当前登录的语言,就可显示是“公告“还是”Notice”。
IIS填坑
参考http://www.cnblogs.com/landeanfen/p/7581609.html
主要在web.config中配置IIS对.properties的支持。
- Asp.net项目基于jQuery.i18n.properties 实现前端页面的资源国际化
- 基于jQuery.i18n.properties 实现前端页面的资源国际化
- 基于jQuery.i18n.properties插件实现前端页面国际化
- jQuery.i18n.properties实现前端国际化
- jQuery.i18n.properties实现前端国际化
- 使用 jQuery.i18n.properties 实现 Web 前端的国际化
- 使用 jQuery.i18n.properties 实现 Web 前端的国际化
- 使用 jQuery.i18n.properties 实现Web 前端的国际化
- 使用 jQuery.i18n.properties 实现Web 前端的国际化
- 使用 jQuery.i18n.properties 实现 Web 前端的国际化
- 使用 jQuery.i18n.properties 实现 Web 前端的国际化
- 使用 jQuery.i18n.properties 实现 Web 前端的国际化
- 使用 jQuery.i18n.properties 实现 Web 前端的国际化
- 使用 jQuery.i18n.properties 实现 Web 前端的国际化
- 使用jquery.i18n.properties 实现web前端国际化
- jQuery之前端国际化jQuery.i18n.properties
- jQuery之前端国际化jQuery.i18n.properties
- jQuery之前端国际化jQuery.i18n.properties
- 工厂三兄弟之抽象工厂模式(五)
- AJAX学习系列1--XMLHttpRequest对象和ActiveXObject对象
- Windows环境下合并zip文件
- Android 名企面试题及涉及知识点整理
- python借助pysh2连接hiveserver2操作hive数据库时thrift.transport.TTransport.TTransportException: TSocket read 0
- Asp.net项目基于jQuery.i18n.properties 实现前端页面的资源国际化
- 机器学习实战学习笔记(三)分类—朴素贝叶斯(python3实现)
- ubuntu 16.04 LTS 常用基本操作键
- POJ 2299 Ultra-QuickSort【线段树】
- centos7.2安装sql server2017
- Jedis的JedisSentinelPool源代码分析 可用于Redis内外网切换
- awk 获取MAC、IP信息
- xpath 常用的命令
- Win7下安装Redis服务