1. 程式人生 > >Web前端國際化之jQuery.i18n.properties

Web前端國際化之jQuery.i18n.properties

i18n github 環境 高內聚低耦合 設計 https 默認 個人能力 指定

Web前端國際化之jQuery.i18n.properties

jQuery.i18n.properties介紹

國際化是如今Web應用程序開發過程中的重要一環,jQuery.i18n.properties是一款輕量級的jQuery國際化插件,能在不正確後端做不論什麽更改的條件下,輕松簡易的實現Web前端的國際化。

與其它國際化工具相比,jQuery.i18n.properties插件具有簡單、易用、高內聚低耦合的特點。

國際化英文單詞為:internationalization。又稱i18n,"i"為單詞的第一個字母,"18"為"i"和"n"之間單詞的個數,而"n"代表這個單詞的最後一個字母。

jQuery.i18n.properties採用.properties文件對JavaScript進行國際化。jQuery.i18n.properties插件首先載入默認的資源文件(strings.properties),然後載入針對特定語言環境的資源文件(strings_zh.properties)。這就保證了在未提供某種語言的翻譯時,默認值始終有效。

開發者能夠JavaScript變量或Map的方式從資源管理器中通過key獲取資源。

其有幾個突出的特點:

1、 按順序載入默認資源文件和指定語言環境的資源文件,保證默認值始終可用

2、未指定語言時默認使用瀏覽器語言

3、能夠使用占位符

4、資源文件裏key支持命名空間

5、支持跨行的值

jQuery.i18n.properties使用

jQuery.i18n.properties的API設計也非常精簡和易懂,僅僅有幾個經常使用的API,載入配置API:jQuery.i18n.properties();獲取資源API【支持占位符的使用】:jQuery.i18n.prop()。獲取瀏覽器語言:jQuery.i18n.browserLang()。

jQuery.i18n.properties(settings)該方法載入資源文件。當中settings是配置載入選項的一系列鍵值對。技術分享

步驟(以HTML為例):

1、引入腳本文件

<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.i18n.properties-min-1.0.9.js"></script>
2、編寫前端代碼

<body>
    <label data-locale="hupu_username">用戶名:</label><input type="text">
    <label data-locale="hupu_password">密碼:</label><input type="password">
 </body>

3、編寫國際化運行腳本

<script type="text/javascript">
	loadProperties();
	function loadProperties() {
		 $.i18n.properties({
			 name:‘hupu-lang‘,
			 path:‘i18n/‘,
			 mode:‘map‘,
			 language:$.i18n.browserLang(),
			 callback:function(){
				$("[data-locale]").each(function(){
					$(this).html($.i18n.prop($(this).data("locale")));
				});
			 }
		 });
	 }
</script>

眼下最新版本號為1.2.0。開源地址:https://github.com/jquery-i18n-properties/jquery-i18n-properties。想了解很多其它的童鞋能夠自己上去看看源代碼,這對個人能力提升還是有莫大幫助。本人就點到為止。醬紫編程才會有情趣。


Web前端國際化之jQuery.i18n.properties