ES5 हार्मोनी प्रॉक्सी - जावास्क्रिप्ट के अंदर जावास्क्रिप्ट के शब्दार्थ को बदलें

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

मैं उन्हें कहां उपयोग कर सकता हूं?

1. सामान्य मध्यवर्ती सार
2. आभासी वस्तुओं का निर्माण: मौजूदा वस्तुओं के रैपर, दूरस्थ (शब्द के दूर के शब्द) वस्तुओं, वस्तुओं की आलसी रचना (ORM उदाहरण - रूबी ActiveRecord, Groovy GORM)
3. पारदर्शी लॉगिंग, ट्रेसिंग, प्रोफाइलिंग
4. डोमेन-विशिष्ट भाषाओं का परिचय
5. अनुपस्थित तरीकों का डायनेमिक अवरोधन, लापता तरीके बनाना (__noSuchMethod__)
6. विशिष्ट पुनरावृत्तियों के लिए आधार

अवधारणाओं

1. भाषा की इस विशेषता को "व्यापक तंत्र" (मूल कैच-ऑल मैकेनिज्म) कहा जाता है - इस नाम का उपयोग इस विशेषता का वर्णन करने के लिए किया जाता है। पाठ मूल नाम का उपयोग करेगा।
2. "व्यापक तंत्र" की अवधारणा का एक और नाम है - मध्यस्थ (मूल। अंतर एपीआई)
3. संपत्ति को संसाधित करने वाली वस्तु को हैंडलर - हैंडलर कहा जाता है
4. जिस वस्तु के गुणों को प्रतिस्थापित किया जाता है उसे छद्म - छद्म कहा जाता है
5. प्रॉक्सी ऑब्जेक्ट बनाने वाली वस्तु / विधि को प्रॉक्सी फैक्ट्री - प्रॉक्सी फैक्ट्री कहा जाता है
6. हैंडलर में शामिल तरीके जो किसी भी व्यवहार को संभालते हैं उन्हें ट्रैप / इंटरसेप्टर ट्रैप (ऑपरेटिंग सिस्टम के समान) कहा जाता है
7. एक प्रॉक्सी रोमांचक / सक्रिय (मूल। ट्रैपिंग) या विघटित हो सकती है (मूल। फिक्स्ड)

उनके साथ कैसे काम करें - एपीआई

दो प्रकार के प्रॉक्सी कारखाने हैं। एक वस्तुओं के लिए, दूसरा कार्यों के लिए।

प्रॉक्सी निर्माता:

var proxy = Proxy.create(handler, proto); 

प्रॉक्सी कंस्ट्रक्टर कंस्ट्रक्टर:

 var proxy = Proxy.createFunction(handler, callTrap, constructTrap); 

प्रोटो - वैकल्पिक पैरामीटर एक प्रॉक्सी प्रोटोटाइप को परिभाषित करता है
callTrap - एक फ़ंक्शन जो मूल फ़ंक्शन को बदल देगा जब प्रॉक्सी फ़ंक्शन को सीधे कहा जाता है (नीचे दिया गया उदाहरण सब कुछ समझाएगा)। महत्वपूर्ण: यह स्थानापन्न फ़ंक्शन (callTrap) इस विकल्प से मेल खाता है।
constructTrap - वैकल्पिक पैरामीटर - एक फ़ंक्शन जो नए के माध्यम से कॉल करने पर फ़ंक्शन के मूल निर्माता को बदल देगा। महत्वपूर्ण: यह प्रतिस्थापन फ़ंक्शन (buildTrap) हमेशा अपरिभाषित होता है। यदि constructTrap पारित नहीं किया गया है, तो callTrap का उपयोग किया जाता है जिसमें यह प्रॉक्सी से प्रदर्शित होता है। प्रोटोटाइप (ES5 निर्माणकर्ताओं का सामान्य व्यवहार अध्याय 13.2.2)
हैंडलर - एक ऐसी वस्तु जो प्रॉक्सी व्यवहार को परिभाषित करती है। इस ऑब्जेक्ट में हमेशा जाल होना चाहिए।

