Tengo un archivo json para algunas traducciones. Me gustaría usar este archivo en un archivo JS para traducir algunas cadenas. Pero no obtengo una buena solución para cargar este archivo y datos.
Lo que tengo hasta ahora está en mi archivo HTML:
<script type='application/json' src='lang/translations.json'></script> <script src="Javascript/translator.js" charset="UTF-8"></script>Archivo JSON:
{ "language": { "en": { "closure": "Closure", "documents": "Documents", "overview": "Overview" }, "de": { "closure": "Abschluss", "documents": "Dokumente", "overview": "Übersicht" } } }Y mi archivo JS:
let docLanguage = document.documentElement.lang; let browserLanguage = navigator.language.substr(0, 2); let lang = docLanguage ? docLanguage : browserLanguage; let texts; const Http = new XMLHttpRequest(); const url = "lang/" + lang + ".json"; Http.open("GET", url, false); Http.send(); Http.onreadystatechange = function () { texts = JSON.parse(Http.responseText); return texts; } let getJson = jQuery.getJSON('lang/' + lang + '.json', {format: "json", async: false}) .done(function (data) { // texts = data; return data; }).fail(function () { console.log('empty'); }); class translator { constructor(lang) { this.lang = lang; this.translations = texts; } _(keyName) { // return texts.get(keyName); // todo get by keyName } transHtml(attribute = 'data-lang') { let htmlElements = document.querySelectorAll('[' + attribute + ']'); for (let htmlElement of htmlElements) { let keyName = htmlElement.getAttribute(attribute); htmlElement.textContent = this._(keyName); } } } var translate = new translator(lang);Pero el problema es que el archivo de traducción se lee demasiado tarde y en el constructor no puedo usar estas partes, ¿o estoy haciendo algo mal?
Entonces, ¿cuál es la mejor manera de cargar y leer un archivo json que se almacena localmente?
No quiero un servidor ni nada más, solo Javascript puro que pueda ejecutarse en todos los navegadores modernos. Porque esta es una exportación para los usuarios y deberían poder ver esta página sin la necesidad de instalar nada o la necesidad de una conexión a Internet.
Si desea seguir con XHTTPRequest síncrono (no recomendado), solo necesita cambiar el orden de la función send() , lo llama antes de adjuntar el detector de eventos onreadystatechange , debe llamarse después:
Http.open("GET", url, false); Http.onreadystatechange = function () { texts = JSON.parse(Http.responseText); return texts; } Http.send(); // called after onreadystatechange Funcionará, pero muestra una advertencia en la consola [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.
Se recomienda utilizar funciones asincrónicas en JavaScript. El constructor asíncrono no funcionará, por lo que hay patrones para ayudar con eso: https://stackoverflow.com/a/43433773/3075373
Por ejemplo, sería mejor usar la función .init() como esta:
let docLanguage = document.documentElement.lang; let browserLanguage = navigator.language.substr(0, 2); let lang = docLanguage ? docLanguage : browserLanguage; class translator { constructor(lang) { this.lang = lang; } init(cb) { jQuery.getJSON('lang/' + this.lang + '.json', { format: "json" }) .done(result => { this.translations = result; cb.bind(this)(); }) .fail(err => console.log(err)) } _(keyName) { // return texts.get(keyName); // todo get by keyName } transHtml(attribute = 'data-lang') { let htmlElements = document.querySelectorAll('[' + attribute + ']'); for (let htmlElement of htmlElements) { let keyName = htmlElement.getAttribute(attribute); htmlElement.textContent = this._(keyName); } } } var translate = new translator(lang); translate.init(() => { // inside you can use methods that rely on translations being loaded eg: translate.transHtml(); })@Respuesta al comentario:
Es posible agregar, por ejemplo, otro archivo languages.js
const languages = { "language": { "en": { "closure": "Closure", "documents": "Documents", "overview": "Overview" }, "de": { "closure": "Abschluss", "documents": "Dokumente", "overview": "Übersicht" } } } export default languages; y luego en su secuencia de comandos principal agregue type="module" para que pueda importar otro archivo js (nota: funcionará principalmente en navegadores modernos, generalmente se hace con la ayuda de webpack, etc. para ayudar con navegadores más antiguos, pero es otro tema). )
<script type="module"> import lngs from './languages.js' let docLanguage = document.documentElement.lang; ... ... ... rest of script Simplemente también puede pegar el objeto de languages en la parte superior de su secuencia de comandos principal y luego no habrá necesidad de importar otro archivo js.