Lightweight localization for a Cordova app I had been trying to find a suitable solution to implement localization in my Phonegap/Cordova application. My search proved that any localization through seperate .xml or .json files was a nightmare (mostly due to cross-access-origin).

Because of this, I decided to create a (very) simple, lightweight localization solution.

Here is what I've written:

var locale = {
    getString:function(required){
        var language = localStorage.getItem("language");
        if(language === null){
            language = "nl";
        }

        return window['locale']['translation'][language][required];
    },

    translation: {
        en: {
            play:"Play",
            faq:"FAQ",
            highscore:"Highscore",
            gameStart:"Game starting in ",
        },
        nl: {
            play:"Speel",
            faq:"FAQ",
            highscore:"Highscore",
            gameStart:"Spel start in ",
        }
    }
}


I am really interested in any comments you have. Would there be a better solution or any better methods to use in my implementation?
AFAIK, accessing local files using XMLHttpRequest won't be a problem once you have your page up on a web server.

Anyway, if you decide to go with the solution above, here are some general tips:


getString() method:


Use this.translation rather than window['locale']['translation']. There no point traversing to window and back again when you can use the this pointer.
Try to be more descriptive when naming variables and methods. For example, the required argument. If a third party user is using your API, how would they pssobile know what to pass? A string? An object?

translation object:


Your language objects have some indentical values. To be less repetitive, create a default object and merge with each new language. I will use jQuery.extend() in my example.

Misc:


Create an object that keeps track of your constants and reuse it throughout your module.



The code could look something like this:



var locale = {

    constants: {
        language: {
            localStorageKey: 'language',
            default: 'nl'
        }
    },

    getTranslationByLanguage:function(languageProperty){

        if(!languageProperty) 
            throw new ReferenceError('languageProperty not defined');

        var language = localStorage.getItem(this.constants.language.localStorageKey) 
                       || this.constants.language.default;

        var translation = this.translation.getTranslationByLanguageKey(language);

        return translation[languageProperty];
    },

    translation: {

        defaults: {
            faq: 'FAQ',
            highscore: 'highscore'
        },

        en: {
            play:'Play',
            gameStart:'Game starting in '
        },

        nl: {
            play:'Speel',
            gameStart:'Spel start in '
        },

        getTranslationByLanguageKey: function(languageKey){
            return $.extend({}, this.defaults, this[languageKey] || {});
        }

    }
};