किसी पृष्ठ का किसी अन्य भाषा में गतिशील अनुवाद

हेलो, हैबर।

आज मैं तत्काल पृष्ठ परिवर्तन - गतिशील भाषा परिवर्तन के क्षेत्र में अपनी उपलब्धियों के बारे में बताऊंगा। मुझे हाल ही में इस चीज की आवश्यकता थी, और चूंकि मुझे तीसरे पक्ष के कार्यान्वयन पर भरोसा नहीं है (यहां तक ​​कि किसी तरह मैंने उन्हें नहीं पाया), मुझे अपना खुद का लिखना था। इसके उपयोग के दौरान (छह महीने के आसपास) मैंने सभी सबसे अधिक ध्यान देने योग्य कीड़े तय किए (लेकिन इसका मतलब यह नहीं है कि वे अब वहां नहीं थे :)), और अब मैं एक कार्यशील संस्करण प्रस्तुत करता हूं।

कोई कहेगा कि क्लाइंट पर ट्रांसफ़र करना उचित नहीं है, लेकिन मुझे सिर्फ एक स्थिति मिली है जो अलग नहीं हो सकती है: सर्वर-साइड अनुवाद के लिए, मुझे पेज पर बंद वेब एप्लिकेशन को मजबूर करना होगा ताकि डेटा न खोएं; भाषा के एक गतिशील परिवर्तन के मामले में, तत्वों पर ग्रंथों को बस बदल दिया जाता है और काम जारी रहता है। मुझे लगता है कि यह केवल मुझे परेशान करने वाला नहीं था, "सेटिंग्स को रिबूट पर लागू किया जाएगा।" हालांकि मेरा कार्यान्वयन थोड़ा जटिल है, यह इस समस्या को हल करता है।

भ्रमित न होने के लिए, मैं इस लेख की शर्तों की निम्नलिखित सूची को परिभाषित करूंगा:
एक शब्दकोश दी गई भाषा में स्थानीयकरण तक पहुँचने के लिए उपयोग की जाने वाली चाबियों का भंडार है। वास्तव में, यह एक नियमित जावास्क्रिप्ट ऑब्जेक्ट है, जहां गुण पहुंच कुंजियाँ हैं, और उनके मूल्यों का अनुवाद स्ट्रिंग है।
एक हैश एक वस्तु है जो शब्दकोशों के आदेशित विलय का परिणाम है; सामान्य शब्दकोश जिसमें से अनुवाद बाद में चुना गया है।

अब और विस्तार से।


पढ़ने में तेजी लाने के लिए, मैं अध्यायों के स्रोत कोड और इंटरफ़ेस के विवरण को छोड़ देने की सलाह देता हूं वे सॉफ्टवेयर की दृष्टि से विषय वस्तु का विवरण देते हैं। यदि आप चाहें, तो वे बाद में उपलब्ध होंगे यदि आप लेख में रुचि रखते हैं।

स्रोत कोड

तुरंत स्रोत कोड का सुझाव दें। अभी तक विवरण में मत जाओ, लेकिन हम इसे वापस कर देंगे।