बेस ट्रैप / इंटरसेप्टर (मौलिक जाल)

इसे कैसे पढ़ें: : function(, __) -> { } //

 { getOwnPropertyDescriptor: function(name) -> {PropertyDescriptor | undefined} // Object.getOwnPropertyDescriptor(proxy, name) getPropertyDescriptor: function(name) -> {PropertyDescriptor | undefined} // Object.getPropertyDescriptor(proxy, name) (not in ES5) getOwnPropertyNames: function() -> {String[]} // Object.getOwnPropertyNames(proxy) getPropertyNames: function() -> {String[]} // Object.getPropertyNames(proxy) (not in ES5) defineProperty: function(name, propertyDescriptor) -> {Mixed} // Object.defineProperty(proxy,name,pd) delete: function(name) -> {Boolean} // delete proxy.name fix: function() -> {{String:PropertyDescriptor}[]|undefined} // Object.{freeze|seal|preventExtensions}(proxy) } 

व्युत्पन्न जाल / इंटरसेप्टर (व्युत्पन्न जाल)

ये इंटरसेप्टर वैकल्पिक हैं; यदि वे परिभाषित नहीं हैं, तो डिफ़ॉल्ट तर्क का उपयोग किया जाएगा।

 { has: function(name) -> {Boolean} // if (name in proxy) ... hasOwn: function(name) -> {Boolean} // ({}).hasOwnProperty.call(proxy, name) get: function(receiver, name) -> {Mixed} // receiver.name; set: function(receiver, name, val) -> {Boolean} // receiver.name = val; enumerate: function() -> {String[]} // for (name in proxy)         keys: function() -> {String[]} // Object.keys(proxy)      } 

डिफ़ॉल्ट रूप से, निम्न तर्क निष्पादित किया जाएगा
तालिका के रूप में आप यहां देख सकते हैं

व्युत्पन्न जाल को "व्युत्पन्न" कहा जाता है क्योंकि उन्हें आधार जाल द्वारा परिभाषित किया जा सकता है। उदाहरण के लिए, getPropertyDescriptor हुक का उपयोग करके हूक को परिभाषित किया जा सकता है (जांचें कि यह अपरिभाषित है या नहीं)। व्युत्पन्न इंटरसेप्टर का उपयोग करके, आप कम लागत पर गुणों का अनुकरण कर सकते हैं, यही कारण है कि उन्हें परिभाषित किया गया था। फिक्स ट्रैप को Object.preventExtensions को Object.preventExtensions , Object.seal और Object.freeze साथ बातचीत करने की अनुमति देने के लिए पेश किया गया था। एक गैर-एक्स्टेंसिबल, सील्ड या फ्रोजन ऑब्जेक्ट (गैर-एक्स्टेंसिबल, सील, फ्रोजन) को किसी तरह हैंडलर की स्वतंत्रता को सीमित करना होगा यानी। इसे भविष्य में कॉल करने set, get आदि के set, get क्या करना चाहिए। उदाहरण के लिए, यदि पिछला कॉल handler.get(p, “foo”) को अपरिभाषित नहीं किया गया है, तो भविष्य में handler.get(p, "foo") को कॉल करना चाहिए, यदि ऑब्जेक्ट जम गया है तो उसी मूल्य को वापस करना चाहिए। हर बार परदे के पीछे, सील, ब्लॉक (गैर-एक्स्टेंसिबल, सील या जमे हुए) की कोशिश करते हैं, "fix" हुक जाल कहा जाता है।
फिक्स हैंडलर में 2 विकल्प हैं:
1. अनुरोध को अस्वीकार करें (फिक्स अपरिभाषित वापस आ जाना चाहिए), फिर एक टाइपर अपवाद को फेंक दिया जाएगा।
2. क्वेरी को निष्पादित करें और ऑब्जेक्ट के विवरण को फॉर्म {String:PropertyDescriptor}[] में लौटाएं। इस मामले में, "व्यापक तंत्र" ऑब्जेक्ट के विवरण के आधार पर एक नया ऑब्जेक्ट बनाएगा। इस बिंदु पर, हैंडलर के सभी संदर्भ हटा दिए जाते हैं (यह कचरा कलेक्टर द्वारा हटाया जा सकता है)। इस मामले में, प्रॉक्सी को लाइसेंस कहा जाता है।

उदाहरण

नमस्ते प्रॉक्सी!

कोड का निम्नलिखित टुकड़ा एक प्रॉक्सी बनाता है जो गुणों तक पहुंच को बाधित करता है और प्रत्येक संपत्ति "पी" के लिए "हैलो, पी" लौटाता है:

 var p = Proxy.create({ get: function(proxy, name) { return 'Hello, '+ name; } }); document.write(p.World); //  'Hello, World' 

जीवित उदाहरण

सरल प्रोफाइलर

एक साधारण आवरण बनाएँ, जो यह बताता है कि कितनी बार संपत्ति प्राप्त की गई थी:

 function makeSimpleProfiler(target) { var forwarder = new ForwardingHandler(target); var count = Object.create(null); forwarder.get = function(rcvr, name) { count[name] = (count[name] || 0) + 1; return this.target[name]; }; return { proxy: Proxy.create(forwarder, Object.getPrototypeOf(target)), get stats() { return count; } }; } 

MakeSimpleProfiler फ़ंक्शन वह तर्क के रूप में लेता है जिसे हम मॉनिटर करना चाहते हैं। यह एक ऐसी वस्तु लौटाता है जिसमें 2 गुण होते हैं: प्रॉक्सी स्वयं और आँकड़े - कॉल की संख्या।
जीवित उदाहरण

MakeSimpleProfiler फ़ंक्शन के पंक्ति दो में फ़ॉरवर्डिंगहैंडलर फ़ंक्शन एक सरल रीडायरेक्ट प्रॉक्सी बनाता है जो पारदर्शी रूप से सभी प्रॉक्सी ऑपरेशनों को लक्ष्य के लिए दर्शाता है। यहाँ यह कैसा दिखता है:

 function ForwardingHandler(obj) { this.target = obj; } ForwardingHandler.prototype = { has: function(name) { return name in this.target; }, get: function(rcvr,name) { return this.target[name]; }, set: function(rcvr,name,val) { this.target[name]=val;return true; }, delete: function(name) { return delete this.target[name]; } enumerate: function() { var props = []; for (name in this.target) { props.push(name); }; return props; }, iterate: function() { var props = this.enumerate(), i = 0; return { next: function() { if (i === props.length) throw StopIteration; return props[i++]; } }; }, keys: function() { return Object.keys(this.target); }, ... }; Proxy.wrap = function(obj) { return Proxy.create(new ForwardingHandler(obj), Object.getPrototypeOf(obj)); } 

इस फ़ंक्शन का पूर्ण संस्करण यहां पाया जा सकता है । यह अग्रगामी हैंडलर मानक का हिस्सा बनने की संभावना है।

हटाए गए आइटम

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

 Q.post(ref, 'foo', [a,b,c]); 

प्रॉक्सी का उपयोग करके, हम इस कॉल को अधिक स्वाभाविक बना सकते हैं, हमारे आवरण को लिख सकते हैं:

 function Obj(ref) { return Proxy.create({ get: function(rcvr, name) { return function() { var args = Array.prototype.slice.call(arguments); return Q.post(ref, name, args); }; } }); } 

अब हम इस तरह Obj(ref).foo(a,b,c) ।

__NoSuchMethod__ अनुकरण

प्रॉक्सी का उपयोग करके उन ब्राउज़रों में __noSuchMethod__ हुक का अनुकरण करना संभव है जो इसका समर्थन नहीं करते हैं (लेकिन अब यह प्रासंगिक नहीं है)।

 function MyObject() {}; MyObject.prototype = Object.create(NoSuchMethodTrap); MyObject.prototype.__noSuchMethod__ = function(methodName, args) { return 'Hello, '+ methodName; }; new MyObject().foo() // returns 'Hello, foo' 

यह ऑब्जेक्ट NoSuchMethodTrap प्रॉक्सी का उपयोग करता है जिसमें हुक हुक मूल __noSuchMethod__ को बदल देता है।

 var NoSuchMethodTrap = Proxy.create({ get: function(rcvr, name) { if (name === '__noSuchMethod__') { throw new Error("receiver does not implement __noSuchMethod__ hook"); } else { return function() { var args = Array.prototype.slice.call(arguments); return this.__noSuchMethod__(name, args); } } } }); 

जीवित उदाहरण

उच्च आदेश संदेश

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

 var msg = _.foo(1,2) msg.selector; // "foo" msg.args; // [1,2] msg(x); // x.foo(1,2) 

msg एक फ़ंक्शन है जो एक तर्क का उपयोग करता है, जैसे कि इसे function(z) { return z.foo(1,2); } रूप में परिभाषित किया गया था function(z) { return z.foo(1,2); } function(z) { return z.foo(1,2); } । निम्न उदाहरण उपरोक्त दस्तावेजों से एसवीपी की प्रत्यक्ष व्याख्या है, लेकिन अधिक कैपेसिटिव कोड में लिखा गया है:

 var words = "higher order messages are fun and short".split(" "); String.prototype.longerThan = function(i) { return this.length > i; }; //        document.write(words.filter(_.longerThan(4)).map(_.toUpperCase())); //       : // words.filter(function (s) { return s.longerThan(4) }) // .map(function (s) { return s.toUpperCase() }) 

यहाँ "_" ऑब्जेक्ट के लिए कोड है:

 //     var _ = Proxy.create({ get: function(_, name) { return function() { var args = Array.prototype.slice.call(arguments); var f = function(rcvr) { return rcvr[name].apply(rcvr, args); }; f.selector = name; f.args = args; return f; } } }); 

जीवित उदाहरण

बेस ऑब्जेक्ट एमुलेशन

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

प्रॉक्सी सुविधाएँ

पिछले उदाहरण वस्तुओं का उपयोग करते थे। यहाँ एक सरल प्रॉक्सी फ़ंक्शन उदाहरण है:

 var simpleHandler = { get: function(proxy, name) { // can intercept access to the 'prototype' of the function if (name === 'prototype') return Object.prototype; return 'Hello, '+ name; } }; var fproxy = Proxy.createFunction( simpleHandler, function() { return arguments[0]; }, // call trap function() { return arguments[1]; }); // construct trap fproxy(1,2); // 1 new fproxy(1,2); // 2 fproxy.prototype; // Object.prototype fproxy.foo; // 'Hello, foo' 

जीवित उदाहरण

प्रॉक्सी फ़ंक्शन विशेष मुहावरों को लिखने के लिए अवसर प्रदान करते हैं जो शुद्ध जावास्क्रिप्ट में हमारे लिए उपलब्ध नहीं थे। सबसे पहले, प्रॉक्सी फ़ंक्शन किसी भी ऑब्जेक्ट से एक फ़ंक्शन (कॉल करने योग्य ऑब्जेक्ट) बना सकते हैं:

 function makeCallable(target, call, construct) { return Proxy.createFunction( new ForwardingHandler(target), call, construct || call); } 

दूसरा, छद्म-वर्गों को बनाने के लिए प्रॉक्सी फ़ंक्शन का उपयोग किया जा सकता है जिनकी संस्थाएं उदाहरण हैं जो कॉल करने योग्य हैं।

 function Thing() { /* initialize state, etc */ return makeCallable(this, function() { /* actions to perform when instance is called like a function */ }); } 

नए शब्दार्थ के साथ प्रयोग

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

प्रॉक्सी टिप्स

पुनरावृत्ति से बचें

जाल के अंदर अंतर्निहित कॉल से बचें। प्राप्त और सेट हुक के रिसीवर तर्क से सावधान रहें। रिसीवर प्रॉक्सी के लिए एक लिंक का प्रतिनिधित्व करता है, इसलिए स्पष्ट रूप से कॉल करना और सेट करना अनंत पुनरावृत्ति का परिणाम होगा। उदाहरण के लिए, सेटर के अंदर डिबग करने के लिए कंसोल.लॉग (रिसीवर) को कॉल करना स्ट्रीडिंग विधि को कॉल करेगा, जिसके परिणामस्वरूप अनंत पुनरावृत्ति होगी।

 get: function(receiver, name) { print(receiver); return target[name]; } 

यदि p एक प्रॉक्सी है जो ऊपर जाल का उपयोग करता है, तो p.foo को कॉल करने से अनंत लूप हो जाएगा: सबसे पहले, p.foo ट्रैप को name="foo" साथ बुलाया जाएगा, जो receiver प्रिंट receiver (यानी p )। इससे p.toString() कॉल जाता है, जो इस बार फिर से कॉल के लिए ले जाएगा name="toString" । और इसी तरह।

हैंडलर्स के रूप में

प्रॉक्सी हैंडलर स्वयं प्रॉक्सी हो सकते हैं। नीचे दिया गया प्रॉक्सी ट्रेसर इस पैटर्न को डोमेन कर देगा, इसका उपयोग एक ही हुक के माध्यम से हैंडलर के लिए सभी परिचालनों का "टनलिंग" बनाने के लिए किया जाता है।

प्रॉक्सी ट्रैसर / प्रॉक्सी जांच

ट्रेसर बस उन सभी ऑपरेशनों का विवरण प्रिंट करता है जो इसे संसाधित करता है। यह डीबगिंग के लिए या यह जानने के लिए बहुत उपयोगी है कि परदे कैसे काम करते हैं।
जीवित उदाहरण

जांच में अनुरेखक के समान एक तर्क है; यह उस पर लागू सभी मेटा-स्तर के संचालन को लॉग करता है।
जीवित उदाहरण

इसका उपयोग कब किया जा सकता है?

अभी केवल फ़ायरफ़ॉक्स 4.0 प्रॉक्सी का समर्थन करता है। विस्तार के रूप में नोड.जेएस के लिए एक प्रॉक्सी कार्यान्वयन है: नोड-ओवरलोड (आंशिक समर्थन) नोड-प्रॉक्सी (लगभग पूर्ण समर्थन)। किसी भी स्थिति में, प्रॉक्सी को मानक में शामिल किया जाएगा ताकि यह जल्द ही आपके ब्राउज़र में भी दिखाई दे!

अतिरिक्त संसाधन

1. ईसीएमएस्क्रिप्ट हार्मनी
2. मोज़िला डेवलपर नेटवर्क पर प्रलेखन
3. मानक का विकास: डीएलएस 2010 में दिखाए गए इस Google टेक टॉक और इस पेपर का पहला भाग।
4. ब्रेंडन ईच ने अपने ब्लॉग में प्रॉक्सी की मूल बातें संक्षेप में बताई हैं।
5. फ़ायरफ़ॉक्स 4 में खुले प्रॉक्सी मुद्दों की एक आंशिक सूची ।
6. ब्रेंडन आयच को jsconf पर उनके वेतन से

लेख में प्रयुक्त संसाधन

1. एमडीसी प्रॉक्सी (DRAFT)
2. ES5 कैच-सभी प्रॉक्सी
3. प्रॉक्सी इन्सेप्शन (ब्रेंडन ईच)
4. ट्यूटोरियल: हार्मनी प्रॉक्सिस (टॉम वान कट्सम)

यदि आपके लिए कुछ स्पष्ट नहीं है, तो कृपया अपने प्रश्न पूछें या स्लाइड देखें। सुझाव, इच्छा, आलोचना का स्वागत है!