कैसे-कैसे: एसिंक्रोनस HTML / JS कोड का उपयोग करके JS का उपयोग करना

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



इसी समय, सामान्य स्थिति में, यह वर्णन करना व्यावहारिक रूप से असंभव है कि कौन सा कोड विशेष रूप से विज्ञापन प्रणाली से संबंधित है और जो नहीं है, इसलिए, आज के विषय में, हम एक और सामान्य कार्य पर विचार करेंगे - मनमाने ढंग से HTML / JS कोड को अंतिम-उपयोगकर्ता साइट कोड में पेश करना।

कार्य

मान लीजिए कि हमारे पास फ़ॉर्म का एक कंटेनर है और हमें इसमें कोड लोड करना होगा, जो सर्वर से प्राप्त होता है और इसमें HTML मार्कअप और जेएस स्क्रिप्ट शामिल हैं (या तो अतुल्यकालिक या तुल्यकालिक हो सकते हैं)।



कार्य n समान कंटेनरों के लिए परिणामी समाधान के स्वास्थ्य को सुनिश्चित करना है जो एक ही पृष्ठ पर एक साथ मौजूद हैं।



आइए एक उदाहरण से स्पष्ट करें:

 : <script id=1> document.write("<" + "script id=2>" + "document.write(\"<\" + \"div>someresult1<\" + \"/div>\");" + "document.write(\"<\" + \"div>someresult2<\" + \"/div>\");" + "<" + "/script>"); document.write("<" + "script id=3 src='somescript1.js'>" + "<" + "/script>"); document.write("<" + "script id=4 src='somescript1.js'>" + "<" + "/script>"); document.write("<" + "script id=5>" + "document.write(\"<\" + \"div>someresult3<\" + \"/div>\");" + "document.write(\"<\" + \"div>someresult4<\" + \"/div>\");" + "<" + "/script>"); </script> somescript1.js: document.write("<" + "div>someresult1.1<" + "/div>"); document.write("<" + "script class='loaded' src='somescript2.js'>" + "document.write(\"<\" + \"div>someresult1.2<\" + \"/div>\")" + "<" + "/script>"); somescript2.js: document.write("<" + "div>someresult2.1<" + "/div>");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इस मामले में, स्क्रिप्ट्स somescript1.js



और somescript2.js



क्रमशः नेस्टिंग के पहले और दूसरे स्तर की स्क्रिप्ट के उदाहरण हैं। इसके अलावा, somescript1.js



सिस्टम के व्यवहार को मॉडल करता है यदि लोडेड स्क्रिप्ट के शरीर में कोई कोड है।



विकसित की जाने वाली प्रणाली को निम्नलिखित कोड को कंटेनर में लोड करना होगा:

 <script id="1"> document.write("<" + "script id=2>" + "document.write(\"<\" + \"div>someresult1<\" + \"/div>\");" + "document.write(\"<\" + \"div>someresult2<\" + \"/div>\");" + "<" + "/script>"); document.write("<" + "script id=3 src='somescript1.js'>" + "<" + "/script>"); document.write("<" + "script id=4 src='somescript1.js'>" + "<" + "/script>"); document.write("<" + "script id=5>" + "document.write(\"<\" + \"div>someresult3<\" + \"/div>\");" + "document.write(\"<\" + \"div>someresult4<\" + \"/div>\");" + "<" + "/script>"); </script> <script id="2"> document.write("<" + "div>someresult1<" + "/div>"); document.write("<" + "div>someresult2<" + "/div>"); </script> <div>someresult1</div> <div>someresult2</div> <script id="3" src="somescript1.js"></script> <div>someresult1.1</div> <script class="loaded" src="somescript2.js"> document.write("<" + "div>someresult1.2<" + "/div>") </script> <div>someresult2.1</div> <script id="4" src="somescript1.js"></script> <div>someresult1.1</div> <script class="loaded" src="somescript2.js"> document.write("<" + "div>someresult1.2<" + "/div>") </script> <div>someresult2.1</div> <script id="5"> document.write("<" + "div>someresult3<" + "/div>"); document.write("<" + "div>someresult4<" + "/div>"); </script> <div>someresult3</div> <div>someresult4</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

निर्णय

आगे स्पष्टीकरण को सरल बनाने के लिए, हम अतिरिक्त शब्दावली का परिचय देते हैं:

• बेनामी स्क्रिप्ट "src" विशेषता के साथ या उसके बिना एक JS स्क्रिप्ट है।
• डाउनलोड करने योग्य स्क्रिप्ट - जेएस-स्क्रिप्ट, एक तृतीय-पक्ष सर्वर से भरी हुई है और इसलिए, एक गैर-खाली विशेषता "src" है।
• आउटपुट पॉइंटर - उस तत्व को इंगित करता है जिसके बाद document.write
  
  
  
  द्वारा उत्पन्न सामग्री डाली जानी चाहिए।

HTML कोड को पेस्ट करने से कोई समस्या नहीं होती है, हालाँकि, जब आप JS-स्क्रिप्ट डालते हैं, तो कई नुकसान पाए जाते हैं:

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

एक स्पष्ट रूप से स्पष्ट तरीका है वैश्विक document.write



को प्रतिस्थापित करना। अपने स्वयं के फ़ंक्शन के साथ लिखना, जो एक समान तरीके से काम कर सके।

 document.write = function(html){ … };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यहां, सामान्य तौर पर, एक बिंदु को छोड़कर, सब कुछ स्पष्ट है: जहां वास्तव में हमारे कार्य को अपने काम के परिणामस्वरूप कोड सम्मिलित करना चाहिए?



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



नतीजतन, प्रतिस्थापन कोड के पूरे चक्र को क्रियान्वयन के प्रवाह में असंतोष के बिना लागू किया जाता है और सवाल नहीं उठाता है।

ह्यूस्टन, हमें समस्याएं हैं

जब हम डाउनलोड करने योग्य स्क्रिप्ट का सामना करते हैं तो सब कुछ इतना आसान और सरल नहीं होता है। ऐसी स्थिति में, लोडिंग होने तक और अंत में वर्तमान लोड करने योग्य स्क्रिप्ट को निष्पादित करने तक सभी अन्य लिपियों के निष्पादन को रोकना तर्कसंगत लगता है। यह योजना ऑनलोड घटना के लिए धन्यवाद काम करने की गारंटी है, लेकिन इस तरह के समाधान की गति काफी कम है, इसलिए आपको एक बेहतर तरीका खोजने की आवश्यकता है।



और इस तरह का एक समाधान है, हालांकि यह केवल इंटरनेटर एक्सप्लोरर परिवार के ब्राउज़रों के लिए काम करता है - यह एक onreadystatechange



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



केवल एक ही रास्ता बचा है - यह सुनिश्चित करने के लिए कि हमारे फ़ंक्शन को document.write



जगह देना है। राइटिंग स्वयं यह निर्धारित कर सकती है कि इसे किस स्क्रिप्ट से कहा जाता है। और अधिकांश आधुनिक ब्राउज़रों में (IE11, फ़ायरफ़ॉक्स, क्रोम, ओपेरा के नवीनतम संस्करण) डाउनलोड करने योग्य लिपियों के लिए यह संभव है, हालांकि कुछ कैविटीज़ के साथ। इस तथ्य के कारण कि इस तरह की लिपियों को वैश्विक नामस्थान में निष्पादित किया जाता है, प्रत्येक भरी हुई स्क्रिप्ट के लिए फ़ंक्शन की प्रतिलिपि बनाना असंभव है। ऐसा लगता है कि इसका मतलब है कि आप document.write



के काम के परिणाम को सम्मिलित करने के लिए जगह निर्धारित कर सकते हैं। केवल इनपुट मापदंडों के आधार पर लिखें - स्ट्रिंग।



यह केवल पहली नज़र में है। वास्तव में, ऊपर वर्णित सभी ब्राउज़रों में, उस पते पर जाना संभव है जहां से स्क्रिप्ट भरी हुई थी जिसे हमारे स्पूफ document.write



कहा जाता था। यह स्टैक के माध्यम से किया जाता है, जिसमें से आप वह पता प्राप्त कर सकते हैं जिसे आप ढूंढ रहे हैं, और पहले से ही इस पते पर वांछित स्क्रिप्ट स्थापित करें।

एक और कठिनाई

सब कुछ ठीक लगता है - हमने समस्या का एक उत्कृष्ट समाधान पाया, लेकिन फिर से कठिनाइयां पैदा होती हैं। सबसे पहले, इस घटना में कि हमारे पास कई समान स्क्रिप्ट हैं, किसी भी तरह पूर्वनिर्धारित क्रम में उनके वैकल्पिक निष्पादन को सुनिश्चित करना आवश्यक है। दूसरा बिंदु - यदि स्क्रिप्ट में डॉक्यूमेंट.राइट को कई कॉल हैं, तो आपको किसी तरह उनमें से प्रत्येक के परिणामों की शुद्धता की गारंटी देने की आवश्यकता है, क्योंकि मानक मामले में, प्रत्येक फ़ंक्शन "स्वयं" स्क्रिप्ट के तुरंत बाद डेटा लिखेंगे, न कि अंतिम तत्व बनने के बाद। पिछले document.write