lang = (function init_lang() { var BODY = document.body, //  LANG_HASH = {}, //,   LANG_HASH_LIST = [], //   LANG_HASH_INDEX = {}, //   LANG_HASH_USER = {}, //  LANG_HASH_SYSTEM = {}, //  LANG_QUEUE_TO_UPDATE = [], //    LANG_PROPS_TO_UPDATE = {}, //    LANG_UPDATE_LAST = -1, //    LANG_UPDATE_INTERVAL = 0, //  LANG_JUST_DELETE = false; //     var hash_rebuild = function hash_rebuild() { //   var obj = {}; obj = lang_mixer(obj, LANG_HASH_USER); for (var i = 0, l = LANG_HASH_LIST.length; i < l; i++) obj = lang_mixer(obj, LANG_HASH_LIST[i]); LANG_HASH = lang_mixer(obj, LANG_HASH_SYSTEM); }, lang_mixer = function lang_mixer(obj1, obj2) { //   for (var k in obj2) obj1[k] = obj2[k]; return obj1; }, lang_update = function lang_update(data) { //,   switch (typeof data) { default: return; case "string": LANG_PROPS_TO_UPDATE[data] = 1; break; case "object": lang_mixer(LANG_PROPS_TO_UPDATE, data); } LANG_UPDATE_LAST = 0; if (!LANG_UPDATE_INTERVAL) LANG_UPDATE_INTERVAL = setInterval(lang_update_processor, 100); }, lang_update_processor = function lang_update_processor() { //  var date = new Date; for (var l = LANG_QUEUE_TO_UPDATE.length, c, k; LANG_UPDATE_LAST < l; LANG_UPDATE_LAST++) { c = LANG_QUEUE_TO_UPDATE[LANG_UPDATE_LAST]; if(!c) continue; if (!c._lang || !(c.compareDocumentPosition(BODY) & 0x08)) { LANG_QUEUE_TO_UPDATE.splice(LANG_UPDATE_LAST, 1); LANG_UPDATE_LAST--; if (!LANG_QUEUE_TO_UPDATE.length) break; continue; } for (k in c._lang) if (k in LANG_PROPS_TO_UPDATE) lang_set(c, k, c._lang[k]); if (!(LANG_UPDATE_LAST % 10) && (new Date() - date > 50)) return; } LANG_PROPS_TO_UPDATE = {}; clearInterval(LANG_UPDATE_INTERVAL); LANG_UPDATE_INTERVAL = 0; }, lang_set = function lang_set(html, prop, params) { //   html[params[0]] = prop in LANG_HASH ? LANG_HASH[prop].replace(/%(\d+)/g, function rep(a, b) { return params[b] || ""; }) : "#" + prop + (params.length > 1 ? "(" + params.slice(1).join(",") + ")" : ""); }; var LANG = function Language(htmlNode, varProps, arrParams) { //    var k; if (typeof htmlNode != "object") return; if (typeof varProps != "object") { if (typeof varProps == "string") { k = {}; k[varProps] = [htmlNode.nodeType == 1 ? "innerHTML" : "nodeValue"]. concat(Array.isArray(arrParams) ? arrParams : []) varProps = k; } else return; } if (typeof htmlNode._lang != "object") htmlNode._lang = {}; for (k in varProps) { if (!(Array.isArray(varProps[k]))) varProps[k] = [varProps[k]]; htmlNode._lang[k] = varProps[k]; lang_set(htmlNode, k, varProps[k]); } if (LANG_QUEUE_TO_UPDATE.indexOf(htmlNode) == -1) LANG_QUEUE_TO_UPDATE.push(htmlNode); }; lang_mixer(LANG, { get: function get(strProp) { //    return LANG_HASH[strProp] || ("#" + strProp); }, set: function set(strProp, strValue, boolSystem) { //    //   var obj = !boolSystem ? LANG_HASH_USER : LANG_HASH_SYSTEM; if (typeof strValue != "string" || !strValue) delete obj[strProp]; else obj[strProp] = strValue; hash_rebuild(); lang_update(strProp + ""); return obj[strProp] || null; }, load: function load(strName, objData) { // () switch (typeof strName) { default: return null; case "string": if (LANG_HASH_INDEX[strName]) { LANG_JUST_DELETE = true; LANG.unload(strName); LANG_JUST_DELETE = false; } LANG_HASH_LIST.push(objData); LANG_HASH_INDEX[strName] = objData; break; case "object": objData = {}; for (var k in strName) { if (LANG_HASH_INDEX[k]) { LANG_JUST_DELETE = true; LANG.unload(k); LANG_JUST_DELETE = false; } LANG_HASH_LIST.push(strName[k]); LANG_HASH_INDEX[k] = strName[k]; objData[k] = 1; } } hash_rebuild(); lang_update(objData); return typeof strName == "string" ? objData : strName; }, unload: function unload(strName) { // () var obj, res = {}, i; if (!(Array.isArray(strName))) strName = [strName]; if (!strName.length) return null; for (i = strName.length; i--;) { obj = LANG_HASH_INDEX[strName[i]]; if (obj) { LANG_HASH_LIST.splice(LANG_HASH_LIST.indexOf(obj), 1); delete LANG_HASH_INDEX[strName[i]]; res[strName[i]] = obj; if (LANG_JUST_DELETE) return; } } hash_rebuild(); lang_update(obj); return strName.length == 1 ? res : obj; }, params: function params(htmlElem, strKey, arrParams) { if (typeof htmlElem != "object" || !htmlElem._lang || !htmlElem._lang[strKey]) return false; htmlElem._lang[strKey] = htmlElem._lang[strKey].slice(0, 1).concat(Array.isArray(arrParams) ? arrParams : []); lang_set(htmlElem, strKey, htmlElem._lang[strKey]); return true; } }); return LANG; })(); 

अनुक्रम

सबसे पहले, मैं यह नोट करना चाहता हूं कि मेरे कार्यान्वयन में मैंने कई प्रकार के शब्दकोशों पर प्रकाश डाला:
1) डाउनलोड करने योग्य :
ऐसे शब्दकोश की कुंजियों को उपयोगकर्ता द्वारा अलग-अलग नहीं बदला जा सकता है: उन्हें केवल उनकी संपूर्णता में डाउनलोड या अनलोड किया जा सकता है। ऐसा शब्दकोश हमेशा अन्य डाउनलोड करने योग्य शब्दकोशों पर पूर्वता लेता है। के नाम पर।
2) कस्टम :
एक अंतर्निहित शब्दकोश, जिसकी प्राथमिकता हमेशा डाउनलोड किए गए किसी भी शब्दकोश की प्राथमिकता से कम होती है। इसे पूरी तरह से लोड या अनलोड नहीं किया जा सकता है, यह केवल व्यक्तिगत कुंजी के लिए बदलता है। इसका अर्थ उन मूल्यों को संग्रहीत करना है जो उपयोगकर्ता द्वारा निर्दिष्ट किए गए थे, बाकी हिस्सों से अलग। सभी डाउनलोड करने योग्य शब्दकोशों को उतारने से उपयोगकर्ता शब्दकोश प्रभावित नहीं होगा और इसके मूल्य अभी भी उपलब्ध होंगे।
3) प्रणाली :
अर्थ के संदर्भ में, यह पूरी तरह से उपयोगकर्ता को दोहराता है, लेकिन सर्वोच्च प्राथमिकता है।


