शुद्ध जेएस पर टिनी 30-लाइन गैजेट कंटेनर

30 , 24 , 19 और यहां तक ​​कि 1 लाइन पर कार्यक्रमों के शांत कार्यान्वयन को देखने के बाद, मैंने भी कुछ इसी तरह से हबर के स्वच्छ पृष्ठों को फीका करने का फैसला किया। इसके अलावा, लंबे समय से मैं एक आमंत्रण चाहता था , अपने लिए एक नई गुणवत्ता में काम करने का अवसर था ।

तथ्य यह है कि काम पर मुझे क्रोम के लिए एक्सटेंशन लिखना सीखना पड़ा। चूंकि कार्य स्वयं छोटा था, इसलिए पहला विचार स्वाभाविक रूप से माथे में एक नूडल कोड लिखना था। लेकिन लोकलस्टोरेज में डेटा की प्राप्ति और भंडारण से परेशान होकर, मैंने फैसला किया कि यह काम नहीं करेगा, और, कम से कम, मुझे लोकलस्टोरेज पर कुछ थ्रेड रैपर लिखने की जरूरत है।

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

कंटेनर से पहले जो कार्य निर्धारित किए गए थे:

• LocalStorage के साथ सुविधाजनक काम। हम वस्तुओं और सरणियों सहित किसी भी डेटा को प्राप्त करते हैं और सहेजते हैं।
• मापदंडों का किसी प्रकार का सत्यापन (यदि केवल स्थानीय स्तर में ऐसा कोई पैरामीटर नहीं है तो)।
• जब एक ढेर में सब कुछ ढेर हो जाता है, तो समूहों में मापदंडों को पैक करने की क्षमता खराब होती है।
• व्यक्तिगत घटकों के पृथक्करण के साथ कार्यक्षमता को जोड़ना, जबकि संभवतः कुछ मापदंडों को प्रारंभ करना आवश्यक होगा।

सिद्धांत रूप में, सब कुछ एक छोटे कंटेनर में लागू किया गया था, और छोटे अनुप्रयोगों के लिए यह मुझे 100% सूट करता है।

तो, हमारे पास एक ऐप ऑब्जेक्ट है, और इसमें केवल 3 विधियाँ हैं: addStorage, addValidator और addModule।

addStorage

किसी भी एक्सटेंशन को उपयोगकर्ता सेटिंग्स को कहीं स्टोर करना चाहिए। ठीक है, लिखो

app.addStorage('option'); 

