MooTools

Question

की छिपी हुई विशेषताएं MooTools की छिपी हुई या अस्पष्ट विशेषताएं क्या हैं जो प्रत्येक MooTools डेवलपर को अवगत होना चाहिए?

प्रति जवाब एक सुविधा, कृपया।

Answer 1

वहाँ कई विशेषताएं यदि आप स्रोत कोड को पढ़ने के लिए है कि एक का उपयोग कर सकते हैं, हालांकि आधिकारिक लाइन है: if it's not in the documentation, it is not in the api and it's not supported so do not base your code around it as it may change

कहा जा रहा है, वहाँ कुछ चीजें हैं जो वास्तव में बहुत उपयोगी हो सकता है।

संदर्भित तत्वों एक uid

किसी भी तत्व है कि या तो बनाया जा रहा है या एक चयनकर्ता के माध्यम से पारित हो जाता है, एक संपत्ति uid, जो वृद्धिशील और अद्वितीय है सौंप दिया जाता है: undocumented सुविधाओं मेरे पसंदीदा में से एक यह है । MooTools 1.4.2 के बाद से, यह केवल Slick.uidOf(node) के माध्यम से पठनीय है और पुराने तत्व attr .uid के माध्यम से नहीं। अब आप किसी भी MooTools एलिमेंट ऑब्जेक्ट की नई uniqueNumber प्रॉपर्टी का उपयोग कर सकते हैं।

इसका उपयोग कैसे किया जा रहा है? स्टार्टर्स के लिए, एलिमेंट स्टोरेज। यह Storage ऑब्जेक्ट में बंद होने के अंदर यूआईडी पर निर्भर करता है, जिसमें उस तत्व के लिए आपके पास .store 'डी होगा।

element.store('foo', 'bar'); 

तब्दील करने के लिए:

Storage[Slick.uidOf(element)].foo = 'bar'; 

और

element.retrieve('foo'); // getter of the storage key 
element.eliminate('foo'); // delete Storage[Slick.uidOf(element)].foo 

एक तत्व आप बाहर से बनाया है, उदाहरण के लिए भंडारण आरंभ किया जा रहा var foo = document.createElement('div') और नहीं तत्व निर्माता के माध्यम से,

Slick.uidOf(foo); // makes it compatible with Storage 

// same as: 
document.id(foo); 

गु भंडारण में ढांचे द्वारा संग्रहीत किए गए सामानों में सभी events कॉलबैक, validators उदाहरण, Fx उदाहरण (टिवन, मॉर्फ इत्यादि) और बहुत कुछ शामिल हैं।

तत्वों के यूआईडी को जानने के लिए आप क्या कर सकते हैं? खैर, किसी तत्व को क्लोन करने से तत्व का संग्रहण या ईवेंट नहीं मिलता है। आप वास्तव में एक नया Element.cloneWithStorage प्रोटोटाइप लिख सकते हैं जो आपके पास रखे गए सभी संग्रहीत मूल्यों की प्रतिलिपि भी करेगा, जो एक बिंदु तक उपयोगी है - उदाहरण जो किसी विशेष तत्व (जैसे Fx.Tween) का संदर्भ देता है, पुराने तत्व का संदर्भ जारी रखेगा, इसलिए यह हो सकता है अप्रत्याशित परिणाम हैं। यह आपके स्वयं के भंडारण को स्थानांतरित करने में उपयोगी हो सकता है, हालांकि, आपको केवल एक ही विधि है जो आपके द्वारा संग्रहीत किए गए रिकॉर्ड को रिकॉर्ड करेगी और आपको इसे क्लोन करने की अनुमति देगी।

उदाहरण भंडारण एक और तत्व के डेटा का पंचर:

var foo = new Element('div'), 
    uid = foo.uniqueNumber; 

foo.store('foo', 'foo only'); 

var bar = new Element('div'); 

console.log(bar.retrieve('foo')); // null 

bar.uniqueNumber = uid; // force overwrite of uid to the other el 

console.log(bar.retrieve('foo')); // foo only - OH NOES 

console.log(Object.keys(foo)); // ["uniqueNumber"] - oh dear. enumerable! 

Answer 2

Function.prototype.protect शायद एक कम ज्ञात अच्छा एक है।

कक्षाओं में तरीकों की रक्षा की है करने के लिए किया जाता है:

var Foo = new Class({ 

    fooify: function(){ 
     console.log('can\'t touch me'); 
    }.protect(), 

    barify: function(){ 
     this.fooify(); 
    } 

}); 

var foo = new Foo(); 
foo.fooify(); // throws error 
foo.barify(); // logs "can't touch me" 

व्यक्तिगत तौर पर मैं यह बहुत अक्सर उपयोग नहीं करते, लेकिन यह कुछ मामलों में उपयोगी हो सकता है।

Answer 3

Function.prototype.overloadGetter और Function.prototype.overloadSetter

यह पोस्ट देखें: What does MooTools' Function.prototype.overloadSetter() do?

Answer 4

कक्षा Mutators

MooTools एक अद्भुत विशेषता यह है कि आप अपने खुद के कक्षा mutators बनाने की अनुमति देता है। उदाहरण के लिए, एक लकड़हारा के लिए विशेष वर्ग के तरीकों संदर्भित किया जा रहा जोड़ने के लिए, आप कर सकते हैं:

// define the mutator as 'Monitor', use as Mointor: ['methodname', 'method2'...] 
Class.Mutators.Monitor = function(methods){ 
    if (!this.prototype.initialize) this.implement('initialize', function(){}); 
    return Array.from(methods).concat(this.prototype.Monitor || []); 
}; 

Class.Mutators.initialize = function(initialize){ 
    return function(){ 
     Array.from(this.Monitor).each(function(name){ 
      var original = this[name]; 
      if (original) this[name] = function() { 
       console.log("[LOG] " + name, "[SCOPE]:", this, "[ARGS]", arguments); 
       original.apply(this, arguments); 
      } 
     }, this); 
     return initialize.apply(this, arguments); 
    }; 
}; 

और फिर कक्षा में: http://jsfiddle.net/BMsZ7/2/

इस छोटे मणि है:

var foo = new Class({ 

    Monitor: 'bar', 

    initialize: function() { 
     this.bar("mootools"); 
    }, 

    bar: function(what) { 
     alert(what); 
    } 

}); 

var f = new foo(); 
f.bar.call({hi:"there from a custom scope"}, "scope 2"); 

jsfiddle प्रयास करें एक ह्यूज एसिंक वेबपैप के अंदर नेस्टेड बगफुट रेस हालत के मुद्दों को पकड़ने के लिए मेरे लिए महत्वपूर्ण भूमिका निभाई गई जो अन्यथा पता लगाने में इतनी मुश्किल होती।

Answer 5

मैं Mark Obcena द्वारा उत्कृष्ट Up the Moo Herd श्रृंखला पढ़ने की सलाह देते हैं, Pro Javascript With MooTools     :)

Answer 6

है कि मैं बाद में सीखा लेकिन कामना की मैं शुरू से ही पता था कि मेरी पसंदीदा विशेषताओं में से एक के लेखक - घटना pseudos, विशेष रूप से :once।

http://mootools.net/docs/more/Class/Events.Pseudos#Pseudos:once