चित्र 1 - डाउनलोड करने योग्य शब्दकोशों की सूची (वर्ग कोष्ठक में), साथ ही उपयोगकर्ता और सिस्टम शब्दकोशों, प्राथमिकता बढ़ाने के क्रम में व्यवस्थित।

इसलिए, जब उपयोगकर्ता या सिस्टम शब्दकोश को बदलते हैं, साथ ही लोड किए गए शब्दकोशों की सूची को बदलते समय, हैश को अपडेट किया जाता है। एल्गोरिथ्म इस प्रकार है:
1) वस्तुओं से कुंजियाँ निर्दिष्ट आकृति के रिवर्स ऑर्डर में हैश ऑब्जेक्ट में कॉपी की जाती हैं, अर्थात। प्राथमिकता घटने के क्रम में;
2) यदि इस तरह की कुंजी पहले से ही हैश में मौजूद है, तो नकल नहीं होती है।

कुंजी \ शब्दकोश	[उपयोगकर्ता]	सामान्य	प्रणाली	APP1	APP2	App3	[सिस्टम]	हैश
ठीक		ठीक	ठीक					ठीक
रद्द	रद्द करना	रद्द करना	रद्द करना					रद्द करना
किया		हो गया		हो गया				हो गया
STRING		तार						तार

तालिका 1 - उच्च प्राथमिकता शब्दकोशों से हैश के लिए चाबियों का संक्रमण।

डिफ़ॉल्ट रूप से, कोई शब्दकोश लोड नहीं किया गया है; उपयोगकर्ता और सिस्टम शब्दकोश खाली हैं। वैसे, डिक्शनरी के किसी न किसी प्रॉपर्टी के लिए कॉल खाली स्ट्रिंग नहीं लौटती है, लेकिन "#key" फॉर्म की एक स्ट्रिंग है, जहां हैश प्रतीक के बाद उस कुंजी का नाम होता है जिसे एक्सेस किया गया है। ऐसा किया जाता है ताकि स्क्रीन तुरंत दिखाई दे कि कौन सी कुंजी मौजूद नहीं है।

