👩‍⚕️ 🚭 🆗 जटिल जावास्क्रिप्ट अनुप्रयोगों के सरल न्यूनतम कार्यान्वयन 👩🏿‍🤝‍👩🏼 ⛹🏼 🤦

मैं जटिल जावास्क्रिप्ट अनुप्रयोगों को विकसित करने के लिए एक साधारण न्यूनतम दृष्टिकोण का वर्णन करना चाहता हूं। केवल jQuery और मेरे js टेम्पलेट इंजन का उपयोग बाहरी पुस्तकालयों से किया जाएगा, और केवल $.ready() , $.proxy() और $.proxy() का उपयोग jQuery से किया जाता है - अर्थात। बिंदु पुस्तकालयों में नहीं है (यह अपने पसंदीदा लोगों के साथ बदलने के लिए तुच्छ है), लेकिन दृष्टिकोण में ही।

दृष्टिकोण दो विचारों पर आधारित है:

जावास्क्रिप्ट विजेट्स छोटे मॉड्यूल होते हैं, जिनमें से प्रत्येक वेब पेज का एक निश्चित भाग "मालिक" होता है (अर्थात, पेज के इस हिस्से का सारा नियंत्रण विशेष रूप से इस मॉड्यूल के तरीकों के माध्यम से होता है, न कि DOM के प्रत्यक्ष संशोधन के माध्यम से - इनकैप्सुलेशन )। विजेट केवल कार्यक्षमता के लिए जिम्मेदार है, लेकिन उपस्थिति के लिए नहीं; इसलिए, DOM के उस हिस्से का प्रत्यक्ष संशोधन जो विजेट "मालिक" विजेट के बाहर की अनुमति है - लेकिन केवल विशुद्ध रूप से डिजाइन कार्यों के लिए (वास्तुकला और आवेदन की समग्र जटिलता के लिए, सीएसएस या ____ के माध्यम से उपस्थिति को सही करने के बीच कोई बुनियादी अंतर नहीं है)।
वैश्विक घटना प्रेषण। विगेट्स के बीच की बातचीत को ग्लोबल डिस्पैचर ( कमजोर कनेक्टिविटी , मध्यस्थ / मध्यस्थ पैटर्न) को संदेश भेजकर किया जाता है, और वह पहले से ही इस संदेश के साथ क्या करना है, यह तय करता है - विजेट बनाएँ / हटाएं, अन्य विजेट विधियों को खींचें, डिजाइनर कोड निष्पादित करें आदि। घटना प्रसंस्करण के लिए गतिशील दृष्टिकोण के विपरीत (जब किसी विशेष घटना के लिए घटना संचालकों को ऑपरेशन के दौरान जोड़ा / हटा दिया जाता है), स्थैतिक प्रेषणकर्ता कोड की समझ और डीबगिंग को बहुत सरल करता है। बेशक, ऐसे कार्य हैं जिनके लिए गतिशील इवेंट हैंडलर की आवश्यकता होती है, लेकिन ज्यादातर मामलों में यह एक अत्यधिक जटिलता है, इसलिए यह संभव है कि सब कुछ स्थिर हैंडलर द्वारा किया जाता है।

साइकिल के बारे में

मैं आमतौर पर एप्लिकेशन के सर्वर पक्ष को विकसित करता हूं (इसके अलावा, यह इतना ही नहीं है कि नेटवर्क सेवाओं के रूप में वेबसाइट ही है), ग्राहक पक्ष मेरा मुख्य प्रोफ़ाइल नहीं है। इसलिए जब मुझे पहली बार एक काफी परिष्कृत एक-पृष्ठ वेब एप्लिकेशन (लगभग दो साल पहले) विकसित करने का काम मिला, तो मैंने ऐसे अनुप्रयोगों के लिए तैयार वास्तुशिल्प तरीकों की तलाश की, लेकिन, दुर्भाग्य से, मुझे नहीं मिला (हालांकि रिपोर्ट के बाद से आधा साल पहले ही बीत चुका है निकोलस ज़कस "स्केलेबल जावास्क्रिप्ट एप्लीकेशन आर्किटेक्चर": वीडियो , स्लाइड्स )।

