$ (document.body) और document.body एक ही है? कक्षा में कचरा और बाध्यकारी सफाई? - MooTools 1.3

Question

मैं एक MooTools वर्ग का निर्माण कर रहा हूँ और मैं अपने इनिशियलाइज़ समारोह में इस राशि:

this.css = null; 

window.addEvent('domready', function(){ 

    this.document = $(document); 
    this.body = $(document.body); 
    this.head = $(document.head); 

}.bind(this)); 

ठीक है और अब सवाल ... मैं घोषणा करना चाहिए this.css = अशक्त या किसी अन्य खाली चर init में:

this.css = null; // Maybe this.css = '' - empty string? 

अगला बात खिड़की और दस्तावेज के बारे में है ... मैं इसे $ में डाल दिया जाना चाहिए() या नहीं क्योंकि यह दोनों तरह से काम करता है, इसलिए मैं सिर्फ जानना चाहता है जो जिस तरह से पसंद किया जाता है करना चाहते हैं? तो संक्षेप में प्रस्तुत करने के लिए:

window.addEvent() // or should I use $(window).addEvent() 
this.document = $(document) // or this.document = document 
this.body = $(document.body) // or this.body = document.body 

मैं वस्तु में इन मूल्यों को संग्रहीत कई डोम प्रश्नों से बचने के लिए, यह ठीक है? या हर बार $ (चयनकर्ता)/$$ (चयनकर्ता) को कॉल करना बेहतर होगा?

दो और चीजें चली गईं ... बाध्यकारी के बारे में ... क्या यह हर बार उपयोग करना ठीक है या यह बेहतर होगा। यह (bind (this.myDiv) का उपयोग करना बेहतर होगा और इसे फ़ंक्शन के अंदर उपयोग करें। : this.setStyle (...); this.myDiv.setStyle (...) के बजाय

(function(){ 
    this.setStyle('overflow-y', 'visible'); 
}.bind(this.body)).delay(100); 

या

(function(){ 
    this.body.setStyle('overflow-y', 'visible'); 
}.bind(this)).delay(100); 

और अंत में कचरा संग्रहण के बारे में है ... मैं अपने आप को कचरा करना है और कैसे करना है (जहां तक ​​मुझे पता है कि म्यूटूल इसे अपने आपलोड पर करता है)। , अपने सभी बच्चों का एक तत्व खाली दूर करता है और तत्व garbages: भ्रामक बात यह है कि मैं मीट्रिक टन डॉक्स में समारोह पाया है:

myElement.destroy(); 

वे कहते हैं। पृष्ठ से पहले स्मृति को साफ़ करने के लिए उपयोगी अपलोड करें।

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

Answer 1

पीएफ, यह थोड़ा लंबा है।

पहले, प्रारंभिक चर। this.css = null ... एकमात्र समय मैं 'खाली' चर सेट करता हूं: टाइपकास्ट; जब यह किसी ऑब्जेक्ट की प्रॉपर्टी है तो मैं संदर्भित कर सकता हूं और अपरिभाषित नहीं करना चाहता; जब यह एक स्ट्रिंग है तो मैं एक साथ जोड़ दूंगा या एक संख्या मैं वृद्धि/कमी करूंगा; इस बिंदु पर शून्य वास्तव में उपयोगी नहीं है।

एक mootools कक्षा लिखते समय एक आम/अच्छी प्रैक्टिस विकल्प वर्ग को मिक्सीन के रूप में उपयोग करना है। यह आपको डिफ़ॉल्ट विकल्प ऑब्जेक्ट को अपनी डिफ़ॉल्ट सेटिंग्स के साथ सेट करने की अनुमति देता है जिसे तत्काल पर ओवरराइड किया जा सकता है। इसी तरह, Object.merge({ var: val}, useroptions); आपूर्ति किए जाने पर एक डिफ़ॉल्ट वैल ओवरराइड कर सकते हैं।

अब, iirc, कई बार जब आप $(document.body) उपयोग करने के लिए होगा रहे हैं और यह क्योंकि document.body काम नहीं करता नहीं है, क्योंकि आवेदन करने $() भी IE में तत्व प्रोटोटाइप लागू होता है यह (तत्व प्रोटोटाइप वहाँ, विस्तारित नहीं किया जाता क्योंकि विधियों को सीधे तत्वों पर लागू किया जाता है, जो तब होता है जब आप उन्हें $) करते हैं। इसके अलावा, $ लक्ष्य तत्व का एक आंतरिक यूआईडी असाइन करता है और उस तत्व के लिए तत्व भंडारण का उपयोग करने की अनुमति देता है। मुझे $(document) या $(window) का उपयोग करने के लिए कोई बिंदु नहीं दिख रहा है - वे डिफ़ॉल्ट रूप से जितनी आवश्यक हो उतनी 'विस्तारित' हैं। किसी भी मामले में, आईई में भी, आपको केवल एक बार $(something) की आवश्यकता होती है और इसे बाद में 'कुछ' के रूप में उपयोग करना जारी रख सकता है।मेरे document.getElementById("foo").method() उदाहरण की जांच करें - आप केवल $("foo"); चला सकते हैं और फिर document.getElementById("foo").method() फिर से प्रयास करें - यह आईई में भी काम करेगा।

window.addEvent(); // is fine. 
document.body.adopt(new Element("div")); // not fine in IE. 
new Element("div").inject(document.body); // fine. 

और अपने दम पर:

$(document.body).adopt(new Element("div")); // fine. 
document.body.adopt(new Element("span")); // now fine, after first $. 

IE8 में यह देखें: http://www.jsfiddle.net/AePzD/1/ - पहली पृष्ठभूमि सेट करने के लिए प्रयास विफल रहता है, लेकिन एक दूसरे के काम करता है। बाद में, document.body.methods() कॉल ठीक काम करने जा रहे हैं।

http://www.jsfiddle.net/AePzD/2/ - इससे पता चलता है कि तत्व (जो $ भी लौटाता है) में वेबकिट/मोज़िला में विधियां हो सकती हैं और ट्राइडेंट में नहीं। हालांकि, इसे $ ("foo") से प्रतिस्थापित करें और यह काम करना शुरू कर देगा। अंगूठे का नियम: $ तत्व जो आप गतिशील रूप से उन तरीकों को लागू करने से पहले नहीं बनाते हैं।

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

बाइंडिंग के लिए, जो भी आपको पसंद है।

(function(){ 
     this.setStyle('background', 'blue'); 
}).delay(100, $("foo")); 

तो काफी कुछ कार्यों कार्य करें:

मन देरी में रखने के एक दूसरा तर्क, BIND है। यह विशेष बंधन बहुत उपयोगी नहीं है लेकिन कक्षा में, आप

(function(){ 
     this.element.setStyle('background', 'blue'); 
     this.someMethod(); 
}).delay(100, this)); 