इंटरफ़ेस विवरण

स्रोत कोड को निष्पादित करने के बाद, वैश्विक चर लैंग उपलब्ध हो जाएगा, जिसका मूल्य एक फ़ंक्शन है जो एक तत्व की विशेषताओं को एक हैश के साथ कुंजी के माध्यम से जोड़ता है। आप निम्नानुसार तर्क पारित कर सकते हैं:

 lang(htmlTextNode,strKey); lang(htmlTextNode,strKey,arrParams); lang(htmlTextNode,objKeys); lang(htmlElement,objKeys); 

जहां:
htmlTextNode - वह पाठ नोड जिसके साथ बाइंडिंग होती है;
strKey - शब्दकोश में वह कुंजी जिसके द्वारा कॉल आएगा;
arrParams - अनुवाद में प्रतिस्थापित पैरामीटर (उस पर बाद में);
objKeys - एक ऐसा गुण जिसमें इसके गुण शामिल होते हैं जिसमें कुंजी होती है जिसके द्वारा कॉल होनी चाहिए, और मूल्यों में - बांधने की विशेषता (एक स्ट्रिंग के रूप में)। आप मूल्य में अनुवाद में स्थानापन्न करने के लिए पैरामीटर भी निर्दिष्ट कर सकते हैं। इसके लिए, मान एक सरणी होना चाहिए, जहां पहला तत्व बांधने की विशेषता है, और बाकी पैरामीटर मान हैं।
लैंग वैरिएबल के अपने फंक्शन गुण हैं, सेट, लोड, अनलोड, परम ।

उपयोग कर रहे हैं :

 lang.get(strKey); 

जहां:
strKey वह कुंजी है जिसका मूल्य प्राप्त करना है।
पारित कुंजी के साथ जुड़े अनुवाद स्ट्रिंग लौटाता है।

सेट का उपयोग करना:

 lang.set(strKey, strValue,boolSystem); 

जहां:
strKey - वह कुंजी जिसका मूल्य निर्धारित किया जाना चाहिए;
strValue सेट करने के लिए मान है। यदि यह खाली है या स्ट्रिंग नहीं है, तो संबंधित कुंजी को शब्दकोश से हटा दिया जाता है;
boolSystem - यदि यह पैरामीटर सही में परिवर्तित होता है , तो रिकॉर्ड सिस्टम शब्दकोश में होता है, अन्यथा - उपयोगकर्ता शब्दकोश में।
यदि कुंजी को हटा दिया गया है, तो रिकॉर्ड किया गया मान या अशक्त लौटाता है

लोड का उपयोग करना:

 lang.load(strName,objData); 

जहां:
strName - शब्दकोश (स्ट्रिंग) या कई गुणों के साथ एक वस्तु, जो शब्दकोशों के नाम हैं, और उनका अर्थ स्वयं शब्दकोशों है;
objData - यदि पहला तर्क एक स्ट्रिंग है, तो यह तर्क एक शब्दकोश है।
डिक्शनरी लौटाती है (ओं) को लोड किया गया था।

उतराई का उपयोग करना:

 lang.unload(strName); 

जहां:
strName - शब्दकोश के नाम (स्ट्रिंग) या नाम (सरणी) को उतारने के लिए।
डाउनलोड की गई डिक्शनरी मिलती है।

परम का उपयोग करना:

 lang. params(htmlElem,strKey,arrParams); 

जहां:
htmlElem - एक तत्व जो पहले से ही शब्दकोश से जुड़ा हुआ है;
strKey - शब्दकोश पहुंच कुंजी;
arrParams - नए मापदंडों की एक सरणी।
यदि नया पैरामीटर सेट किया गया था, तो सही है या अन्यथा गलत है।
अगले अध्याय में उदाहरण को इंटरफ़ेस की समझ में स्पष्टता लाना चाहिए।

तत्वों के साथ बातचीत

