शुभ दिन, हभवें!

इस लेख में मैं एक वेब अनुप्रयोग में पाठ और स्थानीयकरण के प्रबंधन की समस्या के सरल समाधान के बारे में बात करूंगा, जिसे आप स्वयं लागू कर सकते हैं या एक तैयार किए गए का उपयोग कर सकते हैं।

मैं लंबे समय से अपने खुद के विचारों और अनुभवों को साझा करना चाहता था ... और निश्चित रूप से, जीवन के लिए बात करता हूं।

समस्या का बयान

यहाँ सब कुछ स्पष्ट प्रतीत होता है। या नहीं? आइए सोचें कि हम क्या चाहेंगे।

हमें किसी तरह स्थानीयकृत ग्रंथ प्राप्त करने की आवश्यकता है। ग्रंथों में चर हो सकते हैं। क्या चरों का भी स्थानीयकरण किया जा सकता है?! सिद्धांत रूप में, हाँ। और अगर चर एक तारीख या संख्या है?! प्लस मार्कडाउन समर्थन। और अंत में, पाठ नहीं मिलने की स्थिति में कुछ समाधान।

कार्यान्वयन

आधार एक साधारण वस्तु होगी, जहां कुंजी पाठ का कोड है, और मूल्य वास्तविक पाठ है जिसकी आपको आवश्यकता है, कुछ भी जटिल नहीं है:

const textsBundle = { 'button.open': 'Open', 'button.save': 'Save', }; function TextManager(texts) { this.getText = function(code) { return texts[code]; }; } const textManager = new TextManager(textsBundle); textManager.getText('button.open'); 

अगला, हमें एक ऐसे तंत्र की आवश्यकता है, जो अंतिम परिणाम देने से पहले पाठ के किसी प्रकार के हेरफेर करने में सक्षम हो, उदाहरण के लिए, पैरामीटर डालें। और फिर मुझे एक दिलचस्प विचार मिला - क्या होगा यदि हम टेक्स्ट में हेरफेर करने के लिए मिडलवेयर का उपयोग करते हैं? आखिरकार, मैंने ऐसे फैसले नहीं देखे हैं ... अच्छी तरह से, या मैंने बुरी तरह से देखा है :)

हम मिडलवेयर के लिए आवश्यकताओं पर निर्णय लेते हैं: इनपुट पर, मिडलवेयर पाठ और मापदंडों को स्वीकार करेगा, और आवश्यक हेरफेर के बाद परिणामी टेक्स्ट को बाहर कर देगा।
पहले मिडलवेयर को मूल टेक्स्ट प्राप्त होगा, और बाद वाले को पिछले मिडलवेयर से टेक्स्ट प्राप्त होगा। लापता कोड जोड़ें:

 function TextManager(texts, middleware) { function applyMiddleware(text, parameters, code) { if (!middleware) return text; return middleware.reduce((prevText, middlewareItem) => middlewareItem(prevText, parameters, code), text); } this.getText = function(code, parameters) { return applyMiddleware(texts[code], parameters, code); }; } 

TextManager अपने कोड द्वारा टेक्स्ट आउटपुट कर सकता है। इसे मिडलवेयर का उपयोग करके भी विस्तारित किया जा सकता है, जो कई संभावनाओं को खोलता है, उदाहरण के लिए:

• पाठ नहीं मिलने पर मामले को संभालना
• पाठ में मापदंडों का उपयोग
• पैरामीटर स्थानीयकरण
• मार्कडाउन का उपयोग करें
• पाठ परिरक्षण, आदि।

अभ्यास

हम आवश्यक मिडलवेयर के एक जोड़े को लिखेंगे। आपको उनकी 100% आवश्यकता होगी।

InsertParams
ग्रंथों में मापदंडों के उपयोग की अनुमति देता है। उदाहरण के लिए, हमें "हैलो {{उपयोगकर्ता नाम}}" पाठ प्रदर्शित करने की आवश्यकता है। निम्नलिखित मिडलवेयर इसे प्रदान करेगा:

 function InsertParams(text, parameters) { if (!text) return text; if (!parameters) return text; let nextText = text; for (let key in parameters) { if (parameters.hasOwnProperty(key)) { nextText = text.replace('{{' + key + '}}', parameters[key]); } } return nextText; } 

UseCodeIfNoText
यदि पाठ नहीं मिला, तो आपको undefined बजाय पाठ कोड वापस करने की अनुमति देता है:

 function UseCodeIfNoText(text, parameters, code) { return text ? text : code; } 

कुल हम निम्नलिखित उपयोग प्राप्त करते हैं:

 const textsBundle = { 'text.hello': 'Hello', 'text.hello_with_numeric_parameter': 'Hello {{0}}', 'text.hello_with_named_parameter': 'Hello {{username}}', }; const textManager = new TextManager(textsBundle, [InsertParams, UseCodeIfNoText]); textManager.getText('nonexistent.code') // 'nonexistent.code' textManager.getText('text.hello') // 'Hello' textManager.getText('text.hello_with_numeric_parameter', ['Vasya']) // 'Hello Vasya' textManager.getText('text.hello_with_named_parameter', { username: 'Petya' }) // 'Hello Petya' 

प्रतिक्रिया आवेदन उदाहरण

सबसे पहले, शीर्ष स्तर TextManager पर TextManager और टेक्स्ट जोड़ें।
मेरी राय में, सर्वर से ग्रंथों को खींचना सबसे अच्छा है, लेकिन सादगी के लिए मैं ऐसा नहीं करूंगा।

 const textsBundle = { 'text.hello': 'Hello {{username}}' } function TextManagerProvider({ children }) { const textManager = new TextManager(textsBundle, [InsertParams, UseCodeIfNoText]); return ( <TextManagerContext.Provider value={textManager}> {children} </TextManagerContext.Provider> ) } 

अगला, घटक में, textManager उपयोग textManager , उदाहरण के लिए, हुक का उपयोग करते हुए, और हमें कोड द्वारा वांछित पाठ मिलता है।

 function SayHello({ username }) { const textManager = useContext(TextManagerContext); return ( <div> {textManager.getText('text.hello', { username })} </div> ) } 

स्थानीयकरण

आप पूछते हैं, "स्थानीयकरण का इससे क्या लेना-देना है?"
सब कुछ बहुत सरल है - भाषा बदलते समय, TextManager का एक नया उदाहरण TextManager , पाठ जोड़ें और तुरंत परिणाम प्राप्त करें।

तपस्या अध्याय :)

जैसा कि आप उदाहरणों से देख सकते हैं, उपयोग बेहद सरल है, और मिडलवेयर के लिए धन्यवाद आप अनिश्चित काल तक कार्यक्षमता का विस्तार कर सकते हैं।

मैंने अपना कार्यान्वयन जीथब पर पोस्ट किया और पाठ-प्रबंधक को और विकसित करने की योजना बनाई। उपयोग करें, सुधार की पेशकश करें और, जैसा कि वे कहते हैं, आपका स्वागत है! :)

निष्कर्ष में

इसलिए मैंने अपनी दाएवनी इच्छा पूरी की - हैबर पर एक लेख लिखा। मैं वास्तव में आशा करता हूं कि यह लेख उपयोगी होगा और समुदाय को खुश करेगा।

आपका ध्यान के लिए धन्यवाद।