diff options
Diffstat (limited to 'files/pl/web/javascript/referencje/obiekty/proxy/index.html')
| -rw-r--r-- | files/pl/web/javascript/referencje/obiekty/proxy/index.html | 401 |
1 files changed, 0 insertions, 401 deletions
diff --git a/files/pl/web/javascript/referencje/obiekty/proxy/index.html b/files/pl/web/javascript/referencje/obiekty/proxy/index.html deleted file mode 100644 index 7dc7695f00..0000000000 --- a/files/pl/web/javascript/referencje/obiekty/proxy/index.html +++ /dev/null @@ -1,401 +0,0 @@ ---- -title: Proxy -slug: Web/JavaScript/Referencje/Obiekty/Proxy -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy ---- -<div> -<div>{{JSRef}}</div> -</div> - -<p>Obiekt <strong>Proxy</strong> jest używany w celu definiowania specyficznego zachowania dla podstawowych operacji (n.p. wyszukiwanie atrybutu, przypisanie, wyliczanie, wywołanie funkcji, etc).</p> - -<h2 id="Terminologia">Terminologia</h2> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">handler</a></dt> - <dd>Zastępczy obiekt zawierający pułapki (traps).</dd> - <dt>traps</dt> - <dd>Metody zapewniające dostęp do atrybutów. Pojęcie to jest analogiczne do pułapek w systemie operacyjnym.</dd> - <dt>target</dt> - <dd>Obiekt wirtualizowany przez proxy. Często jest używany aby magazyować dane obiektu proxy. Niezmienniki (wartości które pozostają niezmienione) dotyczące nierozszerzalności obiektu lub niekonfigurowalnnych atrybutów są weryfikowane w oparciu o <strong>target</strong>.</dd> -</dl> - -<h2 id="Składnia">Składnia</h2> - -<pre class="syntaxbox">var p = new Proxy(target, handler); -</pre> - -<h3 id="Parametry">Parametry</h3> - -<dl> - <dt><code>target</code></dt> - <dd>Docelowy obiekt (może być obiektem dowolnego typu, włącznie z wbudowanymi tablicami, funkcjami, a nawet innyi obiektami proxy) przeznaczony do opakowania przez <code>Proxy</code>.</dd> - <dt><code>handler</code></dt> - <dd>Obiekt obsługujący którego atrybuty są funkcjami definiującymi zachowanie proxy podczas wykonania na nim operacji.</dd> -</dl> - -<h2 id="Metody">Metody</h2> - -<dl> - <dt>{{jsxref("Proxy.revocable()")}}</dt> - <dd>Tworzy odwracalny obiekt <code>Proxy</code>.</dd> -</dl> - -<h2 id="Metody_obiektu_obsługującego">Metody obiektu obsługującego</h2> - -<p>Obiekt obsługujący jest obiektem zastępczym zawierającym pułapki dla obieku <code>Proxy</code>.</p> - -<div>{{page('/pl/docs/Web/JavaScript/Referencje/Obiekty/Proxy/handler', 'Metody') }}</div> - -<h2 id="Przykłady">Przykłady</h2> - -<h3 id="Podstawowy_przykład">Podstawowy przykład</h3> - -<p>W tym prostym przykładzie liczba <code>37</code> jest zwracana jako domyślna wartość kiedy nazwa atrybutu nie istnieje w obiekcie. W tym celu użyty jest handler <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get"><code>get</code></a>.</p> - -<pre class="brush: js">var handler = { - get: function(target, name) { - return name in target ? - target[name] : - 37; - } -}; - -var p = new Proxy({}, handler); -p.a = 1; -p.b = undefined; - -console.log(p.a, p.b); // 1, undefined -console.log('c' in p, p.c); // false, 37 -</pre> - -<h3 id="Puste_proxy_przekazujące">Puste proxy przekazujące</h3> - -<p>W tym przykładzie używamy wbudowanego obiektu JavaScript do którego proxy przekaże wszystkie zaaplikowane na nim operacje.</p> - -<pre class="brush: js">var target = {}; -var p = new Proxy(target, {}); - -p.a = 37; // operacja przekazana do obiektu target - -console.log(target.a); // 37. Operacja została prawidłowo przekazana -</pre> - -<p>Zwróć uwagę, że ten przykład działa dla obiektów JavaScript jednak nie sprawdzi się w przypadku obiektów przeglądarki takich jak elementy DOM. <a href="/en-US/docs/">Sprawdź jedno rozwiązanie</a>.</p> - -<h3 id="Walidacja">Walidacja</h3> - -<p>Używając <code>Proxy</code>, łatwo możesz zwalidować wartości przekazywane do obiektu. Poniższy przykład używa metody obsługującej <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a>.</p> - -<pre class="brush: js">let validator = { - set: function(obj, prop, value) { - if (prop === 'age') { - if (!Number.isInteger(value)) { - throw new TypeError('The age is not an integer'); - } - if (value > 200) { - throw new RangeError('The age seems invalid'); - } - } - - // domyślnym zachowaniem jest zapisanie wartości - obj[prop] = value; - - // oznacza pomyślne wykonanie - return true; - } -}; - -let person = new Proxy({}, validator); - -person.age = 100; -console.log(person.age); // 100 -person.age = 'young'; // rzuca wyjątek -person.age = 300; // rzuca wyjątek</pre> - -<h3 id="Rozszerzanie_konstruktora">Rozszerzanie konstruktora</h3> - -<p>Funkcja proxy może w łatwy sposób rozszerzyć konstruktor innym konstruktorem. W tym przykładzie użyto funkcje obsługujące <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct"><code>construct</code></a> oraz <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply"><code>apply</code></a>.</p> - -<pre class="brush: js">function extend(sup, base) { - var descriptor = Object.getOwnPropertyDescriptor( - base.prototype, 'constructor' - ); - base.prototype = Object.create(sup.prototype); - var handler = { - construct: function(target, args) { - var obj = Object.create(base.prototype); - this.apply(target, obj, args); - return obj; - }, - apply: function(target, that, args) { - sup.apply(that, args); - base.apply(that, args); - } - }; - var proxy = new Proxy(base, handler); - descriptor.value = proxy; - Object.defineProperty(base.prototype, 'constructor', descriptor); - return proxy; -} - -var Person = function(name) { - this.name = name; -}; - -var Boy = extend(Person, function(name, age) { - this.age = age; -}); - -Boy.prototype.sex = 'M'; - -var Peter = new Boy('Peter', 13); -console.log(Peter.sex); // "M" -console.log(Peter.name); // "Peter" -console.log(Peter.age); // 13</pre> - -<h3 id="Manipulacja_węzłami_DOM">Manipulacja węzłami DOM</h3> - -<p>Czasami konieczne jest przełączenie atrybutu lub nazwy klasy dwóch innych elementów. Poniższy przykład pokazuje wykonanie funkcją obsługującą <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a>.</p> - -<pre class="brush: js">let view = new Proxy({ - selected: null -}, -{ - set: function(obj, prop, newval) { - let oldval = obj[prop]; - - if (prop === 'selected') { - if (oldval) { - oldval.setAttribute('aria-selected', 'false'); - } - if (newval) { - newval.setAttribute('aria-selected', 'true'); - } - } - - // The default behavior to store the value - obj[prop] = newval; - - // Indicate success - return true; - } -}); - -let i1 = view.selected = document.getElementById('item-1'); -console.log(i1.getAttribute('aria-selected')); // 'true' - -let i2 = view.selected = document.getElementById('item-2'); -console.log(i1.getAttribute('aria-selected')); // 'false' -console.log(i2.getAttribute('aria-selected')); // 'true'</pre> - -<h3 id="Korekcja_wartości_i_dodatkowych_atrybutów">Korekcja wartości i dodatkowych atrybutów</h3> - -<p>Obiekt proxy <code>products</code> wylicza przekazaną wartość i konwertuje to tablicy w razie potrzeby. Obiekt dodatkowo obsługuje dodatkowy atrybut <code>latestBrowser</code> zarówno jako getter i setter.</p> - -<pre class="brush: js">let products = new Proxy({ - browsers: ['Internet Explorer', 'Netscape'] -}, -{ - get: function(obj, prop) { - // An extra property - if (prop === 'latestBrowser') { - return obj.browsers[obj.browsers.length - 1]; - } - - // The default behavior to return the value - return obj[prop]; - }, - set: function(obj, prop, value) { - // An extra property - if (prop === 'latestBrowser') { - obj.browsers.push(value); - return true; - } - - // Convert the value if it is not an array - if (typeof value === 'string') { - value = [value]; - } - - // The default behavior to store the value - obj[prop] = value; - - // Indicate success - return true; - } -}); - -console.log(products.browsers); // ['Internet Explorer', 'Netscape'] -products.browsers = 'Firefox'; // przekazano string (przez pomyłkę) -console.log(products.browsers); // ['Firefox'] <- nie ma problemu, wartość jest typu array - -products.latestBrowser = 'Chrome'; -console.log(products.browsers); // ['Firefox', 'Chrome'] -console.log(products.latestBrowser); // 'Chrome'</pre> - -<h3 id="Wyszukiwanie_elementu_tablicy_po_jego_właściwości">Wyszukiwanie elementu tablicy po jego właściwości</h3> - -<p>Poniższe proxy rozszerza tablicę o różne użyteczne funkcjonalności. Jak widać, można elastycznie "definiować" właściwości bez użycia <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties"><code>Object.defineProperties</code></a>. Ten przykład może być użyty aby znaleźć wiersz tabeli po jego komórce. W takim przypadku, celem będzie <a href="/en-US/docs/DOM/table.rows"><code>table.rows</code></a>.</p> - -<pre class="brush: js">let products = new Proxy([ - { name: 'Firefox', type: 'browser' }, - { name: 'SeaMonkey', type: 'browser' }, - { name: 'Thunderbird', type: 'mailer' } -], -{ - get: function(obj, prop) { - // domyślnym zachowaniem jest zwrócenie wartości; prop jest zwykle typu integer - if (prop in obj) { - return obj[prop]; - } - - // zwróć liczbę produktów; alias dla products.length - if (prop === 'number') { - return obj.length; - } - - let result, types = {}; - - for (let product of obj) { - if (product.name === prop) { - result = product; - } - if (types[product.type]) { - types[product.type].push(product); - } else { - types[product.type] = [product]; - } - } - - // znajdź product po nazwie - if (result) { - return result; - } - - // znajdź produkty po typie - if (prop in types) { - return types[prop]; - } - - // zwróć typy produktów - if (prop === 'types') { - return Object.keys(types); - } - - return undefined; - } -}); - -console.log(products[0]); // { name: 'Firefox', type: 'browser' } -console.log(products['Firefox']); // { name: 'Firefox', type: 'browser' } -console.log(products['Chrome']); // undefined -console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }] -console.log(products.types); // ['browser', 'mailer'] -console.log(products.number); // 3 -</pre> - -<h3 id="Pełna_lista_przykładów_pułapek">Pełna lista przykładów <code>pułapek</code></h3> - -<p>W celu stworzenia pełnej listy przykładów <code>pułapek</code>, w celach dydaktycznych, spróbujemy zastosować proxy na<em>nie natywnym obiekcie </em>który się szczególnie nadaje do tego typu operacji: globalny obiekt <code>docCookies</code> stworzony przez <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework" title="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support">"mały framework" opublikowany na stronie <code>document.cookie</code></a>.</p> - -<pre class="brush: js">/* - var docCookies = ... pobranie obiektu "docCookies" tutaj: - https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support -*/ - -var docCookies = new Proxy(docCookies, { - get: function (oTarget, sKey) { - return oTarget[sKey] || oTarget.getItem(sKey) || undefined; - }, - set: function (oTarget, sKey, vValue) { - if (sKey in oTarget) { return false; } - return oTarget.setItem(sKey, vValue); - }, - deleteProperty: function (oTarget, sKey) { - if (sKey in oTarget) { return false; } - return oTarget.removeItem(sKey); - }, - enumerate: function (oTarget, sKey) { - return oTarget.keys(); - }, - ownKeys: function (oTarget, sKey) { - return oTarget.keys(); - }, - has: function (oTarget, sKey) { - return sKey in oTarget || oTarget.hasItem(sKey); - }, - defineProperty: function (oTarget, sKey, oDesc) { - if (oDesc && 'value' in oDesc) { oTarget.setItem(sKey, oDesc.value); } - return oTarget; - }, - getOwnPropertyDescriptor: function (oTarget, sKey) { - var vValue = oTarget.getItem(sKey); - return vValue ? { - value: vValue, - writable: true, - enumerable: true, - configurable: false - } : undefined; - }, -}); - -/* Cookies test */ - -console.log(docCookies.my_cookie1 = 'First value'); -console.log(docCookies.getItem('my_cookie1')); - -docCookies.setItem('my_cookie1', 'Changed value'); -console.log(docCookies.my_cookie1);</pre> - -<h2 id="Specyfikacje">Specyfikacje</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES2016', '#sec-proxy-objects', 'Proxy')}}</td> - <td>{{Spec2('ES2016')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES2017', '#sec-proxy-objects', 'Proxy')}}</td> - <td>{{Spec2('ES2017')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> - - - -<p>{{Compat("javascript.builtins.Proxy", 2)}}</p> - -<h2 id="Zobacz_również">Zobacz również</h2> - -<ul> - <li><a class="external" href="https://www.youtube.com/watch?v=sClk6aB_CPk">"Proxies are awesome" Brendan Eich presentation at JSConf</a> (<a class="external" href="http://www.slideshare.net/BrendanEich/metaprog-5303821">slides</a>)</li> - <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies">ECMAScript Harmony Proxy proposal page</a> and <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics">ECMAScript Harmony proxy semantics page</a></li> - <li><a class="external" href="http://soft.vub.ac.be/~tvcutsem/proxies/">Tutorial on proxies</a></li> - <li><a href="/en-US/docs/JavaScript/Old_Proxy_API" title="/en-US/docs/JavaScript/Old_Proxy_API">SpiderMonkey specific Old Proxy API</a></li> - <li>{{jsxref("Object.watch()")}} is a non-standard feature but has been supported in Gecko for a long time.</li> -</ul> - -<h2 id="Licensing_note">Licensing note</h2> - -<p>Some content (text, examples) in this page has been copied or adapted from the <a class="external" href="http://wiki.ecmascript.org/doku.php">ECMAScript wiki</a> which content is licensed <a class="external" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC 2.0 BY-NC-SA</a>.</p> |