query.i18n.properties通用解决方案

关于jquery.i18n.properties的使用网上资料很多比较完整的使用可以参考 这篇 有比较详细的使用说明。这里博主简单概述下过程。回到顶部1、需要引用的js文件先在你的项目文件里面添加如下目录结构首先页面引用的js文件如下script src~/Scripts/jquery-1.9.1.min.js/script script src~/Content/i18n/jquery.i18n.properties.js/script script src~/Content/i18n/language.extensions.js/script其中jquery-1.9.1.min.js和jquery.i18n.properties.js文件是开源组件直接去网上找到即可jquery.i18n.properties.jsjquery.js第三个文件language.extensions.js是我们自定义的js文件如果你将国际化的代码直接写在html页面里面这个文件就是不用的。回到顶部2、html文件和国际化组件的初始化这里直接引用上面示例文章里面的代码首先需要一个切换中英文的标签比如是一个selectselect idlanguage option valuezh-CN中文简体/option option valueenEnglish/option /select然后是一些查看效果的html标签div input typesearch classi18n-input selectnamesearchPlaceholder selectattrplaceholder /div最后就是我们需要封装的language.extensions.js文件的内容了里面做了以下几件事初始化页面的时候去当前域的cookie里面取当前浏览器保存语言的cookie根据取到的当前语言版本去初始化国际化组件然后初始化select组件的选中值注册select组件的change事件根据当前选中的语言更新cookie里面的语言信息然后刷新页面。这个文件的内容这里就不展示了可以参考上面的使用示例文章回到顶部3、资源文件准备根据上面的目录可以看出我们打算将不同的语言的资源文件放到不同语言的文件夹里面这里暂时不分文件所有的语言资源放到一个文件common.properties里面比如内容如下en/common.propertiessearchPlaceholderPlease input serach information signOutLogin Out stationStation partnoPart No descriptionDescription queryQuery pleaseSelectPlease Select addAdd editEdit deleteDeletezh-CN/common.propertiessearchPlaceholder请输入关键字 signOut退出 station站点 partno零件号 description描述 query查询 pleaseSelect请选择 add新增 edit编辑 delete删除貌似大功告成当你down源码直接在google浏览器里面运行的时候你会发现一个跨域的问题。要求你在一种webServer里面去访问.properties文件这个问题你只需要使用任何一种webserver运行即可比如IIS、Apache、Node的web服务器等。博主的代码是在Visual Studio里面跑的所以是基于IIS的当你把代码搬到VS里面跑的时候第一个问题来了。回到顶部二、坑一配置IIS对.properties文件的支持如果本文仅仅是上面的内容是没啥意义的。接下来才是本文要介绍的重点将上述代码直接搬到VS里面运行的时候你会发现第一个问题为什么这里会请求三个properties文件因为jquery.i18n.properties.js组件支持三种类型的命名方式这点很多文章都有介绍组件代码运行的时候会去请求三种规则的properties文件只要找到任何一种规则的文件都可以读取到里面的内容。按照博主上文给出的文件目录根据这个目录那我们通过http://localhost:12770/Content/i18n/zh-CN/common.properties这个url应该能访问到zh-CN/common.properties这个文件可实际情况确实这样对于这种IIS报错404的问题C#程序员肯定是不陌生的无非就两个原因url不正确这个目录下面确实没有找到这个资源文件文件的类型iis默认不支持直接拒绝请求排除了第一个原因那么只可能是第二个原因引起的了。那么我们如何处理呢在网上搜索半天资料找到一种解决方案这样确实能绕过IIS的文件名验证但是改源码不是一个好的解决方案博主有一千个理由来说明改源码的弊端。这种方式肯定不是一个最好的解决方案于是博主决定另辟蹊径。还记得当初博主学习less的时候iis默认也是不支持.less文件的于是我们在web.config里面加了如下一些配置这绝对属于同类型的问题加这个配置是显式告诉IIS我们系统里面某种后缀的文件需要哪种Processer处理器或处理组件去处理受此启发那么我们这里的.properties文件的404问题是不是也可以通过此种方式解决如果需要通过这种思路去解决首要问题是需要找到.properties文件的mimeType博主思考既然是在js里面调用这个.properties文件那么我们是否可以使用JavaScript的处理机制来处理.properties文件呢考虑到上面那种将所有.properties替换成.js的处理方式似乎.properties和.js有很多相似之处于是我们加上如下一条配置得到结果试验成功就是这么简单。当然如果发布到IIS可能需要在IIS的MIME类型里面添加.properties这种类型的映射。好了这个问题就这么愉快的解决了。如果你的WebServer不是基于IIS的可能没有这个问题但我想思路或许相通供参考回到顶部三、坑二使用html的data属性初始化国际化内容一般情况下我们标签里面的内容如果要做国际化需要使用 $(#id).text($.i18n.prop(proName)); 来给标签赋值现在问题来了我们开发一个界面有很多地方都需要去做国际化我们总不能这样每一个页面每一个标签通过这种方式去赋值吧这样工作量不是一点大于是乎博主想有没有一种比较好的通用的解决方案去给这些需要做国际化的标签统一赋值呢。html的data属性似乎是一个不错的选择它具有可读性强、可维护性强、兼容jquery的data()方法等优点。比如我们修改国际化组件的方法如下jQuery.i18n.properties({ name: common, path: /Content/i18n/ i18nLanguage /, //资源文件路径 mode: map, //用Map的方式使用资源文件中的值 language: i18nLanguage, 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写入完毕); } });通过data属性获取标签然后对每个标签通过对应的data-i18n-属性进行国际化赋值即可这里暂时定义了三种类型data-i18n-placeholder、data-i18n-text、data-i18n-value的属性如果有其他需求可以增加其他类型。然后看下我们html页面的使用input classtypeahead typetext idmenu_search data-i18n-placeholder searchPlaceholder/span data-i18n-textsetting/span这样不用写一句标签的赋值代码即可对标签进行国际化。