Hatena::Let

"Hatena::Let" でひとこと

9 fans

書き込むには、ログインまたはユーザー登録を行ってください。 初めての方へ

a-kuma3

Hatena::Let

返信先のろまんば

>Proxyカッコイイ
コンストラクタの場合、handeler.apply じゃなくて hander.construct があるのが 良いなあ
a-kuma3

Hatena::Let

返信先のろまんば

this を気にして使うんだったら、Reflect を使うのが正解、ってんじゃないような気がする。
target[prop] か、receiver[prop]なだけで。

getter/setter で、Proxy 自身が手に入る意味は分かったけど、これは難しいな。
a-kuma3

Hatena::Let

返信先a-kuma3

>気になってる動作があるので、
Reflect.get の receiver とは、関係なかった。


XHR の responseText を改変したくて、こんなコードを書きました。

const xhr = new Proxy(original_xhr, {
 get: (target, prop, receiver) => {
  let v = target[prop];
  if (prop === 'responseText') {
   // prevent preload images.
   v = v.replace(/<img src=/g, "<img data-src=");
  }
  return v;
 },
});

この xhr は、後で getResponseHeader() が呼ばれるのですが、そこでこんなエラーが出ちゃう。
TypeError: 'getResponseHeader' called on an object that does not implement interface XMLHttpRequest.

まあ、メッセージの通りではあるんですが、こんなチェックが入っているんだなあ、と。

メソッドの getter も改変することになりました。
xhr = new Proxy(original_xhr, {
 get: (target, prop, receiver) => {
  let v = target[prop];
  if (prop === 'responseText') {
   // prevent preload images.
   v = v.replace(/<img src=/g, "<img data-src=");
  } else if (typeof(v) === "function") {
   const ... (続きを読む)
a-kuma3

Hatena::Let

返信先のろまんば

Hatena::Haiku::Search ってサービスがお亡くなりになって、やっぱり不便で、MutationObserver 使って、強制的に Auto Pagerize を発動させつつ、関係ない投稿を消し続けるという Bookmarklet を書いたことがありまして、そのときに ten-extras.js は ちょっと読んだことがあります。

MutationObserver を使ったやつは、Star の処理とかも入るのでかなり遅くって、速くしたいなあと思ってたんですが、この Proxy で Hook するのはかなり軽くできそうです :-)
unarist

Hatena::Let

ecmascript 6 - What does the Reflect object do in JavaScript? - Stack Overflow
https://stackoverflow.com/a/25585988/2818869

# Reflect.get(target, name, receiver) って receiver[name] じゃいかんのかしらと思ってしまったけど
# target[name] 自体は Proxy を迂回しないと無限ループになるわ。そりゃそうだ。
a-kuma3

Hatena::Let

返信先のろまんば

なるほど。
気になってる動作があるので、後で確認してみます。
noromanba

Hatena::Let

返信先a-kuma3
Proxyカッコイイ + ten-extras.js 読めるのsugoi はてな最難関 js
noromanba

Hatena::Let

JavaScript より js のコア話してていつもながらウケてしまう
noromanba

Hatena::Let

返信先a-kuma3
場合によってreceiver/this絡みっていうのもあったり > Reflect
https://qiita.com/tkykmw/items/6981edef82fed25d370a
a-kuma3

Hatena::Let

返信先a-kuma3

Reflect は、Proxy とペアで使うと、Proxy に指定するハンドラと引数が同じだから、気持ち良いよね、っていうことかな。
気持ちは、分からんでもない。
a-kuma3

Hatena::Let

返信先a-kuma3

書いてみた。
http://let.hatelabo.jp/a-kuma3/let/hJmc2r6j5rMx

Auto Pagerize では、http://h.hatena.ne.jp/js/updu/ten-extras.js の TL.DataSource.TimelinePage.prototype.loadData で XHR でデータを取り、ひとつの投稿を TL.Entry というクラスにラップして、後の処理で一覧に埋め込んでる。
処理を横取りするところはいくつかあるけど、constructor を Hook してみたかったので、見せたくない投稿は内容を空にする、という処理をコンストラクタに埋め込んでみた。

apply は、名前通りの Proxy パターン以外にも、Decorator パターンとか、Chain of Responsibility パターンで使えそう。

どちらも、Function がグローバルスコープになってないとダメなので、今どきのパックされてるやつだと使えないかも、という気はしてるけれど、アドオンだったら、ちょっと違うかも(無理かな)。
unarist

Hatena::Let

ふと昔書いた
const originalProp = Object.getOwnPropertyDescriptor(window, 'innerWidth');
Object.defineProperty(window, 'innerWidth', Object.assign({}, originalProp, {
get: (val = originalProp.get.call()) => (val <= 1024 && val >= MIN_WIDTH) ? 1025 : val
}));
というコードにその辺使えるかしらと雑に思ったものの、特に使いどころなさそう。

# ちなみにこれはwindow.innerWidthを見てレイアウト変更かけるJS対策
unarist

Hatena::Let

返信先のろまんば
# Object.{observe,prototype.watch}() と比べると対象への参照をリダイレクトできない場合(configurable/writableでないプロパティを参照してる・<strong>直接参照抱えられてる</strong>等)に監視できないのが惜しいといえば惜しいかしら
noromanba

Hatena::Let

返信先のろまんば
アッ、Reflectでとればいいのか、そのためかー。お騒がせしました
a-kuma3

Hatena::Let

返信先のろまんば

Proxy は、Proxy じゃないとできないことがあるけれど、Reflect は、それがないとできないことがあるのかな、って。
何度か使ってみないと分からないかな
a-kuma3

Hatena::Let

返信先のろまんば

Extending Constructor むずかしい。
class の extends あるから、あくまでもサンプルなんでしょうが。

理解がおっつかないという意味での「お腹いっぱい」なので、既存のコードのすげ替えには便利なはず。
Proxy は、インスタンスが、元ネタと違うので、それを置き換えられれば、というところ。
constructor のすげ替えは、Proxy じゃないとできない(はず
noromanba

Hatena::Let

返信先のろまんば
いや、MOだめだって。何を言ってるんだ。構築後ならProxyでいいんだ。gdgd
noromanba

Hatena::Let

返信先a-kuma3
handler.set()でMutationObserverのオブジェクトとって…とかかなぁ、デカくなるかも
noromanba

Hatena::Let

返信先a-kuma3
あーProxyパターンてありますね。そっちは思いつかなかった
# GoF でしょ、singletonにadstract、facade、observer、proxy、strategy…ダメだコリャ。 rewrite論出てたしいいか
noromanba

Hatena::Let

返信先a-kuma3
はてブのスター用タブのあれ見てProxy思い出したんですが、ダメかなぁ。メソッドだけtrap出来そうかなって。Forkする技術が無かった。
Reflectはメタプログラミングする人用なのかなと思いました。ぼくも具体的用途は思いついてないです
▼はてなハイクの今月のスポンサー

規約違反を通報

非表示設定

表示内容を選択