शब्दकोशों के साथ बातचीत करने में सक्षम होने के लिए, आपको इस तत्व की एक विशेषता और शब्दकोश कुंजी के माध्यम से एक विशिष्ट तत्व या पाठ नोड को हैश से बांधने की आवश्यकता है। यह विशेषता या तो इनर HTML हो सकती है, या शीर्षक, ऑल्ट , आदि। यदि कोई टेक्स्ट नोड बाउंड है, तो डिफ़ॉल्ट बाइंडिंग टेक्स्टकॉन्टेंट से होकर गुजरती है। नीचे मैं वर्णन करूंगा कि क्यों।
एक उदाहरण पर विचार करें:

 lang(document.body.appendChild(document.createElement("button")),{"just_a_text":"innerHTML" }); //      innerHTML   just_a_text 

बटन एक कुंजी के माध्यम से जुड़ा हुआ है जो अभी तक मौजूद नहीं है (इसलिए, पाठ "#just_a_text" है)। तकनीकी कार्यान्वयन के लिए, _lang गुण तत्व पर बनाया गया है, जिनमें से गुण हैश कीज़ हैं, और मान सरणियाँ हैं, जहाँ पहले तत्व इस तत्व के गुण हैं, जिसमें हैश मान लिखे जाएंगे, और बाकी अनुवाद में स्थानांतरित किए गए पैरामीटर हैं।
अब शब्दकोश में एक कुंजी लिखने के लिए 3 विकल्प हैं: डाउनलोड किए गए शब्दकोशों की सूची में एक नया शब्दकोश जोड़ें या उपयोगकर्ता या सिस्टम शब्दकोश में एक मूल्य प्रदान करें। प्राथमिकता बढ़ाने के क्रम में सभी विकल्पों पर विचार करें (मैं कंसोल में लाइन द्वारा इस लाइन को करने की सलाह दूंगा):

 lang.set("just_a_text","  "); //    lang.load("def",{"just_a_text":"   "}); lang.set("just_a_text","    ",1); //    

बटन पर पाठ कोड में निर्दिष्ट प्रत्येक चरण के साथ बदल जाएगा। इस प्रकार, इस मामले में, सभी 3 प्रकार के शब्दकोशों का उपयोग किया जाता है।
अब हम उल्टे क्रम में शब्दकोशों से कुंजियाँ निकालते हैं और सुनिश्चित करते हैं कि घोषित पदानुक्रम वास्तव में काम करता है:

 lang.set("just_a_text","",1); //    lang.unload("def");//    def lang.set("just_a_text",""); //     

अब बटन पर पाठ फिर से "#just_a_text" हो जाएगा।

मापदंडों

अक्सर मुझे न केवल शब्दकोश से पाठ स्थानापन्न करना पड़ता था, बल्कि उसमें कुछ मापदंडों को भी पास करना होता था, इसलिए मापदंडों को प्रतिस्थापित करने का विकल्प भी लागू होता है। उन्हें एक तत्व को कुंजी के साथ जोड़ते समय निर्दिष्ट किया जा सकता है, या इसे lang.params फ़ंक्शन का उपयोग करके बाइंड करने के बाद निर्दिष्ट किया जा सकता है। रेखा के अंदर पैरामीटर की स्थिति को इंगित करने के लिए, निर्माण /% \ d + / का उपयोग किया जाता है , जहां अंक संचरित पैरामीटर की संख्या को इंगित करते हैं। यदि पैरामीटर पारित नहीं किया गया था, तो एक खाली स्ट्रिंग प्रतिस्थापित किया जाता है।
विशेष रूप से अच्छी तरह से, प्रतिस्थापन खुद को भीतर HTML के साथ मिलकर प्रकट करता है:

 lang(b=document.body.appendChild(document.createElement("button")), {"pr1":"innerHTML" }); lang.set("pr1"," 1: <b>%1</b>.  2: <b>%2</b>. "); lang.params(b,"pr1",[100,500]); 

अब, बटन के अंदर, हस्तांतरित मापदंडों पर प्रकाश डाला जाएगा। लिंक

उत्पादकता