। स्क्रिप्ट से लिखें।



यह पता चला है कि, अन्य चीजों के अलावा, फ़ंक्शन ट्रिगर होने के बाद, आपको इस स्क्रिप्ट से बनाए गए अंतिम तत्व का लिंक भी जोड़ना होगा।

अंतिम चरण

एक और संभव परिदृश्य रहता है: कोड और अनाम और डाउनलोड करने योग्य स्क्रिप्ट के एक टुकड़े में उपस्थिति। चूंकि सामान्य परिस्थितियों में document.write



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



अनाम लिपियों के लिए, यह स्पष्ट रूप से स्वयं के द्वारा होता है, और डाउनलोड करने योग्य लिपियों के लिए हमें अपने document.write



के प्रवाह को रोकना होगा। डाउनलोड के लिए प्रतीक्षा करते समय स्पूफिंग और ऑनलोड घटना के माध्यम से इसे पुनर्स्थापित करना होगा।



आइए कार्यों के अनुक्रम को समझने के लिए किसी विषय की शुरुआत से एक उदाहरण पर विचार करें।



कोड डालने के साधन के रूप में, अपने स्वयं के प्रतिस्थापित document.write



का उपयोग करना तर्कसंगत है। तब से, अब तक हम पहले से ही जानते हैं कि परिणामों को कहां पेस्ट करना है। इस प्रकार, हम निम्नलिखित निष्पादन आदेश प्राप्त करते हैं:

1. सम्मिलित स्क्रिप्ट डॉक्युमेंट 2 को बनाने के लिए document.write कहती है, जो पहले दो टेस्ट डिव को बनाएगी।
2. Script 2 someresult1 और someresult2 बनाने के लिए document.write को कॉल करता है।
3. स्क्रिप्ट का निष्पादन 2 समाप्त होता है, मूल दस्तावेज़ पर नियंत्रण लौटाता है। उसी समय, इस तथ्य के कारण कि प्रतिस्थापन वैश्विक है, आउटपुट पॉइंटर बनाया गया someresult2 को देखता है। इस प्रकार, स्क्रिप्ट 1 तत्वों को बनाना जारी रखता है। अब स्क्रिप्ट 3 बनाई गई है और चूंकि यह डाउनलोड करने योग्य है, इसलिए डॉक्यूमेंट का राइटिंग बाधित होता है। स्क्रिप्ट 3 के ऑनलोड शुरू होने से पहले ही बाधित हो जाता है। इससे पहले, डॉक्यूमेंट.राइट एक ही लोड पथ की उपस्थिति के लिए अन्य सभी स्क्रिप्ट्स की जांच करता है और उन्हें चिह्नित करता है।
4. स्क्रिप्ट 3 भरी हुई है, इसे डॉक्यूमेंट.राइट कहते हैं, जिसमें से हमारे द्वारा बताए गए तरीकों में से एक (ब्राउज़र पर निर्भर करता है) आउटपुट पॉइंटर डॉक्यूमेंट.राइट को डिटेक्ट करता है। IE में, आउटपुट पॉइंटर को कोड निष्पादित होने से पहले लोड किए जाने के समय प्रतिस्थापित किया जाता है; आधुनिक ब्राउज़रों में - कॉलिंग दस्तावेज़ के समय सीधे स्टैक का उपयोग करना। बाकी के लिए, आउटपुट पॉइंट का ज्ञान स्क्रिप्ट निष्पादन ऑर्डर (ब्लॉकिंग) की भविष्यवाणी द्वारा प्रदान किया जाता है। Document.write someresult1.1 सम्मिलित करता है और आउटपुट सूचक के लिए स्क्रिप्ट 3 को चिह्नित करता है।
5. स्क्रिप्ट 3 डॉक्यूमेंट को लिखती है। राइटिंग, जो उस स्क्रिप्ट को परिभाषित करती है, जिसने उसे कॉल किया था और पिछली कॉल द्वारा किए गए मार्क का अनुसरण करते हुए, आउटपुट पॉइंटर को शिफ्ट करता है, और फिर लोडेड स्क्रिप्ट और someresult1.2 बनाता है। जब तक भरी हुई स्क्रिप्ट लोड नहीं हो जाती और स्क्रिप्ट आग जाती है, तब तक निष्पादन बाधित होता है।
6. भरी हुई स्क्रिप्ट भरी हुई है और डॉक्यूमेंट.राइट को कॉल करता है, जो आउटपुट पॉइंटर को परिभाषित करता है और someresult2.1 बनाता है।
7. भरी हुई स्क्रिप्ट स्क्रिप्ट ऑन लोड फायर करती है, स्क्रिप्ट 3 के डॉक्युमेंट.राइट प्रोसेसिंग कोड पर नियंत्रण लौटाती है, जो स्क्रिप्ट 3 के ऑनलोड इवेंट को बाहर निकालती है और ट्रिगर करती है, जो स्क्रिप्ट 1 पर नियंत्रण लौटाती है।
8. स्क्रिप्ट 1 स्क्रिप्ट 4 बनाता है, दस्तावेज़ की वैश्विकता के कारण। नियंत्रण वापसी के क्षण में, आउटपुट पॉइंटर को दस्तावेज़ द्वारा लिखित संचालन को ध्यान में रखते हुए ठीक किया जाता है। इस प्रकार, स्क्रिप्ट 4 पहले से ही बनाए गए कोड के अंत में दिखाई देती है। डॉक्यूमेंट का निष्पादन। राइटिंग प्रारंभिक नोट के साथ बाधित है कि स्क्रिप्ट 3 अभी तक नहीं बनाई गई है।
9. स्क्रिप्ट 4 के लिए, पूरी प्रक्रिया पहले से ही स्क्रिप्ट 3 (पैराग्राफ 4-8) के लिए वर्णित है।
10. नियंत्रण स्क्रिप्ट 1 पर वापस आ जाता है, जो स्क्रिप्ट 5 बनाता है।
11. Script 5 someresult3 और someresult4 बनाने के लिए document.write को कॉल करता है।
12. प्रबंधन स्क्रिप्ट १ पर लौटता है।
13. स्क्रिप्ट 1 समाप्त।