जीसी करना चाह सकते हैं। mootools यह अपने स्वयं के जीसी है, यकीन है। हालांकि, .destroy एक बहुत अच्छा अभ्यास है, आईएमओ। अगर आपको डोम में कुछ चाहिए तो element.dispose() का उपयोग करें। यदि आप इसे फिर से डोम से नहीं जोड़ेंगे, तो .destroy() का उपयोग करें - सभी बच्चे नोड्स को हटा दें और साफ़ करें। अधिक स्मृति \ o/

आईई पर सलाह ... dodgy। यदि आप मेमोरी लीक का पता लगाने के लिए ड्रिप कर सकते हैं तो आप ड्रिप का उपयोग कर सकते हैं, ऐसी चीजें हैं जो डायनाट्रेस की तरह हैं जो प्रोफाइलिंग में बहुत अच्छी हो सकती हैं। प्रथाओं के संदर्भ में ... सुनिश्चित करें कि आप इनलाइन जेएस का उपयोग नहीं करते हैं, आप हमेशा जो भी आपको जरूरत नहीं है (घटनाओं, तत्वों) और आमतौर पर सावधान रहें, जब आप घटनाओं को ढेर कर रहे हों और AJAX से निपट रहे हों, घटनाओं की आवश्यकता वाले नए तत्व लाएं - इसके बजाए ईवेंट प्रतिनिधिमंडल पर विचार करें ...)। कम डोम नोड्स का उपयोग करें - यह भी मदद करता है ...