jQuery i18n things you should know

Tram Ho

A multi-language website, there are many ways to do it, but today I would like to introduce a jquery i18n plugin to support multilingual development for your website as well as your app.

After the jQuery i18n project has been completed, I would like to share some experiences I have learned

  1. Plugin easy to use, easy to install
    To install if the website project uses normal html, css, we just need to add these 2 tools to the footer file.

  1. The features are quite small and useful

You imagine we often have some dynamic parameters in the text, how we pass those dynamic parameters into the text.

With jquery i18n it’s as easy as candy, jquery i18n provides me with a feature called Message format

For example, we have the text Chào Cường , can we imagine what the problem is here?

when we chào someone, then someone is a cave that can be transmitted inward, so how do we get jquery i18n ?

It’s simple Placeholders will handle it very neatly. We just need to declare the structure as follows

Very useful, isn’t it ?

Or in English or have other types of singular plural by the letter s , then this tool also gives us very interesting approach called Plurals

Very good, isn’t it ?

In addition, handling for Gender also very useful with the following simple declaration

  1. Note the translation of the translation .json from the server Load the translation file from the server, I have a lot of time to fixbug for this tool.

What is the problem, let’s analyze later

when i declare i18n initialization

I didn’t see it wrong, but I encountered a bitter result that there was no problem on the local test until deploying on the server all my translation could not be displayed. ? So bitter, isn’t it.

At that time, I was just searching for its document, then I discovered a very important detail

The library should expose an API to load an object containing key-value pair of messages. Example: $ .i18n.load (data). This will return a jQuery.Promise.

What does it mean =)), she handled asynchronously and returned 1 promise, oh man. So on the local it loads quickly without delay so it will play immediately. If you go on the server, you will be hurt immediately

Again rummaging around to fix google, finally split it’s key here

Want to call the type $.i18n(message, 1); then please put that tool into done , to ensure that the translation file is finished loading from the server, then use it after using it.

Well, there’s a good tip I met in the project, can anyone see this line of code?

document.documentElement.lang

Do not think it’s simple, this will take the lang value in your html file from creating the following example

I have encountered a case of $.i18n.locale is empty then I checked the lang in the HTML file is not transmitted. So his value of $.i18n.locale is empty is correct.

  1. Conclude

With the experience I have learned when working with jQuery i18n hope that when you work with that tool, I will be more confident and avoid the errors that I have mentioned above. To make the project work more smoothly.

Share the news now

Source : Viblo