मैंने विभिन्न परियोजनाओं पर इन दो वर्षों के दौरान उस समय वास्तुकला विकसित की, यह जांचा कि यह वास्तविक कार्यों पर कैसे काम करता है। यह अच्छी तरह से काम करता है। :) इसीलिए मैंने इस लेख को लिखने का फैसला किया। लेखन की प्रक्रिया में, मैंने अन्य समाधानों के लिए फिर से देखा, और निकोलस ज़कस द्वारा एक रिपोर्ट मिली, साथ ही इस विषय पर पढ़ने से मुझे वास्तव में लार्ज-स्केल जावास्क्रिप्ट एप्लीकेशन आर्किटेक्चर के लिए Addy Osmani Patterns लेख पसंद आया।

उन लोगों के लिए जो पहले से ही वहां वर्णित वास्तुकला से परिचित हैं, मैं संक्षेप में अपने दृष्टिकोण में अंतर का वर्णन करूंगा:

मेरी राय में, यह संरचना याहू, जीमेल, आदि के पैमाने के अनुप्रयोगों के लिए आवश्यक है। लेकिन आधुनिक रूप से जटिल वेब अनुप्रयोगों के विशाल बहुमत के लिए, यह अभी भी बहुत अधिक है। इस वास्तुकला का अत्यधिक लचीलापन एक मूल्य पर आता है - यह आवेदन की जटिलता को बढ़ाता है। यहाँ उन विशेषताओं का एक उदाहरण है जिसमें मुझे कभी वास्तविक आवश्यकता नहीं थी:
- बस बेस लाइब्रेरी (डोजो के साथ jQuery) को बदलने की क्षमता
- सिस्टम कार्यक्षमता के लिए मॉड्यूल के "एक्सेस राइट्स" की जांच और नियंत्रण
- पृष्ठ पर मॉड्यूल जोड़ें / निकालें
- गतिशील घटना संचालकों के विषय में मैंने ऊपर लिखा था
यह कहीं भी स्पष्ट रूप से उल्लेख नहीं किया गया है, लेकिन जहां तक मैं समझता हूं, उनकी वास्तुकला में "मॉड्यूल" लगभग पूरे बड़े और जटिल अनुप्रयोग हैं (जैसे याहू पर जीमेल पेज या मौसम विजेट पर चैट)। मेरा "मॉड्यूल" न्यूनतम संभव कार्यक्षमता को लागू करता है जिसे एक अलग-थलग इकाई में प्रतिष्ठित किया जा सकता है। (हालांकि, एंड्रयू बर्गेस स्क्रैंकास्ट "राइटिंग मॉड्यूलर जावास्क्रिप्ट" मेरे जैसे ही छोटे मॉड्यूल को दिखाता है।) एक उदाहरण के रूप में, हम एक इनपुट के साथ फॉर्म के लिए जिम्मेदार मॉड्यूल या उसी टैग के अंदर समान मूल्य को आउटपुट करने के लिए जिम्मेदार मॉड्यूल का हवाला दे सकते हैं। उसी समय, ये मॉड्यूल एप्लिकेशन के व्यावसायिक तर्क को लागू करते हैं, और jQuery प्लगइन्स का एनालॉग नहीं होते हैं जो एक बहुत ही शांत, सुंदर और फैंसी <select> को साधारण <select> से बाहर करते हैं।
- मॉड्यूल की कार्यक्षमता के पैमाने में अंतर के परिणामस्वरूप, उनके मॉड्यूल में HTML + CSS + जावास्क्रिप्ट शामिल है, और मेरे लिए अधिकांश मॉड्यूल सिर्फ जावास्क्रिप्ट हैं, इस मॉड्यूल के लिए आवश्यक न्यूनतम HTML संरचना के लिए प्रलेखन।
हालाँकि मैं इस बात से बिल्कुल सहमत हूँ कि यह स्पष्ट रूप से सीमित करने के लिए आवश्यक है कि मॉड्यूल की बाहरी कार्यक्षमता क्या है (वास्तव में, मैंने इस बारे में लेख के पहले पैराग्राफ में लिखा था, मुझे बस उस सूची में एक प्रेषण जोड़ने की आवश्यकता है), लेकिन मेरा मानना है कि सबसे विश्वसनीय, प्रभावी और सुरक्षित कोड वह है जो नहीं है। इसलिए, यदि कोड को प्रतिस्थापित करना संभव है, उदाहरण के लिए, सम्मेलनों, मैं आमतौर पर सम्मेलनों को प्राथमिकता देता हूं (हालांकि, निश्चित रूप से, आपको उपाय भी जानना होगा)। मेरे दृष्टिकोण में, कोई कोड नहीं है जो एक्सेस में मॉड्यूल को प्रतिबंधित करता है, लेकिन एक समझौता है जहां मॉड्यूल चढ़ सकते हैं और जहां नहीं।