उसके बाद, हमारे पास एक नया app.option () तरीका है। इस विधि का उपयोग विकल्प समूह से स्थानीयस्टोरेज से मापदंडों को बचाने और पुनर्प्राप्त करने के लिए किया जाता है (देखें विशलिस्ट # 2: हम कटलेट से मक्खियों को अलग करते हैं, यह समूह केवल उपयोगकर्ता सेटिंग्स के लिए है, हम अन्य मापदंडों के लिए एक अलग विधि का उपयोग करेंगे)। app.option () 2 तर्क लेता है: पैरामीटर का नाम और उसका मूल्य। दूसरा तर्क वैकल्पिक है। यदि यह निर्दिष्ट नहीं है, तो विधि पैरामीटर का मान लौटाएगी; यदि निर्दिष्ट किया गया है, तो यह इस मान के साथ पैरामीटर को बचाएगा। हुड के तहत app.option धारावाहिक के लिए JSON.stringify का उपयोग करता है, और डेटा को पुनः प्राप्त करने के लिए JSON.parse।

 app.option('foo', 'bar'); // localStorage['option.foo'] = 'bar' var a = app.option('foo'); // a = 'bar' //      app.option('foo', [1,2,3]); var a = app.option('foo'); // a = [1,2,3] app.option('foo', { bar: [1,2,3] }); var a = app.option('foo'); // a = { bar: [1,2,3] } 

स्वाभाविक रूप से, addStorage उपयोगकर्ता सेटिंग्स तक सीमित नहीं है, हम किसी भी डेटा को स्थानीयस्टोर में रखने की आवश्यकता कर सकते हैं:

 app.addStorage('whatever_you_want'); app.whatever_you_want('foo', 'bar'); 

addValidator

यह विधि एक विशिष्ट पैरामीटर के लिए एक सत्यापन नियम जोड़ती है। यह 3 तर्क लेता है: पैरामीटर समूह का नाम, पैरामीटर का नाम, और सत्यापन कार्य स्वयं। यह फ़ंक्शन इस पैरामीटर के मान को तर्क के रूप में लेता है और वांछित मान लौटाता है। हर बार जब आप app.option ('foo') को कॉल करते हैं, तो foo के सत्यापनकर्ता को कॉल किया जाता है, यदि कोई निर्दिष्ट किया गया हो। उदाहरण के लिए:

 var a = localStorage['option.foo']; // a = undefined var a = app.option('foo'); // a = undefined app.addValidator('option', 'foo', function(foo) { return typeof foo === 'undefined' ? 'bar' : foo; }); var a = localStorage['option.foo']; // a = undefined var a = app.option('foo'); // a = 'bar' 

यह पहली शुरुआत में एक्सटेंशन में बहुत सुविधाजनक है, क्योंकि हमारे पास अभी तक कोई डेटा नहीं है।

addModule

addModule सबसे दिलचस्प है। यह आपको कंटेनर में एक संपूर्ण मॉड्यूल जोड़ने की अनुमति देता है। यह 2 तर्क लेता है: एक नाम और एक विधि जिसमें गुण या गुण होते हैं।

 app.addModule('foo', { bar: function() { // do something... } }); //     bar app.foo.bar(); 

स्वाभाविक रूप से, अगर सब कुछ इतना सरल था, तो इसमें कोई अर्थ नहीं होगा। कुछ जादू जोड़ें। सबसे पहले, एक मॉड्यूल ऑब्जेक्ट में एक इनिट () विधि हो सकती है। तब एक मॉड्यूल (जैसे एक निर्माता) को जोड़ते समय इस पद्धति को बुलाया जाएगा। इसमें हम मॉड्यूल के लिए किसी भी प्रारंभिक तर्क को निर्धारित करते हैं। दूसरे, फू मॉड्यूल खुद ऐप कंटेनर की एक मिनी कॉपी बन जाता है। यानी कार्य addStorage, addValidator और यहां तक ​​कि addModule इसमें उपलब्ध हो जाते हैं! बेहतर तरीके से यह प्रदर्शित करने के लिए कि यह दृष्टिकोण कैसे काम करता है, आइए आवेदन को स्थानीय बनाने के लिए एक मॉड्यूल को लागू करने का प्रयास करें।

 //         trans() -   app.addModule('i18n', { //      data: {}, //   init: function() { // -    ,    option   i18n, (!)      ,     this.addStorage('option'); //   , ..       this.addValidator('option', 'locale', function(locale) { return typeof locale === 'undefined' ? 'ru' : locale; }); document.write('<script src="/path/to/i18n/' + this.option('locale') + '.js"><\/script>'); this.data = data_from_file; $(document).ready(function() { $('.i18n').each(function() { $(this).text(this.trans($(this).attr('data-i18n'))); }); }); }, trans: function(field) { return typeof this.data[field] === 'undefined' ? field : this.data[field]; } }); 

इसके बारे में थोड़ा और अधिक। this.addStorage('option'); । यहां हमने i18n मॉड्यूल में उपयोगकर्ता सेटिंग्स के लिए मापदंडों का एक समूह बनाया। यह हमारे द्वारा पहले उपयोग किए गए के साथ मेल नहीं खाता है, यह i18n ऑब्जेक्ट के संदर्भ में बनाया गया है। आवेदन में, इस समूह तक पहुंच app.i18n.option('foo'); माध्यम से है app.i18n.option('foo'); । यह सब फिर से विशलिस्ट # 2 के लिए किया जाता है: हम उपयोगकर्ता सेटिंग्स को मॉड्यूल द्वारा विभाजित करते हैं। इसलिए यह समझना बेहतर है कि क्या है।

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

त्याग

मैं इस कंटेनर की किसी भी 100% जरूरत और प्रासंगिकता का ढोंग नहीं करता। किसी भी रचनात्मक तर्क का स्वागत है। आशा है कि किसी को इस पोस्ट में कुछ रोचक जानकारी मिलेगी।

कंटेनर कोड का पूरा पाठ

 var app = { validator: {}, addStorage: function(name) { this[name] = function(key, value) { var local_storage_name = typeof this.name === 'undefined' ? name : this.name + '.' + name; if (typeof value === 'undefined') { var param = typeof localStorage[local_storage_name + '.' + key] !== 'undefined' ? JSON.parse(localStorage[local_storage_name + '.' + key]) : null; if (typeof this.validator[name + '.' + key] !== 'undefined') { param = this.validator[name + '.' + key](param); } return param; } localStorage[local_storage_name + '.' + key] = JSON.stringify(value); }; }, addValidator: function(storage, name, callback) { this.validator[storage + '.' + name] = callback; }, addModule: function(name, object) { object.name = name; object.validator = {}; object.addStorage = this.addStorage; object.addValidator = this.addValidator; object.addModule = this.addModule; this[name] = object; if (typeof this[name].init !== 'undefined') { this[name].init(); } } };