लोड वितरित करने के लिए (मैंने पहले ही इस बारे में यहां लिखा है ), मैं अंतराल फ़ंक्शन का उपयोग करता हूं जो शब्दकोश से जुड़े तत्वों की एक सरणी को संसाधित करता है।
दूसरे, संभव के रूप में तत्वों पर आंतरिक HTML का उपयोग करने की कोशिश करें, इन तत्वों के पाठ नोड्स पर textContent का उपयोग करें। इनर HTML 20+ गुना धीमा है, क्योंकि इस विशेषता का सेटर HTML कोड के रूप में पारित मूल्य को पार्स करता है। textContent HTML को पार्स करने के बारे में नहीं सोचता है, लेकिन पाठ को सम्मिलित करता है क्योंकि यह है (आप यहां तक ​​कि <,> से & lt ;, & gt;) भी नहीं बदल सकते, लेकिन, दुर्भाग्य से, यह हमेशा लागू नहीं होता है, विशेष रूप से, पिछले उदाहरण में।

IE8 के तहत चल रहा है

थोड़े विचार के साथ, मैंने महसूस किया कि यह चीज़ आठवें IE के तहत चलाई जा सकती है। ऐसा करने के लिए, आपको "गंदे" हैक के एक जोड़े का सहारा लेना होगा:

 if (typeof Array.isArray != 'function') Array.isArray = function (value) { return Object.prototype.toString.call(value) === '[object Array]'; } if (typeof Array.prototype.indexOf != 'function') Array.prototype.indexOf = function (value, offset) { offset = parseInt(offset); for (var i = offset > 0 ? offset : 0, l = this.length; i < l; i++) if (this[i] === value) return i; return -1; }; //        IE8 Text.prototype._lang = null; //    ,     if(typeof Element.prototype.compareDocumentPosition!="function") Text.prototype.compareDocumentPosition = Element.prototype.compareDocumentPosition = function compareDocumentPosition(node) { // Compare Position - MIT Licensed, John Resig function comparePosition(a, b) { return a.compareDocumentPosition ? a.compareDocumentPosition(b) : a.contains ? (a != b && a.contains(b) && 16) + (a != b && b.contains(a) && 8) + (a.sourceIndex >= 0 && b.sourceIndex >= 0 ? (a.sourceIndex < b.sourceIndex && 4) + (a.sourceIndex > b.sourceIndex && 2) : 1) + 0 : 0; } return comparePosition(this,node); }; 

हालांकि वास्तव में मेरा मानना ​​है कि IE आठवें संस्करण तक, समावेशी, को लंबे समय तक दफन करने की आवश्यकता है। आंतक हमारे हैं।

निष्कर्ष

इस चीज को डिजाइन करते समय, मैंने इसे जितना संभव हो उतना अनुकूलित करने की कोशिश की, उदाहरण के लिए, मैंने तत्व के अंदर पाठ में बदलाव को कम कर दिया। यदि कुंजी मान नहीं बदला है, तो यह अद्यतन नहीं है। नतीजतन, यह पता चला कि 10000 बटन के अंदर पाठ को बदलने (प्रोफाइलिंग सक्षम के साथ, टेक्स्टकॉन्टेंट के माध्यम से) एक सेकंड के बारे में।

एक छोटा सा माइनस है: यदि आप DOM से किसी तत्व को "पुल" करते हैं, तो उस पर मौजूद डेटा को अब अपडेट नहीं किया जा सकता है। समस्या को हल करने के लिए, आपको इसे एक हैश के साथ जोड़ना होगा।

सिद्धांत रूप में, इस कार्यान्वयन का उपयोग न केवल पृष्ठ भाषा को बदलने के लिए किया जा सकता है। इसका मुख्य उद्देश्य शब्दकोश बदलते समय निर्दिष्ट विशेषताओं को बदलना है। यानी शीर्षक में इंगित की गई गुंजाइश बहुत व्यापक है।

कार्यान्वयन शायद सबसे सफल नहीं है। टिप्पणियों में, मैं रेटिंग और सुधार युक्तियों का इंतजार करता हूं। और कृपया, विपक्ष से बहस करें। अरे हाँ, MIT लाइसेंस।

युपीडी। एक उदाहरण यहां पाया जा सकता है । इंटरनेट चालू होने पर केवल पृष्ठ खोलें।

UPD2। सही रास्ते पर निर्देशों के लिए और कमियों को इंगित करने के लिए लाहमती के लिए विशेष धन्यवाद।