जावास्क्रिप्ट क्रॉसबोवर एक्सेसर्स

अपने एटमोज़ फ्रेमवर्क में, मैं सक्रिय रूप से एक्सेसर्स का उपयोग करता हूं - गेटर्स और सेटर:

Foo = atom.Class({ get bar () { return this._bar; }, set bar (bar) { this._bar = bar; } }); 

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

मिल / सेट

सौभाग्य से, इस संबंध में, सभी ब्राउज़र लगभग समान हैं। IE9 +, Opera10 +, Fx3.5 +, Chrome - सभी इस प्रविष्टि का समर्थन करते हैं और व्यवहार और वाक्य रचना में समान हैं। केवल एक चीज यह है कि अगर इंटरनेट एक्सप्लोरर 9 में त्रुटि उत्पन्न होती है " संभवतः " ':' ' - जांचें कि क्या ब्राउज़र ने "इंटरगियर एक्सप्लोरर 7" के "बैगोड्रोम" मोड पर स्विच किया है

defineProperty

यहां कुछ भी जटिल नहीं है

अमानक के लिए __defineSetter__ __defineSetter__ और __defineGetter__ __defineGetter__ से एक विकल्प है - Object.defineProperty । डिफ़ॉल्ट रूप से, ऑब्जेक्ट में configurable करने configurable और enumerable गुणों को सही घोषित किया जाता है, इसलिए हम आसानी से एक मानक विकल्प लिख सकते हैं:

 instance.__defineSetter__(propertyName, setterFn); instance.__defineGetter__(propertyName, getterFn); // => Object.defineProperty(instance, propertyName, { set: setterFn, get: getterFn, enumerable : true, configurable: true }); 

getOwnPropertyDescriptor

अमानक के लिए __lookupSetter__ __lookupSetter__ और __lookupGetter__ __lookupGetter__ का एक विकल्प भी है - Object.getOwnPropertyDescriptor ।

सब कुछ थोड़ा कम हर्षित है, लेकिन महत्वपूर्ण नहीं है। रहस्य यह है कि __lookup*__ संपूर्ण प्रोटोटाइप श्रृंखला के साथ एक __lookup*__ खोज करता है, जबकि getOwnPropertyDescriptor केवल व्यक्तिगत गुणों में:

किसी दिए गए ऑब्जेक्ट के स्वयं के गुण के लिए एक संपत्ति विवरणक लौटाता है (जो कि किसी वस्तु पर सीधे मौजूद होता है, किसी वस्तु के प्रोटोटाइप श्रृंखला के साथ होने के संकेत से उपस्थित नहीं होता है)।

अर्थात्, हमारे पास निम्न स्थिति है :

 var MyClass = function () {}; MyClass.prototype = { get foo() { return 42; } }; var instance = new MyClass(); console.log(instance.__lookupGetter__('foo')); // function foo() { return 42; } console.log(Object.getOwnPropertyDescriptor(instance, 'foo')); // undefined 

हालांकि पाने वाले के पास वास्तव में है:

 console.log(instance.foo); // 42 

1. यह मुझे गैर-मानक गुणों का अधिक सही और तार्किक व्यवहार लगता है
2. यह मेरे ढांचे के विचार के अधिक अनुकूल है।
3. यह महत्वपूर्ण है कि सभी ब्राउज़र समान व्यवहार करें। कितना कम महत्वपूर्ण है

इसलिए, हम पुन: आवर्तक रूप से पूरी प्रोटोटाइप श्रृंखला का उपयोग करते हुए Object.getPrototypeOf पद्धति का उपयोग करते हैं, जब तक कि हम या तो null , या एक विशिष्ट संपत्ति या एक्सेसर में नहीं चलते हैं।

 function getPropertyDescriptor (from, key) { var descriptor = Object.getOwnPropertyDescriptor(from, key); if (!descriptor) { //     -       var proto = Object.getPrototypeOf(from); if (proto) return getPropertyDescriptor(proto, key); //   , ,       (   ) } else if ( descriptor.set || descriptor.get ) { return { set: descriptor.set, get: descriptor.get }; } //    ,       return null; }; 

यह सब पुस्तकालय में डाल दिया

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

 (function (Object) { var standard = !!Object.getOwnPropertyDescriptor, nonStandard = !!{}.__defineGetter__; if (!standard && !nonStandard) throw new Error('Accessors are not supported'); var lookup = nonStandard ? function (from, key) { var g = from.__lookupGetter__(key), s = from.__lookupSetter__(key); return ( g || s ) ? { get: g, set: s } : null; } : function (from, key) { var descriptor = Object.getOwnPropertyDescriptor(from, key); if (!descriptor) { var proto = Object.getPrototypeOf(from); if (proto) return accessors.lookup(proto, key); } else if ( descriptor.set || descriptor.get ) { return { set: descriptor.set, get: descriptor.get }; } return null; }; var define = nonStandard ? function (object, prop, descriptor) { if (descriptor) { if (descriptor.get) object.__defineGetter__(prop, descriptor.get); if (descriptor.set) object.__defineSetter__(prop, descriptor.set); } return object; } : function (object, prop, descriptor) { if (descriptor) { var desc = { get: descriptor.get, set: descriptor.set, configurable: true, enumerable: true }; Object.defineProperty(object, prop, desc); } return object; }; this.accessors = { lookup: lookup, define: define }; })(Object); 

अब आप वस्तुओं में एक्सेसर्स घोषित कर सकते हैं:

 MyClass = function (param) { var property = param; accessors.define(this, 'property', { set: function (value) { property = value; }, get: function () { return property; } }); }; var instance = new MyClass(42); console.log(instance.property); // 42 console.log(accessors.lookup(instance, 'property')); // getter+setter 

विरासत

अब inherit पद्धति को जोड़कर अपने पुस्तकालय का थोड़ा विस्तार करें। यह ऑब्जेक्ट से key नाम की एक प्रॉपर्टी एक्सेसर प्राप्त करेगा, और इसे ऑब्जेक्ट में जोड़ देगा। अगर सफल हो, तो true , अन्यथा false ।

  this.accessors = { lookup: lookup, define: define, inherit: function (from, to, key) { var a = accessors.lookup(from, key); if ( a ) { accessors.define(to, key, a); return true; } return false; } }; 

यह विधि हमें Object.merge से jQuery.extend या Object.merge का एक एनालॉग लिखने में मदद करेगी जो MooTools का समर्थन करती है, जबकि सभी सामान्य फ्रेमवर्क उनके बारे में कुछ भी नहीं जानते हैं:

 var object = jQuery.extend({}, { get foo(){ return null; } }); console.log( object.__lookupGetter__('foo') ); // undefined console.log( object.foo ); // null 

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

 function extend(from, to) { for (var i in to) { //    if (!accessors.inherit(from, to, i)) { //     -    from[i] = to[i]; } } return from; }; var object = extend({}, { get foo(){ return null; } }); console.log( object.__lookupGetter__('foo') ); // getter console.log( object.foo ); // null 

निष्कर्ष

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

विषय में वर्णित समाधान, थोड़ा विस्तारित, शुरू में एटॉमजस के रूप में लागू किया गया था - एक्सेसर्स प्लगइन ।