जावास्क्रिप्ट क्यू एंड ए

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

प्रश्न संख्या 1। प्रोटोटाइप वंशानुक्रम

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

▍ उत्तर

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

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

var Grandfather = function () {}; //  Grandfather Grandfather.prototype.color = 'green'; var Father = function () {}; //  Father Father.prototype = new Grandfather (); //  - ,        var Son = function () {}; //  Son Son.prototype = new Father (); // Son   Father var u = new Grandfather (); //   Grandfather var f = new Father (); //   Father var s = new Son (); //   Son //     console.log ([u.color, f.color, s.color]); // ["green", "green", "green"] //  Grandfather        Grandfather.prototype.color = 'blue'; console.log ([u.color, f.color, s.color]); // ["blue", "blue", "blue"] //  Father      -   ,     Father.prototype.color = 'green'; //      : // Grandfather.prototype.color = 'green'; console.log ([u.color, f.color, s.color]); // ["blue", "green", "green"] // ,        Grandfather     color,      Grandfather.prototype.color = 'blue'; console.log ([u.color, f.color, s.color]); // ["blue", "green", "green"] //  Son,  ,       Grandfather,    s.color = 'black'; //        console.log ([u.color, f.color, s.color]); // ["blue", "green", "black"] var SonsSon = function () {}; //  SonsSon -   Son SonsSon.prototype = new Son (); //  var ss = new SonsSon (); //   SonsSon //         console.log ([u.color, f.color, s.color, ss.color]); // ["blue", "green", "black", "green"] 

प्रश्न संख्या 2। ऑब्जेक्ट बनाएँ

यदि आप new कीवर्ड का उपयोग करके वस्तुओं के नए उदाहरण बनाते हैं, तो आप खुद को त्रुटियों से कैसे बचा सकते हैं? यह है कि मैं आमतौर पर कैसे काम करता हूं:

1. मैं हमेशा कंस्ट्रक्टर कार्यों का निर्माण करता हूं ताकि वे एक बड़े अक्षर से शुरू हों।
2. मैं this instanceof Function_Name निर्माण का उपयोग करके ऑपरेशन की शुद्धता को सत्यापित करता हूं (मैं प्रदर्शन कारणों से this instanceof arguments.callee के प्रकार का उपयोग करने की कोशिश नहीं करता हूं)।
3. यह दृष्टिकोण पिछले एक के समान है, लेकिन तुलना window साथ की गई window , क्योंकि मैं संस्थाओं के नामों को हार्ड कोड करना पसंद नहीं करता हूं और ब्राउज़र के अलावा अन्य वातावरणों के लिए कोड लिखने की आवश्यकता नहीं है।

ऑब्जेक्ट बनाने के लिए सबसे सुविधाजनक मॉडल क्या है?

▍ उत्तर

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

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

 var Obj = function () {   "use strict";   this.pew = 100; }; //  let o = new Obj(); o.pew++; console.log(o.pew); //101 // .   Obj (); // TypeError: this is undefined 

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

 //    . var Obj = function () {    if (! (this instanceof Obj)) {        return new Obj ();    }    this.pew = 100; }; 

यदि, एक छोटी सी वस्तु बनाने के लिए, आपको अभी भी एक निर्माता की जरूरत है, तो ऐसा करना बेहतर है:

 var Obj = function () {    "use strict";    this.pew = 100; }; 

यहां, जैसा कि ऊपर दिखाया गया है, इस तथ्य के कारण कि निर्माणकर्ता सख्त मोड में काम करता है, new बिना कॉल करते समय एक त्रुटि उत्पन्न होगी।

प्रश्न संख्या 3। माउस क्लिक का अवरोधन

किस माउस बटन को क्लिक करने के लिए जावास्क्रिप्ट का उपयोग कैसे करें?

▍ उत्तर

माउस बटन पर क्लिक करने से mouseup और mouseup घटनाएँ उत्पन्न mouseup हैं। इस स्थिति में, click इवेंट केवल बाईं माउस बटन द्वारा उत्पन्न होता है। ईवेंट हैंडलर में, आपको ईवेंट में स्थित कोड की जांच करने की आवश्यकता है। बटन का पता लगाने के लिए बटन (0 - बाएं, 1 - मध्य, 2 - दाएं) को खोजने के लिए प्रॉपर्टी प्रॉपर्टी। हालांकि, IE में सब कुछ थोड़ा अलग दिखता है। एक उदाहरण पर विचार करें:

 var button = document.getElementById ('button'),              // 0 1 2    buttonMap = ['Left', 'Middle', 'Right'],    handler = function (event) {        event = event || window.event;        alert (buttonMap [event.button] + 'id:' + event.button);    }; if (button.addEventListener) {     button.addEventListener ('mousedown', handler, false); } else {     // IE 0 1 2 3 4     buttonMap = ['???', 'Left', 'Right', '???', 'Middle'];     button.attachEvent ('onmousedown', handler); } 

JQuery लाइब्रेरी इस IE की सुविधा को ध्यान में रखता है, इसलिए किसी भी ब्राउज़र में इसका उपयोग करते समय, बस event.which साथ खिलवाड़ करने के बजाय event.which गुण का मान event.button :

 $('button').mousedown(function (event) {   alert(['Left', 'Middle', 'Right'][event.which]); }); 

प्रश्न संख्या 4। कीबोर्ड कुंजियों पर कीस्ट्रोक्स का अवरोधन

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

▍ उत्तर

इस तरह से कुछ को लागू करने के लिए, सबसे पहले, आपको कार्यों को नियंत्रित करने के लिए मानक प्रणाली प्रतिक्रिया को अक्षम करना होगा। उदाहरण के लिए, तीर कुंजियाँ और माउस व्हील पृष्ठ को स्क्रॉल करते हैं, पृष्ठ पर राइट-क्लिक करने से एक संदर्भ मेनू आता है, जब आप submit बटन पर क्लिक करते हैं, तो form.submit() । form.submit() फ़ंक्शन को form.submit() , जब आप इनपुट फ़ील्ड पर क्लिक करते हैं, तो यह ध्यान केंद्रित करता है, जब आप लिंक पर क्लिक करते हैं, तो ब्राउज़र लोड होता है जिस पृष्ठ पर वह जाता है।

यह अलग-अलग तरीकों से किया जा सकता है। उदाहरण के लिए, इस तरह:

 window.addEventListener("keydown", function(e) {   //  -   if([37, 38, 39, 40].indexOf(e.keyCode) > -1) {       e.preventDefault();   } }, false); 

उसके बाद वाला पेज आमतौर पर एरो की प्रेस का जवाब नहीं देगा।
एक महत्वपूर्ण बात यहाँ ध्यान दें। डिफ़ॉल्ट कार्रवाई किए जाने से पहले preventDefault() विधि preventDefault() । उदाहरण के लिए, यदि आप इनपुट फ़ोकस को प्राप्त करने से रोकने के लिए किसी फ़ील्ड पर क्लिक करते हैं, तो आपको डिफ़ॉल्ट हैंडलर को किसी ऐसी घटना पर टांगने की आवश्यकता है जो डिफ़ॉल्ट क्रिया से पहले इवेंट चेन में हो। हमारे मामले में, यह एक mousedown घटना है:

 $('input').bind ('mousedown', function (event) {   event.preventDefault();   //    return false; }); 

जब आप इनपुट फ़ील्ड पर क्लिक करते हैं, तो निम्न घटनाएँ होती हैं - जिस क्रम में उन्हें यहाँ दिखाया गया है:

1. mousedown
2. focus (इससे पहले, एक अन्य ऑब्जेक्ट जो फ़ोकस खो रहा है, एक blur घटना को ट्रिगर करेगा)
3. mouseup
4. click

यदि आप तत्व को इनपुट फ़ोकस से रोकने की कोशिश करते हैं, तो focus इवेंट हैंडलर के साथ शुरू करने के लिए इवेंट हैंडलर का उपयोग करने से हमें मदद नहीं मिलेगी।

प्रश्न संख्या 5। जीआईएफ एनीमेशन और ईएससी कुंजी बंद करो

ESC कुंजी दबाते समय GIF एनीमेशन को रोकने की समस्या से कैसे निपटें?

▍ उत्तर

यहां आप उसी दृष्टिकोण का उपयोग कर सकते हैं जिसे हमने ऊपर माना था। कुछ ब्राउज़रों में, ESC कुंजी दबाने पर GIF एनीमेशन और पेज लोड होना बंद हो जाता है। यह उनका मानक व्यवहार है, और उन्हें इस तरह से व्यवहार करने से रोकने के लिए, preventDefault() ईवेंट विधि हमारे लिए उपयोगी है, पहले की तरह। ESC कुंजी कोड 27 है।

प्रश्न संख्या 6। आईआईएफई में कोष्ठक

तुरंत लागू फंक्शन एक्सप्रेशन (IIFE) घोषित करते समय दो कोष्ठक का निर्माण कैसे किया जाता है?

▍ उत्तर

इस स्थिति में कोष्ठक पार्सर को समझने की अनुमति देते हैं कि उनके सामने एक फ़ंक्शन है जिसे निष्पादित करने की आवश्यकता है। लेकिन उसे यह समझने की भी जरूरत है कि ये कोष्ठक क्या हैं - समूह संचालक, या एक निर्माण जो फ़ंक्शन को कॉल करने की आवश्यकता का संकेत देता है। उदाहरण के लिए, यदि हम नीचे दिखाए गए अनुसार दो कोष्ठक का उपयोग करते हैं, तो हम एक SyntaxError एरर त्रुटि का SyntaxError करेंगे:

 function () { //  }() 

यह इस तथ्य के कारण है कि फ़ंक्शन का कोई नाम नहीं है (आपको फ़ंक्शन घोषणाओं में उनके नाम निर्दिष्ट करना होगा)।

चलिए इस कोड को फिर से लिखने की कोशिश करते हैं, जिससे फंक्शन को एक नाम मिलता है:

 function foo() { //  }() 

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

अक्सर IIFE को इस प्रकार बनाया गया है:

 (function () {   //  })() 

लेकिन अन्य तरीके हैं, जिनमें से सार किसी तरह पार्सर को इंगित करता है कि इससे पहले कि यह सिर्फ एक कार्यात्मक अभिव्यक्ति है जिसे निष्पादित करने की आवश्यकता है:

 !function () { //  }(); +function () { //  }(); [function() { //  }()]; var a = function () { //  }(); 

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

प्रश्न संख्या 7। अनुरोधों के जवाब में कोड पास करना

सर्वर, प्रतिक्रिया के शरीर में ग्राहक के साथ AJAX बातचीत की प्रक्रिया में, ग्राहक को एक alert ('Boom !!!'); स्ट्रिंग alert ('Boom !!!'); भेजता है alert ('Boom !!!'); । क्लाइंट प्रतिक्रिया को स्वीकार करता है और इस कोड को eval() फ़ंक्शन का उपयोग करके निष्पादित करता है। इसे क्या कहा जाता है? आखिर, सर्वर रिस्पॉन्स में जो शामिल है वह JSON नहीं है, XML नहीं है, और HTML नहीं है। एक निश्चित अनुरोध पर प्रतिक्रिया के निकाय के रूप में सर्वर से आने वाले कोड के क्लाइंट पर निष्पादन के बारे में आप क्या कह सकते हैं?

▍ उत्तर

वास्तव में, क्लाइंट-सर्वर इंटरैक्शन के लिए ऐसी योजना का कोई विशेष नाम नहीं है। और यह एक सिस्टम इंटरैक्शन स्कीम है जो दृढ़ता से हतोत्साहित होती है। यह एक डेटाबेस में PHP कोड को स्टोर करने के समान ही बुरा है और फिर उपयुक्त भाषा विधियों का उपयोग करके इसे निष्पादित करता है। यहां तक ​​कि अगर हम वैचारिक विचारों को ध्यान में नहीं रखते हैं, तो हम कह सकते हैं कि इस तरह की वास्तुकला बेहद अनम्य है, इसलिए, अगर यह जहां उपयोग किया जाता है, तो यह परियोजना, जैसा कि यह विकसित होता है, कुछ बदलने के लिए, यह आसान नहीं होगा। जब हम डेटा कोड और इंटरफ़ेस तत्वों के साथ मिश्रित होते हैं, तो हम खराब सिस्टम आर्किटेक्चर का एक उदाहरण देखते हैं। ऐसी प्रणाली में कुछ बदलने के लिए, आपको पहले इसकी जटिल वास्तुकला की जटिलताओं को समझने की जरूरत है, और फिर, परिवर्तन करने के बाद, फिर से "भ्रमित" करें। मैं कोड पुन: उपयोग के बारे में बात नहीं कर रहा हूँ।

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

प्रश्न संख्या 8। मुख्य सूत्र में भारी संचालन करना

जावास्क्रिप्ट में कुछ संसाधन-गहन आदेशों के निष्पादन को कैसे व्यवस्थित करें और संपूर्ण स्क्रिप्ट को "निलंबित" न करें?

▍ उत्तर

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

यदि श्रमिकों का उपयोग संभव नहीं है, तो आपको चक्र और "भारी" कार्यों को अनुकूलित करने की आवश्यकता है। "जावास्क्रिप्ट" पुस्तक में। प्रदर्शन अनुकूलन "निकोलस ज़कास का कहना है कि उपयोगकर्ता को कुछ भी नोटिस नहीं होगा यदि उपयोगकर्ता इंटरफ़ेस प्रवाह 100 एमएस या उससे कम के लिए अवरुद्ध है।

इस विचार से, हम यह निष्कर्ष निकाल सकते हैं कि संसाधन-गहन गणना को टुकड़ों में विभाजित किया जा सकता है, जिसके कार्यान्वयन में अधिकतम 100 एमएस लगते हैं, जिसके बाद मुख्य धागा को मुक्त करना होगा।

यहाँ उपरोक्त पुस्तक से एक नमूना कोड दिया गया है:

 function timedProcessArray(items, process, callback) {   var todo = items.concat();   //    setTimeout(function () {       var start = +new Date();       do {           process(todo.shift());       } while (todo.length > 0 && (+new Date() - start < 50));       if (todo.length > 0){           setTimeout(arguments.callee, 25);       } else {           callback(items);       }   }, 25); } function saveDocument(id) {   var tasks = [openDocument, writeText, closeDocument, updateUI];   timedProcessArray(tasks, [id], function(){       alert("Save completed!");   }); } 

timedProcessArray() फ़ंक्शन 25 एमएस के लिए मुख्य थ्रेड को ब्लॉक करता है, क्रियाओं का एक क्रम करता है, फिर इसे 25 एमएस के लिए जारी करता है, जिसके बाद यह प्रक्रिया दोहराई जाती है।

प्रश्न संख्या 9। ब्राउज़र विंडो के आकार बदलने के बारे में

क्या मुझे किसी तरह पता चल सकता है कि उपयोगकर्ता ने ब्राउज़र विंडो का आकार बदलना समाप्त कर दिया है?

▍ उत्तर

कोई विशेष घटना नहीं है जो आपको पता लगाने की अनुमति देती है। लेकिन आप यह पता कर सकते हैं कि क्या उपयोगकर्ता onresize इवेंट का उपयोग करके विंडो का आकार onresize । यह विधि, हालांकि, बहुत सटीक नहीं है।

इस समस्या को हल करने के लिए एक मसौदा कोड है।

 var time = 0,   timerId,   TIME_ADMISSION = 100; // 0.1  function onresizeend () {   console.log('onresizeend'); }; function resizeWatcher () {   if (+new Date - time >= TIME_ADMISSION) {       onresizeend();       if (timerId) {           window.clearInterval(timerId);           timerId = null;       }   } }; $(window).resize(function () {   if (!timerId) {       timerId = window.setInterval(resizeWatcher, 25);   }   time = +new Date; }); 

प्रश्न संख्या 10। नई ब्राउज़र विंडो और टैब खोलना

कैसे, एक नई ब्राउज़र विंडो खोलने के लिए window.open() पद्धति का उपयोग करते हुए, एक नया टैब नहीं?

▍ उत्तर

कैसे बिल्कुल window.open() पद्धति का व्यवहार ब्राउज़र पर निर्भर करता है। ओपेरा हमेशा नए टैब खोलता है (हालांकि वे खिड़कियों की तरह दिखते हैं), सफारी हमेशा खिड़कियां खोलता है (हालांकि इस व्यवहार को बदला जा सकता है)। क्रोम, फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर के व्यवहार को नियंत्रित किया जा सकता है।

इसलिए, यदि एक अतिरिक्त पैरामीटर (विंडो की स्थिति window.open() विधि window.open() पारित हो जाती है, तो एक नई विंडो खोली जाएगी:

 window.open('http://www.google.com', '_blank', 'toolbar=0,location=0,menubar=0'); 

यदि इस पद्धति से केवल एक लिंक दिया जाता है, तो एक नया ब्राउज़र टैब खोला जाएगा:

 window.open('http://www.google.com'); 

अक्सर आपको एक नया ब्राउज़र टैब खोलने की आवश्यकता होती है। सफारी ब्राउज़र में इसके साथ समस्या हो सकती है। डिफ़ॉल्ट रूप से (यह सेटिंग्स पर निर्भर करता है), ब्राउज़र, जब window.open() कहा जाता है, एक नई विंडो खोलता है। लेकिन यदि आप लिंक पर क्लिक करते हैं, तो कुंजी Ctrl + Shift/Meta + Shift , एक नया टैब खुल जाएगा (सेटिंग्स की परवाह किए बिना)। निम्नलिखित उदाहरण में, हम Ctrl + Shift/Meta + Shift कुंजी दबाए जाने पर click घटना का अनुकरण करेंगे:

 function safariOpenWindowInNewTab (href) {    var event = document.createEvent ('MouseEvents'),        mac = (navigator.userAgent.indexOf ('Macintosh')> = 0); //  Ctrl + Shift + LeftClick / Meta + Shift + LeftClick ()    //       event.initMouseEvent (        / * type * / "click",        / * canBubble * / true        / * cancelable * / true,        / * view * / window,        / * detail * / 0,        / * screenX, screenY, clientX, clientY * / 0, 0, 0, 0,        / * ctrlKey * /! mac,        / * altKey * / false,        / * shiftKey * / true        / * metaKey * / mac,        / * button * / 0,        / * relatedTarget * / null    ); //     ,   ,         $ ('<a/>', {'href': href, 'target': '_blank'}) [0] .dispatchEvent (event); } 

प्रश्न संख्या 11। गहरी नकल वस्तुओं

प्रभावी ढंग से वस्तुओं की गहरी नकल को कैसे व्यवस्थित करें?

▍ उत्तर

यदि वह वस्तु जिसकी प्रतिलिपि आप बनाना चाहते हैं (इसे oldObject कहते हैं) नहीं बदलती है, तो इसके प्रोटोटाइप के माध्यम से ऐसा करना सबसे प्रभावी होगा (यह बहुत जल्दी किया जाता है):

 function object(o) {   function F() {}   F.prototype = o;   return new F(); } var newObject = object(oldObject); 

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

 var cloner = {   _clone: function _clone(obj) {       if (obj instanceof Array) {           var out = [];           for (var i = 0, len = obj.length; i < len; i++) {               var value = obj[i];               out[i] = (value !== null && typeof value === "object") ? _clone(value) : value;           }       } else {           var out = {};           for (var key in obj) {               if (obj.hasOwnProperty(key)) {                   var value = obj[key];                   out[key] = (value !== null && typeof value === "object") ? _clone(value) : value;               }           }       }       return out;   }, clone: function(it) {       return this._clone({       it: it       }).it;   } }; var newObject = cloner.clone(oldObject); 

यदि आप jQuery का उपयोग करते हैं, तो आप निम्न निर्माणों का सहारा ले सकते हैं:

 //   var newObject = jQuery.extend ({}, oldObject); //   var newObject = jQuery.extend (true, {}, oldObject); 

प्रश्न संख्या 12। जावास्क्रिप्ट विध्वंसक

जावास्क्रिप्ट में एक विध्वंसक की तरह कुछ बनाने के लिए कैसे? वस्तुओं के जीवन चक्र का प्रबंधन कैसे करें?

▍ उत्तर

जावास्क्रिप्ट में, किसी ऑब्जेक्ट को स्मृति से हटा दिया जाएगा जब वह अंतिम संदर्भ गायब हो जाता है:

 var a = {z: 'z'}; var b = a; var c = a; delete az; delete a; //    a console.log (b, c); // ,  ,    

जावास्क्रिप्ट में "विध्वंसक" जैसी किसी चीज़ का उपयोग करने से केवल ऑब्जेक्ट की सामग्री साफ़ होती है, लेकिन इसे मेमोरी से हटाने में नहीं।

प्रश्न संख्या 13। बाइनरी डेटा प्रोसेसिंग

क्या जावास्क्रिप्ट में द्विआधारी डेटा को संसाधित करना संभव है? और यदि हां, तो कैसे?

▍ उत्तर

यदि आपको एक जावास्क्रिप्ट एप्लीकेशन में बाइनरी डेटा के साथ काम करने की आवश्यकता है, तो आप बाइनरी पार्सर लाइब्रेरी का उपयोग करके देख सकते हैं। लेकिन उसका कोड नरक है। ES6 + में, StructType टाइप प्रकार के बारे में एक सुझाव है (यह वही चीज़ है जो संरचना के समग्र डेटा प्रकार द्वारा C ++ में StructType गई है)। बाइनरी डेटा के साथ काम करने को आसान बनाने के लिए इस डेटा प्रकार की आवश्यकता होती है। इसके साथ काम करना कुछ इस तरह लग सकता है:

 const Point2D = new StructType({ x: uint32, y: uint32 }); const Color = new StructType({ r: uint8, g: uint8, b: uint8 }); const Pixel = new StructType({ point: Point2D, color: Color }); const Triangle = new ArrayType(Pixel, 3); let t = new Triangle([{ point: { x:  0, y: 0 }, color: { r: 255, g: 255, b: 255 } },                     { point: { x: 5, y: 5 }, color: { r: 128, g: 0,   b: 0 } },                     { point: { x: 10, y: 0 }, color: { r: 0,   g: 0, b: 128 } }]); 

प्रश्न संख्या 14। एक फ़ंक्शन में दूसरे फ़ंक्शन से परिवर्तनशील चर

दूसरे फ़ंक्शन से एक फ़ंक्शन में स्थित चर कैसे बदलें?

▍ उत्तर

यहाँ आप कई दृष्टिकोण लागू कर सकते हैं:

1. आप हमारे लिए ब्याज के समारोह के संदर्भ में लिंक का उपयोग कर सकते हैं ( primer() निम्नलिखित उदाहरण में फ़ंक्शन smth() फ़ंक्शन में।
   
2. आप primer() फ़ंक्शन से smth() फ़ंक्शन के संदर्भ में बनाया गया फ़ंक्शन पास कर सकते हैं।
   
   

    var primer = function () {    var a, b, c, d, e = {}; smth (function () {        a = 1;        b = 2;        c = 3;        d = 4;    }, e); alert ([a, b, c, d, e.pewpew]); }, smth = function (callback, e) {    callback ();    e.pewpew = "pewpew"; }; primer (); 

3. पहले (फ़ायरफ़ॉक्स 3.6 से पहले), आप __parent__ संपत्ति का उपयोग करके संदर्भ में प्राप्त कर सकते हैं, लेकिन पहले से ही फ़ायरफ़ॉक्स 4 में यह सुविधा हटा दी गई थी।

प्रश्न संख्या 15। कार्यों के साथ काम करें

हमें बताएं कि जावास्क्रिप्ट में कार्यों को कैसे कहा जा सकता है।

▍ उत्तर

मुझे लगता है कि उनके साथ सामान्य कार्य के दौरान कार्यों, विधियों और निर्माणकर्ताओं को कॉल करने के तरीके के बारे में बात करने की कोई आवश्यकता नहीं है। आइए इस बारे में बात करें कि call() का उपयोग कैसे call() और apply() तरीके।

किसी ऑब्जेक्ट के कंस्ट्रक्टर को कॉन्फ़िगर करने के लिए कॉल () का उपयोग करना

 //   function extend (newObj, oldObj) {   function F () {};   F.prototype = oldObj.prototype;   newObj.prototype = new F ();   return newObj }; var Obj = function () {   this.obj_var = 100; }; Obj.prototype.obj_proto_var = 101; var NewObj = function () {   Obj.call (this); //   Obj     obj_var   this.new_obj_var = 102; }; extend (NewObj, Obj) NewObj.prototype.new_obj_proto_var = 103; new NewObj (); // {new_obj_proto_var: 103, new_obj_var: 102, obj_proto_var: 101, obj_var: 100} 

सरणी-जैसी वस्तुओं को सरणियों में बदलें

ऐरे-जैसी ऑब्जेक्ट जावास्क्रिप्ट सरणियों के समान हैं, लेकिन वे नहीं हैं। विशेष रूप से, यह इस तथ्य में व्यक्त किया जाता है कि ऐसी वस्तुओं में सामान्य सरणियों के तरीके नहीं हैं। इस तरह की वस्तुओं के बीच, उदाहरण के लिए, arguments पारंपरिक कार्यों और getElementsByTagName () विधि के परिणामों को नोट किया जा सकता है।

 // document.getElementsByTagName ("div")  ,   ,    , ,  ,        document.getElementsByTagName ("div"). forEach (function (elem) {    // ... }); // TypeError: document.getElementsByTagName ("div"). forEach is not a function //    Array.prototype.slice.call(document.getElementsByTagName("div")).forEach (function (elem) {   // OK }); //        console.log(Array.prototype.slice.call ('pewpew')) // ["p", "e", "w", "p", "e", "w"] //  IE8    

आवरण वस्तुएँ बनाना

call() और apply() का उपयोग करने की यह तकनीक आपको आवरण ऑब्जेक्ट बनाने की अनुमति देती है। , - foo() , bar() .

:

 function bar () {console.log(arguments)} // foo (context, arg1, arg2, ...) function foo () {    var context = arguments [0];    var args = Array.prototype.slice.call (arguments, 1); //     bar    bar.apply (context, args); } 

Function.call.apply() :

 function foo() {   Function.call.apply(bar, arguments); } 

, Function.call.apply() , , foo() , bar .

№16.

, , ?

▍

. , Firefox 3.6, __parent__ , .

№17.

, , , eval() ?

▍

, . , :

 // 1:  eval() (function () {    "use strict";    var globalObject = (0, eval) ("this"); //  :)    return globalObject; } ()); // 2:    (function (global) {    // ... } (window)); // 3:      (function () {    return this; } ()); // 4:            ,       . //  -    "use strict"; (function (global) {    // global }) (this); 

№18.

, JavaScript, , ?

▍

JavaScript - « ». . . , :

 $('#smth').click(function onSmthClick(event) {   if (smth) {       //         event.handlerFunction = onSmthClick;       event.handlerContext = this;       //         //  otherObjectSetSomeEvent   event.handlerFunction          otherObjectSetSomeEvent(event);   } else {       //  -    } }); 

— , . , 2 :

 $('#smth'). click (function handler1 (event) {   if (smth) {       //         leftObjectSetSomeEvent(event, function handler2 (e) {           //  -   e       });   } else {       //  -    } }); function leftObjectSetSomeEvent(event, callback) {   callback (event);   //    } 

№19.

JavaScript ? — , .

▍

click «» DOM. (, , ).

 // jQuery $(window).bind ('click', function (e) {   console.log ('Clicked on', e.target); }); //       $('#pewpew').delegate ('*', 'click', function(e) {   console.log('Clicked on', e.target); }); //     $('#pewpew').delegate('.pewpew', 'click', function (e) {   console.log ('Clicked on element with .pewpew class name'); }); 

№20. XHR-

XHR- jQuery?

▍

, - :

 function xhr(m, u, c, x) { with(new XMLHttpRequest) onreadystatechange = function (x) {   readyState ^ 4 || c(x.target) }, open(m, u), send() } 

- :

 function xhr(m, u, c, x) { with(new(this.XMLHttpRequest || ActiveXObject)("Microsoft.XMLHTTP")) onreadystatechange = function (x) {   readyState ^ 4 || c(x) }, open(m, u), send() } 

:

 xhr('get', '//google.com/favicon.ico', function (xhr) { console.dir(xhr) }); 

№21. -

(reflow) (repaint) -?

▍

1. requestAnimationFrame() , , setInterval() setTimeout() . , , , , , . , JavaScript- CSS- SVG-. , , , , , , . , , .
2. float- ( ).
3. DOM. , , , DOM ( ).
4. — . ( , , ). यहाँ एक उदाहरण है:
   
   

    //      element.style.left = "150px;"; // ... element.style.color = "green"; //  ,   ,    element.setAttribute ('style', 'color: green; left: 150px'); 

5. ( ).
   
6. — ( style.display = "none" ). , .
   

, -, . , , , , .

1. .
2. DOM- ( — ).
3. Document.querySelectorAll() firstElementChild .
4. , document.getElementsByTagName() ( , DOM, ).

№22. Node.js

Node.js, , ?

▍

, ( PHP Apache). , , . Node.js — . , , cluster . (master) - (worker). , .

№23. runInNewContext() Node.js

runInNewContext() Node.js.

▍

. , ( Node.js- Nodester). - , runInNewContext() . , «», . «» , , runInNewContext() .

परिणाम

JavaScript . , - , .

प्रिय पाठकों! , - , , JavaScript , ?