best Practise - Multilanguage Apps

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • best Practise - Multilanguage Apps

      Hey Leute, bin neu hier
      und wollte mal fragen, wie ihr, falls ihr multilinguale Apps erstellt, das handelt.
      Ich bin nämlich Performance-technisch nicht ganz zufrieden mit meiner Lösung.
      Ich habe sämtliche Strings in einer Json-Datei gespeichert ungefähr so aufgebaut:

      Quellcode

      1. {
      2. "de": {
      3. "hallo" : "Hallo"
      4. }
      5. "en": {
      6. "hallo" : "hello"
      7. }
      8. }


      In fertigen [lexicon]HTML[/lexicon]-Templates nutze ich ein erfundenes data-lang Attribut, welches den string enthält. Bei jeder DOM-Änderung läuft das Script ab.
      Hier mal der lang.js Teil:

      Quellcode

      1. define(["app/storage"], function(storage) {
      2. get = function() {
      3. if (storage.get("lang") === null) {
      4. //get Language from System
      5. var language;
      6. // PhoneGap on Android would always return EN in navigator.*language.
      7. // Parse userAgent instead
      8. // Mozilla/5.0 (Linux; U; Android 2.2; de-ch; HTC Desire Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
      9. if (navigator && navigator.userAgent && (language = navigator.userAgent.match(/android.*\W(\w\w)-(\w\w)\W/i))) {
      10. language = language[1];
      11. }
      12. if (!language && navigator) {
      13. if (navigator.language) {
      14. language = navigator.language;
      15. } else if (navigator.browserLanguage) {
      16. language = navigator.browserLanguage;
      17. } else if (navigator.systemLanguage) {
      18. language = navigator.systemLanguage;
      19. } else if (navigator.userLanguage) {
      20. language = navigator.userLanguage;
      21. }
      22. language = language.substr(0, 2);
      23. }
      24. var scriptname;
      25. var avail_lang = new Array("de", "en", "fr", "es");
      26. for (var i = avail_lang.length - 1; i >= 0; i--) {
      27. if (language == avail_lang[i]) {
      28. storage.set("lang", language);
      29. sprache = language;
      30. var languagefound = true;
      31. return sprache;
      32. }
      33. };
      34. if (!languagefound) {
      35. storage.set("lang", "en");
      36. sprache = "en";
      37. return "en";
      38. }
      39. } else {
      40. sprache = storage.get("lang");
      41. return sprache;
      42. }
      43. },
      44. translate = function() {
      45. $.getJSON("lang.json", function(data) {
      46. //Fallback, if translated for the first time
      47. if (!sprache) {
      48. var sprache = get();
      49. }
      50. //
      51. $("[lang-str]").each(function() {
      52. var query = $(this).attr("lang-str");
      53. var sprache = "de";
      54. if (data[sprache][query]) {
      55. $(this).text(data[sprache][query]);
      56. } else {
      57. $(this).text(data["en"][query]);
      58. }
      59. });
      60. });
      61. },
      62. string = function(langstr){
      63. var returnvalue;
      64. $.ajax({
      65. async: false,
      66. dataType : 'json',
      67. url: "lang.json",
      68. type : 'GET',
      69. success: function(data) {
      70. if(!sprache) {
      71. var sprache = get();
      72. }
      73. if(data[sprache][langstr]) {
      74. returnvalue = data[sprache][langstr];
      75. }else{
      76. returnvalue = data["en"][langstr];
      77. }
      78. }
      79. });
      80. return returnvalue;
      81. }
      82. return{
      83. translate : translate,
      84. string : string
      85. };
      86. });
      Alles anzeigen


      Grüße Jonas
    • Was genau bereitet Dir denn performance technisch Kopfzerbrechen? Ich habe mir mal kurz einen Überblick verschafft, da ich selbst noch nicht mit Multilanguage-Apps zu tun hatte. Im Internet ist die von Dir gegangene Methode aber die Gängigste. Die Beiträge die ich gefunden habe, verweisen alle auf die bereits von Dir verwendete Funktionsweise.
    • Quellcode

      1. get = function() {
      2. if (storage.get("lang") === null) {
      3. //get Language from System
      4. var language;
      5. // PhoneGap on Android would always return EN in navigator.*language.
      6. // Parse userAgent instead
      7. // Mozilla/5.0 (Linux; U; Android 2.2; de-ch; HTC Desire Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
      8. if (navigator && navigator.userAgent && (language = navigator.userAgent.match(/android.*\W(\w\w)-(\w\w)\W/i))) {
      9. language = language[1];
      10. }
      11. if (!language && navigator) {
      12. if (navigator.language) {
      13. language = navigator.language;
      14. } else if (navigator.browserLanguage) {
      15. language = navigator.browserLanguage;
      16. } else if (navigator.systemLanguage) {
      17. language = navigator.systemLanguage;
      18. } else if (navigator.userLanguage) {
      19. language = navigator.userLanguage;
      20. }
      21. language = language.substr(0, 2);
      22. }
      23. var scriptname;
      24. var avail_lang = new Array("de", "en", "fr", "es");
      25. for (var i = avail_lang.length - 1; i >= 0; i--) {
      26. if (language == avail_lang[i]) {
      27. storage.set("lang", language);
      28. sprache = language;
      29. var languagefound = true;
      30. return sprache;
      31. }
      32. };
      33. if (!languagefound) {
      34. storage.set("lang", "en");
      35. sprache = "en";
      36. return "en";
      37. }
      38. } else {
      39. sprache = storage.get("lang");
      40. return sprache;
      41. }
      42. },
      Alles anzeigen


      Sorry, ich hatte es nur überflogen.

      In diesem Sinne, schönes Wochenende an alle ;)