लेकिन, बड़े और तब तक, मैंने उसी वास्तुकला का एक न्यूनतम संस्करण विकसित किया।

शुरुआत

हम अपने एप्लिकेशन के पेज का कंकाल बनाते हैं।

index.html

 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>    JavaScript </title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://powerman.name/download/js/POWER.js"></script> <!--     --> </head> <body> <script type="text/javascript"> /*    */ </script> <!--   html-   js- --> </body> </html>

एक वैश्विक ईवेंट डिस्पैचर जोड़ें। ईवेंट इवेंट का टेक्स्ट नाम और मापदंडों के साथ एक वैकल्पिक हैश है।

आमतौर पर, पृष्ठ को लोड करने के बाद, हमें कुछ कार्रवाई करने की आवश्यकता होती है (कम से कम पृष्ठ पर विजेट बनाएं और जोड़ें), और संगतता के लिए, हम इस घटना को मुख्य डिस्पैचर में भी संसाधित करेंगे।

index.html

 /*    */ notice = (function(){ var w = { }; return function(e,data){ switch (e) { case 'document ready': break; default: alert('notice: unknown event "'+e+'"'); } }; })(); $(document).ready(function(){ notice('document ready') });

हैश w का उपयोग निर्मित विजेट ऑब्जेक्ट्स को स्टोर करने के लिए किया जाएगा - आपको उन्हें निर्माण के बाद कहीं और स्टोर करने की आवश्यकता है - प्लस ताकि डिस्पैचर (जो इन ऑब्जेक्ट्स को बनाएंगे) की हमेशा उन तक पहुंच हो।

हम क्या कर रहे हैं?

सार्वभौमिक भाग तैयार है, यह तय करने का समय है कि हमारा आवेदन क्या करेगा। पृष्ठ के विभिन्न हिस्सों के बीच जटिल गतिशील बातचीत को प्रदर्शित करने के लिए, हमें कई सक्रिय तत्वों की आवश्यकता होगी जिनकी क्रिया पृष्ठ के विभिन्न भागों में परिलक्षित होगी।

आइए एक एप्लिकेशन बनाएं जिसमें आप वाक्यांशों को जोड़ / निकाल सकते हैं, और यह इन वाक्यांशों के लिए किसी भी परिणाम की संख्या दिखाएगा (उदाहरण के लिए, वर्तनी परीक्षक द्वारा पाई गई त्रुटियों की संख्या)। प्लस सभी वाक्यांशों के लिए परिणामों की कुल संख्या।

आर्किटेक्चर

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

AddPhrase - एक वाक्यांश जोड़ने के लिए विजेट।
- तरीके: कोई नहीं।
- घटनाओं को उत्पन्न करता है: 'add phrase' ।
वाक्यांश - एक विजेट जो जोड़े गए वाक्यांश को प्रदर्शित करता है, जिससे आप इसे (विलोपन के लिए) चुन सकते हैं और इस वाक्यांश के लिए विभिन्न हैंडलर जोड़ सकते हैं (जैसे वर्तनी जांच)।
- तरीके: add_handler
- घटनाओं को उत्पन्न करता है: 'select phrase' ।
स्पेलचेक - विजेट जो इस वाक्यांश में त्रुटियों की संख्या प्रदर्शित करता है। वह सेवा के लिए अजाक्स अनुरोध के लिए भी जिम्मेदार है।
- तरीके: कोई नहीं।
- घटनाओं को 'spellcheck: started' और 'spellcheck: success' 'spellcheck: started' ।
सम - विजेट जो सभी वाक्यांशों के लिए परिणामों की कुल संख्या प्रदर्शित करता है।
- तरीके: add और sub ।
- घटनाओं को उत्पन्न करता है: नहीं।

