जावास्क्रिप्ट अकसर किये गए सवाल: भाग 1

कुछ दिनों पहले, TheShock और मैंने एक विषय बनाया था जिसमें हमने जावास्क्रिप्ट (आर्किटेक्चर, फ्रेमवर्क, समस्याओं) के बारे में आपके प्रश्न एकत्र किए थे। उन्हें जवाब देने का समय आ गया है। हमें बहुत सारे प्रश्न मिले, दोनों टिप्पणियों में और ईमेल द्वारा। उत्तरों का यह पहला भाग मेरे द्वारा प्राप्त किए गए प्रश्न हैं।

1. प्रोटोटाइप विरासत। यह कैसे काम करता है?

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

उत्तर बहुत लंबा था, इसलिए मैंने एक अलग विषय बनाया: जावास्क्रिप्ट के बारे में बुनियादी बातें और गलत धारणाएं

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

यदि नया है, तो आप त्रुटियों से कैसे सुरक्षित हैं:
1. कंस्ट्रक्टर फ़ंक्शन मैं हमेशा एक बड़े अक्षर के साथ लिखता हूं;
2. इस उदाहरण के माध्यम से निर्माण की वैधता की जाँच करें FunctionName (मैं इस उदाहरण से बचता हूं। प्रदर्शन के कारणों से बचें)
3. दूसरे के समान, लेकिन मैं खिड़की के साथ जांच करता हूं, क्योंकि मैं नाम को हार्डकोड नहीं करना चाहता और बाहर के वातावरण के लिए स्क्रिप्ट नहीं लिखना चाहता।

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

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

नया कारखाना विधियों, और छोटे बिल्डरों के लिए स्वीकार्य नहीं है - jQuery

मैं कोड को संक्षेप में बताता हूं:

 // :  ,   , use strict var Obj = function () { "use strict"; this.pew = 100; }; //   :      var Obj = function () { if (!(this instanceof Obj)) { return new Obj(); } this.pew = 100; }; 

3. जेएस पर किस माउस का बटन दबाया जाए, इसका निर्धारण कैसे करें?

mousedown mouseup ईवेंट mousedown mouseup सभी माउस बटन द्वारा ट्रिगर किया जाता है, click - केवल बाईं ओर। ईवेंट हैंडलर में, आपको यह event.button के लिए कि कौन सा दबाया गया था, यह जानने के लिए आपको ईवेंट के कोड की जांच करनी होगी।
(० - वाम, १ - मध्य, २ - अधिकार)। IE8 में - सब कुछ गलत है, कोड देखें:

 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 जाँच करने के लायक है

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

उदाहरण: jsfiddle.net/azproduction/W2XgH
अधिक जानकारी: www.quirksmode.org/js/events_properties.html पैराग्राफ "किस माउस बटन पर क्लिक किया गया है?"
jQuery event.which: api.jquery.com/event.which

4. क्या कीबोर्ड कीस्ट्रोक घटनाओं को रोकना संभव है?

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

ऐसा करने के लिए, तथाकथित डिफ़ॉल्ट कार्रवाई को रद्द करना आवश्यक है: डाउन एरो और माउस व्हील खिड़की को स्क्रॉल करते हैं, राइट माउस बटन संदर्भ मेनू लाता है, form.submit() निष्पादित करने के लिए sumbit पर क्लिक करें। form.submit() , जब आप इनपुट पर क्लिक करेंगे तो इसे फोकस मिलेगा, जब आप क्लिक करेंगे ब्राउज़र लिंक आदि के माध्यम से एंकर के पास जाएगा।

JQuery का प्रयोग इस तरह किया जा सकता है:

 //        keypress,     keyup $(window).bind($.browser.opera ? 'keypress' : 'keyup', function (event) { event.preventDefault(); //  return false; }); 

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

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

घटनाओं की श्रृंखला इस प्रकार है:
1. मूसडाउन
2. फोकस (फोकस से पहले, धब्बा दूसरी वस्तु पर काम करेगा)
3. मूषक
4. क्लिक करें
यदि हम ईवेंट को फ़ोकस पर और नीचे लटकाते हैं, तो इससे कुछ नहीं होगा। defaultAction मूसडाउन के बाद काम करेगा।

5. ईएससी दबाते समय जिफ-एनीमेशन को रोकने की समस्या को कैसे हल किया जाए, अगर यह कुंजी बाँध रही है?

ऊपर उत्तर देखें। कुछ ब्राउज़र, जब आप Esc दबाते हैं, तो जिफ एनीमेशन बंद करें, पेज लोड करना बंद करें - यह उनकी डिफ़ॉल्ट कार्रवाई है।
आपको डिफ़ॉल्ट एक्शन event.preventDefault() को पूर्ववत करना होगा event.preventDefault() :

 $(document).bind($.browser.webkit ? 'keydown' : 'keypress', function (event) { //  Esc if ((event.which || event.keyCode) === 27) { event.preventDefault(); //  return false; } }); 

6. और ऑपरेटर () क्या है जिसके साथ क्लोजर बनाया गया था?

कोष्ठक पार्सर को समझने की अनुमति देते हैं कि फ़ंक्शन के बाद कोष्ठक क्या हैं: एक समूहन या एक फ़ंक्शन कॉल ऑपरेटर।

यदि आप इसे इस तरह करते हैं:

 function () { // source }() 

इस मामले में, हम एक फ़ंक्शन नाम की अनुपस्थिति के कारण एक सिंटैक्सएरोर प्राप्त करते हैं (एक घोषणा फ़ंक्शन में हमेशा एक नाम होना चाहिए)।

यदि आप एक नाम जोड़ते हैं:

 function foo() { // source }() 

दूसरे मामले में, नाम सेट (फू) है, और सिद्धांत रूप में, फ़ंक्शन की घोषणा ठीक होनी चाहिए। हालाँकि, हमारे पास अभी भी एक सिंटैक्स त्रुटि है, लेकिन पहले से ही, एक अभिव्यक्ति के बिना समूहीकरण ऑपरेटर के संबंध में। कृपया ध्यान दें कि इस मामले में यह समूह ऑपरेटर है जो फ़ंक्शन घोषणा का अनुसरण करता है, फ़ंक्शन कॉल कोष्ठक नहीं!

ParseError को रोकने के अन्य तरीके हैं - फ़ंक्शन को एक्सप्रेशन अवस्था में रखें अर्थात्। पार्सर को दिखाएं कि यह वास्तव में फ़ंक्शन अभिव्यक्ति है:
द शॉक से :

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

यह incl का उपयोग किया जाता है। jQuery में। आपको स्थानीय स्कोप के साथ एक ब्लॉक में सभी कोड का चयन करने की अनुमति देता है। यह आंतरिक चर तक पहुंच को गति देता है, जिससे आप ग्लोबल नेमस्पेस को अव्यवस्थित कर सकते हैं, और, सबसे महत्वपूर्ण बात यह है कि यह मिनीफायर्स द्वारा बेहतर संकुचित है। habrahabr.ru/blogs/jquery/118564

सामग्री के आधार पर dsCode सूक्ष्मता ECMA-262-3। भाग 5. कार्य। - सवाल "कोष्ठक के बारे में"
और पढ़ें : kangax.github.com/nfe

7. XHR में अग्रेषण कोड

अजाक्स प्रणाली में उपयोगकर्ता के कार्यों के लिए सर्वर "अलर्ट ('बूम !!!')" एक प्रतिक्रिया भेजता है। क्लाइंट पर, प्राप्त प्रतिक्रिया को eval () के माध्यम से चलाया जाता है और निष्पादित किया जाता है। इस डेटा स्थानांतरण का नाम क्या है? यह JSON नहीं है, XML नहीं है, HTML नहीं है।

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

पढ़ें:
और फिर से एमवीसी के बारे में
एक वेब अनुप्रयोग में इवेंट-संचालित मॉडल का अनुप्रयोग
Backbone.js के साथ जटिल इंटरफेस लिखना

8. पूरे स्क्रिप्ट को लटकाए बिना देरी के साथ कमांड निष्पादन की कतार को सही ढंग से कैसे व्यवस्थित किया जाए?

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

यहाँ मूल कोड अपनी पुस्तक से सभी प्रोसेसर के लिए अनुकूलित है:

 function timedProcessArray(items, process, callback) { var todo = items.concat(); //create a clone of the original 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 फ़ंक्शन यूआई timedProcessArray को 25 एमएस के लिए ब्लॉक करता है, क्रियाओं की एक श्रृंखला निष्पादित करता है, फिर यूआई थ्रस्ट को 25 एमएस और इतने पर जारी करता है।

पढ़ें:
निकोलस सी। ज़कस - ओरेली हाई परफॉर्मेंस जावास्क्रिप्ट
कॉमिक्स वेब वर्कर्स
वेब वर्कर्स का उपयोग करके परिकलित करना
WXHR: स्वाद के साथ अच्छा पुराना XHR

9. क्या किसी तरह यह पता लगाना संभव है कि उपयोगकर्ता ने विंडो का आकार बदलना समाप्त कर दिया है?

ऐसी कोई घटना नहीं है, लेकिन आप यह पता लगा सकते हैं कि क्या उपयोगकर्ता ने कुछ समय के लिए खिड़की का आकार बदल दिया, जो मोटे तौर पर ऑनरसाइज से मेल खाती है

कोड स्केच:

 var time = 0, timerId, TIME_ADMISSION = 100; // 0.1s 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; }); 

लाइव उदाहरण: jsfiddle.net/azproduction/2Yt6T

10. नई विंडो खोलने के लिए window.open () का उपयोग कैसे करें, और टैब नहीं?

यह व्यवहार ब्राउज़र-विशिष्ट है। ओपेरा हमेशा एक टैब खोलता है (लेकिन यह एक खिड़की के रूप में प्रकट होता है), सफारी हमेशा एक खिड़की खोलता है (सफारी व्यवहार को बायपास किया जा सकता है)। Chrome, FF और IE नियंत्रणीय हैं।

यदि आप अतिरिक्त पैरामीटर पास करते हैं - विंडो की स्थिति, एक नई विंडो खुल जाएगी:

 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 हमेशा एक नया टैब खोलता है (सेटिंग्स की परवाह किए बिना)। नया टैब खोलने के लिए, हम Ctrl+Shift/Meta+Shift हुए "क्लिक" ईवेंट का अनुकरण करेंगे:

 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. कैसे प्रभावी रूप से गहरी प्रतिलिपि बनाने के लिए?

यदि पुराना ऑबजेक्ट नहीं बदलता है, तो यह प्रोटोटाइप के माध्यम से क्लोन करने के लिए अधिक कुशल होगा (यह बहुत तेज़ होगा):

 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. अनुरूप विध्वंसक / फाइनल कैसे करें? और सामान्य तौर पर, वस्तुओं के जीवनकाल का प्रबंधन कैसे करें?

JavaScript में, जब वह अंतिम लिंक गायब हो जाता है, तो ऑब्जेक्ट हटा दिया जाएगा:

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

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

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

जावास्क्रिप्ट में, सभी नंबरों को स्ट्रिंग रूप में उपयोग के लिए प्रस्तुत किया गया है और बाइनरी डेटा के साथ काम करने के लिए कोई अंतर्निहित उपकरण नहीं हैं। बाइनरी नंबर के साथ काम करने के लिए एक बाइनरीपर्सर जावास्क्रिप्ट लाइब्रेरी है : एन्कोडिंग, डिकोडिंग (इसका कोड नरक है!)

ECMAScript 6+ (स्ट्रोमैन) का एक मसौदा है स्ट्रक्चर टाइप (यह हमारे लिए C ++ और अन्य से परिचित एक संरचना है)। बाइनरी फ़ाइलों के साथ काम करना सरल बनाने की आवश्यकता है। भविष्य में यह कैसा दिख सकता है:

 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 } }]); 

donnerjack13589 ArtemS आप बफ़र्स से पढ़ने के लिए जावास्क्रिप्ट टाइप किए गए सरणियों का उपयोग कर सकते हैं, लेकिन आपको बाइनरी नंबर नहीं मिल सकता है।

XMLHttpRequest Level 2 आपको बाइनरी फाइलें भेजने और प्राप्त करने की अनुमति देता है:

14. एक फ़ंक्शन से दूसरे फ़ंक्शन के संदर्भ चर कैसे बदलें?

1. आप smth में प्राइमर संदर्भ ऑब्जेक्ट का लिंक प्रदान कर सकते हैं
2. प्राइमर संदर्भ में उत्पन्न फ़ंक्शन को स्मथ फ़ंक्शन में पास करें

 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. पहले (FireFox 3.6-) __parent__ के माध्यम से संदर्भ तक पहुंचना संभव था, लेकिन संस्करण 4 में यह सुविधा काट दी गई थी।

15. लेख "कॉल करने के पांच तरीके" के बारे में। इनमें से कौन सी N विधियां (शीर्षक 5 में, लेख 4 में, टिप्पणियों में कई) बेहतर है कि कब आवेदन करें और क्यों?

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

 //   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   Own property 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} 

2. एक सूची में NodeList और अन्य सरणी-जैसी वस्तुओं को एक सरणी में परिवर्तित करना, एक लाइव सूची (getElementsByTagName) को एक सरणी में बदलना।

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

3. रैपर बनाने के लिए Function.call.apply के साथ ट्रिक्स:
हमें एक रैपर फू () लिखना होगा जो निर्दिष्ट संदर्भ में बार () को मनमाने ढंग से तर्क के साथ बुलाता है
संकर से

अपने पारंपरिक रूप में, यह इस तरह दिखेगा:

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

इस सलाद के बजाय call.apply ट्रिक का उपयोग करें:

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

यह इस तरह काम करता है: aplly कॉल फंक्शन.ऑल को बार ऑब्जेक्ट पर foo करने के लिए पास के साथ। यही है, हम संदर्भ और arg1, arg2 के साथ बहुत पहले उदाहरण के लिए निम्नलिखित प्राप्त करते हैं:

 bar.call(context, arg1, arg2) 

4. बंधन अनुकरण

16. एक फ़ंक्शन के निष्पादन की गुंजाइश को दूसरे में कैसे स्थानांतरित किया जाए?

कोई रास्ता नहीं। पहले (FireFox 3.6-), __parent__ के माध्यम से संदर्भ तक पहुंचना संभव था, लेकिन संस्करण 4 में यह सुविधा काट दी गई थी।

17. किसी वैश्विक वस्तु को उसके प्रत्यक्ष संदर्भ के बिना, निष्कासन के बिना और 'सख्त उपयोग' के साथ कैसे प्राप्त करें?

कोई रास्ता नहीं, यदि आप किसी एक शर्त को छोड़ देते हैं, या केवल वैश्विक दायरे में निष्पादित करते हैं, तो आप कर सकते हैं:

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

18. क्या बाद में इसे पुनः आरंभ करने के लिए घटना को रोकने के बाद जावास्क्रिप्ट में संभव है?

ईवेंट कोई लोड नहीं करता है, यह केवल एक घटना विवरणक है। लेकिन आप स्पष्ट रूप से ईवेंट हैंडलर का लिंक पास कर सकते हैं, जैसे:

 $('#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) { //  -  event  e }); } else { //  -  } }); function leftObjectSetSomeEvent(event, callback) { callback(event); //  -  event } 

19. और आपने अपनी संदर्भ पुस्तक js पर लिखना नहीं सोचा? मुझे बताओ कि जावास्क्रिप्ट को गहराई से कहाँ सीखना है? किताबें, ट्यूटोरियल?

कई साइटें और कई किताबें हैं , उनमें से कुछ का रूसी में अनुवाद किया गया है ।

20. जेएस पर किसी भी तत्व के पेज पर सभी क्लिक को कैसे रोकें? यानी सिंगल क्लिक हैंडलर बनाओ

DOM ट्री में सबसे निचले ऑब्जेक्ट पर क्लिक इवेंट हैंडलर को लटका देना आवश्यक है, तत्वों पर सभी क्लिक "पॉप अप" करेंगे (यदि ट्रैफ़िक पुलिस सड़क पर आगे बढ़ने से मना करती है)।

 // jQuery $(window).bind('click', function (e) { console.log('Clicked on ', e.target); }); //    - ,  jQuery delegate $('#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'); }); 

21. बिना jQuery के XHR को कैसे निष्पादित करें?

नॉन क्रॉस ब्राउज़र फ़ंक्शन:

 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', '//ya.ru/favicon.ico', function(xhr){console.dir(xhr)}); 

22. फाइल सिस्टम के साथ काम करें

मैं जावास्क्रिप्ट के माध्यम से फाइल सिस्टम के साथ काम करना चाहता था, उदाहरण के लिए, फाइलों को पढ़ना और लिखना। अधिकांश पाठ्यपुस्तकों में उन ब्राउज़रों के लिए जावास्क्रिप्ट का वर्णन होता है जहां फाइलों के साथ काम करने की आवश्यकता नहीं होती है, लेकिन उदाहरण के लिए, सर्वर एप्लिकेशन में या उदाहरण के लिए XUL में, यह एक आवश्यकता है, लेकिन बहुत कम प्रलेखन है, यदि कोई हो।

फाइल सिस्टम के साथ क्लाइंट के काम के बारे में, जिसमें हैबे पर फ़ाइल अपलोड शामिल है, लेखों का एक समूह है:
HTML5 फ़ाइल API: सर्वर पर कई फ़ाइल अपलोड होती है
वरीयताओं और नर्तकियों के साथ HTML5 फ़ाइल एपीआई का उपयोग करके फ़ाइलें डाउनलोड करें
फ़ाइलसिस्टम एपीआई और फ़ाइल एपीआई: समझें और उपयोग करें
सबसे छोटी छवि अपलोडर!

Node.js सर्वर पर फ़ाइलों के साथ काम करने पर एक अच्छा लेख है। Node.js में फ़ाइलों को पढ़ना और लिखना

XUL के लिए, आप यहाँ MDC File_I / O लेख में पढ़ सकते हैं

23. पुन: प्रवाह, दमन और उन्हें कम करने के तरीके।

1. यदि ब्राउज़र requestAnimationFrame फ़ंक्शन का समर्थन करता है, तो आपको इसे सेट के बजाय उपयोग करना चाहिए। requestAnimationFrame setInterval/setTimeout

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

2. फ्लोट तत्वों की एक बड़ी संख्या से बचें (रिफ्लो कम हो जाएगा)
4. DOM ट्री को जितना संभव हो कम से कम संशोधित करें - मेमोरी में लिखें, और फिर इसे DOM 1 में डालें (रिफ्लो कम हो जाएगा)
5. एक बंडल में वस्तु के गुणों को बदलें (Reflow, redraw कम हो जाएगा) (यह आधुनिक ब्राउज़रों के लिए सच नहीं है)

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

6. प्रदर्शन केवल पूरी तरह से तैनात वस्तुओं के साथ (reflow घट जाएगा)
7. तत्वों के समूह को बदलने से पहले, उनकी style.display = "none" छिपाएं style.display = "none" ( style.display = "none" कम हो जाएगा) (यह आधुनिक ब्राउज़र के लिए सही नहीं है)

ऑफ-विषय, लेकिन अनुकूलन के बारे में भी:
8. घटनाओं की संख्या को कम करने के लिए इवेंट डेलिगेशन का उपयोग करें।
9. DOM तत्वों के संदर्भ में कैश (चयनकर्ता को कॉल करना सबसे महंगा ऑपरेशन है)
10. क्विक सिलेक्टर फ़ंक्शंस का उपयोग करें querySelectorAll () firstElementChild
11. याद रखें कि document.getElementsByTagName तत्वों का "लाइव" संग्रह लौटाता है (यदि कोई तत्व DOM ट्री में जोड़ा जाता है, तो संग्रह इसे स्वचालित रूप से प्राप्त करेगा)

कई आधुनिक ब्राउज़रों में, ये विधियाँ ऐसा दृश्य लाभ नहीं देंगी (ब्राउज़र डेवलपर्स हमारे लिए सब कुछ अनुकूलित करते हैं)।

पढ़ें:
निकोलस सी। ज़कस - ओरेली उच्च प्रदर्शन जावास्क्रिप्ट
उन्नत एनिमेशन requestAnimationFrame के साथ

24. क्या यह अत्यधिक भरी हुई परियोजनाओं में हर अनुरोध के लिए नोड.जेएस में चाइल्डप्रोसेस का उपयोग करने के लायक है?

प्रत्येक अनुरोध के लिए, किसी भी स्थिति में आपको चाइल्डप्रोसेस का उपयोग नहीं करना चाहिए क्योंकि हम बहुत अधिक ओवरहेड हो जाते हैं (यह अपाचे के साथ PHP की तरह है): अतिरिक्त मेमोरी, कांटा समय, आरंभीकरण समय (जिद संकलन), सीपीयू लोड, आदि का आवंटन करना। Node.js लोड को बहुत अच्छी तरह से वितरित करता है और अपने "ईवेंटेड प्रोसेसिंग लूप" में एकल प्रोसेसर कोर को लोड करता है - आवेदन का मुख्य धागा।Node.js के लिए आदर्श डाउनलोड प्रति कर्नेल 1 कांटा है, यह क्लस्टर का उपयोग करके कांटा करने के लिए सबसे अच्छा है । क्लस्टर एक बैलेंसर (स्वामी) और कांटे - दास के रूप में कार्य करेगा। भारी अनुरोधों के लिए चाइल्डप्रोसेस का उपयोग उचित है।
आप अभी भी यहां पढ़ सकते हैं: stackoverflow.com/questions/3491811/node-js-and-cpu-intensive-requests

25. node.js में runInNewContext का उपयोग करना

RunInNewContext क्या है? - node-js.ru/12-control-context-using-runinnewcontext
इस तकनीक का एकमात्र अनुप्रयोग मैं किसी और के, संभावित खतरनाक कोड को चलाने के लिए देखता हूं (यह है कि कैसे Node.js होस्टिंग नोडर है)। अगर इसके लिए कोई महत्वपूर्ण आवश्यकता नहीं है, तो मैं स्पष्ट रूप से इसके खिलाफ हूं - यह एक बिल्कुल अनावश्यक आवरण है जिसे आप उपयोग नहीं कर सकते हैं यदि आप सही एप्लिकेशन आर्किटेक्चर का चयन करते हैं और विकास के दौरान समझौतों का उपयोग करते हैं। क्या बुरा है: लगातार जीसी (जो पूरे आवेदन को अवरुद्ध करता है) के परिणामस्वरूप - संदर्भों को बनाना / हटाना। मुझे लगता है कि ऐसे कोड के समर्थन से समस्याएं होंगी।

निष्कर्ष

TheShock उन सभी सवालों के जवाब देगा जो इस लेख में नहीं हैं । भारी इंटरफेस (जीमेल, और अन्य) की वास्तुकला के बारे में एक लेख भी है।

यदि कुछ स्पष्ट नहीं है - प्रश्न पूछें।