बाहर से एक त्वरित नज़र लगता है कि वर्णित अनुक्रम में कुछ भी जटिल नहीं है, हालांकि, यह याद रखना चाहिए कि निष्पादन धागा 6 बार बाधित हुआ था:

• लिपियों को लोड करने के लिए 3 और 4 (स्पष्ट रूप से, तुरन्त, लेकिन औपचारिक रूप से यह भी एक अंतर है, और इसमें कुछ जा सकता है)।
• स्क्रिप्ट 3 और 4 के अंदर (हालांकि उदाहरण में उनके बीच कोई अंतर नहीं है, यह अच्छी तरह से हो सकता है, क्योंकि यह एक डाउनलोड करने योग्य स्क्रिप्ट है, जिसकी संरचना आम तौर पर अज्ञात है)।
• दो भरी हुई स्क्रिप्ट, और दूसरा, हालांकि औपचारिक, निष्पादन में एक अंतर छोड़ देता है।

और मुख्य ट्रिक यह है कि डॉक्यूमेंट राइटिंग करते समय हर क्षण सही आउटपुट पॉइंटर का उपयोग किया जाए।

निष्कर्ष

अब अंतिम ऐड-इन पर विचार करें, जो n



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



को बदल रहे हैं। न केवल एक फंक्शन के साथ, बल्कि एक डिस्पैचर के साथ जो संदर्भ तैयार करेगा और उसके बाद ही हमारे एनालॉग document.write



राइट करेगा। राइट।



तदनुसार, आप दो कार्यान्वयन योजनाओं की पेशकश कर सकते हैं: या तो हमारे एनालॉग document.write



राइट एक ऑब्जेक्ट होना चाहिए, और हम एक डिस्पैचर का उपयोग करते हैं जो ऐसी वस्तुओं के n



इंस्टेंस को नियंत्रित करता है, या हम n



संदर्भों की एक सरणी स्टोर करते हैं, और हमारा डिस्पैचर बस इसके लिए वर्तमान संदर्भ के लिए एक पॉइंटर सेट करता है। document.write



एनालॉग।



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



भविष्य में, या तो पहले या दूसरे कंटेनर को अगले ब्रेक पॉइंट पर निष्पादन जारी रहता है (इस पर निर्भर करता है कि कौन पहले निष्पादन समाप्त करता है)। आगे का क्रम पहले ही माना जा चुका है और नया नहीं है।



आज के लिए बस इतना ही! आपका ध्यान देने के लिए आप सभी का धन्यवाद, हम टिप्पणियों में प्रश्नों का उत्तर देने में प्रसन्न होंगे।