विजेट

हालाँकि विजेट का अपना क्षेत्र है, लेकिन यह ठीक से नियंत्रित नहीं है कि यह क्षेत्र पृष्ठ पर कहाँ है - अर्थात वह नहीं जानता कि क्या यह स्क्रीन पर दिखाई दे रहा है, और वास्तव में यह डोम में जोड़ा गया है या नहीं। बाहरी कोड पृष्ठ पर विजेट-नियंत्रित क्षेत्रों को जोड़ने / हटाने के लिए ज़िम्मेदार है (यानी, हमारे वैश्विक ईवेंट डिस्पैचर, या बाहरी विजेट जब कुछ विजेट दूसरों में एम्बेडेड होते हैं)।

विजेट क्लास के अंदर, बाहरी कार्यों का एक न्यूनतम न्यूनतम इसके लिए उपलब्ध है:

घटनाओं के निर्माण के लिए वैश्विक समारोह notice() ;
jQuery $ वस्तु;
टेम्पलेट पुस्तकालय कार्य।

दुर्लभ अपवादों के साथ, विजेट को किसी तरह स्क्रीन पर प्रदर्शित करना चाहिए। पृष्ठ का वह क्षेत्र जिसका वह "मालिक" है, आमतौर पर या तो पहले से मौजूद है (और फिर उसका #id विजेट विजेट के निर्माता को पास कर दिया जाता है), या जेएस-टेम्प्लेट से मक्खी पर विजेट द्वारा उत्पन्न किया जाता है (और फिर पैटर्न के #id को #id को पास कर दिया जाता है)।

बाकी सब मौलिक नहीं है। मेरी शैली:

विजेट अलग-अलग w.widget_name.js फ़ाइलों में हैं।
विजेट वैश्विक नामस्थान W में कक्षाओं के रूप में लागू किए जाते हैं, आमतौर पर एक विजेट एक वर्ग होता है: W.WidgetName ।
कक्षाएं जावास्क्रिप्ट के लिए सबसे सरल और सबसे प्राकृतिक तरीके से कार्यान्वित की जाती हैं - साधारण निर्माता कार्य और प्रोटोटाइप विरासत।
निजी गुण और विधियाँ रेखांकित होने लगती हैं।
विजेट की शुरुआत में, यह दस्तावेज करता है कि जेएस टेम्पलेट (या HTML ब्लॉक) को किस प्रारूप की आवश्यकता है; निर्माता, सार्वजनिक विधियाँ / गुण, उत्पन्न घटनाएँ।
कन्वेंशन द्वारा, विजेट-नियंत्रित क्षेत्र विजेट के माध्यम से सुलभ है .$ संपत्ति (यह इसका बाहरी कोड है जो पृष्ठ पर विजेट प्रदर्शित करने के लिए DOM में डाला गया है)।

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

AddPhrase

इस विजेट के लिए HTML विजेट की आवश्यकताएं - आपको एक इनपुट प्रकार = पाठ के साथ एक फॉर्म की आवश्यकता है। डिज़ाइनर अपनी इच्छानुसार सब कुछ डिज़ाइन कर सकता है।

w.addphrase.js

 /* * <form id="addphrase"><input type=text></form> * * w = new W.AddPhrase('addphrase'); * * -> 'add phrase', phrase * */ var W; W = W || {}; W.AddPhrase = function(id){ this.$ = $( '#'+id ); this._input = this.$.find('input'); // cache this.$.submit( $.proxy(this,'_onsubmit') ); }; W.AddPhrase.prototype._onsubmit = function(){ notice('add phrase', { phrase: this._input.val() }); this._input.val(''); return false; };

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

index.html

  <!--     --> <script type="text/javascript" src="w.addphrase.js"></script> ... <!--   html-   js- --> <form id="addphrase">  : <input type=text> </form>

index.html

 /*    */ notice = (function(){ var w = { addphrase: null }; return function(e,data){ switch (e) { case 'document ready': w.addphrase = new W.AddPhrase('addphrase'); $('#addphrase input').focus(); break; case 'add phrase': break;

वास्तव में, यह सब है :) हमारे पास एक सार्वभौमिक विजेट है जिसे किसी भी रूप में "हंग" किया जा सकता है, और जो नियमित रूप से घटनाओं को उत्पन्न करता है क्योंकि उपयोगकर्ता वाक्यांशों में प्रवेश करता है (हम अभी भी डिस्पैचर में उन्हें अनदेखा करते हैं, क्योंकि अभी भी कोई विजेट नहीं है जो उन्हें संभालना चाहिए)।

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

मुहावरा

इस विजेट को एक उदाहरण के रूप में उपयोग करते हुए, हम js टेम्प्लेट और नेस्टेड विजेट के साथ काम करेंगे।

HTML के लिए इस विजेट की आवश्यकताएं - आपको एक जेएस-टेम्प्लेट चाहिए जिसमें phrase वैरिएबल पारित हो जाएगा, और जिसमें क्लास handlers साथ एक तत्व होना चाहिए - परिणामों के साथ विजेट इसमें जोड़े जाएंगे।

w.phrase.js

 /* * <script type="text/x-tmpl" id="tmpl_phrase"> * <div> * <%= phrase %> * <span class="handlers"></span> * </div> * </script> * * w = new W.Phrase('tmpl_phrase', 'some phrase'); * w.add_handler( new W.SomeHandler() ); * * -> 'select phrase', phrase * */ var W; W = W || {}; W.Phrase = function(tmpl, phrase){ this.$ = $( POWER.render(tmpl, { 'phrase': phrase }) ); this._phrase= phrase; this._w = []; this._h = this.$.find('.handlers'); // cache this.$.click( $.proxy(this,'_onclick') ); }; W.Phrase.prototype.add_handler = function(w_handler){ this._w.push( w_handler ); this._h.append( w_handler.$ ); }; W.Phrase.prototype._onclick = function(){ notice('select phrase', { phrase: this._phrase }); };

टेम्पलेट्स के साथ, मुझे लगता है कि सब कुछ स्पष्ट है। लेकिन एम्बेडेड विजेट के साथ काम करना बेहतर है।

हालाँकि, वर्तनी जाँच विजेट "नेत्रहीन" वाक्यांश विजेट और वाक्यांश विजेट में सन्निहित है "वर्तनी जाँच विजेट" का मालिक है (वर्तनी जाँच विजेट का एकमात्र लिंक इस this._w , जबकि सभी वैश्विक विगेट्स w हैश में लिंक के लिए आयोजित किए जाते हैं), फिर भी। , जैसा कि आप देख सकते हैं, वाक्यांश एक वर्तनी चेक विजेट ऑब्जेक्ट नहीं बनाता है, लेकिन इसे एक पैरामीटर के साथ प्राप्त करता है। लचीलापन बढ़ाने के लिए निर्भरता इंजेक्शन का यह कार्यान्वयन - आपको विशिष्ट विगेट्स के बीच निर्भरता से बचने और विजेट ऑब्जेक्ट्स के निर्माण को सरल बनाने की अनुमति देता है: तथ्य यह है कि आमतौर पर केवल डिस्पैचर में एम्बेडेड विजेट के निर्माता को कॉल करने के लिए सभी आवश्यक डेटा होते हैं, और यह दृष्टिकोण इन के पारदर्शी हस्तांतरण से बचता है बाहरी विगेट्स के डिजाइनरों के माध्यम से नेस्टेड विगेट्स के डिजाइनरों के लिए पैरामीटर।

index.html

  <!--     --> ... <script type="text/javascript" src="w.phrase.js"></script> ... <!--   html-   js- --> ... <div id="phrases"> <p> <script type="text/x-tmpl" id="tmpl_phrase"> <div> <%= phrase %> <span class="handlers"></span> </div> </script> </div>

index.html

 /*    */ notice = (function(){ var w = { ... phrase: {} }; return function(e,data){ ... case 'add phrase': if(data.phrase in w.phrase) break; w.phrase[data.phrase] = new W.Phrase('tmpl_phrase', data.phrase); $('#phrases').append( w.phrase[data.phrase].$ ); break; case 'select phrase': w.phrase[data.phrase].$.remove(); delete w.phrase[data.phrase]; $('#addphrase input').focus(); break;

स्पष्टीकरण की एक जोड़ी: सबसे पहले, हमारे पास अभी भी W.SpellCheck विजेट नहीं है, इसलिए हम w.phrase[phrase].add_handler( new W.SpellCheck() ) कॉल नहीं करते हैं; दूसरी बात, वाक्यांश विजेट (किसी वाक्यांश को हटाने के लिए) पर क्लिक करने के बाद, वाक्यांश इनपुट लाइन फोकस खो देती है और उसे वापस करने की आवश्यकता होती है।

वर्तनी जाँच

एक उदाहरण के रूप में इस विजेट का उपयोग करते हुए, हम अजाक्स के साथ काम करते हुए देखेंगे।

इसके अलावा, हमें अजाक्स अनुरोध की स्थिति (प्रक्रिया में, प्रतिक्रिया प्राप्त होती है) दिखाने की आवश्यकता होगी। दो अलग-अलग दृष्टिकोण हैं: आप डोम को डिस्पैचर में बदल सकते हैं (घटनाओं को 'spellcheck: started' और 'spellcheck: success' ), या आप जेएस-टेम्पलेट के अंदर सभी राज्यों को फ्लैश कर सकते हैं और टेम्पलेट को कई बार निष्पादित / प्रतिस्थापित कर सकते हैं। दूसरी विधि थोड़ी अधिक जटिल है, लेकिन क्योंकि हमारे पास एक उदाहरण है, यह इसे लागू करने के लायक है।

इसे लागू करने के लिए, आपको एक चाल का उपयोग करना होगा। तथ्य यह है कि अगर हम निष्पादित टेम्पलेट को .$ संपत्ति (वाक्यांश विजेट के रूप में) में सहेजते हैं, तो हम अब इसे प्रतिस्थापित करने में सक्षम नहीं होंगे - तथ्य यह है कि .$ मूल्य को डोम में कहीं जोड़ा जाएगा (हम विजेट के अंदर हैं) हमें पता नहीं है कि कहां है), और यदि हम केवल मूल्य को प्रतिस्थापित करते हैं .$ नए टेम्पलेट के साथ, पुराने मूल्य के लिए लिंक .$ DOM में रहेगा और पृष्ठ पर कुछ भी नेत्रहीन नहीं बदलेगा (और यह विजेट अंततः "पृष्ठ के उसके हिस्से" तक पहुंच खो देगा)। इससे बचने के लिए, किसी भी खाली टैग कंटेनर (उदा। स्पैन या डिव) को .$ में बचाया जाता है, और टेम्पलेट निष्पादन का परिणाम पहले से ही इसमें रखा गया है। दुर्भाग्य से, एक ही समय में डिजाइनर के लिए पेज पर एक "अप्रत्याशित" टैग दिखाई देता है, लेकिन मैं इस समस्या को और अधिक प्रभावी ढंग से हल करने के लिए नहीं आया हूं।

HTML के लिए इस विजेट की आवश्यकताएं - आपको एक js- टेम्प्लेट चाहिए जिसमें status वैरिएबल ( "started" और "success" संभावित मान) और spellerrors (यदि मान status=="success" ) पास हो जाएगा।

w.spellcheck.js

 /* * <script type="text/x-tmpl" id="tmpl_spellcheck"> * <% if (status == 'started') { %> * … * <% } else { %> *  <%= spellerrors %> . * <% } %> * </script> * * w = new W.SpellCheck('tmpl_spellcheck', 'some phrase'); * * -> 'spellcheck: started', phrase * -> 'spellcheck: success', phrase, spellerrors * */ var W; W = W || {}; W.SpellCheck = function(tmpl, phrase){ this.$ = $('<span>'); this._tmpl = tmpl; this._phrase= phrase; this._load(); }; W.SpellCheck.prototype._load = function(){ $.ajax({ url: 'http://speller.yandex.net/services/spellservice.json/checkText', data: { text: this._phrase }, dataType: 'jsonp', success: $.proxy(this,'_load_success') }); this.$.html( POWER.render(this._tmpl, { status: 'started' }) ); notice('spellcheck: started', { phrase: this._phrase }); } W.SpellCheck.prototype._load_success = function(data){ this.$.html( POWER.render(this._tmpl, { status: 'success', spellerrors: data.length }) ); notice('spellcheck: success', { phrase: this._phrase, spellerrors: data.length }); };

index.html

  <!--     --> ... <script type="text/javascript" src="w.spellcheck.js"></script> ... <!--   html-   js- --> ... <div id="phrases"> ... <script type="text/x-tmpl" id="tmpl_spellcheck"> <% if (status == 'started') { %> (…) <% } else { %> ( <%= spellerrors %> ) <% } %> </script> </div>

index.html

  case 'add phrase': ... w.phrase[data.phrase].add_handler(new W.SpellCheck('tmpl_spellcheck', data.phrase)); ... break; case 'spellcheck: started': break; case 'spellcheck: success': break;

योग

w.sum.js

 /* * <span id="sum"></span> * * w = new W.Sum('sum'); * w.add(5); * w.sub(3); * */ var W; W = W || {}; W.Sum = function(id){ this.$ = $( '#'+id ); this.$.html(0); }; W.Sum.prototype.add = function(n){ this.$.html( parseInt(this.$.html()) + n ); }; W.Sum.prototype.sub = function(n){ this.$.html( parseInt(this.$.html()) - n ); };

index.html

  <!--     --> ... <script type="text/javascript" src="w.sum.js"></script> ... <!--   html-   js- --> ... <p><b>: <span id="sum"></span> .</b></p>

index.html

 /*    */ notice = (function(){ var w = { ... sum: null }; var spellerrors = {}; return function(e,data){ ... case 'document ready': ... w.sum = new W.Sum('sum'); break; case 'select phrase': ... if(data.phrase in spellerrors){ w.sum.sub(spellerrors[data.phrase]); delete spellerrors[data.phrase]; } break; case 'spellcheck: success': w.sum.add(data.spellerrors); spellerrors[data.phrase] = data.spellerrors; break;

कुल मिलाकर

सभी फ़ाइलों के लिए कुल: 200 लाइनें HTML + जावास्क्रिप्ट, 5.5KB। इनमें से, लगभग 50 लाइनें प्रलेखन / टिप्पणियां हैं।

दृश्यों के पीछे त्रुटि से निपटने, परीक्षण, लॉगिंग और डीबगिंग के मुद्दे थे। यहाँ मैं कुछ भी नया नहीं जोड़ सकता, सब कुछ मानक है (उदाहरण के लिए, निकोलस ज़कस रिपोर्ट "एंटरप्राइज जावास्क्रिप्ट एरर हैंडलिंग": स्लाइड्स देखें )।

अतिरिक्त जानकारी

लेख में वर्णित एप्लिकेशन के स्रोत बिटबकैट पर अपलोड किए जाते हैं, जिसमें लेख के अनुरूप चरण-दर-चरण कमिट-एस होता है। आप आवेदन को स्वयं भी देख सकते हैं।

जो लोग मॉड्यूल के कार्यान्वयन के लिए मेरे दृष्टिकोण की आलोचना करना चाहते हैं, वे पहले अन्य दृष्टिकोणों पर मेरी राय से परिचित हो सकते हैं। इसके अलावा, एक बार मेरे js टेम्पलेट इंजन के बारे में थोड़ी चर्चा हुई थी।

इस विषय पर अन्य लेख: स्केलेबल जावास्क्रिप्ट अनुप्रयोग ।

जटिल जावास्क्रिप्ट अनुप्रयोगों के सरल न्यूनतम कार्यान्वयन

साइकिल के बारे में

शुरुआत

हम क्या कर रहे हैं?

आर्किटेक्चर

विजेट

AddPhrase

मुहावरा

वर्तनी जाँच

योग

कुल मिलाकर

अतिरिक्त जानकारी

More articles: